目录

首先在官网下载jquary的js文件


我们需要在代码里面引入 以上 红框里面的随便一个js文件

html页面文件里面引入


以后就可以在这个HTML页面使用jquary的语法了

jQuery中的选择器

我们打开jquary的中文参考文档



打开就是以上的界面。

基本选择器


先看基本选择器

id 选择器

  function  demo1(){
   
		    	
    	//使用JS方式获得--HTMLInputElement
    	var  uname=document.getElementById("uname");
    	//使用JQ获得 获得ID名称为unam的对象 也就是获取的是一个数组
    	// Object---[Element,Element,Element,Element]
    	var   un=$("#uname");
    	
    	alert(un[0]);
    	
    	/** * js--获得的是一个Element * jq--获得的是Object对象，就是一个数组 * * jq对象如何转换成一个js对象？ * * jq[0]--使用下标 * js对象如何可以转成jq? * * $(js对象) * * **/
		    }

标签选择器 $(“a”)

	  function    demo2(){
   
		  	
		  // js 
		  var  val=	document.getElementsByTagName("input");
		  	
		  // jq [...]
		  var  inp=  $("input");
		  
		  
		  console.log(inp[0].value);
		  
		  //inp.eq(1) --获得下标为1的元素对象 ，这个对象仍是JQ
		  console.log(inp.eq(1).val());
		  	
		  }

类选择器 $(“.class”) $(“h2.class”)

		  function  demo3(){
   
		  	
		  	//获得所有类名叫a 的元素对象
		  	var  as=$(".a");
		  	
		  	
		  }

层级选择器

	function  demo1(){
   
				
				//√ 在给定的祖先元素下匹配所有的后代元素--获得指定的所有的元素
                $("div span").css("background-color","green");
                
                //√ 获得给定祖先元素下的直系子节点对象
                //$("div>span").css("background-color","green");

				//获得指定元素的下一个节点元素 注意需要紧跟当前元素
				//$("#span2+span").css("background-color","green");
				
				
				//匹配 当前元素之后的所有 span 元素
				// $("#span2~span").css("background-color","green");
				
			}

<body>
		
		<button onclick="demo1()">选择器</button>
		
		<div style="border: 2px solid red;height: 200px;">
			
			
			<span>Item 1</span>  <br/>
			
			<span id="span2">Item 2</span>  <br/>
			
			<span>Item 3</span>  <br/>
			
			<span>Item 4</span>  <br/>
			
			<p>
				<span>Item 11</span>  <br/>
			
			    <span>Item 12</span>  <br/>
			
			    <span>Item 13</span>  <br/>
			 	
			</p>
			
			
		</div>
		
		
	</body>

位置选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script src="js/jquery-1.12.3.min.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript"> $(function(){
      //当前元素的第一个节点 //$("ul li:first").css("background-color","green"); //$("ul li").first().css("background-color","green"); //获得最后一个节点 //$("ul li:last").css("background-color","green"); //$("ul li").last().css("background-color","green"); //√获得所有奇数行对象 //$("ul li:even").css("background-color","green"); //√获得所有偶数行对象 //$("ul li:odd").css("background-color","red"); //√匹配一个给定索引值的元素--里面书写的是下标0开始 //$("ul li:eq(2)").css("background-color","red"); //$("ul li").eq(3).css("background-color","red"); //匹配所有大于索引值为2的元素 //$("ul li:gt(2)").css("background-color","red"); // 匹配所有下于索引值为2的元素 $("ul li:lt(2)").css("background-color","red"); }) </script>
		
	</head>
	<body>
		
		
		<div id="" style="height: 200px; border: 1px solid red;">
			
			
			<ul>
				<li>List Item1</li>
				<li>List Item2</li>
				<li>List Item3</li>
			</ul>
			
			<ul>
				<li>List Item21</li>
				<li>List Item22</li>
				<li>List Item23</li>
			</ul>
			
			
		</div>
		
	</body>
</html>

子元素选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		
		<script src="js/jquery-1.12.3.min.js" type="text/javascript" charset="utf-8"></script>
		
		
		<script type="text/javascript"> $(function(){
      //第一个 而此选择符将为每个父元素匹配一个子元素 //$("ul li:first-child").css("background-color","green"); //最后一个 而此选择符将为每个父元素匹配一个子元素 //$("ul li:last-child").css("background-color","red"); //√ 匹配每一个ul 中的li标签的位置 注意：从1开始的 //$("ul li:nth-child(1)").css("background-color","red"); //$("ul li:nth-child(odd)").css("background-color","red"); //获得只含有一个元素的对象 $("ul li:only-child").css("background-color","red"); }) </script>
		
	</head>
	<body>
		
		
		<div id="" style="height: 200px; border: 1px solid red;">
			
			
			<ul>
				<li>List Item1</li>
				<li>List Item2</li>
				<li>List Item3</li>
			</ul>
			
			<ul>
				<li>List Item21</li>
				<!--<li>List Item22</li> <li>List Item23</li>-->
			</ul>
			
			
		</div>
		
		
	</body>
</html>

属性选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script src="js/jquery-1.12.3.min.js" type="text/javascript" charset="utf-8"></script>
		
		
		<script type="text/javascript"> $(function(){
      //√获得type 属性为text的所有标签对象 //$("input[type=text]").css("border-color","#007108") //获得input标签 name属性是sxt开头的所有标签对象 //$("input[name^=sxt]").css("border-color","red") //获得input标签 name属性是sxt结尾的所有标签对象 //$("input[name$=sxt]").css("border-color","red") //获得input标签 name属性含有sxt所有标签对象 //$("input[name*=sxt]").css("border-color","red") //获得input标签 name属性不等于sxt_name所有标签对象 $("input[name!=sxt_name]").css("border-color","red") }) </script>
		
	</head>
	<body>
		
		<p>
			<input type="text" name="sxt_name" id="" value="" />
		</p>
		
		<p>
			<input type="text" name="sxt_uname" id="" value="" />
		</p>
		
		<p>
			<input type="password" name="pwd_sxt" id="" value="" />
		</p>
		<p>
			<input type="password" name="filesxtfile" id="" value="" />
		</p>
		
	</body>
</html>