JQuery中的选择器有哪些-成都快上网建站

JQuery中的选择器有哪些

这篇文章主要讲解了“JQuery中的选择器有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JQuery中的选择器有哪些”吧!

同仁网站制作公司哪家好,找成都创新互联!从网页设计、网站建设、微信开发、APP开发、自适应网站建设等网站项目制作,到程序开发,运营维护。成都创新互联于2013年成立到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联

css选择器

选择器语法描述示例
标签选择器E{css规则}以文档标签作为选择符div{width:100px;}
ID选择符#id {css规则}以文档元素的唯一标识id号作为选择符#box{width:100px;height:100px;}
类选择符E.className{css规则}以文档元素的类名作为选择符div.box{color:#fff;}
.box{background:red;}
群组选择器E1,E2,E3{css规则}多个元素应用同样的样式div,p,h1{padding:0;margin:0}
后代选择器E F{css规则}以元素E的后代元素F作为选择符.box a{color:green;}
通配符选择器*{css规则}以文档的所有元素作为选择符*{font-size:14px;}
伪类选择器请见链接:

jquery选择器

jquery中的选择器完全继承了css中的风格,利用jquery选择器,可以迅速便捷的找到文档中的DOM元素,然后给他们添加相应的行为。下面总结一下jquery中的选择器。

1. 基本选择器

基本选择器是jquery中常用的选择器,也是最简单的选择器,他通过元素和标签来查找DOM中的元素,注意:在网页中,id名称只能使用一次,class允许多次使用。

选择器描述返回示例
#id根据匹配给定的id匹配一个元素单个元素$("#test")选取id为test的元素
.class根据给定的类名匹配元素集合元素$(".test")选取class为test的元素
element根据给定的元素名称集合元素$("p")选取所有的p元素
*匹配所有的元素集合元素$("*")选取所有的元素
Selector1,Selector2,Selector3...将每一个选择器匹配到的元素合并后一起返回集合元素$("div,span,.p.box")选取所有div,所有span,和class名为box的p元素

 
2. 层次选择器
 
如果想通过DOM元素之间的层次关系来获取特定的元素,譬如:后台元素,兄弟元素,子元素,那么层次选择器是一个非常好的选择,下面就总结一下层次选择器。
                                                                

选择器描述返回示例
$("ancestor descendant")选取ancestor元素里的所有descendant元素集合元素$("div span")选取div里的所有span元素
$("parent>child")选取parent下的所有子元素child集合元素$("div>span")选取div下的所有名为span的子元素
$(" prev+next ")选取紧接在prev元素后面的next元素集合元素$(".one+div")选取class名为one的下一个div元素
$("prev~siblings")选取元素prev元素之后的所有兄弟siblings元素集合元素$(".one~p")选取class名为one后面的所有子元素为siblings的元素

注意:

$("prev+next")可以用$("prev").next("next元素")替换。
$("prev~siblings")可以用$("prev").nextAll("next元素")替换

例子:

$(".box+div")  等价  $(".box").next("div");
$(".box~div") 等价 $(".box").nextAll("div");

3. 过滤选择器

过滤选择器是根据特定的规则来筛选特定的DOM元素,过滤规则与css中的伪类选择器语法相同。过滤选择器以“:”开头,过滤选择器根据过滤烦人内容不同,可以分为基本过滤选择器,属性过滤,内容过滤,表单过滤子元素过滤,可见性过滤

 (1) 基本过滤选择器

选择器描述返回示例
:first选取第一个元素单个元素$("div:first")选取所有div的第一个div元素
:last选取最后一个元素单个元素$("div:last")选取所有div第最后一个div元素
:not(selector)选取除了selector元素之外的元素集合元素$("div:not('.box')")选取除了class名为box元素的其他div元素
:even选取所有索引号为偶数的元素,索引号从0开始集合元素$("div:even")选取所有索引号为偶数的div元素
:odd选取所有索引号为奇数的元素,索引号从0开始集合元素$("div:odd")选取所有索引号为奇数的 div元素
:eq(index)选取索引号为index的元素单个元素$("div:eq(0)")选取索引号为0的div元素,也就是第一个div元素
:gt(index)选过索引号大于index的元素集合元素$("div:gt(2)")选取索引号大于2的div元素
:lt(index)选取索引号小于index的 元素集合元素$("div:lt(3)")选取索引号 小于3的 div元素
:header选取网页中所有的标题元素(h1,h2,h3,h4,h5,h6)集合元素$(":header")选取网页中所有 的标题元素
H1,h2...
:animated选取当前正在执行动画的元素集合元素$("div:animated")选取当前正在执行动画的 div

  (2) 内容选择器

选择器描述返回示例
:conntains("text")筛选文本中包含"text"的元素集合元素$("p:contains('你好')")选取文本包含“你好”的元素
:empty选取不包含子元素或文本的空元素集合元素$("div:empty")选取不包含子元素或文本的div元素
:has(selector)选取含有selector元素的元素集合元素$("div:has('p')")选取含有p元素的div元素
:parent选择含有子元素或文本的元素集合元素$("div:parent")选取含有子元素或文本的div元素

  (3) 选择可见性选择器

选择器描述返回示例
:hidden选取所有不可见的元素集合元素$(":hidden")选取所有不可见的元素,包括display:none;type="hidden";visiblity:hidden
:visible选取所有可见元素集合元素$(":visible")选取所有可见元素

 (4) 属性过滤选择器

选择器描述返回示例
[attribute]选择拥有此属性的元素集合元素$("div[id]")选取拥有id属性的 div元素
[attribute=value]选择属性值为value的元素集合元素$("div[title='box']")选取title为box的 div元素
[attribute!=value]选择属性值不等于value的元素集合元素$("div[title!='box']")选取title不为box的 div元素,其中没有title属性的元素也会被选择
[attribut^=value]选择属性值以value开头的元素集合元素$("div[title^=''b"])选取title以b开头的 div元素
[attribut$=value]选择属性值以value结束的元素集合元素$("div[title$=''b"])选取title以b结尾的 div元素
[attribut*=value]选择属性值含有value的元素集合元素$("div[title*=''b"])选取title属性值含有b的 div元素
[selector1] [selector2] [selectorN]选择含有多个属性的选择器集合选择器$("div[id][class='box']")选取含有id属性和class属性,并且class="box"的div元素

  (5)子元素过滤选择器

选择器描述返回示例
:nth-child(index/even/odd)注意:index从1开始选取每个父元素下的第index元素或奇偶元素集合元素 $("ul li:nth-child(3)")选择ul下的第三个li
:first-child选取父元素下的第一个子元素集合元素 $("ul li: first-child ")选择ul下的第一个li
:last-child选取父元素下的最后一个子元素集合元素 $("ul li:last-child ")选择ul下的最后一个li
:only-child 如果某个元素是它父元素中惟一的子元素,那么将会被匹配。如果父元素中含有其它元素,刚不会匹配集合元素 $("ul li:only-child ")在ul中选择是唯一元素的li元素

 (6) 表单对象属性过滤选择器

此选择器主要是选取表单元素进行过滤

选择器描述返回示例
:enabled选取所有可用元素集合元素$("#form1 :enabled")选取form1下所有可用的元素
:disabled选取所有不可用元素集合元素$("#form2:disabled")选取id为form2表单内的所有不可用的元素
:checked选中所有被选中的元素(单选,复选)集合元素$("#form3:checked")选中id为form3表单下所有被选中的元素
:selected选取所有被选中 的选项元素(下拉列表)集合元素$("select:selected")选取所有被选中的选项元素

 4. 表单选择器

jquery中专门加入了表单选择器

选择器描述返回示例
:input选取所有的