Jquery practice_Reading Notes 2 Selector_jquery

基本的CSS选择器
熟悉web开发的人员一定对css的选择功能相当的了解，通过css选择功能，我们可以在css样式文件里轻松的将样式应用到选择的页面元素上。jQuery也正是采用了这样的机制，使jQuery的元素选择能力易常强大。
a——选择所有元素
#specialID——选择匹配id为specialID的元素
.specialClass——选择匹配拥有css类sepcialClass的元素
a#specialID.specialClass——选择匹配id为specialID、有用css类specialClass的元素
p a.specialClass——匹配拥有css类specialClass、在

元素内的元素
除了支持传统的css选择器，Jquery还支持CSS3选择功能。

 

子节点选择器
$("p > a") 选择元素

的直接子节点的元素，非直接子节点的元素将不会被选择到

特性选择器
特性选择器在匹配的选择元素上过滤满足某特性(属性)的元素
如我们需要做如下的选择：匹配所有指向本网站之外地址的链接，我们可以这样选择
$("a[href^=http://")  该选择器选择具有href属性，且href属性值以http://开始的链接元素
特性选择的语法是：
选择具有某特性(属性)的元素
form[method]
选择具有某特性，且属性值为指定值的元素
input[type=text]
选择匹配特性以特定字符开头的元素
div[title^=my]  ——选择匹配title特性值已my开头的所有div元素
选择匹配特性以特定字符结束的元素
a[href$=.pdf] ——选择引用了pdf文件的所有链接元素
其他
a[href*=jquery.com]选择引用jQuery网站的所有链接元素

过滤符
通过过滤符选择器可以在已选择的元素中过滤出需要的元素，上面的特性选择器也属于过滤符，另外还有“:”字符
如：
li:has(a)—— 选择匹配包含元素的所有

元素

1. 基础过滤符：
:first：匹配多个对象中的第一个对象
:last：匹配多个对象中的最后一个对象
:not(selector)：匹配去除了not后面选择符中内容的项，not中的selector只能是过滤选择器，不能是查找选择器
:even：匹配所有对象中的第偶数个
:odd：匹配所有对象中的第奇数个
:eq(index)：匹配某一下表的单独某元素
:gt(index)：匹配大于某一下标的所有元素
:lt(index)：匹配小于某一下标的所有元素
:header：匹配所有的header元素，例如h1,h2,h3,h4,h5,h6
:animated：匹配所有有动画效果的元素
2. 内容过滤符：
:contains(text)：匹配内部拥有该文本元素的对象，包含间接有用的情况
:empty：匹配所有没有子元素的对象
:has(selector)：匹配所有至少含有一个子选择符的对象
:parent：匹配元素，这些元素包含子元素（包括文本元素）
3. 可见性过滤符：
:hidden：匹配所有隐藏对象，或者input中的hidden类型
:visible：匹配所有可见的对象
4. 子过滤符：
:nth-child(index/even/odd/equation)：匹配子元素中的某一下标/偶数/奇数/等式的对象，:eq(index)只能匹配某单一对象的子元素特征，而这个方法可以匹配多个对象的某一子元素共同特征  nth-child过滤器，从1开始计数，这主要是与css标准兼容。
:first-child：匹配第一个子元素
:last-child：匹配最后一个子元素
这两个匹配符也可以对多个父对象的所有子元素进行匹配操作
:only-child：如果一个父元素只有一个子元素，就匹配这个子元素
5. 表单过滤符
:input  ：匹配表单内input元素
:text  ：匹配表单内input type为text的元素
:password  ：匹配表单内input type为password的元素
:radio  ：匹配表单内input type为radio的元素
:checkbox  ：匹配表单内input type为checkbox的元素
:submit  ：匹配表单内input type为submit的元素
:image  ：匹配表单内image的元素
:reset  ：匹配表单内input type为reset的元素 
:button  ：匹配表单内input type为button的元素
:file  ：匹配表单内input type为file的元素.
:hidden  ：匹配表单内input type为hidden的元素或者hidden区域
:enabled  ：匹配所有启用元素
:disabled  ：匹配所有非启用元素
:checked  ：匹配所有选中元素
:selected  ：匹配所有下拉列表选中元素

The conceptual difference between search selectors and filter selectors
In order to use jQuery flexibly, it is very important to understand the difference between search selectors and filter selectors. Filter selectors, which narrow the set of elements being matched by applying higher selection criteria to the elements (such as filter attributes or other related values); lookup selectors, such as descendant selectors (spaces), child node selectors (> ;) and sibling selectors ( ), etc., find other elements that have some relationship to the selected element, rather than limiting the scope of the match by applying criteria to the matched elements.