jQuery 选择器(61种)整理总结

前端之家收集整理的这篇文章主要介绍了jQuery 选择器(61种)整理总结前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1. #id : 根据给定的ID匹配一个元素

标签

标签

结果:

这是div标签1

这是div标签2

这是p标签

3. .class : 根据给定的css类名匹配元素

标签

标签

结果:

这是p标签

这是div标签

5. 多选择器selector1,selector2,selectorN : 指定任意多个选择器,并将匹配到的元素合并到一个结果内

标签

标签

标签
标签

结果:

这是第一个span标签

这是第二个span标签

7. parent > child : 在给定的父元素下匹配所有的子元素

这是第一个span标签

这是第二个span标签

结果:

这是第一个span标签

这是第二个span标签

8. prev + next : 匹配所有紧接在 prev 元素后的 next 元素

这是第一个p标签

这是第二个p标签

结果:

这是第一个p标签

这是第二个p标签

这是第三个p标签

10. :first : 获取第一个元素

这是第一个p标签

这是第二个p标签

这是第三个p标签

结果:

这是第一个p标签

这是第二个p标签

这是第三个p标签

12.:even : 匹配所有索引值为偶数的元素,从 0 开始计数

这是索引值为0的p标签

这是索引值为1的p标签

这是索引值为2的p标签

这是索引值为3的p标签

结果:

这是索引值为0的p标签

这是索引值为1的p标签

这是索引值为2的p标签

这是索引值为3的p标签

14. :eq(index) : 匹配一个给定索引值的元素

这是索引值为0的p标签

这是索引值为1的p标签

这是索引值为2的p标签

结果:

这是索引值为0的p标签

这是索引值为1的p标签

这是索引值为2的p标签

16. :lang(language) : 选择指定语言的所有元素

标签
标签
标签

结果:

这是第一个p标签

这是第二个p标签

这是第三个p标签

18. :lt(index) : 匹配所有小于给定索引值的元素

这是索引值为0的p标签

这是索引值为1的p标签

这是索引值为2的p标签

结果:

这是p标签

这是h3标签

这是h4标签

20. :animated : 匹配所有正在执行动画效果的元素

结果:

这是有内容的p标签

这是有内容的p标签

26. :has(selector) : 匹配含有选择器所匹配的元素的元素

这是包含p元素的div标签

这是div标签中的p标签

这是没有p元素的div标签

结果:

这是div标签中的p标签

这是有内容的div标签

28. :hidden : 匹配所有不可见元素,或者type为hidden的元素

这是显示的div标签

结果:

29. :visible : 匹配所有的可见元素

这是显示的div标签

结果:

30. [attribute] : 匹配包含给定属性的元素

标签
这是没类名的div标签

结果:

这是第一个div标签

这是第二个div标签

32. [attribute!=value] : 匹配所有不含有指定的属性,或者属性不等于特定值的元素

标签
标签

结果:

这是第一个div标签

这是第二个div标签

这是第三个div标签

34. [attribute$=value] : 匹配给定的属性是以某些值结尾的元素

标签
标签
标签

结果:

这是第一个div标签

这是第二个div标签

这是第三个div标签

36. [attrSel1][attrSel2][attrSelN] : 复合属性选择器,需要同时满足多个条件时使用

标签
标签
标签

结果:

这是第一个div中的第一个p标签

这是第一个div中的第二个p标签

这是第二个div中的第一个p标签

这是第二个div中的第二个p标签

38. :first-of-type : 结构化伪类,匹配E的父元素的第一个E类型的子元素

这是第一个div中的div标签

这是第一个div中的第一个p标签

这是第一个div中的第二个p标签

这是第二个div中的第一个p标签

这是第二个div中的第二个p标签

结果:

这是第一个div中的第一个p标签

这是第一个div中的第二个p标签

这是第二个div中的第一个p标签

这是第二个div中的第二个p标签

40. :last-of-type : 结构化伪类,匹配E的父元素的最后一个E类型的子元素,大体的意思跟 :first-of-type 差不多,只是一个是第一个元素,一个是最后一个元素

这是第一个div中的第一个p标签

这是第一个div中的第二个p标签

这是第一个div中的div标签

这是第二个div中的第一个p标签

这是第二个div中的第二个p标签

结果:

这是第一个div中的第一个p标签

这是第一个div中的第二个p标签

这是第二个div中的第一个p标签

这是第二个div中的第二个p标签

42. :nth-last-child : 选择所有他们父元素的第n个子元素,计数从最后一个元素开始到第一个,序号从1开始

注意:要有父级元素

这是div中的第一个p标签

这是div中的第二个p标签

这是div中的第三个p标签

结果:

这是div中的第一个p标签

这是div中的第二个p标签

这是div中的第三个p标签

这是div中的div标签

44. :nth-of-type : 选择同属于一个父元素之下,并且标签名相同的子元素中的第n个,序号从1开始

这是div标签

这是第一个p标签

这是第二个p标签

这是第三个p标签

这是第四个p标签

结果:

这是div标签

这是第一个p标签

这是第二个p标签

46. :only-of-type : 选择所有没有兄弟元素,且具有相同的元素名称的元素,如果父元素有相同的元素名称的其他子元素,那么没有元素会被匹配

这是div标签

这是第一个p标签

这是第二个p标签

这是第三个p标签

结果:

48. :text : 匹配所有的单行文本框

结果:

50. :radio : 匹配所有单选按钮

结果:

51. :checkBox : 匹配所有复选框

结果:

52. :submit : 匹配所有提交按钮

54. :reset : 匹配所重置按钮

结果:

56. :file : 匹配所有文件

结果:

58. :disabled : 匹配所有不可用元素

60. :selected : 匹配所有选中的option元素

原文链接:https://www.f2er.com/jquery/45565.html
61种选择器jQuery选择器选择器选择器选择器总结

猜你在找的jQuery相关文章