支付宝赞助帐号:service@kuitao8.com 

jQuery基础知识学习——选择器

Created2013-10-05   Views 2260    Author 懒人程序

常常在网上找人家使用的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>同时作用

 

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

 

 

 

 

 

 
上一篇: jQuery选择器总结
下一篇: jquery学习必备代码和技巧
支持键盘 ← →

邮件订阅

订阅我们的精彩内容