选择器是jquery的根基,在jQuery中,对事件处理,遍历dom和Ajax操作都依赖于选择器。不仅能简化代码，而且可以达到事半功倍的效果
jQuery的优点:
1.简洁的语法
2.完善的事件处理机制
css选择器
| 选择器 | 语法 | 描述 | 实例 |
| 标签选择器 | E{css规则} | 以文档标签作为选择符 | div{width：100px;} |
| ID选择符 | #id {css规则} | 以文档元素的唯一标识id号作为选择符 | #box{width:100px;height:100px;} |
| 类选择符 | E.className{css规则} | 以文档元素的类名作为选择符 | div.box{color:#fff;} .box{background:red;} |
| 群组选择器 | E1，E2，E3{css规则} | 多个元素应用同样的样式 | div,p,h1{padding:0;margin:0} |
| 后代选择器 | E F{css规则} | 以元素E的后代元素F作为选择符 | .box a{color:green;} |
| 通配符选择器 | *{css规则} | 以文档的所有元素作为选择符 | *{font-size:14px;} |
| 伪类选择器 | :after :before |
jQuery选择器
基本选择器是jquery中常用的选择器，也是最简单的选择器，他通过元素和标签来查找DOM中的元素，注意：在网页中，id名称只能使用一次，class允许多次使用。
基本选择器
| 选择器 | 描述 | 返回 | 实例 |
| #id | 根据匹配给定的id匹配一个元素 | 单个元素 | $("#test")选取id为test的元素 |
| .class | 根据给定的类名匹配元素 | 集合元素 | $(".test")选取class为test的元素 |
| element | 根据给定的元素名称 | 集合元素 | $("p")选取所有的p元素 |
| * | 匹配所有的元素 | 集合元素 | $("*")选取所有的元素 |
| Selector1，Selector2，Selector3... | 将每一个选择器匹配到的元素合并后一起返回 | 集合元素 | $("div,span,.p.box")选取所有div，所有span，和class名为box的p元素 |
层次选择器
| 选择器 | 描述 | 返回 | 实例 |
| $("ancestor descendant") | 选取ancestor元素里的所有descendant元素 | 集合元素 | $("div span")选取div里的所有span元素 |
| $("parent>child") | 选取parent下的所有子元素child | 集合元素 | $("div>span")选取div下的所有名为span的子元素 |
| $(" prev+next ") | 选取紧接在prev元素后面的next元素 | 集合元素 | $(".one+div")选取class名为one的下一个div元素 |
| $("prev~siblings") | 选取元素prev元素之后的所有兄弟siblings元素 | 集合元素 | $(".one~p")选取class名为one后面的所有子元素为siblings的元素 |
| 选择器 | 描述 | 返回 | 实例 |
| ：first | 选取第一个元素 | 单个元素 | $("div:first")选取所有div的第一个div元素 |
| ：last | 选取最后一个元素 | 单个元素 | $("div:last")选取所有div第最后一个div元素 |
| ：not（selector） | 选取除了selector元素之外的元素 | 集合元素 | $("div:not('.box')")选取除了class名为box元素的其他div元素 |
| ：even | 选取所有索引号为偶数的元素，索引号从0开始 | 集合元素 | $("div:even")选取所有索引号为偶数的div元素 |
| ：odd | 选取所有索引号为奇数的元素，索引号从0开始 | 集合元素 | $("div:odd")选取所有索引号为奇数的 div元素 |
| ：eq（index） | 选取索引号为index的元素 | 单个元素 | $("div:eq(0)")选取索引号为0的div元素，也就是第一个div元素 |
| ：gt(index) | 选过索引号大于index的元素 | 集合元素 | $("div:gt(2)")选取索引号大于2的div元素 |
| ：lt（index） | 选取索引号小于index的 元素 | 集合元素 | $("div:lt(3)")选取索引号 小于3的 div元素 |
| ：header | 选取网页中所有的标题元素（h1，h2，h3，h4，h5，h6） | 集合元素 | $(":header")选取网页中所有 的标题元素 H1，h2... |
| :animated | 选取当前正在执行动画的元素 | 集合元素 | $("div:animated")选取当前正在执行动画的 div |
内容过滤器
过滤器的规则主要体现在子元素和文本内容上.
| 选择器 | 描述 | 返回 | 实例 |
| ：conntains("text") | 筛选文本中包含"text"的元素 | 集合元素 | $("p:contains('你好')")选取文本包含“你好”的元素 |
| ：empty | 选取不包含子元素或文本的空元素 | 集合元素 | $("div:empty")选取不包含子元素或文本的div元素 |
| ：has(selector) | 选取含有selector元素的元素 | 集合元素 | $("div:has('p')")选取含有p元素的div元素 |
| ：parent | 选择含有子元素或文本的元素 | 集合元素 | $("div:parent")选取含有子元素或文本的div元素 |
可见性过滤器
可见性过滤器根据元素可不可见的状态
| 选择器 | 描述 | 返回 | 实例 |
| ：hidden | 选取所有不可见的元素 | 集合元素 | $(":hidden")选取所有不可见的元素，包括display：none；type="hidden";visiblity:hidden |
| :visible | 选取所有可见元素 | 集合元素 | $(":visible")选取所有可见元素 |
属性过滤器
属性过滤器通过元素的属性来获取属性的元素。
| 选择器 | 描述 | 返回 | 实例 |
| [attribute] | 选择拥有此属性的元素 | 集合元素 | $("div[id]")选取拥有id属性的 div元素 |
| [attribute=value] | 选择属性值为value的元素 | 集合元素 | $("div[title='box']")选取title为box的 div元素 |
| [attribute！=value] | 选择属性值不等于value的元素 | 集合元素 | $("div[title!='box']")选取title不为box的 div元素，其中没有title属性的元素也会被选择 |
| [attribut^=value] | 选择属性值以value开头的元素 | 集合元素 | $("div[title^=''b"])选取title以b开头的 div元素 |
| [attribut$=value] | 选择属性值以value结束的元素 | 集合元素 | $("div[title$=''b"])选取title以b结尾的 div元素 |
| [attribut*=value] | 选择属性值含有value的元素 | 集合元素 | $("div[title*=''b"])选取title属性值含有b的 div元素 |
| [selector1] [selector2] [selectorN] | 选择含有多个属性的选择器 | 集合选择器 | $("div[id][]")选取含有id属性和class属性，并且的div元素 |
子元素过滤选择器
| 选择器 | 描述 | 返回 | 实例 |
| ：nth-child(index/even/odd)注意：index从1开始 | 选取每个父元素下的第index元素或奇偶元素 | 集合元素 | $("ul li:nth-child(3)")选择ul下的第三个li |
| ：first-child | 选取父元素下的第一个子元素 | 集合元素 | $("ul li: first-child ")选择ul下的第一个li |
| ：last-child | 选取父元素下的最后一个子元素 | 集合元素 | $("ul li:last-child ")选择ul下的最后一个li |
| ：only-child | 如果某个元素是它父元素中惟一的子元素，那么将会被匹配。如果父元素中含有其它元素，刚不会匹配 | 集合元素 | $("ul li:only-child ")在ul中选择是唯一元素的li元素 |
表单对象属性过滤选择器
通过对选择的表单进行过滤
| 选择器 | 描述 | 返回 | 实例 |
| ：enabled | 选取所有可用元素 | 集合元素 | $("#form1 :enabled")选取form1下所有可用的元素 |
| ：disabled | 选取所有不可用元素 | 集合元素 | $("#form2:disabled")选取id为form2表单内的所有不可用的元素 |
| ：checked | 选中所有被选中的元素（单选，复选） | 集合元素 | $("#form3:checked")选中id为form3表单下所有被选中的元素 |
| ：selected | 选取所有被选中 的选项元素（下拉列表） | 集合元素 | $("select:selected")选取所有被选中的选项元素 |
表单选择器
| 选择器 | 描述 | 返回 | 实例 |
| ：inpput | 选取所有的<input><textarea><select><button>元素 | 集合元素 | $(":input")选取所有的<input><textarea><select><button>元素 |
| ：text | 选取所有的当行文本框 | 集合元素 | $(":text")选取所有的单行文本框 |
| :password | 选取所有的密码框 | 集合元素 | $(":password")选取所有的密码框 |
| ：radio | 选取所有的单选框 | 集合元素 | $(":radio")选取所有的单选框 |
| ：checkbox | 选取所有的多选框 | 集合元素 | $(":checkbox")选取所有的多选框 |
| ：submit | 选取所有的提交按钮 | 集合元素 | $(":submit")选取所有的提交按钮 |
| ：reset | 选取所有的重置按钮 | 集合元素 | $(":reset")选取所有的重置按钮 |
| ：image | 选取所有的图像按钮 | 集合元素 | $(":image")选取所有的图像按钮 |
| ：button | 选取所有的按钮 | 集合元素 | $("button")选取所有的按钮 |
| ：file | 选取所有的上传域 | 集合元素 | $(":file")选取所有的上传域 |
| ：hidden | 选取所有的不可见元素 | 集合元素 | $(":hidden")选取所有不可见 |
CSS3 target 选择器_:target伪类的使用
arget作为目标伪类选择器，是css3中的新特性之一。URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。:target 选择器可用于选取当前活动的目标元素。
css兄弟选择器(+ 和 ~)的使用和区别
这篇文章主要讲解css中兄弟选择器的使用，以及+和~的区别有哪些？+ 选择器：如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。 ~ 选择器：作用是查找某一个指定元素的后面的所有兄弟结点。
jquery的选择器有哪些？如何对元素取值和设置值
jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作， Jquery 选择器包括：基本选择器、层叠选择器 、基本过滤选择器 、内容过滤选择器、可视化过滤选择器.....
CSS中的focus-within伪类选择器
在CSS中 :focus-within 是一个伪类，CSS中伪类:focus-within能非常方便处理获取焦点状态， 当元素本身或其后代获得焦点时，:focus-within伪类的元素就会有效。
vue 选择器_实现scoped深度作用选择器
vue项目中，当<style>标签有scoped属性时，它的 CSS 样式只作用于当前组件中的元素，父组件的样式将不会渗透到子组件中。如果你希望 scoped 样式中的一个选择器能够作用得更深，例如影响子组件
css 选择器符号
空格：后代选择器，表示div元素里面所有的p元素。> 子选择器：表示div元素里面所有的子代（不含孙代及以后）p元素，~兄弟元素选择器：表示.cls元素往后的同级的p元素
css选择器总结_30个CSS3选择器
总结30个CSS3选择器：*选择器是选择页面上的全部元素，上面的代码作用是把全部元素的margin和padding设为0，最基本的清除浏览器默认样式的方法。
css节点选择器
基础选择器是选择器的所有选择器的基本组成元素，也最简单，包含如下5个类别：ID选择器，标签选择器，类选择器，属性选择器，通配选择器
CSS3 中关于 *-of-type 和 *-child的差异性及适用场景
CSS3 中有很多表示元素序号的选择器，有以下几种:first-child、:first-of-type、:last-of-type、:only-of-type、:only-child、:nth-child(n)、:nth-last-child(n)、:nth-of-type(n)、:nth-last-of-type(n)、:last-child
微信小程序文档没写支持, 但是实际支持的选择器有哪些?
目前支持的选择器有,在实践中我发现, 除了文档上说的几种选择器, 经过测试发现其实还有几种支持的选择器没有列举!还支持哪些选择器?
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!