jQuery基础

浅浅的花香味﹌ 2024-04-19 11:41 0阅读 0赞

我的网站：[欢迎访问][Link 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2YyMzE1ODk1Mjcw_size_16_color_FFFFFF_t_70]

## jQuery ##

### jQuery认识 ###

jQuery是一个快速、简介的JavaScript框架，jQuery的宗旨：写的更少，做的更多

### jQuery基本语法 ###

#### 引入jQuery ####

在html中引入jQuery文件

#### 入口函数 ####

#### 事件绑定 ####

1.事件名

2.bind

3.on(推荐使用)

#### 选择器 ####

jQuery选择器基于CSS选择器，并且做了更多的拓展

**CSS选择器：**

基本选择器

标签选择器 直接写标签名

类选择器 通过.class的属性值

id选择器 \#id的属性值

通用选择器 \*

复合选择器

子元素选择器 直接找子元素： 父选择器 > 子选择器

后代选择器 找所有的后代，包括子元素和孙子元素：祖选择器 后代选择器

相邻兄弟选择器 后面的第一个紧挨着的元素： 哥哥选择器 + 弟弟选择器

同胞兄弟选择器 后面所有的兄弟元素： 哥哥选择器~弟弟选择器

#### Demo ####

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
    <script type="text/javascript">
    	$(function() {
         
    			$("#btn1").on("click",function(){
         
    				$("#select").val("2号");
    			});
    			
    			$("#btn2").on("click",function(){
         
    				$("#selectMultiple").val(["2号","5号"]);
    			});
    			
    			$("#btn3").on("click",function(){
         
    				$("input[name=checkbox]").val(["复选2","复选4"]);
    			});
    			
    			$("#btn4").on("click",function(){
         
    				$("input[name=radio]:eq(1)").prop("checked",true);
    			});
    			
    			$("#btn5").on("click",function(){
         
    					$.each($("*:checked"),function(i,e){
         
    						console.debug($(e).val());
    					});
    			});
    	});
    </script>
    <title>练习5</title>
    </head>
    <body>
    	<input id="btn1" type="button" value="使单选下拉框‘2号’选中"/><br/>
    	<input id="btn2" type="button" value="使多选下拉框‘2号’和‘5号’选中"/><br/>
    	<input id="btn3" type="button" value="使复选框‘2号’和‘4号’选中"/><br/>
    	<input id="btn4" type="button" value="使单选框‘单选2’选中"/><br/>
    	<input id="btn5" type="button" value="打印已被选中的值"/><br/>
    	
    	<form name="userForm">
    		单选下拉框<select id="select" name="select">
    			<option value="1号">1号</option>
    			<option value="2号">2号</option>
    			<option value="3号">3号</option>
    			<option value="4号">4号</option>
    			<option value="5号">5号</option>
    			<option value="6号">6号</option>	
    		</select>
    		
    		多选下拉框<select id="selectMultiple" multiple="multiple" size="6" name="selectMultiple">
    			<option value="1号">01号</option>
    			<option value="2号">02号</option>
    			<option value="3号">03号</option>
    			<option value="4号">04号</option>
    			<option value="5号">05号</option>
    			<option value="6号">06号</option>	
    		</select>
    		<br/>
    		复选框<input value="复选1" type="checkbox" name="checkbox"/>复选1
    		<input value="复选2" type="checkbox" name="checkbox"/>复选2
    		<input value="复选3" type="checkbox" name="checkbox"/>复选3
    		<input value="复选4" type="checkbox" name="checkbox"/>复选4
    		<input value="复选5" type="checkbox" name="checkbox"/>复选5
    		<br/>
    		单选框<input value="单选1" type="radio" name="radio"/>单选1
    		<input value="单选2" type="radio" name="radio"/>单选2
    		<input value="单选3" type="radio" name="radio"/>单选3
    		<input value="单选4" type="radio" name="radio"/>单选4
    	</form>
    </body>
    </html>

### Ajax ###

#### 参数 ####

url: 请求服务器的地址
    [data]：提交的参数
    [callback]：回调函数
    type:返回参数的类型(json,xml...)

#### Demo ####

使用Ajax实现二级联动

<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script language="javascript" src="js/jquery-3.2.1.js"></script>
    <script>
    	$(function(){
         
    		//get提交，获取省份
    		var url = "cityServlet";
    		$.get(url,function(data){
         
    			$.each(data,function(i,e){
         
    				var html = `
    					<option id=${
           e.id}>${
           e.name}</option>
    				`;	
    				$("#pro").append(html);
    			});
    		},"json");
    		
    		//post提交，获取市的值
    		$("#pro").on("change",function(){
         
    			var data = $("#pro option:checked");
    			var id = data.prop("id");
    			if(id){
         
    				$.post("cityServlet",{
         "pro":id},function(data){
         
    					//先清空#city的数据
    					$("#city").html("");
    	 				$.each(data,function(i,e){
         
    						var html = `
    							<option id=${
           e.id}>${
           e.name}</option>
    						`;
    						$("#city").append(html);
    					});
    					
    				},"json");
    			}
    			
    			
    		});
    		
    		
    	})
    	
    </script>
    </head>
    <body style="text-align: center;">
    	
    	<h2>选择城市</h2>
    	<select id="pro">
    		<option>请选择</option>
    	</select> 省
    	<select id="city">
    		<option>请选择</option>
    	</select> 市
    	
    </body>
    </html>

[Link 1]: https://www.ifueen.com
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2YyMzE1ODk1Mjcw_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/b282e3387fb1472cace33e48cb9786eb.png