JQ选择器逐一测试
在web開發中大部分時間都在查找DOM元素和對DOM元素進行控制。
從上面就知道JQ為什么那么流行，因為它極大的縮短對DOM元素的查找和控制，讓開發更快。
而它的對查找DOM的方法也很方便，這歸類為選擇器，如果對它了解，就知道它還有子類庫sizzle，
這是選擇器分出來的庫，還有在從源碼里也可以知道選擇器這塊的代碼量，有2000行左右，讓我們
可以像css選擇器一樣，把繁雜的選擇簡單化，也可以看出它替我們干了多少事，讓我們更快開發。下面測試
每一個選擇器的功能。
一般情況下都是$()，它接受兩個參數，第一個參數不說，第二個參數可選，它就像以下：
原生：
var oDiv=document.getElementById('div');
JQ：
$("#div",document)
第二參數就是代表原生的document
如：
var oDiv=obj.getElementById('div');
$("#div",obj)
1、#id
<div id="div"></div>
<script>
$(function(){
$("#div").css({"width":100,"height":100,"border":"1px solid #000"})
})
</script>
2、element
var oDiv=document.getElementById('div');
$(function(){
$("div",document).css({"width":100,"height":100,"border":"1px solid #000"})
})
3、class
<div id="div" class="div"></div>
<script>
var oDiv=document.getElementById('div');
$(function(){
$(".div",document).css({"width":100,"height":100,"border":"1px solid #000"})
})
</script>
4、*
var oDiv=document.getElementById('div');
$(function(){
$("*",document).css({"width":100,"height":100,"border":"1px solid #000"})
})
5、多選擇器：selector1,selector2,selectorN
$("div,.div,#div").css({"width":100,"height":100,"border":"1px solid #000"})
6、ancestor descendant后代選擇器
$("ul li").css({"width":100,"height":100,"border":"1px solid #000"})
7、parent > child
$("ul>li").css({"width":100,"height":100,"border":"1px solid #000"})
8、
$("li+li").css({"width":100,"height":100,"border":"1px solid #000"})
9、prev ~ siblings
$("li~li").css({"width":100,"height":100,"border":"1px solid #000"})
10、:first
$("li:first").css({"width":100,"height":100,"border":"1px solid #000"})
11、:not(selector) 去除匹配元素
$("li:not(.active)").css({"width":100,"height":100,"border":"1px solid #000"})
12、:even 匹配所有索引值為偶數的元素，從 0 開始計數
$("li:even").css({"width":100,"height":100,"border":"1px solid #000"})
13、:odd 匹配所有索引值為奇數的元素，從 0 開始計數
$("li:odd").css({"width":100,"height":100,"border":"1px solid #000"})
14、:eq(index) 匹配一個給定索引值的元素
$("li:eq(0)").css({"width":100,"height":100,"border":"1px solid #000"})
匹配第一個元素
15、:gt(index) 匹配所有大于給定索引值的元素
$("li:gt(1)").css({"width":100,"height":100,"border":"1px solid #000"})
匹配索引大于1的元素
16、:lang(language) 選擇指定語言的所有元素。
$("li:lang(it)").css({"width":100,"height":100,"border":"1px solid #000"})
17、:last() 獲取最后個元素
$("li:last").css({"width":100,"height":100,"border":"1px solid #000"})
18、:lt(index) 匹配所有小于給定索引值的元素
$("li:lt(5)").css({"width":100,"height":100,"border":"1px solid #000"})
匹配索引值小于5的元素
19、:header 匹配如 h1, h2, h3之類的標題元素
$(":header").css({"width":100,"height":100,"border":"1px solid #000"})
20、:animated 匹配所有正在執行動畫效果的元素
$("div:animated").css({"width":100,"height":100,"border":"1px solid #000"})
21、:focus 匹配當前獲取焦點的元素。
$("input:focus").css({"width":100,"height":100,"border":"1px solid #000"})
22、:root 選擇該文檔的根元素。
在HTML中，文檔的根元素，和$(":root")選擇的元素一樣， 永遠是<html>元素。
$(":root").css({"width":100,"height":100,"border":"1px solid #000"})
23、:target 選擇由文檔URI的格式化識別碼表示的目標元素。
$("div:target").css({"width":100,"height":100,"border":"1px solid #000"})
24、:contains(text) 匹配包含給定文本的元素
$("div:contains['zhng']").css({"width":100,"height":100,"border":"1px solid #000"})
選擇包含字符串zhng的元素
25、:empty 匹配所有不包含子元素或者文本的空元素
$("div:empty").css({"width":100,"height":100,"border":"1px solid #000"})
26、:has(selector) 匹配含有選擇器所匹配的元素的元素
$("div:has(p)").css({"width":100,"height":100,"border":"1px solid #000"})
選擇包含p標簽的元素
27、:parent 匹配含有子元素或者文本的元素
$("div:parent").css({"width":100,"height":100,"border":"1px solid #000"})
28、:hidden 匹配所有不可見元素，或者type為hidden的元素
<div id="div" class="div"></div>
$("div:hidden").css({"width":100,"height":100,"border":"1px solid #000"})
29、:visible 匹配所有的可見元素
<div id="div" class="div"></div>
<div id="div" class="div"></div>
$("div:visible").css({"width":100,"height":100,"border":"1px solid #000"})
30、[attribute] 匹配包含給定屬性的元素。
$("div[class]").css({"width":100,"height":100,"border":"1px solid #000"})
31、[attribute=value] 匹配給定的屬性是某個特定值的元素
$("div[class='div']").css({"width":100,"height":100,"border":"1px solid #000"})
31、[attribute!=value] 匹配所有不含有指定的屬性，或者屬性不等于特定值的元素。
$("div[class!='div']").css({"width":100,"height":100,"border":"1px solid #000"})
32、[attribute^=value] 匹配給定的屬性是以某些值開始的元素
$("div[class^='d']").css({"width":100,"height":100,"border":"1px solid #000"})
33、[attribute$=value] 匹配給定的屬性是以某些值結尾的元素
$("div[class$='v']").css({"width":100,"height":100,"border":"1px solid #000"})
34、[attribute*=value] 匹配給定的屬性是以包含某些值的元素
$("div[class*='i']").css({"width":100,"height":100,"border":"1px solid #000"})
35、[selector1][selector2][selectorN] 復合屬性選擇器，需要同時滿足多個條件時使用。
$("div[id][class*='i']").css({"width":100,"height":100,"border":"1px solid #000"})
36、:first-child 匹配第一個子元素
$("div p:first-child").css({"width":100,"height":100,"border":"1px solid #000"})
37、:first-of-type 結構化偽類，匹配E的父元素的第一個E類型的孩子。等價于 :nth-of-type(1) 選擇器。
$("div p:first-of-type").css({"width":100,"height":100,"border":"1px solid #000"})
38、:last-child 匹配最后一個子元素
$("div p:last-child").css({"width":100,"height":100,"border":"1px solid #000"})
39、:last-of-type 結構化偽類，匹配E的父元素的最后一個E類型的孩子
$("div p:last-of-type").css({"width":100,"height":100,"border":"1px solid #000"})
40、:nth-child 匹配其父元素下的第N個子或奇偶元素
要匹配元素的序號，從1開始
$("div p:nth-child(1)").css({"width":100,"height":100,"border":"1px solid #000"})
第一個子元素
41、:nth-last-child(n|even|odd|formula) 選擇所有他們父元素的第n個子元素。計數從最后一個元素開始到第一個。
$("div p:nth-last-child(1)").css({"width":100,"height":100,"border":"1px solid #000"})
42、nth-last-of-type(n|even|odd|formula) 選擇的所有他們的父級元素的第n個子元素，計數從最后一個元素到第一個。
$("div p:nth-last-of-type(1)").css({"width":100,"height":100,"border":"1px solid #000"})
選中最后一個子元素
43、:nth-of-type(n|even|odd|formula) 選擇同屬于一個父元素之下，并且標簽名相同的子元素中的第n個。
$("div p:nth-of-type(1)").css({"width":100,"height":100,"border":"1px solid #000"})
44、:only-child 如果某個元素是父元素中唯一的子元素，那將會被匹配,如果父元素中含有其他元素，那將不會被匹配
$("div p:only-child").css({"width":100,"height":100,"border":"1px solid #000"})
當p是唯一的時候選中
45、:only-of-type 選擇所有沒有兄弟元素，且具有相同的元素名稱的元素。
$("div p:only-of-type").css({"width":100,"height":100,"border":"1px solid #000"})
46、:input 匹配所有 input, textarea, select 和 button 元素
$(":input").css({"width":100,"height":100,"border":"1px solid #000"})
匹配所有的input標簽
47、:text 匹配所有的單行文本框
$(":text").css({"width":100,"height":100,"border":"1px solid #000"})
匹配單行文本框
48、:password 匹配所有密碼框
$(":password").css({"width":100,"height":100,"border":"1px solid #000"})
匹配密碼框
49、:radio 匹配所有單選按鈕
$(":radio").css({"width":100,"height":100,"border":"1px solid #000"})
50、:checkbox 匹配所有復選框
$(":checkbox").css({"width":100,"height":100,"border":"1px solid #000"})
51、:submit 匹配所有提交按鈕
$(":submit").css({"width":100,"height":50,"border":"1px solid #000"})
52、:image 匹配所有圖像域
<input type="image" />
$(":image").css({"width":100,"height":50,"border":"1px solid #000"})
匹配<input type="image" />
53、:reset 匹配所有重置按鈕
$(":reset").css({"width":100,"height":50,"border":"1px solid #000"})
54、:button 匹配所有按鈕
$(":button").css({"width":100,"height":50,"border":"1px solid #000"})
55、:file 匹配所有文件域
$(":file").css({"width":100,"height":50,"border":"1px solid #000"})
56、:enabled 匹配所有可用元素
$(":enabled").css({"width":100,"height":50,"border":"1px solid #000"})
57、:disabled 匹配所有不可用元素
$(":disabled").css({"width":100,"height":50,"border":"1px solid #000"})
58、:checked 匹配所有選中的被選中元素(復選框、單選框等，select中的option)，對于select元素來說，獲取選中推薦使用 :selected
$(":checked").css({"width":100,"height":50,"border":"1px solid #000"})
59、:selected 匹配所有選中的option元素
$(":selected").css({"width":100,"height":50,"border":"1px solid #000"})
擴展：
var jQuery=window.jQuery=window.$=function(selector,context){
return new jQuery.fn.init(selector,context)
}
/*這是jquery的總入口，所有的調用都基于這個入口*/
/*在一些jq插件里源碼看到這個jQuery.fn,其實它是如下*/
jQuery.fn.init.prototype=jQuery.fn;
總結
- 上一篇： 股市高开和低开的区别
- 下一篇： Linux软件开发常用的软件包(持续更新