欢迎来到天天文库
浏览记录
ID:32366563
大小:55.50 KB
页数:6页
时间:2019-02-03
《jquery选择器种类》由会员上传分享,免费在线阅读,更多相关内容在应用文档-天天文库。
1、jQuery选择器种类由于经常使用jQuery,但是其中的很多选择器又不太能够熟练记牢使用,所以趁着上周有人分享,我再仔细的把jQuery的选择器过一遍,争取一次拿下,以后做到运用自如。jQuery选择器主要来分可以分为三种:(1)基本选择器(2)层次选择器(3)过滤选择器(4)表单选择器1、基本选择器基本选择器主要就是比较常见和常用的集中,是必须要掌握的。#IDid选择器返回一个对象$("#div").class类选择器返回集合$(".content")Element标签选择器返回集合$("input")*匹配所有元素返回集合$("*")selector1
2、,selector2,selector3,....合并每个选择器匹配的元素,返回集合$("#div,.class,input")2、层次选择器(主要是选择层次下面的元素)$("EF")选择E元素中的所有F后代元素(注意:是子孙元素)返回集合$("P>C")选择P元素下的C子元素(注意:是子元素)返回集合$("P+N")选择P元素后的相邻元素(即下一个兄弟元素),和$("P").next("N")方法执行效果相同$("P~S")选择P元素之后的所有S兄弟元素,和$("P").nextAll("S")方法执行效果相同,3、000">另pre()方法和next()方法相对。preAll()和nextAll()相对。注意siblings()方法和nextAll()方法的区别:siblings()是所有前后的兄弟元素,nextAll()是所有后面的兄弟元素第三和第四个选择器常常用后面的写法代替3、过滤选择器(主要是按照后面的过滤条件取出前面的元素)通过特定的过滤规则筛选DOM元素格式::过滤规则(以冒号作为过滤条件)分类:基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象过滤器(1)基本过滤器:first选取第一个元素,$("div:first"):las4、t选择最后一个元素,$("div:last"):not(selector)除了和选择器匹配元素之外的所有元素,$("input:not(.mytext)"):even索引是偶数的所有元素,$("tr:even"):odd索引是奇数的所有元素,$("tr:odd"):eq(index),:gt(index),lt(index)分别选择索引等于,大于和小于index的元素:header选择所有的标题元素,$(":header")如h1,h2,h3...:animated选择当前执行动画的元素,$("div:animated")(2)内容选择器:contains(5、text)文本内容为text的元素,$("div:contains('Hello')"):empty不包含子元素和文本内容的空元素:has(selector)包含有匹配选择器的元素为子元素的元素,$("div:has(p)"):parent选择包含的子元素或者文本内容的元素(3)可见性过滤器:hidden选择不可见的元素,$("div:hidden"):visible选择可见的元素,$("input:visible")在可见性选择器中,需要注意选择器:hidden,它不仅包括样式属性display为"none"的元素,也包括文本隐藏域(6、"hidden"/>)和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]…合并多个7、属性过滤器的结果(5)子元素过滤器(是选择子类元素的):first-child选择每个父元素的第一个子元素,$("ulli:first-child"):last-child选择每个父元素的最后一个子元素:only-child选择是父元素的唯一子元素:nth-child(even)选择每个父元素中索引是偶数的子元素:nth-child(odd)选择每个父元素中索引是奇数的子元素:nth-child(index)选择每个父元素中索引等于index的子元素,index有倍数形式,如3n,表示所有3的倍数,n=0,1,2…(6)表单对象属性过滤选择器:enabled8、选择所有可用的表单元素,$("#form1:enab
3、000">另pre()方法和next()方法相对。preAll()和nextAll()相对。注意siblings()方法和nextAll()方法的区别:siblings()是所有前后的兄弟元素,nextAll()是所有后面的兄弟元素第三和第四个选择器常常用后面的写法代替3、过滤选择器(主要是按照后面的过滤条件取出前面的元素)通过特定的过滤规则筛选DOM元素格式::过滤规则(以冒号作为过滤条件)分类:基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象过滤器(1)基本过滤器:first选取第一个元素,$("div:first"):las
4、t选择最后一个元素,$("div:last"):not(selector)除了和选择器匹配元素之外的所有元素,$("input:not(.mytext)"):even索引是偶数的所有元素,$("tr:even"):odd索引是奇数的所有元素,$("tr:odd"):eq(index),:gt(index),lt(index)分别选择索引等于,大于和小于index的元素:header选择所有的标题元素,$(":header")如h1,h2,h3...:animated选择当前执行动画的元素,$("div:animated")(2)内容选择器:contains(
5、text)文本内容为text的元素,$("div:contains('Hello')"):empty不包含子元素和文本内容的空元素:has(selector)包含有匹配选择器的元素为子元素的元素,$("div:has(p)"):parent选择包含的子元素或者文本内容的元素(3)可见性过滤器:hidden选择不可见的元素,$("div:hidden"):visible选择可见的元素,$("input:visible")在可见性选择器中,需要注意选择器:hidden,它不仅包括样式属性display为"none"的元素,也包括文本隐藏域(6、"hidden"/>)和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]…合并多个7、属性过滤器的结果(5)子元素过滤器(是选择子类元素的):first-child选择每个父元素的第一个子元素,$("ulli:first-child"):last-child选择每个父元素的最后一个子元素:only-child选择是父元素的唯一子元素:nth-child(even)选择每个父元素中索引是偶数的子元素:nth-child(odd)选择每个父元素中索引是奇数的子元素:nth-child(index)选择每个父元素中索引等于index的子元素,index有倍数形式,如3n,表示所有3的倍数,n=0,1,2…(6)表单对象属性过滤选择器:enabled8、选择所有可用的表单元素,$("#form1:enab
6、"hidden"/>)和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]…合并多个
7、属性过滤器的结果(5)子元素过滤器(是选择子类元素的):first-child选择每个父元素的第一个子元素,$("ulli: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
8、选择所有可用的表单元素,$("#form1:enab
此文档下载收益归作者所有