admin 管理员组文章数量: 1086019
2024年2月29日发(作者:二郎神是一个什么样的人)
jQuery选择器种类
由于经常使用jQuery,但是其中的很多选择器又不太能够熟练记牢使用,所以趁着上周有人分享,我再仔细的把jQuery的选择器过一遍,争取一次拿下,以后做到运用自如。
jQuery选择器主要来分可以分为三种:(1)基本选择器 (2)层次选择器 (3)过滤选择器 (4) 表单选择器
1、基本选择器
基本选择器主要就是比较常见和常用的集中,是必须要掌握的。
#ID id选择器 返回一个对象 $("#div")
.class 类选择器 返回集合 $(".content")
Element 标签选择器 返回集合 $("input")
* 匹配所有元素 返回集合 $("*")
selector1,selector2,selector3,....合并每个选择器匹配的元素,返回集合 $("#div,.class,input")
2、层次选择器(主要是选择层次下面的元素)
$("E F") 选择E元素中的所有F后代元素(注意:是子孙元素) 返回集合
$("P>C") 选择P元素下的C子元素(注意:是子元素) 返回集合
$("P+N") 选择P元素后的相邻元素(即下一个兄弟元素),和$("P").next("N")方法执行效果相同
$("P~S") 选择P元素之后的所有S兄弟元素,和$("P").nextAll("S")方法执行效果相同,另pre()方法和next()方法相对。preAll()和nextAll()相对。
注意siblings()方法和nextAll()方法的区别:siblings()是所有前后的兄弟元素,nextAll()是所有后面的兄弟元素
第三和第四个选择器常常用后面的写法代替
3、过滤选择器(主要是按照后面的过滤条件取出前面的元素)
通过特定的过滤规则筛选DOM元素
格式::过滤规则(以冒号作为过滤条件)
分类:基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象过滤器
(1)基本过滤器
:first 选取第一个元素,$("div:first")
:last 选择最后一个元素,$("div:last")
:not(selector) 除了和选择器匹配元素之外的所有元素,$("input:not(.mytext)")
:even 索引是偶数的所有元素,$("tr:even")
:odd 索引是奇数的所有元素,$("tr:odd")
:eq(index),:gt(index),lt(index) 分别选择索引等于,大于和小于index的元素
:header 选择所有的标题元素,$(":header")如h1,
:animated 选择当前执行动画的元素,$("div:animated")
(2)内容选择器
:contains(text) 文本内容为text的元素,$("div:contains('Hello')")
:empty 不包含子元素和文本内容的空元素
:has(selector) 包含有匹配选择器的元素为子元素的元素 ,$("div:has(p)")
:parent 选择包含的子元素或者文本内容的元素
(3)可见性过滤器
:hidden 选择不可见的元素,$("div:hidden")
:visible 选择可见的元素,$("input:visible")
在可见性选择器中,需要注意选择器 :hidden,它不仅包括样式属性display为"none"的元素,也包括文本隐藏域()和visibility:hidden之类的元素。
.show(3000) .hide(1000
(4)属性过滤器
通过元素的属性或者属性值选择元素
[attri] 选择拥有此属性的元素,$("div[id]")
[attri=value] 选择属性的值等于value的元素
[attri!=value] 属性的值不等于value的元素
[attri^=value] 属性的值以value开头的元素
[attri$=value] 属性的值以value结尾的元素
[attri*=value] 属性的值中含有value的元素
[selector1][selector2]… 合并多个属性过滤器的结果
(5)子元素过滤器(是选择子类元素的)
:first-child 选择每个父元素的第一个子元素 ,$("ul li:first-child")
:last-child 选择每个父元素的最后一个子元素
:only-child 选择是父元素的唯一子元素
:nth-child(even) 选择每个父元素中索引是偶数的子元素
:nth-child(odd) 选择每个父元素中索引是奇数的子元素
:nth-child(index) 选择每个父元素中索引等于index的子元素,index有倍数形式,如3n,表示所有3的倍数,n=0,1,2…
(6)表单对象属性过滤选择器
:enabled 选择所有可用的表单元素,$("#form1 :enabled")
:disabled
:checked 选择所有被选中的单选按钮和复选框元素
:selected 选择所有下拉列表中被选中的选项元素
4、表单选择器
:input 选择所有表单元素,包括
:text 选择所有文本框,$("#form1:text")
:password 选择所有密码文本框
:radio 选择所有单选按钮
:checkbox 选择所有复选框
:submit :reset :button
:image :file :hidden
需要特别注意的是后迭代选择器和过滤选择器的不同:
例如:
使用如下的jQuery选择器分别获取他们。
var $t_a = $('.test :hidden'); //带空格的JQuery选择器(后迭代选择器,选取的是class为"test"的元素里面的隐藏元素)
var $t_b = $('.test:hidden'); //不带空格的jQuery选择器(过滤选择器,选取隐藏的class为"test"的元素)
var len_a = $t_;
var len_b = $t_;
alert("$('.test :hidden') = " + len_a); //输出 4
alert("$('.test:hidden') = " + len_b); //输出 3
几个常用的jQuery的方法如下:
show(): 显示隐藏的匹配元素。
css(name,value):给元素设置样式。
text(string):设置所有匹配元素的文本内容。
filter(expr):筛选出与指定表达式匹配的元素集合,其中expr可以是多个选择器的组合。
addClass(class),removeClass(class):为匹配的元素添加指定的类名。
toggle():交替执行方法。
下面是一个比较经典的例子:
- 佳能(27113)
- 索尼(1256)
- 三星(33556)
- 苹果(1024581)
- 柯达(1250)
- 卡西欧(5456)
- 富士(2458)
- 宾得(8754)
- 理光(2424)
- 奥林巴斯(87855)
- 明基(4424)
- 爱国者(57857)
- 尼康(2454)
- 松下(5784)
- 其他品牌相机(74548)
版权声明:本文标题:jQuery选择器种类 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.roclinux.cn/p/1709217319a540698.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论