常常在网上找人家使用的jQuery效果，甚至直接下载jQuery插件，这样是很方便，但是总不是自己的，使用别人的插件总会收到一些约束，而且没有一个插件是完全按照自己的意图实现的。

 

下面是我再一次阅读《精通javascript+jquery》一书总结的实用内容——选择器篇（基础知识）：

1. $("#IdN") =js中 document.getElementId("#IdN");

2. $(".MyClass") 选择类别为“MClass”的所有节点元素；

                           在js中，实现同样的功能需要用for循环遍历整个Dom；

3. $("p:odd") 奇数行，几乎所有的标记都可以用“：odd”“：even”实现；

4. $("td:nth-child(1)") 第一个单元格；

5. $("li>a") <li>所有的子元素<a>,不包括孙标记；

6. $("a[title]") 选择a中有title 的内容；

7. $("a[href^=http://]") 以http:// 开头的超链接；

8. $("a[href$=html]") 以html结尾的超链接；

9. $("a[href*=isaac]") 任意匹配，包含字符串isaac的内容；

10. $("li:has(a)")  表示包含了超链接的所有的<li>标记；

附注：jquery 支持的css3 最基本的选择器

* 所有标记

E 所有名称为E的标记

EF 所有名称为F的标记，并且是E的子标记（包括孙，重孙等）

E>F 所有名称为F的标记，并且是E的子标记（不包括孙标记）

E+F 所有名称为F的标记，并且该标记紧接着前面的E标记

E~F 所有名称为F的标记，并且该标记前面有一个E标记

E:has（F） 所有名称的E标记，并且该标记包含F标记

E.C 所有名称为E的标记，属性类别为C，如果去掉E，就是属性选择器.C

E#I 所有名称为E的标记，id为I，如果去掉E，就是id选择器#I

E[A]  所有名称为E的标记，并且设置了属性A

E[A=V] 所有名称为E的标记，并且属性A的值等于V

E[A^=V] 所有名称为E的标记，并且属性A的值以V开头

E[A$=V] 所有名称为E的标记，并且属性A的值以V结尾

E[A*=V] 所有名称为E的标记，并且属性A的值包含V

 

11. $("p:first-child") 选择所有的<p>,这些<p>标记是父标记的第一个子标记；

12. $("p:nth-child(odd)") 奇数行

 

 

        nth-child() 选择器是从1开始，其他是从0开始

附注：jquery 支持的css3 的位置选择器

 

:first 第一个元素，例如div p:first 选中页面中所有p元素的第一个，且该p元素是div的子元素

:last 最后一个元素

:first-child 第一个子元素，例如ul:first-child 选中所有ul元素，且该元素是其父元素的第一个子元素

:last-child 最后一个子元素

:only-child 所有没有兄弟的元素，例如p:only-child选中所有p元素，如果该li元素是其父元素的唯一子元素

:nth-child(n) 第n个子元素，例如li:nth-child(2)选中所有li元素，且该元素是其父元素的第2个子元素（从1开始计数）

:nth-child(odd|even) 所有奇数号或者偶数号子元素，例如li:nth-child(odd)选中所有的li元素，且这些li元素为其父元素的第奇数个元素

:nth-child(nX+Y) 利用公式来计算子元素的位置，例如li:nth-child(5n+1)选中所有li元素，且这些li元素为其父元素的第5n+1 个元素

:odd 或者:even 对于整个页面而言的奇数号或偶数号元素

:eq(n) 页面中第n个元素，例如p:eq(4)为页面中的第5个p元素

:gt(n) 页面中第n个元素之后的所有元素（不包括第n个本身），例如p:gt(3)为页面中第4个p元素之后的所有p元素

:lt(n) 页面中第n个元素之前的所有元素

 

 

12.过滤选择器之间可以迭代使用

     例如：:checkbox:checked:enabled

附注：jquery常用的过滤选择器

:animated 所有处于动画中的元素

:button 所有按钮，包括input[type=button]、input[type=submit]、input[type=reset]和<button>

:checkbox 所有复选框，等同于input[type=checkbox]

:contains(foo) 选择所有包含了文本“foo”的元素

:disabled 页面中被禁用了的元素

:enable 页面中没有被禁用的元素

:file 上传文件的元素，等同于input[type=file]

:header 选中所有标题的元素，例如<h1>~<h6>

:hidden  页面中被隐藏了的元素

:images 图片提交按钮，等同于input[type=image]

:input 表单元素，包括<input>,<select>,<textarea>,<button>

:not(filter) 反向选择

:parent 选择所有拥有子元素（包括文本）的元素，空元素将被排除

:password 密码文本框，等同input[type=password]

:radio 单选按钮，等同input[type=radio]

:reset 重置按钮，包括input[type=reset]和button[type=reset]

:select 下拉菜单中被选中的项

:submit 提交按钮，包括input[type=submit]和button[type=submit]

:text 文本输入框，等同input[type=text]

:visible 页面中的所有可见元素

 

 

13. :not(filter) 可以进行反向选择，filter 参数可以是任意其他的过滤选择器

       例：input:not(:radio)  <input>标记中所有非radio元素

14. filter 参数必须是过滤选择器，不能是其他，

     div:not(p:hidden)  错误

     div:p:not(:hidden) 正确

15. $(":input:not(:checkbox):not(:radio)").addClass("MyClass");

     所有<input>,<select>,<texterarea>或<button>中，非checkbox和非radio 的元素

     注意："input"和":input"的区别

16. size()方法 获取选择器中元素的个数

      $("img").size() 所有<img>的个数

17. $("img[title]")[1] 获取设置了title属性标记的第二个元素    ====（等效于）===$("img[title]").get(1)

     提取元素，最直接的方法是采用方括号加序号的形式

18. get() 不设置任何参数时，可以将一个元素转化为一个元素对象数组

19. get(index) 方法可以获取指定位置的元素

     反过来。index(element)方法可以查找element 所处的位置

     例如：var iNum=$("li").index($("li[title=isaac]")[0])

     以上代码获取<li title="isaac">标记在整个<li>标记列表中所处的位置，并将该位置返回给整数 iNum

20. $("img[alt]").add("img[title]") add()方法添加元素 ===（等效）==$("img[alt],img[title]")

21. $("li[title]").not("[title*=isaac]")

     与add()相对not()方法可以去除元素集中的某些元素

     表示选中了设置title属性的<li>标记，但不包括title值中任意匹配字符串"isaac"的那些

22. not()方法所接受的参数都不能包含特定的元素，只能是通用表达式

      $("li[title]").not("img[title*=isaac]")    错误

      $("li[title]").not("[title*=isaac]")           正确

23. filter()方法筛选元素：接受通用表达式；

                                        参数可以是函数，功能强大，用户可以自定义筛选函数，函数要求返回布尔值，对于返回值为true则保留

24. filter()参数中，不能使用直接等于匹配(=),只能使用前匹配(^=)，后匹配(&=)，或任意匹配(*=)

25. 查询过滤元素：

     $("p").find("span")  在所有<p>标记元素中搜索<span>标记，获得一个新元素集合  ==（等效）==$("span",$("p"))

26. is()方法检测是否包含指定的元素

     is()方法返回布尔值，至少包含一个匹配项返回为true，否则为false

27. jquery链：后面操作都是以前面的操作结果为对象的，如果希望操作的对象为上一步的对象，则可以用end()方法；

     $("p").find("span").addClass("myclass1").end().addClass("myclass2");

     myclass2 直接对<p>作用

     andself() 方法将前面两个对象进行组合后共同处理

     $("p").find("span").addClass("myclass1").andself().addClass("myclass2");

     myclass2 对<p>和<span>同时作用

 

以上是自己整理的一些选择器内容~