1、基本過濾選擇器
:first
:last
:not(selector) :selector匹配的節點之外的節點
:even :偶數
:odd :奇數
:eq(index)
:gt(index) :比他大的
:lt(index) :比他小的
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> <script> $(function(){ $('#b1').click(function(){ //$('tr:first').css('background-color','#cccccc'); //$('tbody tr:first').css('background-color','#cccccc'); //$('tbody tr:not(#tr2)').css('background-color','#cccccc'); //$('tbody tr:even').css('background-color','#cccccc'); $('tbody tr:eq(2)').css('background-color','#cccccc'); }); }); </script> </head> <body> <table border="1" cellpadding="0" cellspacing="0" width="60%"> <thead> <tr> <td>name</td><td>age</td> </tr> </thead> <tbody> <tr><td>zs</d><td>22</td></tr> <tr id="tr2"><td>ls</d><td>22</td></tr> <tr><td>ww</d><td>22</td></tr> <tr><td>ll</d><td>22</td></tr> </tbody> </table> <input type="button" value="clickMe" id="b1"/> <body> </html>
2、內容過濾選擇器
:contains(text)
:empty:沒有子節點的節點或文字內容為空的節點
: has(selector)
:parent :包含有父節點的節點
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> <script> $(function(){ $('#b1').click(function(){ $(':contains(hello)').css('background','red'); //$(':empty').css('',''); //$('p :has(p)').css('',''); }); }); </script> </head> <body> <p> <p>hello</p> <p>你好</p> <p> <p>java</p> <p> <input type="button" value="clickMe" id="b1"/> </p> </body> </html>
其實我的目的並不是讓全部螢幕變成紅色,為什麼全部變成紅色的呢?再看下面程式碼,我在contains(hell0)前面加一個p
$('p:contains(hello)').css('background','red');
可以看到雖然不是全屏了,但是還不是我想要的結果,怎麼才能只把hello下面的背景變成紅色呢?可以這樣做
$('p p:contains(hello)').css('background','red');
3、可見性過濾選擇器
:hidden
找到input type="hidden" 以及display=none:visible
$(function(){ $('#a1').click(function(){ $('p:hidden').css('display','block'); //如过有这个样式则去掉,没有则加上 $('#d1').toggleClass('show'); }); //每点击一次,执行一个函数,循环执行 $('#a1').toggle(function(){ //$('#d1').css('display','block'); $('#d1').show(400); //在400毫秒种打开 //或者使用slow fast normal三个参数 $('#d1').show(slow); },function(){ //$('#d1').css('display','none'); $('#d1').hide(); }); });
4、過濾選擇器
(1)屬性過濾器[ attribute]
[attribute=value]
[attribute!=value]
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> <script> $(function(){ $('#b1').click(function(){ $('p[id=p1]').html('hello java'); }); }); </script> </head> <body> <p id="p1">hello</p> <p>world</p> <input type="button" value="click" id="b1"/> </body> </html>
(2),子元素濾波選擇器:傳回所有符合的父節點下的子節點
:nth-child(index/even/odd)
n從1開始
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> <script> $(function(){ $('#b1').click(function(){ $('ul li:nth-child(1)').html('item100'); }); }); </script> </head> <body> <ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul> <ul> <li>item4</li> <li>item5</li> <li>item6</li> </ul> <input type="button" value="click" id="b1"/> </body> </html>
(3),表單物件屬性過濾選擇器
:enabled
:disabled //文字輸入框不能輸入
:checked//被選擇的節點
:selected5,表選擇器
:text
:pasword
:checkbox
:radio
:submit
:image
:reset
:radio
:submit
:image
:radio
:submit:image
:reset