jQuery的选择器举例

最新推荐文章于 2024-01-31 00:15:00 发布

iteye_2022

最新推荐文章于 2024-01-31 00:15:00 发布

阅读量124

点赞数

文章标签： javascript ViewUI

jQuery的选择器非常强大，其实是完全借鉴了CSS的选择器，有类选择器，ID选择器，标签选择器，还有其他的很多

层次选择器，等等，下面我们列举一下他们。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Jquery的基本选择器</title>
	<script type="text/javascript" src="jquery-1.7.2.js"></script>
	
	<script type="text/javascript">
		
		$(document).ready(function(){
		//Jquery的id选择器
			$("#button1").click(function(){
				$("#div1").css("background","red");
			})
			
			//jQuery的class选择器
			$("#button2").click(function(){
				$(".min").css("background","red");
			})
			
			//类型选择器
			$("#button3").click(function(){
				$("div").css("background","yellow");
			})
			
			//复合选择器
			$("#button4").click(function(){
				$("span,.min").css("background","blue");
			})
			
			
			//层次选择器，选择body下面的所有div元素
			$("#button5").click(function(){
				$("body span").css("background","black");
			})
			
			//层次选择器，选择body元素下面的直接div子元素
			$("#button6").click(function(){
				$("body > span").css("background","red");
			})
			
			//层次选择器，选择CLass元素min下面的div元素
			$("#button7").click(function(){
				$(".min span").css("background","black");
			})
			
			//层次选择器，选择id为div1后面的所有div元素
			$("#button8").click(function(){
				$("#div1 ~ div").css("background","black");
			})
		})
	</script>
  </head>
  
  <body>
   <div id="div1">div1</div>
   <br/><br/>
   <div class="min">div2<div>div3</div></div><br/><br/>
   <div>div3</div><br/><br/>
   <span>span</span>
   <input type="button" id="button1" value="test1"/><br/>
   <input type="button" id="button2" value="test2"/><br/>
   <input type="button" id="button3" value="test3"/><br/>
   <input type="button" id="button4" value="test4"/><br/>
   ---------------------------------Level层次选择器-------------------------------<br/><br/>
   <div>
   		<span>hahaha</span>
   		<a href="#"><span>heihei</span></a>
   </div>
   <br/>
   <input type="button" id="button5" value="test1"/><br/>
   <input type="button" id="button6" value="test2"/><br/>
   <input type="button" id="button7" value="test3"/><br/>
   <input type="button" id="button8" value="test4"/><br/>
  </body>
</html>

其实很简单，大部分功都给列举到这个代码中了。