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" style="display: none;"></div> $("div:hidden").css({"width":100,"height":100,"border":"1px solid #000"})
29、:visible 匹配所有的可见元素
<div id="div" class="div" style="display: none;"></div> <div id="div" class="div" style="display: block;"></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;
