读书人

Jquery核心-选择器

发布时间: 2012-11-07 09:56:10 作者: rapoo

Jquery核心----选择器
Jquery核心----选择器
一:在jQuery中最核心的要属于选择器:而jQuery的选择分为很多种,但是重要的有以下几种:
1:基本选择器:
A:id选择器:在id选择器中,是根据元素的id来获得元素的相关属性的:$(“#id名称”):注意的是如果一个页面如果存在多个同名的id,根据id选择器,只能找到第一个该id的内容:
B:class选择器:class选择器是根据元素中的属性class来获得的,返回的是一个集合:注意的是在jQuer中,并不是非要在样式里声明该样式,重要的是元素中class属性有值:元素中的class的名称可以相同,所以返回的是一个数组!
C:element:元素选择器:根据制定的元素来匹配所有的元素
D:* 匹配所有元素 ---多用于结合上下文来搜索。
E:符合选择器,制定多个选择器,将所有的匹配的元素合并在一个集合中返回来!
2:层次选择器分为四种
A: ancestor ancestor:
ancestor (Selector) : 任何有效选择器或者元素
descendant (Selector) : 用以匹配元素的选择器,并且它是第一个选择器的后代元素
这种选择器是返回匹配的所有后代元素:
例如:$(“div span”)是匹配所有div 后代元素中的所有span元素
B:parent > child
parent (Selector) : 任何有效选择器
child (Selector) : 用以匹配元素的选择器,并且它是第一个选择器的子元素
这种选择器是返回parent元素的子元素中的child元素
比如$(“div > span”)是匹配所有div子元素中的所有span元素
C: prev + next
prev (Selector) : 任何有效选择器
next (Selector) :一个有效选择器并且紧接着第一个选择器
这种选择器是匹配同级目录下的下一个元素,相当于next().同辈下个节点-------------------prev()。同辈上一个节点
例如:$(“div+sapn”);匹配所有div的span元素,返回的是一个集合,注意的是,是紧接着div后面的span元素。
D: prev ~ siblings
prev (Selector) : 任何有效选择器
+siblings (Selector) : 一个选择器,并且它作为第一个选择器的同辈
这种选择器是匹配prev后面的所有siblings元素---可以用nextAll来代替该功能!
例如:$(“div~ span”):匹配所有div后面的span元素:注意的是span和div是同一层次的元素:相当于$(“div”).nextAll(“span”);

3:简单选择器:
Fast选取器获得匹配的第一个元素:last选择器获得匹配的最后一个选择器:
Not选择器是获得去除所有与给定选择器匹配的元素!even选择器是获得匹配所有索引值为偶数的元素,从 0 开始计数!---odd选择器是获得匹配所有索引值为奇数的元素,从 0 开始计数!-------eq选择器是获得匹配一个给定索引值的元素!!!---gt选择器是获得匹配所有大于给定索引值的元素!----lt选择器是获得匹配所有小于给定索引值的元素!--------header选择器是获得h1——————h6之类的选择器

4:内容选择器
A:contains(text);返回所有含有text文本的元素
B:empty:匹配所有不包含子元素或者文本的空元素
C:has(selector): 匹配含有选择器所匹配的元素的元素
D:parent: 匹配含有子元素或者文本的元素
5:可见性选择器:
A:hidden选择器是:匹配所有的不可见元素,input 元素的 type 属性为 "hidden" 的话也会被匹配到
B:visible: 匹配所有的可见元素
6:属性选择器
:[attribute]:选取拥有此属性的元素
:[attribute=value]:选取属性的值为value的元素
:[attribute!=value]:选择属性值不等于value的元素
:[attribute^=value]:选择属性值以value开始的元素
:[attribute$=value]选择属性的值以value结束的元素
:[attribute*=value]:选择属性的值含有value的元素
:[selector1][selector2][selectorn]用属性选择器合成一个复合属性选择器,满足多个条件。每选择一次,缩小一次范围!
7:子元素选择器
:nth-child(index/even/odd/equation)选取每个父元素的第一子元素或者奇偶元素
:first-child:选取每个父元素的第一个元素
:last-child:选择每个父元素的最后一个子元素、
:only-child:如果每个元素的它父元素中唯一的子元素,
8:表单属性选择器
:enabled:选取所有可用元素
:disabled:选取所有不可用元素
:checked:选取所有被选中的元素(单选框,复选框)
:选择所有被选中的选择元素(下拉选框)
。。。。。。。
9:表单选择器:----一切表单元素

读书人网 >编程

热点推荐