jQuery 选择器

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/liwei_0828/article/details/80690908

jQuery 选择器

整理了jQuery的选择器,虽然很基础,但还需要随时巩固,灵活运用。
除了较常用的#id、element、.class、*这四种选择器之外还有下列选择器:

  1. selector1,selector2,selectorN : 将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内;
  2. ancestor descendant:在给定的祖先元素下匹配所有的后代元素;
  3. parent > child:在给定的父元素下匹配所有的子元素;
  4. prev + nev: 匹配所有紧接在 prev 元素后的 next 元素;
  5. prev + siblings匹配 prev 元素之后的所有 siblings 元素(注意:只检索第一个元素的同辈元素);
  6. :first:获取第一个元素( 例如:$(‘li:first’) );
  7. :not(selector):去除所有与给定选择器匹配的元素,在jQuery 1.3中,已经支持复杂选择器了(例如:not(div a) 和 :not(div,a));
  8. :even:匹配所有索引值为偶数的元素,从 0 开始计数;
  9. :odd:匹配所有索引值为奇数的元素,从 0 开始计数;
  10. :eq(indext):匹配一个给定索引值的元素;
  11. :gt(indext):匹配所有大于给定索引值的元素;
  12. :lang(language):选择指定语言的所有元素。:lang选择器,匹配有一个语言值等于所提供的语言代码,或以提供的语言代码开始,后面马上跟一个“ - ”的元素。例如,选择器$(“div:lang(en)”)将匹配
    and
    (和他们的后代
    ),但不包括
    对于HTML元素,语言值由lang属性决定,也可能由来自meta元素或HTTP头信息决定;
  13. :last():获取最后个元素,例如:$(‘li:last’)
  14. :It(indext):匹配所有小于给定索引值的元素;
  15. :header:匹配如 h1, h2, h3之类的标题元素;
  16. :animated:匹配所有正在执行动画效果的元素;
  17. :focus:匹配当前获取焦点的元素。如同其他伪类选择器(那些以”:”开始),建议:focus前面用标记名称或其他选择;否则,通用选择(““)是不言而喻的。换句话说,(:focus)(‘:focus’)。如果你正在寻找当前的焦点元素,$( document.activeElement )将检索,而不必搜索整个DOM树;
  18. :root:选择该文档的根元素;
  19. :target:选择由文档URI的格式化识别码表示的目标元素。如果文档的URI包含一个格式化的标识符,或hash(哈希), 然后:target选择器将匹配ID和标识符相匹配的元素。 例如,给定的URI http://example.com/#foo, $( “p:target” ),将选择

    元素;

  20. :contains:匹配包含给定文本的元素;
  21. :empty:匹配所有不包含子元素或者文本的空元素;
  22. :has(selector):匹配含有选择器所匹配的元素的元素;
  23. :parent:匹配有子元素或者文本的元素;
  24. :hidden:匹配所有不可见元素,或者type为hidden的元素;
  25. :visible:匹配所有的可见元素;
  26. [attribute]:匹配包含给定属性的元素。注意,在jQuery 1.3中,前导的@符号已经被废除!如果想要兼容最新版本,只需要简单去掉@符号即可。
  27. [attribute = value]:匹配给定的属性是某个特定值的元素;
  28. [attribute != value ]:匹配所有不含有指定的属性,或者属性不等于特定值的元素;
  29. [attribute ^= value ]:匹配给定的属性是以某些值开始的元素;
  30. [attribute $= value ]:匹配给定的属性是以某些值结尾的元素;
  31. [attribute *= value ]:匹配给定的属性是以包含某些值的元素;
  32. [attrSel1][attrSel2][attrSelN]:复合属性选择器,需要同时满足多个条件时使用;
  33. :first-child:匹配所给选择器( :之前的选择器)的第一个子元素类似的:first匹配第一个元素,但是:first-child选择器可以匹配多个:即为每个父级元素匹配第一个子元素。这相当于:nth-child(1);
  34. :first-of-type:结构化伪类,匹配E的父元素的第一个E类型的孩子。等价于:nth-of-type(1) 选择器。
  35. :last-child: 匹配最后一个子元素:last 只匹配最后一个元素,而此选择符将为每个父元素匹配最后一个子元素;
  36. :last-of-type:大体的意思跟 :first-of-type差不多,只是一个是第一个元素,一个是最后一个元素,这里就不赘述了;
  37. :nth-child:匹配其父元素下的第N个子或奇偶元素:eq(index) 匹配选择器指定序列的元素,而这个将为每一个父元素匹配子元素。:nth-child从1开始的,而:eq()是从0算起的!可以使用:nth-child(even)、:nth-child(odd)、:nth-child(3n)、:nth-child(2)、:nth-child(3n+1)、:nth-child(3n+2),要匹配元素的序号,从1开始;
  38. nth-last-child(n|even|odd|formual):选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个。即:倒序查找。(n:匹配子元素序号,必须为整数,注意从1开始而不是0;even:匹配所有偶数元素;odd:匹配所有奇数元素;formual:使用特殊公式如(an + b)进行选择. 例如:nth-last-child(3n+2) 从倒数第二个子元素开始,匹配每个3的倍数的元素。)
  39. nth-last-child-type(n|even|odd|formual):与nth-last-child类似,只匹配具备此标签元素。
  40. nth-child-type(n|even|odd|formual):与nth-child类似,只匹配具备此标签元素。
  41. nth-of-type(n|even|odd|formual):选择同属于一个父元素之下,并且标签名相同的子元素中的第n个;
  42. only-child:如果某个元素是父元素中唯一的子元素,那将会被匹配;
  43. only-child-type:选择所有没有兄弟元素,且具有相同的元素名称的元素;
  44. :input:匹配所有 input, textarea, select 和 button 元素;
  45. :text:匹配所有的单行文本框;
  46. :checkbox:匹配所有复选框;
  47. :password:匹配所有密码框;
  48. :radio:匹配所有单选按钮;
  49. :submit:查找所有提交按钮,匹配所有提交按钮,理论上只匹配 type=”submit” 的input或者button,但是现在的很多浏览器,button元素默认的type即为submit,所以很多情况下,不设置type的button也会成为筛选结果。为了防止歧义或者误操作,建议所有的button在使用时都添加type属性。
  50. :image:匹配所有图像域;
  51. :reset:匹配所有重置按钮;
  52. :button:匹配所有按钮;
  53. :file:匹配所有文件域;
  54. :enabled:匹配所有可用元素;
  55. :disabled:匹配所有不可用元素;
  56. :checked:匹配所有选中的被选中元素(复选框、单选框等,select中的option),对于select元素来说,获取选中推荐使用 :selected;
  57. :selected:匹配所有选中的option元素;
  58. $.escapeSelector(selector):这个方法通常被用在类选择器或者ID选择器中包含一些CSS特殊字符的时候,这个方法基本上与CSS中CSS.escape()方法类似,唯一的区别是jquery中的这个方法支持所有浏览器。


阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页