JQuery CSS 选择器

jQuery选择器和CSS选择器的写法十分类似，都具有隐式迭代的特点，无需循环遍历符合选择器要求的每个元素，使用起来相对方便，通常，把css选择器用$("")包起来就成了一个jQuery选择器。

1、区别

那么两者的区别如下

• 两者的作用不同，CSS选择器找到元素后为设置该元素的样式，jQuery选择器找到元素后添加行为
• jQuery选择器拥有更好的跨浏览器的兼容性
• 选择器的效率
• CSS选择器的效率
  • id选择器（#myid）
  • 类选择器（.myclassname）
  • 标签选择器（div,h1,p）
  • 相邻选择器（h1+p）
  • 子选择器（ul > li）
  • 后代选择器（li a）
  • 通配符选择器（*）
  • 属性选择器（a[rel="external"]）
  • 伪类选择器（a:hover,li:nth-child）

　　　　上面九种选择器的效率是从高到低排下来的，基中ID选择器的效率是最高，而伪类选择器的效率则是最底。详细的介绍大家还可以点击Writing efficient CSS selectors。

• Query选择器的效率
  • id选择器(‘#id‘)和元素标签选择器(‘form‘)
  • 类选择器$(‘.className‘)
  • 属性选择器$(‘[attribute=value]‘)和伪类选择器$(‘:hidden‘)

　　　　上面的选择器效率是从高到低排下来的。

2、选择器

　　2.1、分类

　　　　2.1.1、基本选择器

2.1.1.1、标签选择器（元素选择器）

　　　　　　　　$(‘html标签名‘)　　　　　　　　　　//获取所有匹配标签的名称的元素

　　　　　　　　2.1.1.2、id选择器

　　　　　　　　$(‘#id名‘)　　　　　　　　　　　  　//获取指定id对应的元素

　　　　　　　　2.1.1.3、类选择器

　　　　　　　　$(‘.类名‘)　　　　　　　　　　　   　//获取所有类名对应的元素

　　　　　　　　2.1.1.4、并集选择器

　　　　　　　　$(‘选择器1, 选择器2, 选择器3.....‘)　　//获取多个选择器选中的元素

　　　　2.1.2、层级选择器

　　　　　　　　2.1.2.1、后代选择器

　　　　　　　　$(‘选择器A   选择器B‘)　　　　　　　//获取选择器A匹配元素中所有选择器B的元素，包含选择器B中的选择器B所指定的元素

　　　　　　　　2.1.2.2、子代选择器

　　　　　　　　$(‘选择器A >选择器B‘)　　　　　　　 //获取选择器A匹配元素下选择器B的所有元素，不包含选择器B中的选择器B所指定的元素

　　　　　　　　2.1.2.3、（+）相邻兄弟选择器

　　　　　　　　$(‘选择器A+选择器B‘)　　　　　　　 //获取选择器A匹配元素后面同级相邻的选择器B所指定的元素

　　　　　　　　2.1.2.4、（~）兄弟选择器

　　　　　　　　$(‘选择器A~选择器B‘)　　　　　　　 //获取选择器A匹配元素后面的同级相邻的所有选择器B元素

　　　　2.1.3、属性选择器

　　　　　　　　2.1.3.1、属性名称选择器

　　　　　　　　$(‘选择器A[属性名B]‘)　　　　　　　  //获取是选择器A匹配元素并且A中有属性名为B的所有元素

　　　　　　　　2.1.3.2、属性选择器

　　　　　　　　$(‘选择器A[属性名B = 值C]‘)　　　　  //获取是选择器A匹配元素并且A中有属性名为B且值为C的所有元素

　　　　　　　　2.1.3.3、复合属性选择器

　　　　　　　　$(‘选择器A[属性名B = 值C][属性名D = 值E]‘[属性名F = 值G]..‘)　　　　　//获取是选择器A匹配元素并且A中有属性名为B且值为C的且有属性名为D且值为E的且.....所有元素

　　　　2.1.4、过滤选择器

　　　　　　　　2.1.4.1、首元素选择器

　　　　　　　　$(‘选择器A:first‘)　　　　　　　  　　 //获取是选择器A匹配的第一个元素

　　　　　　　　2.1.4.2、未选择器

　　　　　　　　$(‘选择器A:last‘)　　　　　　　　　   //获取是选择器A匹配的最后一个元素

　　　　　　　　2.1.4.3、非元素选择器

　　　　　　　　$(‘选择器A:not(选择器B)‘)　　　　　  //获取是选择器A匹配的所有但不包含选择器B匹配的元素

　　　　　　　　2.1.4.4、偶数选择器

　　　　　　　　$(‘选择器A:even‘)　　　　　　　        //获取选择器A匹配元素下的所有偶数元素，index从0开始

　　　　　　　　2.1.4.5、奇数选择器

　　　　　　　　$(‘选择器A:odd‘)　　　　　                 //获取选择器A匹配元素下的所有奇数元素，index从0开始

　　　　　　　　2.1.4.6、等于索引选择器

　　　　　　　　$(‘选择器A:eq(index)‘)　　　　　　　//获取选择器A匹配元素下的指定索引的元素

　　　　　　　　2.1.4.7、大于索引选择器

　　　　　　　　$(‘选择器A:gt(index)‘)　　　　　　　 //获取选择器A匹配元素下的指定索引大于index值的元素

　　　　　　　　2.1.4.8、小于索引选择器

　　　　　　　　$(‘选择器A:lt(index)‘)　　　　　　　  //获取选择器A匹配元素下的指定索引小于index值的元素

　　　　　　　　2.1.4.9、标题选择器

　　　　　　　　$(‘选择器A:header‘)　　　　　　　    //获取是选择器A匹配元素下的h1~h6的所有元素

　　　　2.1.5、表单过滤选择器

　　　　　　　　2.1.5.1、可用元素选择器

　　　　　　　　$(‘选择器A:enabled‘)　　　　　　　 //获取匹配标签下的所有可用元素

　　　　　　　　2.1.5.2、不可用元素选择器

　　　　　　　　$(‘选择器A:disabled‘)　　　　　　　//获取匹配标签下的所有不可用元素

　　　　　　　　2.1.5.3、单选/复选 选中选择器

　　　　　　　　$(‘选择器A:checked‘)　　　　　　　 //获取选择器A匹配元素中单选/复选选中的元素

　　　　　　　　2.1.5.4、下拉列表选中选择器

　　　　　　　　$(‘选择器A:selected‘)　　     　　　　//获取选择器A匹配元素中下拉框选中的元素

——（完）——

2020年8月16日10:39:09

JQuery CSS 选择器

原文：https://www.cnblogs.com/kitor/p/13511756.html