jQuery中的基本选择器「简单记住」

2022-12-27    分类： 网站建设

本教程操作环境：windows7系统、jquery1.10.0版本。

1.基本选择器

#id$（"#test").css("background","#bbffaa")//选取id为test的元素 element$("p");//选取所有的

元素 *$("*");//选取所有元素 .class$(".test");//选取类名为test的元素 selector1,selector2$("div,p.myClass,span");//组合选择

2.层次选择器

$("divspan")//选取
里所有元素（所有后代元素） $("div>span")//选取
元素下元素名为的子元素（只限于子元素） $(".one+div")//选取class为one的下一个
同辈元素 等价于$(".one").next("div") $("#two~div")//选取id为two的元素后面的所有
同辈元素 等价于$("#two").nextAll("div")

3.过滤选择器（以“：”开头）
1.基本过滤

:first选取个元素:$("div:first")选区所有
元素中个
元素:last选取最后一个元素$("div:last"):not(selector)去除所有给定选择器匹配的元素$("input:not(.myClass)")选取class不是myClass的元素:even选取索引数是偶数的元素索引从0开始$("div:even"):odd选取索引数是奇数的元素索引从0开始$("div:odd"):eq(index)选取索引数等于index的元素$("div:eq(2)"):gt(index)选取索引数大于index的元素$("div:gt(2)"):lt(index)选取索引数小于index的元素$("div:lt(2)"):header选取所有标题元素

..

$(":header"):animated选取所有当前正在执行动画的的所有元素$("div:animated")选取正在执行动画的
元素:focus选取当前获得焦点的元素$(":focus")

2.内容过滤

:contains(text)选取含有文本内容为text的元素$("div:contains('我')")选取含有文本"我"的
元素:empty选取不包含子元素或者文本的空元素$("div:empty")选取不包含子元素（包括文本元素）的
空元素:has(selector)选取含有选择器所匹配的元素的元素$("div:has(p)")选取含有

元素的

元素:parent选取还有子元素或文本的元素$("div:parent")选取拥有子元素（包括文本元素）的
元素

3.可见性过滤

:hidden选取所有不可见元素$(:hidden)选取所有不可见元素包括和等如果只想选取元素，可以使用$("input:hidden"):visible选取所有可见元素$(div:visible)选取所有可见的
元素

例如 显示隐藏的

元素$(div:hidden).show(3000)

4.属性过滤（Jquery中的单引号和双引号没有区别，如果一个字符串，外面用单引号里面的双引号就字符串了，反之，如果外面是双引号里面的单引号就是字体串,双引号不能组合双引号使用 ，单引号亦然，但是平时要尽量使用单引号）

[attribute]选取拥有此属性的元素$("div[id]")选取拥有属性id的元素[attribute=value]选取属性值为value的元素$("div[title=test]")选取属性title为“test”的
元素[attribute!=value]选取属性的值不等于value的元素$("div[title!=test]")[attribute^=value]选取属性的值以value开始的元素$("div[title^=te]")选取属性title的值以te开始的div元素[attribute$=value]选取属性的值以value结束的元素$("div[title$=est]")选取属性title的值以est结束的div元素[attribute*=value]选取属性的值含有value的元素$("div[title*=es]")选取属性title的值含有es的div元素[attribute|=value]选取属性等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符"-"）的元素$('div[title|="en"]')[attribute~=value]选取属性用空格分隔的值中包含一个给定值的元素$('div[title~="uk"]')[attribute1][attribute2][attributeN]用属性选择器合并成一个复合属性选择器，满足多个条件。每选择一次，缩小一次范围$("div[id][title$='test']")

5.子元素过滤

:nth-child(index/evenn/odd/equation)选取每个父元素下得第index个子元素或者奇偶元素（index从1算起）解析：:eq(index)只匹配一个元素，而:nth-child将为每一个父元素匹配子元素，并且:nth-child(index)的index是从1开始的，而:eq(index)是从0开始的:first-child选取每个父元素的个子元素集合元素解析：:first只返回单个元素，而:first-child选择符将为每个父元素匹配个子元素。例如$("ulli:first-child");选取每个
    中个
  • 元素:last-child选取每个父元素的最后一个子元素解析：:last只返回单个元素，:last-child选择符将为每个父元素匹配最后一个子元素例如$("ulli:last-child")；选择
      中最后一个
    • 元素:only-child如果某个元素是他父元素中的子元素，那么将会被匹配。如果父元素中含有其他元素，则不会被匹配$("ulli:only-child")在
        中选取是子元素的
      • 元素

        6.表单对象属性过滤

        :enabled选取所有可用元素$("#form1:enabled")选取id为form1的表单内所有可用元素:disabled选取所有不可用元素$("#form1:disabled"):checked选取所有被选中的元素（单选框，复选框）$("input:checked")选取所有被选中的元素:selected选取所有被选中的选项元素（下拉列表）$("selectoption:selected")选取所有被选中的选项元素

        4.表单选择器

        :input :text :password :radio :checkbox :submit :image :reset :button :file :hidden

        选择器的注意事项

        \\为转义字符

        $(".test:hidden")带空格表示选取class为test里的隐藏元素$(".test:hidden")不带空格表示选取隐藏的class为test的元素

        以上就是jquery常用选择器有哪些的详细内容，更多请关注html中文网其它相关文章！

        本文题目：jQuery中的基本选择器「简单记住」
        文章来源：https://www.cdcxhl.com/news/225848.html

        成都网站建设公司_创新互联，为您提供外贸网站建设、微信公众号、网页设计公司、虚拟主机、用户体验、网站营销

        广告

        声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

商城网站建设

网站建设知识

行业建站