jquery 之選擇器

1、基本：

HTML代碼：

<p class="p1">p段落</p>
<h class="h1">h標籤</h>
<div id="div1">
<p class="p2">hehehe</p>
</div>

一、jQuery( "*" )查找文檔中的每個元素（包括 head, body 等）。

$("*").css('background-color','red');

二、jQuery( ".class" )選擇給定樣式類名的全部元素。

$('.h1').css('background-color','yellow');

三、jQuery( "element" )根據給定（html）標記名稱選擇全部的元素。

$('h').css('border','1px solid blue');

四、jQuery( "selector1, selector2, selectorN" )將每個選擇器匹配到的元素合併後一塊兒返回。

$('.h1,.p1,#div1').css('color','blue');

五、jQuery( "#id" )選擇一個具備給定id屬性的單個元素。

$('#div1').css({                    
width:20,                    
height:30,                    
border:'1px solid #ccc',                
background:'blue'                
});

2、層級

HTML代碼：

<ul class="topnav">
<li class="item1">Item 1</li>
<li>Item 2
<ul><li>Nested item 1</li><li>Nested item 2</li><li>Nested item 3</li></ul>
</li>
<li>Item 3</li>
</ul>
<label>lll:</label>
<input name="name" value="123"/>

一、jQuery( "parent > child" )選擇全部指定「parent」元素中指定的"child"的直接子元素

$("ul.topnav > li").css("border", "3px double red");

二、jQuery( "ancestor descendant" 選擇給定的祖先元素的全部後代元素。一個元素的後代多是該元素的一個孩子，孫子，曾孫 

等。

$('ul li').css('background-color','aquamarine');

三、jQuery( "prev + next" )選擇全部緊接在 「prev」 元素後的 「next」 元素

$("label + input").css("color", "blue");

四、jQuery( "prev ~ siblings" )匹配 「prev」 元素以後的全部 兄弟元素。具備相同的父元素，並匹配過濾「siblings」選擇器

$('ul ~ label').css('color','yellow');

3、基本篩選：

HTML代碼：

<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<button id="run">Run</button>
<div></div>
<div id="mover"></div>
<div></div>
<table border="1">
<tr><td>123</td><td>123</td><td>456</td></tr>
<tr><td>123</td><td>123</td><td>456</td></tr>
<tr><td>123</td><td>123</td><td>456</td></tr>
<div lang="en-us"></div>
</table>

一、jQuery( ":animated" )選擇全部正在執行動畫效果的元素.

 $("#run").click(function(){
 $("div:animated").toggleClass("colored");
    });
   function animateIt(){
   $("#mover").slideToggle("slow", animateIt);
     }
    animateIt();

二、jQuery(":eq(index)"),jQuery( ":eq(-index)" )在匹配的集合中選擇索引值爲index的元素。

   index: index爲正數時要匹配元素的索引值（從0開始計數），index爲負數從最後一個元素開始 
  倒計數.-1匹配倒數第一個元素

 $("td:eq(2)").css("color", "red");

三、jQuery( ":even" ) 選擇所引值爲偶數的元素，從 0 開始計數。

  $("td:even").css("background-color", "#bbbbff");

四、jQuery( ":first" )選擇第一個匹配的DOM元素。:first僞類選擇器至關於:eq(0)

 $("tr:first").css("font-style", "italic");

五、jQuery( ":gt(index)" )選擇匹配集合中全部大於給定index（索引值）的元素。

 $( "td:gt(4)" ).css( "backgroundColor", "yellow" );

六、jQuery( ":header" )選擇全部標題元素，像h1, h2, h3 等.

$(":header").css({ background:'#CCC', color:'blue' });

七、jQuery( ":lang(language)" )選擇指定語言的全部元素。

$( "div:lang(en-us)" ).addClass( "usa" );

八、jQuery( ":last" )選擇最後一個匹配的元素。

$("tr:last").css({backgroundColor: 'yellow', fontWeight: 'bolder'});

九、jQuery( ":lt(index)" )選擇匹配集合中全部索引值小於給定index參數的元素。

 $("td:lt(4)").css("color", "red");

十、jQuery( ":not(selector)" )選擇全部元素去除不匹配給定的選擇器的元素。

$("div:not(#mover)").css('background','red');

十一、jQuery( ":odd" 選擇索引值爲奇數元素，從 0 開始計數

$("tr:odd").css("background-color", "#bbbbff");

十二、jQuery( ":root" )選擇該文檔的根元素。

console.log($('p:root'));

4、內容篩選：

一、jQuery( ":contains(text)" ) 選擇全部包含指定文本的元素。

<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>

$("div:contains('John')").css("text-decoration", "underline");

二、jQuery( ":empty" )選擇全部沒有子元素的元素（包括文本節點）。須要注意的一件重要的事情是:empty(和 :parent)的子元素包括文本節點。

<tr><td>TD #0</td><td></td></tr>
<tr><td>TD #2</td><td></td></tr>

<script>$("td:empty").text("Was empty!").css('background', 'rgb(255,220,200)');</script>

三、jQuery( ":has(selector)" )選擇元素其中至少包含指定選擇器匹配的一個種元素。

<div><p>Hello in a paragraph</p></div>

<script>$("div:has(p)").addClass("test");</script>

四、jQuery( ":parent" )選擇全部含有子元素或者文本的父級元素。

<table border="1">
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>

$("td:parent").css('background', 'red');

5、可見性篩選：

一、jQuery( ":hidden" )選擇全部隱藏的元素。
元素能夠被認爲是隱藏的幾個狀況：
他們的CSS display值是none。
他們是type="hidden"的表單元素。
它們的寬度和高度都顯式設置爲0。
一個祖先元素是隱藏的，所以該元素是不會在頁面上顯示。

<span></span>
<div></div>
<div style="display:none;">Hider!</div>
<div></div>

$("div:hidden").show(3000);

二、jQuery( ":visible" )選擇全部可見的元素。
若是元素中佔據文檔中必定的空間,元素被認爲是可見的。可見元素的寬度或高度，是大於零。

元素的visibility: hidden 或 opacity: 0被認爲是可見的，由於他們仍然佔用空間佈局。

<button>Show hidden to see they don't change</button>
<div></div>
<div class="starthidden"></div>
<div></div>

<div></div>
<div style="display:none;"></div>

$("div:visible").click(function () {
$(this).css("background", "yellow");
});
$("button").click(function () {
$("div:hidden").show("fast");
});

6、屬性：
一、jQuery( "[attribute|='value']" )選擇指定屬性值等於給定字符串或以該字符串爲前綴（該字符串後跟一個連字符「-」 ）的 
元素。
attribute: 一個屬性名.
value: 一個屬性值，引號是可選的.能夠是一個有效標識符或帶一個引號的字符串。

<div id="mover">123</div>

$('div[id|=mover]').css('color','red');

二、jQuery( "[attribute*='value']" )選擇指定屬性具備包含一個給定的子字符串的元素。（選擇給定的屬性是以包含某些值的元 
素）

<input name="milkman" />
<input name="letterman2" />

$('input[name*="man"]').val('has man in it!');

三、jQuery( "[attribute~='value']" )選擇指定屬性用空格分隔的值中包含一個給定值的元素。

<input name="milk man" />
<input name="letterman2" />

$('input[name~="man"]').val('mr. man is in it!');

四、jQuery( "[attribute$='value']" )選擇指定屬性是以給定值結尾的元素。這個比較是區分大小寫的。

<input name="newsletter" />

$('input[name$="letter"]').val('a letter');

五、jQuery( "[attribute='value']" )選擇指定屬性是給定值的元素。

<input type="radio" name="newsletter" value="Hot Fuzz" />

$('input[value="Hot Fuzz"]').css('background','red');

六、jQuery( "[attribute!='value']" )選擇不存在指定屬性，或者指定的屬性值不等於給定值的元素。

<span>name is newsletter</span>
<span>name</span>

$('span[name!="newsletter"]').css（'color','red');

七、jQuery( "[attribute^='value']" )選擇指定屬性是以給定字符串開始的元素

<input name="newsletter" /> 
<input name="milkman" />
<input name="newsboy" />

$('input[name^="news"]').val('news here!');

八、jQuery( "[attribute]" )選擇全部具備指定屬性的元素，該屬性能夠是任何值

<div id="mover">123456</div>

$('div[id]').css（'color','red');

九、jQuery( "[attributeFilter1][attributeFilter2][attributeFilterN]" )選擇匹配全部指定的屬性篩選器的元素
attributeFilter1: 一個屬性過濾器.
attributeFilter2: 另外一個屬性過濾器, 用於進一步減小被選擇的元素。
attributeFilterN: 根據須要有更多的屬性過濾器

<input name="milkman" />
<input id="letterman" name="new-letterman" />
<input name="newmilk" />

$('input[id][name$="man"]').val('only this one');

7、子元素篩選：
一、jQuery( ":first-child" )選擇全部父級元素下的第一個子元素。

<div>
<span>John,</span>
<span>Karl,</span>
<span>Brandon</span>
</div>

$("div span:first-child").css("text-decoration", "underline")；

二、jQuery( ":first-of-type" )選擇全部相同的元素名稱的第一個兄弟元素。

<div>
<span>John,</span>
<span>Karl,</span>
<span>Brandon</span>
</div>
<script>

$("span:first-of-type").addClass("fot");

三、jQuery( ":last-child" )選擇全部父級元素下的最後一個子元素。

<div>
<span>John,</span>
<span>Karl,</span>
<span>Brandon</span>
</div>

$("div span:last-child")
.css({color:"red", fontSize:"80%"})；

四、jQuery( ":last-of-type" )選擇的全部元素之間具備相同元素名稱的最後一個兄弟元素。

<div>
<span>John,</span>
<span>Karl,</span>
<span>Brandon</span>
</div>

$("div span:last-of-type")
.css({color:"red", fontSize:"80%"})；

五、jQuery( ":nth-child(index/even/odd/equation)" )選擇的他們全部父元素的第n個子元素。

<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>

$("ul li:nth-child(2)").append("<span> - 2nd!</span>");

六、jQuery( ":nth-last-child(index/even/odd/equation)" )選擇全部他們父元素的第n個子元素。計數從最後一個元素開始到第 
一個

<ul>
<li>Dave</li>
<li>Rick</li>
<li>Timmy</li>
<li>Gibson</li>
</ul>

$("ul li:nth-last-child(2)").css（'color','red');

七、jQuery( ":nth-last-of-type(index/even/odd/equation)" )選擇全部他們父級兄弟元素下具備相同的元素名（愚人碼頭注：標 
簽名，好比<li>）的倒數第n個子元素，計數從最後一個元素開始到第一個。

<ul>
<li>Dave</li>
<li>Rick</li>
<li>Timmy</li>
<li>Gibson</li>
</ul>

$("ul li:nth-last-of-type(2)").css（'color','red');

八、jQuery( ":nth-of-type(index/even/odd/equation)" )選擇同屬於一個父元素之下，而且標籤名相同的子元素中的第n個。

<div>
<span>John</span>,
<b>Kim</b>,
<span>Adam</span>,
<b>Rafael</b>,
<span>Oleg</span>
</div>

$("ul li:nth-of-type(2)").css（'color','red');

九、jQuery( ":only-child" )若是某個元素是其父元素的惟一子元素，那麼它就會被選中。若父元素有其餘子元素，就不會被匹配

<div>
<button>Sibling!</button>
</div>

$("div button:only-child")css("border", "2px blue solid");

十、jQuery( ":only-of-type" )選擇全部沒有兄弟元素，且具備相同的元素名稱的元素。若是父元素有相同的元素名稱的其餘子元 
素，那麼沒有元素會被匹配。

<div>
<button>Sibling!</button>
</div>
<div>
<button>Sibling!</button>
<button>Sibling!</button>
</div>

$("button:only-of-type").css("border", "2px blue solid");

8、表單：
一、jQuery( ":button" )選擇全部按鈕元素和類型爲按鈕的元素。

<input type="button" value="Input Button"/>
<input type="checkbox" />

$(':button').css('background-color','red');

二、jQuery( "input:checkbox" )選擇全部類型爲複選框的元素。

<input type="button" value="Input Button"/>
<input type="checkbox" />

$('input:button').css('background-color','red');

三、jQuery( ":checked" )匹配全部選中的元素。

<input type="checkbox" name="newsletter" value="Hourly" checked="checked">
<input type="checkbox" name="newsletter" value="Daily">

 $('input:checked').css('background-color','red');

四、jQuery( ":disabled" )選擇全部被禁用的元素。

<input name="email" disabled="disabled" />
<input name="id" />

$("input:disabled").css('background-color','red');

五、jQuery( ":enabled" )選擇全部可用的（未被禁用的）

<input name="email" disabled="enabled" />
<input name="id" />

$("input:enabled").css('background-color','red');

六、jQuery( ":file" )選擇全部類型爲文件（file）的元素

<input type="file" />
<input type="hidden" />

$("input:file").css('background-color','red');

七、jQuery( ":image" )選擇全部圖像類型的元素

<input type="image" />

$("input:image").css('width','200');

八、jQuery( ":input" )選擇全部 input, textarea, select 和 button 元素.

<input type="password" />
<input type="radio" />
<input type="reset" />

$(":input").css('width','200')

九、jQuery( ":password" )選擇全部類型爲密碼的元素。

<input type="password" />

$("input:password").css('bordr-color','green');

十、jQuery( ":radio" )選擇全部類型爲radio的元素。

<input type="radio" />

$("input:radio").css('bordr-color','green');

十一、jQuery( ":reset" )選擇全部類型爲reset的元素。

<input type="reset" />

$("input:reset").css('bordr-color','green');

十二、jQuery( ":selected" )選擇全部selected的元素。

<input type="radio" selected />
<input type="radio" />

$("input:selected").css('bordr-color','green');

1三、jQuery( ":submit" )選擇全部類型爲sumbit的元素。

<input type="submit" selected />
<input type="radio" />

$("input:submit").css('bordr-color','green');

1四、jQuery( ":text" )選擇全部類型爲text的元素。

<input type="text" />
<input type="radio" />

$("input:text").css('bordr-color','green');