zoukankan      html  css  js  c++  java
  • Jquery 选择器 详解

    在线文档地址:http://tool.oschina.net/apidocs/apidoc?api=jquery

    各种在线工具地址:http://www.ostools.net/

    一、基本选择器

    1 $("#div1").html("hello world 1"); //根据id匹配元素(a)
    2 $(".c1").html("hello  world 2"); //根据Yclass匹配元素(b)
    3 $("span").html("hello world 3"); //根据元素名称匹配 (c)
    4 $("span,div.c1").html("hello world 4"); //匹配页面所有的span 和class=c1的div(b c)
    5 $("*").html("hello world 5"); //匹配页面所有元素,也包含body

    二、层级选择器

    1 $("body span").html("hello world 1"); //选取body中所有的span(a b d)
    2 $("body>span").html("hello world 2"); //选取body元素的子span元素(a b)
    3 $("span.c1+div").html("hello world 3"); //选取class为c1的span的下一个div元素,注意是同级元素
    4 $("span.c1").next().html("hello world 3"); //跟上行效果相同 (c)
    5 $("span.c1~div").html("hello world 4"); //选取class为c1的span的后面的所有div
    6 $("span.c1").nextAll().html("hello world 4"); //跟上行效果相同(c e)

    三、基本过滤选择器

    1 $("div:first").html("hello world 1"); //选取所有div中的第一个div
    2 $("span:last").html("hello world 2"); //选取所有span中的最后一个
    3 $("span:not(.c1)").html("hello world 3"); //选取除class为c1的span外的所有span
    4 $("span:even").html("hello world 4"); //选取索引为偶数的span,索引从0开始
    5 $("span:odd").html("hello world 5"); //选取索引为奇数的span,索引从0开始
    6 $("span:eq(2)").html("hello world 6"); //选取指定索引的span,索引从0开始
    7 $("span:gt(0)").html("hello world 7"); //选取大于指定索引的span,不包含指定索引
    8 $("span:lt(2)").html("hello world 8"); //选取小于指定索引的span,不包含指定索引
    9 $(":header").html("hello world 9"); //选取页面中所有的标题元素 h1 h2 h3...

    四、内容过滤选择器

    1 $("span:contains(aa)").html("hello world 1"); //选取内容包含aa的span元素
    2 $("span:empty").html("hello world 2"); //选取空的span元素
    3 $("div:has(span)").html("hello world 3"); //选取包含span的div元素
    4 $("span:parent").html("hello world 4"); //选取包含子元素的span元素,包含文本

    五、属性过滤选择器

    1 $("span[id]").html("hello world 1"); //选取有属性id的span元素
    2 $("span[id=span2]").html("hello world 2"); //选取属性id等于span2的span元素
    3 $("span[id!=span2]").html("hello world 3"); //选取属性id不等于为span2的span元素
    4 $("span[id^=span]").html("hello world 4"); //选取属性id以span开始的span元素
    5 $("span[id$=2]").html("hello world 5"); //选取属性id以2结尾的span元素
    6 $("span[id*=an]").html("hello world 6"); //选取属性id包含an的span元素
    7 $("span[id*=an][class$=2]").html("hello world 6"); //选取属性id包含an并且class以结尾的span元素

    六、子元素过滤选择器

    1 $("div.c1 :nth-child(1)").html("hello world 1"); //选取class等于c1的div的指定索引子元素
    2 $("div.c1 :nth-child(even)").html("hello world 2"); //选取class等于c1的div的偶数子元素
    3 $("div.c1 :nth-child(odd)").html("hello world 3"); //选取class等于c1的div的奇数子元素
    4 $("div.c1 :first-child").html("hello world 4"); //选取class等于c1的div的第一个子元素
    5 $("div.c1 :last-child").html("hello world 5"); //选取class等于c1的div的最后一个子元素
    6 $("div.c1 :only-child").html("hello world 6"); //选取class等于c1的div只有一个子元素的子元素

    七、表单对象属性过滤选择器

    1 $("#form1 input:enabled").val("hello world 1"); //选取form表单中没有禁用的文本框
    2     $("#form1 input:disabled").val("hello world 2"); //选取form表单中没有禁用的文本框
    3     $("#form1 input:checked").attr("checked",false); //选取form表单中选的复选框
    4     $("select option[selected]").each(function () {  //选取 下拉框 选中的 option
    5         alert($(this).val());
    6     });

    八、选择器要注意的地方

     1 <body>
     2     <div id="div#1">aaaaaaaaaaa</div>
     3     <div class="c[1]">bbbbbbbbb</div>
     4     <div class="c1">
     5         <div name="div">ccccccccc</div>
     6         <div name="div">ddddddddd</div>
     7         <div name="div">eeeeeeeee</div>
     8         <div class="c1" name="div">fffffffff</div>
     9     </div>
    10     <div class="c1" name="div">gggggggg</div>
    11     <div class="c1" name="div">hhhhhhhh</div>
    12 </body>
    13 
    14 $(function () {
    15     //有时在id或是class中有一些特殊字符如 [ 等,需要用反斜杠进行转义
    16     $("#div\#1").html("hello world 1");
    17     $(".c\[1\]").html("hello world 2");
    18     //有没有空格的区别
    19     //有空格是选取class等于c1的div里面的name等于div的div(c d e f)
    20     $(".c1 [name=div]").html("hello world 3");
    21     //没有空格是选取class等于c1并且name等于div的div (f g h)
    22     $(".c1[name=div]").html("hello world 4");
    23 });
    View Code
  • 相关阅读:
    html 按钮跳转问题(及其相关)
    用JS写的一个简单的时钟
    JS里面function和Function的区别
    Sharepoint常见概念
    整理个人学习方向,技术列表,通过这个来明确方向
    关于SqlServer的内连接,外链接以及left join,right join之间的一些问题与区别。
    display:none与visibility:hidden的区别
    给自己立下一个flag先
    linux 打包和压缩的概念和区别
    Hadoop和Spark的比较区别
  • 原文地址:https://www.cnblogs.com/linJie1930906722/p/5349795.html
Copyright © 2011-2022 走看看