jQuery的过滤选择器

最新推荐文章于 2023-03-22 08:04:52 发布

iteye_2022

最新推荐文章于 2023-03-22 08:04:52 发布

阅读量85

点赞数

文章标签： javascript ViewUI

在jQuery中，有一种非常好用的选择器，名为jQuery过滤选择器，这种选择器可以根据很多需要进行选择，下面我

们来举例说明jQuery的过滤选择器的用法。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>过滤选择器</title>
	<script type="text/javascript" src="jquery-1.7.2.js"></script>
	
	<script type="text/javascript">
		$(function(){//选择第一个div
			$("#button1").click(function(){
				$("div:first").css("background","red");
			})
		})
		
		$(function(){//选择最后一个div
			$("#button2").click(function(){
				$("div:last").css("background","blue");
			})
		})
		
		$(function(){//选择索引为偶数的div
			$("#button3").click(function(){
				$("div:even").css("background","green");
			})
		})
		
		$(function(){//选择索引为奇数的div
			$("#button4").click(function(){
				$("div:odd").css("background","orange");
			})
		})
		
		$(function(){//选择索引为3的div
			$("#button5").click(function(){
				$("div:eq(3)").css("background","orange");
			})
		})
		
		$(function(){//选择class不是min的元素
			$("#button6").click(function(){
				$("div:not(.min)").css("background","orange");
			})
		})
		
		$(function(){//选择索引大于3的元素
			$("#button7").click(function(){
				$("div:gt(3)").css("background","red");
			})
		})
		
		$(function(){//选择索引小于3的元素
			$("#button8").click(function(){
				$("div:lt(3)").css("background","blue);
			})
		})
		
		
	</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><br/><br/>
   
   <input id="button1" type="button" value="test1"/><br/>
   <input id="button2" type="button" value="test2"/><br/>
   <input id="button3" type="button" value="test3"/><br/>
   <input id="button4" type="button" value="test4"/><br/>
   <input id="button5" type="button" value="test5"/><br/>
   <input id="button6" type="button" value="test6"/><br/>
   <input id="button7" type="button" value="test7"/><br/>
   <input id="button8" type="button" value="test8"/><br/>
  
  </body>
</html>