jQuery03---过滤选择器(filter)

于 2011-11-29 17:09:22 发布
阅读量719 收藏
点赞数
分类专栏： jQuery 文章标签： filter jquery class div button input
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/daijope/article/details/7024202
版权
-过滤选择器(filter)
   -基本过滤
   :first            选取第一个元素            单个素            $("div:first")选取所有<div>元素中第一个<div>元素
     :last
     :not(selector)
     :even//奇数
   :odd//偶数
     :eq(index)
     :gt(index)//大于索引的
     :it(index)//小于
     //注意索引是从0开始的
     :header //选择页面中的标题元素
     :animated
    
     -内容过滤
     :contains(text)            选取含有文本内容为"text"的元素            集合元素            $("div:contains('我'))选取含有文本"我"的<div>元素
     :empty                                选取文本是空的
     :has(selector)                选取有某个元素的                                        ...                        $("div:has(.mini))含有class= mini元素的div
     :parent                            选取有孩子的元素
    
     -可见性过滤
     :hidden            选取不可见的元素        集合元素                $(":hidden")选取所有不可见的元素。包括<input type="hidden"> ,<div style="display:none;"> 和 <div style="visibility:hidden;">等元素。如果只想选取<input>元素,可以使用$("input:hidden")
     :visible            可见的                            ...                            ...
    
     -属性过滤
     [attribute]            选取拥有此属性的元素            集合元素            $("div[id]")选取拥有属性id的元素
     [attribute = value]                                                                            $("div[title=test]")选取属性title为"test"的<div>元素
     [attribute != value]
     [attribute^ = value]
     [attribute$ = value]
     [attribute* = value]
     [selector1][selector2]..
    
     -子元素过滤
     :nth-child(index/even/odd/equation)            选取每个父元素下的第index个子元素或者奇偶元素(index从1开始)            集合元素            :eq(index)只匹配一个元素，而:nth-child将为每一个父元素匹配子元素，并且:nth-child(index)的index是从1开始的,而:eq(index)是从0开始的。
     :first-child                                                            选取每个父元素的第一个子元素
     :last-child
     :only-child
    
     -表单对象属性过滤
     :enabled            选取所有可用的元素
     :disabled
     :checked

     :selected

例子：

01基本过滤

<!DOCTYPE html>
<html>
  <head>
    <title>MyHtml.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery-1.7.1.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
		<script type="text/javascript">
			$(document).ready(function() {
				$("#button1").click(function() {
					$("div:first").css("background", "red");
				});	
					
				$("#button2").click(function() {
					$('div:last').css("background", "red");
				});
				
				$("#button3").click(function() {
					$("div:even").css("background", "green");
				});
				
				$("#button4").click(function() {
					$('div:lt(2)').css("background", "orange");
				});
				
				$("#button5").click(function() {
					$('div:gt(2)').css("background", "orange");
				}); 
				
				$("#button6").click(function() {
					$('div:not(.one)').css("background", "blue");
				});
				
				$("#button7").click(function() {
					$(':header').css("background", "blue");
				});
			});
		</script>
  </head>
  
  <body class="body">
    <h3>基本过滤选择器<h3>
    <input type="button" value="test1" id="button1">
    <input type="button" value="test2" id="button2">	
    <input type="button" value="test3" id="button3">
    <input type="button" value="test4" id="button4">	
    <input type="button" value="test5" id="button5">	
    <input type="button" value="test6" id="button6">
    <input type="button" value="test6" id="button7">
    <div class = "one" id = "one" >
    	id为one,class为one的div
    	<div class="mini">class 为mini</div>
    </div>
    
    <div class="one" id="two" title="text">
    	id为two,class为one, title为test的div.
    	<div class="mini" title="other">class为mini,title为other</div>
    	<div class="mini" title="test">class为mini,test</div>
    </div>
    
    <div class="one">
    	<div class="mini">class为mini</div>
    	<div class="mini">class为mini</div>
    	<div class="mini">class为mini</div>
    	<div class="mini"></div>
    </div>
    
    <div class="one">
    	<div class="mini">class为mini</div>
    	<div class="mini">class为mini</div>
    	<div class="mini">class为mini</div>
    	<div class="mini" title="text">class为mini,title为text</div>
    </div>
    
    
    <div style="display:none;" class="none">style的display为"none"的div</div>
    
    <div class="hide">class为"hide"的div</div>
    
    <div> 包含input的type为"hidden"的div<input type="hidden" size="8"/></div>  
  </body>
</html>

02可见性过滤选择 


<!DOCTYPE html>
<html>
  <head>
    <title>MyHtml.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery-1.7.1.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
		<script type="text/javascript">
			$(document).ready(function() {
				$("#button1").click(function() {
					//alert($("div:hidden").length);
					$("div:hidden").show(5000).css("background", "red");
				});	
				
				$("#button2").click(function() {
					//alert($("div:hidden").length);
					$("div:visible").css("background", "red");
				});		
				
			});
		</script>
  </head>
  
  <body>
    <h3>可见性过滤选择器<h3>
    <input type="button" value="test1" id="button1">
    <input type="button" value="test2" id="button2">
    
    <div class = "one" id = "one" >
    	id为one,class为one的div
    	<div class="mini">class 为mini</div>
    </div>
    
    <div class="one" id="two" title="text">
    	id为two,class为one, title为test的div.
    	<div class="mini" title="other">class为mini,title为other</div>
    	<div class="mini" title="test">class为mini,test</div>
    </div>
    
    <div class="one">
    	<div class="mini">class为mini</div>
    	<div class="mini">class为mini</div>
    	<div class="mini">class为mini</div>
    	<div class="mini"></div>
    </div>
    
    <div class="one">
    	<div class="mini">class为mini</div>
    	<div class="mini">class为mini</div>
    	<div class="mini">class为mini</div>
    	<div class="mini" title="text">class为mini,title为text</div>
    </div>
    
    
    <div style="display:none;" class="none">style的display为"none"的div</div>
    
    <div class="hide">class为"hide"的div</div>
    
    <div> 包含input的type为"hidden"的div<input type="hidden" size="8"/></div>  
  </body>
</html>

03属性过滤选择器 


<!DOCTYPE html>
<html>
  <head>
    <title>MyHtml.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery-1.7.1.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
		<script type="text/javascript">
			$(document).ready(function() {
				$("#button1").click(function() {
					$("div[title]").css("background", "red");
				});	
				
				$("#button2").click(function() {
					$("div[title=test]").css("background", "red");
				});		
				
			});
		</script>
  </head>
  
  <body>
    <h3>属性过滤选择器<h3>
    <input type="button" value="test1" id="button1">
    <input type="button" value="test2" id="button2">
    
    <div class = "one" id = "one" >
    	id为one,class为one的div
    	<div class="mini">class 为mini</div>
    </div>
    
    <div class="one" id="two" title="test">
    	id为two,class为one, title为test的div.
    	<div class="mini" title="other">class为mini,title为other</div>
    	<div class="mini" title="test">class为mini,test</div>
    </div>
    
    <div class="one">
    	<div class="mini">class为mini</div>
    	<div class="mini">class为mini</div>
    	<div class="mini">class为mini</div>
    	<div class="mini"></div>
    </div>
    
    <div class="one">
    	<div class="mini">class为mini</div>
    	<div class="mini">class为mini</div>
    	<div class="mini">class为mini</div>
    	<div class="mini" title="test">class为mini,title为text</div>
    </div>
    
    
    <div style="display:none;" class="none">style的display为"none"的div</div>
    
    <div class="hide">class为"hide"的div</div>
    
    <div> 包含input的type为"hidden"的div<input type="hidden" size="8"/></div>  
  </body>
</html>

04子元素过滤选择器 


<!DOCTYPE html>
<html>
  <head>
    <title>MyHtml.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery-1.7.1.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
		<script type="text/javascript">
			$(document).ready(function() {
				$("#button1").click(function() {
					$("div.one:nth-child(2)").css("background", "red");
				});	
				
				$("#button2").click(function() {
					$("div.one:first-child").css("background", "blue");
				});		
				
				$("#button3").click(function() {
					$("div.one:only-child").css("background", "pink");
				});
				
				$("#button3").click(function() {
					$("input:disabled").css("background", "pink");
				});
			});
		</script>
  </head>
  
  <body>
    <h3>子元素过滤选择器<h3>
    <input type="button" value="test1" id="button1">
    <input type="button" value="test2" id="button2">
    <input type="button" value="test3" id="button3">
    <input type="button" value="test4" id="button4">
    <div class="one" id = "one" >
    	id为one,class为one的div
    	<div class="mini">class 为mini</div>
    </div>
    
    <div class="one" id="two" title="test">
    	id为two,class为one, title为test的div.
    	<div class="mini" title="other">class为mini,title为other</div>
    	<div class="mini" title="test">class为mini,test</div>
    </div>
    
    <div class="one">
    	<div class="mini">class为mini</div>
    	<div class="mini">class为mini</div>
    	<div class="mini">class为mini</div>
    	<div class="mini"></div>
    </div>
    
    <div class="one">
    	<div class="mini">class为mini</div>
    	<div class="mini">class为mini</div>
    	<div class="mini">class为mini</div>
    	<div class="mini" title="test">class为mini,title为text</div>
    </div>
    
    
    <div style="display:none;" class="none">style的display为"none"的div</div>
    
    <div class="hide">class为"hide"的div</div>
    
    <div> 包含input的type为"hidden"的div<input type="hidden" size="8"/></div>  
  	<input type="text" disabled="disabled">
  </body>
</html>


daijope
关注
专栏目录
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值