jquery之selectors

Posted 2020-06-08

　　我们之所以会用到jQuery这款javascript库，很大部分原因是它强大的选择器，有了它大大简化了代码，确实带来很多方便。

　　jQuery官方网站，在里面下载最新的jQuery库。下面就直接进入jQuery的选择器。

　　一、基础类选择器

　　　　1 All Selector ("*")  所有选择器，会选择所有元素，因此它的任务量极大，速度自然是最慢的。

　　　　2 Class Selector (".class")   类名选择器。

　　　　3 ID Selector ("#id")  id选择器。

　　　　4 Multiple Selector ("selector1, selector2, selectorN") 多选择器，这种以逗号分隔开的是或的逻辑表达方式，即只要满足他们当中的一个条件。

　　　　5 ance desc选择器。 $("div p" ).css("background","yellow"); 选择div下的所有p标签,不论其p元素是它的孩子节点还是更深的节点。

　　　　6 parent > child选择器 $(“div > p”); 选择div的孩子元素p。

　　　　7 prev + next选择器 $(“div + h1”)。选择与div紧邻，且在div之后的第一个处在同一级的p元素，有且仅有一个。

　　　　

　　　　8 prev ~ next选择器 $(“div ~ h1”) 。选择在div下面的所有p标签（处在同一级）。

　　　　

　　以上都是基础类选择器，不需要过多解释，如有疑惑到官网看文档。

　　二、属性选择器

　　　　1 [name="value"]    选择属性值等于某个字符串。

　　　　2 [name!="value"]    选择属性值不等于某个字符串。

　　　　3 [name*="value"]    选择属性值包含某个字符串。

　　　　4 [name$="value"]    选择属性值以某个字符串结束。

　　　　5 [name^="value"]    选择属性值以某个字符串开头。

　　　　常用的属性选择器就这些，以后碰到再去看其他的。

　　三、过滤选择器

　　　　1 :eq() 在匹配的集合中选择索引值为index的元素。这里要注意":"前后都不能有空格。

　　　　2 :first 获取指定父元素中的首个子元素，但该选择器返回的只有一个元素，并不是一个集合。

　　　　3 :contains(text)  选择某个包含text的元素。

　　　　4 :has(code)  选择某个包含code的元素，其中code为标签名。

　　　　5 :hidden  选择隐藏元素。

　　　　6 :visible  选择可见元素。

　　　　7 :first-child 获取每个父元素中返回的首个子元素，它是一个集合，常用多个集合数据的选择处理。

　　　　8 :last-child 这个就不用说了

　　　　9 :nth-child(index)  选择索引为index的元素，返回的为一个集合。将子集中的一个设为display:none ,不会对结果造成影响。

　　四、表单选择器

　　　　1 :input  选择所有input所包含的表单元素，比如button 

　　　　2 :text 选择type为text的元素

　　　　其他直接上图吧

　　　　

　　　这里要注意selected只能用于<selected>标签，选择selected下拉菜单中所有选中项，checked可以运用于复选框和单选框。