jQuery选择器种类.pdf

《jQuery选择器种类.pdf》由会员分享，可在线阅读，更多相关《jQuery选择器种类.pdf（5页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、-jQueryjQuery 选择器种类选择器种类由于经常使用 jQuery，但是其中的很多项选择择器又不太能够熟练记牢使用，所以趁着上周有人分享，我再仔细的把jQuery 的选择器过一遍，争取一次拿下，以后做到运用自如。jQueryjQuery 选择器主要来分可以分为三种：选择器主要来分可以分为三种：1 1根本选择器根本选择器 2 2层次选择器层次选择器 3 3过滤选择器过滤选择器(4)(4)表单项选择择器表单项选择择器1 1、根本选择器、根本选择器根本选择器主要就是比较常见和常用的集中，是必须要掌握的。#ID id 选择器 返回一个对象$(#div).class 类选择器 返回集合$(.co

2、ntent)Element 标签选择器 返回集合$(input)*匹配所有元素 返回集合$(*)selector1,selector2,selector3,.合并每个选择器匹配的元素，返回集合$(#div,.class,input)2 2、层次选择器主要是选择层次下面的元素、层次选择器主要是选择层次下面的元素$(EF)选择 E 元素中的所有 F 后代元素(注意：是子孙元素)返回集合$(PC)选择 P 元素下的 C 子元素注意：是子元素 返回集合$(P+N)选择 P 元素后的相邻元素即下一个兄弟元素，和$(P).ne*t(N)方法执行效果一样$(PS)选择 P 元素之后的所有 S 兄弟元素，和$

3、(P).ne*tAll(S)方法执行效果一样，另 pre()方法和 ne*t()方法相对。preAll()和 ne*tAll()相对。注意 siblings()方法和 ne*tAll()方法的区别：siblings()是所有前后的兄弟元素，ne*tAll()是所有后面的兄弟元素第三和第四个选择器常常用后面的写法代替3 3、过滤选择器主要是按照后面的过滤条件取出前面的元素、过滤选择器主要是按照后面的过滤条件取出前面的元素通过特定的过滤规则筛选DOM 元素格式:过滤规则(以冒号作为过滤条件)分类：根本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤和表单对象过滤器(1)根本过滤器:first 选取

4、第一个元素，$(div:first):last 选择最后一个元素，$(div:last):not(selector)除了和选择器匹配元素之外的所有元素，$(input:not(.myte*t):even 索引是偶数的所有元素，$(tr:even):odd 索引是奇数的所有元素，$(tr:odd):eq(inde*),:gt(inde*),lt(inde*)分别选择索引等于，大于和小于inde*的元素:header 选择所有的标题元素，$(:header)如 h1,h2,h3.:animated 选择当前执行动画的元素，$(div:animated)(2)内容选择器:contains(te*t)

5、文本内容为 te*t 的元素，$(div:contains(Hello):empty 不包含子元素和文本内容的空元素:has(selector)包含有匹配选择器的元素为子元素的元素，$(div:has(p):parent 选择包含的子元素或者文本内容的元素.z.-(3)可见性过滤器:hidden 选择不可见的元素，$(div:hidden):visible 选择可见的元素，$(input:visible)在可见性选择器中，需要注意选择器:hidden，它不仅包括样式属性display 为none的元素，也包括文本隐藏域()和 visibility:hidden 之类的元素。.show(3000

6、).hide(1000(4)属性过滤器通过元素的属性或者属性值选择元素attri 选择拥有此属性的元素，$(divid)attri=value 选择属性的值等于 value 的元素attri！=value 属性的值不等于 value 的元素attri=value 属性的值以 value 开头的元素attri$=value 属性的值以 value 结尾的元素attri*=value 属性的值中含有 value 的元素selector1selector2 合并多个属性过滤器的结果(5)子元素过滤器(是选择子类元素的):first-child 选择每个父元素的第一个子元素，$(ul li:first

7、-child):last-child 选择每个父元素的最后一个子元素:only-child 选择是父元素的唯一子元素:nth-child(even)选择每个父元素中索引是偶数的子元素:nth-child(odd)选择每个父元素中索引是奇数的子元素:nth-child(inde*)选择每个父元素中索引等于 inde*的子元素，inde*有倍数形式，如 3n,表示所有 3 的倍数，n=0,1,2(6)表单对象属性过滤选择器:enabled 选择所有可用的表单元素，$(#form1:enabled):disabled:checked 选择所有被选中的单项选择按钮和复选框元素:selected 选择所

8、有下拉列表中被选中的选项元素4 4、表单项选择择器、表单项选择择器:input 选择所有表单元素，包括等元素:te*t 选择所有文本框,$(#form1:te*t):password 选择所有密码文本框:radio 选择所有单项选择按钮:checkbo*选择所有复选框:submit:reset:button:image:file:hidden需要特别注意的是后迭代选择器和过滤选择器的不同：例如：aabbccdd.z.-eeff使用如下的 jQuery 选择器分别获取他们。var$t_a=$(.test:hidden);/带空格的 JQuery 选择器 后迭代选择器，选取的是 class 为te

9、st的元素里面的隐藏元素var$t_b=$(.test:hidden);/不带空格的 jQuery 选择器过滤选择器，选取隐藏的class 为test的元素var len_a=$t_a.length;var len_b=$t_b.length;alert($(.test:hidden)=+len_a);/输出 4alert($(.test:hidden)=+len_b);/输出 3几个常用的 jQuery 的方法如下：show()：显示隐藏的匹配元素。css(name,value)：给元素设置样式。te*t(string)：设置所有匹配元素的文本内容。filter(e*pr)：筛选出与指定表达

10、式匹配的元素集合，其中e*pr 可以是多个选择器的组合。addClass(class),removeClass(class)：为匹配的元素添加指定的类名。toggle()：交替执行方法。下面是一个比较经典的例子：下面是一个比较经典的例子：jQuery test$(function()/alert(shit it);var$category=$(ul li:gt(5):not(:last);$category.hide();var$toggleBtn=$(div.showmore a);/*$toggleBtn.click(function()if($category.is(:visible)$

11、category.hide();/隐藏$(.showmore a span).css(background,url(img/down.jpg)no-repeat 0 0).te*t(显示全部品牌);$(ul li a).removeClass(promoted);else$category.show();/显示全部品牌$(.showmore a span).css(background,url(img/up1.jpg)no-repeat 0 0).te*t(精简显示品牌);$(ullia).filter(:contains(佳 能),:contains(尼 康),:contains(奥 林 巴

12、 斯).addClass(promoted);.z.-return false;/超不跳转);*/$toggleBtn.toggle(function()$category.show();/显示全部品牌$(.showmore a span).css(background,url(img/up1.jpg)no-repeat 0 0).te*t(精简显示品牌);$(ullia).filter(:contains(佳 能),:contains(尼 康),:contains(奥 林 巴 斯).addClass(promoted);return false;/超不跳转,function()$catego

13、ry.hide();/隐藏$(.showmore a span).css(background,url(img/down.jpg)no-repeat 0 0).te*t(显示全部品牌);$(ul li a).removeClass(promoted);return false;/超不跳转););.promoted font-family:Courier New,Courier,monospace;color:#F00;font-size:20p*;white-space:pre;佳能(27113)索尼(1256)三星(33556)苹果(1024581)柯达(1250)卡西欧(5456)富士(2458)宾得(8754)理光(2424)奥林巴斯(87855)明基(4424)爱国者(57857).z.-尼康(2454)松下(5784)其他品牌相机(74548)show all brands.z.