精华内容
下载资源
问答
  • jQuery选择器详细介绍:基本选择器,层次选择器,属性选择器


    jQuery选择器的格式: $("选择器")                                                                                                                                  


    一、基础选择器


    1、基本选择器                                                                                                                                                                 


    使用范围:在jQuery中,基本选择器是使用最频繁的选择器。

    • (1)元素选择器;
    • (2)id选择器;
    • (3)class选择器;
    • (4)群组选择器;
    • (5)*选择器

    • (1)元素选择器;
    • 语法:$("元素名")
    • <span style="font-family:Arial;"><span style="color:#1a1a1a;"><pre name="code" class="java"><!DOCTYPE html> 
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
          <title></title>
          <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
          <script type="text/javascript">
              $(function () {
                </span><strong style="background-color: rgb(255, 255, 255);"><span style="color:#1a1a1a;"> </span><span style="color:#ff0000;"> </span>$("div").css("color","red");   $("span").css("color","yello"); </strong><span style="background-color: rgb(255, 255, 255);"><strong>  </strong> //方法是jQuery操作CSS样式的方法因此使用点运算符来调用:$("div").css()</span><span style="color:#1a1a1a;">
              })
          </script>
      </head>
      <body>
          <div>我爱简简单单的</div>
          <span>我爱简简单单的</span>
      </body>
      </html></span></span>
      
      在浏览器预览效果如下:
    • 注意:CSS选择器和jQuery选择器的转换关系:只需要把CSS选择器的写法套进$("")中,就变成了jQuery选择器
    • (2)id选择器;
      • 语法:$("#id名")
      • 说明:id名前面必须加上前缀“#”,否则该选择器无法生效
      <span style="font-family:Arial;font-size:10px;"><span style="color:#1a1a1a;"><!DOCTYPE html>
      <html>
      <head>
          <title>JSON Object Example</title>
          <meta charset="utf-8">
          <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
            <script type="text/javascript">
              $(function () {
                              $("div").css("color","red");
      			$("span").css("color","yello");
      			</span><span style="color:#ff0000;">$("#a").css("color","blue");</span><span style="color:#1a1a1a;">
              })
      	</script>
      
      </head>
      <body>
          <div>我爱简简单单的</div>
       </span><span style="color:#ff0000;">   <div id="a">我爱简简单单的</div></span><span style="color:#1a1a1a;">
          <span>我爱简简单单的</span>
      </body></span></span>
      在浏览器预览效果如下:


    • (3)class选择器;
    • 语法:$(".类名")
    • 说明:id名前面必须加上前缀“.”,否则该选择器无法生效
    • <span style="font-family:Arial;font-size:10px;"><span style="color:#1a1a1a;"><!DOCTYPE html>
      <html>
      <head>
          <title>JSON Object Example</title>
          <meta charset="utf-8">
          <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
            <script type="text/javascript">
              $(function () {
                  $("div").css("color","red");
      			$("span").css("color","yello");
      			$("#a").css("color","blue");
      			</span><span style="color:#ff0000;">$(".b").css("color","green");</span><span style="color:#1a1a1a;">
              })
      	</script></span></span><span style="color: rgb(26, 26, 26); font-family: SimHei; font-size: 15px;">
      </span><span style="font-size:12px;"><span style="color: rgb(26, 26, 26); font-family: SimHei;"></head>
      <body>
          <div>我爱简简单单的</div>
          <div id="a">我爱简简单单的</div>
          <span>我爱简简单单的</span>
          </span><span style="font-family: SimHei;"><span style="color:#ff0000;"><div class="b">我爱简简单单的</div></span></span><span style="color: rgb(26, 26, 26); font-family: SimHei;">
      </body>
      </html></span></span>
      在浏览器预览效果如下:



    • (4)群组选择器;
    • 语法:$("选择器1,选择器2,...,选择器n")
    • 说明:选择器之间必须用英文逗号“,”隔开,否则该选择器无法生效
    <span style="font-family:Arial;font-size:12px;"><span style="color:#1a1a1a;"><!DOCTYPE html>
    <html>
    <head>
        <title>JSON Object Example</title>
        <meta charset="utf-8">
        <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
          <script type="text/javascript">
            $(function () {
                </span><span style="color:#ff0000;">$("div,span,#a,.b").css("color","green");</span><span style="color:#1a1a1a;">
            })
    	</script>
    
    </head>
    <body>
        <div>我爱简简单单的</div>
        <div id="a">我爱简简单单的</div>
        <span>我爱简简单单的</span>
        <div class="b">我爱简简单单的</div>
    </body>
    </html></span></span>
    在浏览器预览效果如下:


    • (5)*选择器
    • 语法:*{padding:0;margin:0;}
    • 说明:*选择器,也称为全选选择器,用于选择所有的元素。在CSS中,常用*选择器去除默认的padding和margin的值
    <span style="font-family:Arial;"><!DOCTYPE html>
    <html>
    <head>
        <title>JSON Object Example</title>
        <meta charset="utf-8">
        <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
          <script type="text/javascript">
            $(function () {
               <span style="color:#ff0000;"> $("#c *").css("color","green");</span>
            })
    	</script>
    
    </head>
    <body>
    <span style="color:#ff0000;"><div id="c"></span>
        <div>我爱简简单单的</div>
        <div id="a">我爱简简单单的</div>
        <span>我爱简简单单的</span>
        <div class="b">我爱简简单单的</div>
    <span style="color:#ff0000;"></div></span>
    </body>
    </html></span>

    在浏览器预览效果如下:


    CSS规定了如下优先级:

    行内样式->id样式->class样式->标记样式

    2、层次选择器                                                                                                                                                                 

    • (1)后代选择器
    • 语法:$("M N")
    • 说明:选择M元素内部后代N元素,包括所有后代元素。

    • (2)子代选择器
      • 语法:$("M>N")
      • 说明:选择M元素内部某一个子元素,只限子元素。

    • (3)兄弟选择器
      • 语法:$("M~N")
      • 说明:选择M元素后面(不包括前面)的(所有的)某一类兄弟元素N。

    • (4)相邻选择器
      • 语法:$("M+N")
      • 说明:选择M元素后面(不包括前面)的(相邻的)某一类兄弟元素N
      <span style="font-family:Arial;font-size:12px;"><span style="color:#1a1a1a;"><!DOCTYPE html>
      <html>
      <head>
          <title>JSON Object Example</title>
          <meta charset="utf-8">
          <style type="text/css">
      		*{padding:0;margin:0}/*去除所有元素默认的padding和margin*/
              ul{list-style-type:none;}/*去除列表项默认符号*/
      		li{height:30px;}/*去除列表项默认符号*/
      	</style>
          <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
            <script type="text/javascript">
              $(function () {
                  </span><span style="color:#ff0000;">$("li*li").css("border-top","3px solid green");</span><span style="color:#1a1a1a;">
              })
      	</script>
      
      </head>
      <body>
      	<ul>
          	<li>我爱简简单单的</li>
              <li>我爱简简单单的</li>
              <li>我爱简简单单的</li>
              <li>我爱简简单单的</li>
              <li>我爱简简单单的</li>
              <li>我爱简简单单的</li>
              <li>我爱简简单单的</li>
          </ul>
      </body>
      </html></span></span>
      在浏览器预览效果如下:

    分析:

         $("li+li")使用的是相邻选择器,表示“选择li元素相邻的下一个li元素”。由于最后一个li元素没有相邻的下一个li元素,所以对于最后一个li元素,它是没有下一个li元素可以选取的。$("li+li").css("border-top", "2px solid red")达到在两两li元素之间添加一个边框的效果。这是一个非常棒的技巧,在实际开发中如果我们想要在两两元素之间实现什么效果,我们经常会用到这个技巧!大家请一定不要浪费这个强大的技巧!


    3、属性选择器                                                                                                                                                                 


    使用范围:在jQuery中,属性选择器最常见于表单操作。


    选择器 说明
    $("selector[attr]") 选择包含给定属性的元素
    $("selector[attr='value']") 选择给定的属性是某个特定值的元素
    $("selector[attr != 'value']") 选择所有含有指定的属性,但属性不等于特定值的元素
    $("selector[attr *= 'value']") 选择给定的属性是以包含某些值的元素
    $("selector[attr ^= 'value']") 选择给定的属性是以某些值开始的元素(比较少用)
    $("selector[attr $= 'value']") 选择给定的属性是以某些值结尾的元素(比较少用)
    $("selector[selector1][selector2]…[selectorN]") 复合属性选择器,需要同时满足多个条件时使用











    注:selector指的是选择器,attr指的是属性(attribute),value指的是属性值。


    <span style="font-family:Arial;font-size:12px;"><!DOCTYPE html>
    <html>
    <head>
        <title>JSON Object Example</title>
        <meta charset="utf-8">
        <style type="text/css">
    		*{padding:0;margin:0}/*去除所有元素默认的padding和margin*/
            ul{list-style-type:none;}/*去除列表项默认符号*/
    		li{height:30px;}/*去除列表项默认符号*/
    	</style>
        <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
          <script type="text/javascript">
            $(function () {
               <span style="color:#ff0000;"> $("input[type='checkbox']").attr("checked","checked");</span>//<span style="color: rgb(26, 26, 26); font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 15px; line-height: 27px; text-indent: 30px;">表示把所有复选框的checked属性值设置为checked(即被选中)。</span>
            })
    	</script>
    
    </head>
    <body>
    <br>
    	<h3>请选择以下需要购买的蔬菜</h3><br>
        <div id="list">
        	<input type="checkbox" />黄瓜
            <input type="checkbox" />西红柿
            <input type="checkbox" />土豆
            <input type="checkbox" />茄子
        </div>
    </body>
    </html></span>


    在浏览器预览效果如下:

    拓展:

    $("#a")等价于$("[id='a']")

    $(".a")等价于$("[class='a']")


    展开全文
  • jQuery 层次选择器,属性选择器

    千次阅读 2016-12-01 10:40:25
    jQuery层次选择器 jquery属性选择器 jq根据是否某属性选择 jq选取子元素、后边的元素等 $("div >span") $("#one +div") $("#one~div")

    jQuery层次选择器

    $("div span") 选取<div>里的所有<span>元素
    $("div >span") 选取<div>元素下元素名是<span>的子元素
    $("#one +div") 选取id为one的元素的下一个<div>同辈元素    等同于$(#one).next("div")
    $("#one~div") 选取id为one的元素的元素后面的所有<div>同辈元素    等同于$(#one).nextAll("div")
    $(#one).siblings("div") 获取id为one的元素的所有<div>同辈元素(不管前后)
    $(#one).prev("div") 获取id为one的元素的前面紧邻的同辈<div>元素
    所以 获取元素范围大小顺序依次为:
    $(#one).siblings("div")>$("#one~div")>$("#one +div")  或是
    $(#one).siblings("div")>$(#one).nextAll("div")>$(#one).next("div")

    jQuery属性选择器

    1. [attribute]用法        
        定义:匹配包含给定属性的元素
        $("div[id]").addClass("highlight"); //查找所有含有ID属性的div元素
    2. [attribute=value]用法
        定义:匹配给定的属性是某个特定值的元素
        $("input[name='basketball']").attr("checked",true);//name属性值为basketball的input元素选中 
    
    3. [attribute!=value]用法
        定义:匹配给定的属性是不包含某个特定值的元素
        $("input[name!='basketball']").attr("checked",true);   //name属性值不为basketball的input元素选中
    //此选择器等价于:not([attr=value])要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value])
    $("input:not(input[name='basketball'])").attr("checked",true);
    
    4. [attribute^=value]用法
        定义:匹配给定的属性是以某些值开始的元素
        $("input[name^='foot']").attr("checked",true);  //查找所有 name 以 'foot' 开始的 input 元素
    
    5. [attribute$=value]用法
        定义:匹配给定的属性是以某些值结尾的元素
        $("input[name$='ball']").attr("checked",true); //查找所有 name 以 'ball' 结尾的 input 元素
    
    6. [attribute*=value]用法
        定义:匹配给定的属性是以包含某些值的元素
        $("input[name*='sket']").attr("checked",true);  //查找所有 name 包含 'sket' 的 input 元素
    
    7. [selector1][selector2][selectorN]用法
        定义:复合属性选择器,需要同时满足多个条件时使用
        $("input[id][name$='ball']").attr("checked",true);  //找到所有含有 id属性,并且它的 name属性是以 ball结尾的
    

    最近在sd工作比较忙,有空再把jq的绑定bind(),和帮助提示文档捣鼓一下

    如果有什么问题或建议,欢迎留言 ^^ ……

    展开全文
  • WEB前端 -- 属性选择器与层次选择器

    千次阅读 2018-03-05 08:26:42
    1.层次选择器层次选择器选择器CSS模式JQuery模式描述后代选择器ul li a{}$('ul li a')获取追溯到的多个DOM对象子选择器div &gt; p{}$('div p')只获取子类节点的多个DOM对象next选择器div + p{}$('div + p')只...

    1.层次选择器

    层次选择器
    选择器CSS模式JQuery模式描述
    后代选择器ul li a{}$('ul li a')获取追溯到的多个DOM对象
    子选择器div > p{}$('div p')只获取子类节点的多个DOM对象
    next选择器div + p{}$('div + p')只获取某个节点后一个同级DOM对象
    nextAll选择器div ~p{}$('div ~ p')获取某节点后面所有同级DOM对象

    在层次选择器中,除后代选择器外,其他三种高级选择器不支持IE6,而JQuery兼容IE6。

    //后代选择器
    $('#box p').css('color','red');//全兼容
    //JQuery为后代选择器提供一个等价find()方法
    $('#box').find('p').css('color','red');//与后代选择器等价
    
    //子选择器
    #box > p{          //IE6不支持
      color:red;
    }
    $('#box>p').css('color','red');//兼容IE6
    
    //JQuery为子选择器提供了一个等价的children()方法
    $('#box').children().css('color','red');//与子选择器等价
    next相邻的后一个(即紧跟其后的第一个元素),nextAll是后N个
    //nextAll选择器(后面所有同级节点)
    #box~p{         //IE6不支持
      color:red;
    }
    $('#box~p').css('color','red');      //兼容IE6
    
    //JQuery为nextAll选择器提供了一个等价的方法 :nextAll();
    $('#box').nextAll('p').css('color','red');  //与nextAll()选择器等价
    

    层次选择器对节点的层次都是有要求的,比如子选择器,只有子节点才可以呗选择到,孙子节点和重孙子节点都无法选择到。next和nextAll选择器,必须是同一个层次的后一个和后N个,不在同一个层次就无法选取到了。

    理论上,JQuery提供的方法:find()、next()、nextAll()和children()运行速度要快于使用高级选择器。因为他们实现的算法有一定的差异,高级选择器是通过“Sizzle引擎”解析字符串来获取节点对象,而JQuery提供的方法则是通过querySelectorAll()操作直接得到的(IE6/7不支持)。但这种快慢的差异,对于客户端脚本来说没有太大的实用性,并且速度的差异还要取决于浏览器和选择的元素内容。

    在find()、next()、nextAll()和children()这4种方法中,若不传参数,就相当于传递了“*”,即任何节点,不建议这样做。因为这样做不但影响性能,而且由于精准度不佳,可能在复杂的HTML结构时产生怪异的结果。

    $('#box').next();//相当于$('#box').next('*');

    2.属性选择器

    属性选择器
    CSS模式JQuery模式描述
    a[title]$('a[title]')获取具有这个属性的DOM对象
    a[title=num1]$('a[title=num1]')获取具有title属性且属性值为num1的DOM对象
    a[title^=num]$('a[title^=num]')获取具有title属性且开头属性值匹配的DOM对象
    a[title|=num]$('a[title|=num]')获取具有title属性且等于属性值或开头属性值匹配后面跟一个“-”号的DOM对象
    a[title$=num]$('a[title$=num]')获取具有title属性且结尾属性值匹配的DOM对象
    a[title!=num]$('a[title!=num]')获取具有title属性且不等于属性值的DOM对象
    a[title~=num]$('a[title~=num]')获取具有title属性且属性值是以一个空格分割的列表,其中包含属性之的DOM对象
    a[title*=num]$('a[title*=num]')获取具有title属性且属性值含有一个指定字符串的DOM对象
    a[bbb][title=num1]$('a[bbb][title=num1]')获取具有title属性且属性值匹配的DOM对象
    注:属性选择器也不支持IE6,所以在CSS中如果要兼容低版本,那么也是非主流的,而JQuery不需要考虑这个问题。
    展开全文
  • jQuery层次选择器

    千次阅读 2018-07-28 12:13:51
    层次选择器 通过DOM元素之间的结构(层次关系)来获取特定元素,例如后代元素、子元素、相邻元素、兄弟元素等。 层次选择器 选择器 描述 返回 示例 $("ancestor descendant") 选取...

    层次选择器

    通过DOM元素之间的结构(层次关系)来获取特定元素,例如后代元素、子元素、相邻元素、兄弟元素等。

    层次选择器
    选择器 描述 返回 示例
    $("ancestor descendant") 选取ancenstor元素中所有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元素 集合元素 $("#two~div")选取id为two的元素后面的所有<div>同辈与阿奴

     

     

     

     

     

     

     

     

    其中:$("prev+next")选择器是选取prev元素后的第一个同辈next元素,可以用next()方法来代替,$("prev~siblings")选择器是选取prev元素后所有的siblings同辈元素,可以用nextAll()方法代替。

    $(".one+div")  ------------>  $(".one").next("div");

    $(".one~div")  ------------>  $(".one").nextAll("div");

    层次选择器示例

    层次选择器示例
    功能 代码 执行结果
    改变<body>内所有<div>的背景

    $("body div")

    .css("backgroundColor","#eee");

    改变<body>内子元素<div>的背景

    $("body>div")

    .css("backgroundColor","#eee");

    改变id为one的下一个<div>同辈元素的背景

    $("#one+div")

    .css("backgroundColor","#eee");

    改变id为two的元素后面所有的同辈元素的背景

    $("#one~div")

    .css("backgroundColor","#eee");

     

    展开全文
  • 01 层次选择器 a. 后代选择器 格式: E F { 声明;} 应用:获取E元素下所有与F匹配的元素 b. 子选择器 格式:E>F{声明;} 应用:只获取E下面的与F匹配的第一层子元素 c.相邻兄弟选择器 格式:E+F{声明;} ...
  • css3选择器--层次选择器

    千次阅读 2017-06-01 16:29:37
    层次选择器:通过html的dom元素间的层次关系获取元素,主要层次关系 后代、父子、相邻兄弟和通用兄弟。 1. 后代选择器: E F, 作用的是选择元素的后代元素。包括子元素、孙辈元素等。(常用) div div{ color...
  • 而class属性本身没有语义,它纯粹是用来为CSS服务的,属于多余属性,并没把样式和元素绑定起来,一个CSS类选择器,文本框可以使用,下拉框也可以使用,甚至按钮也可以使用,这样其实非常混乱, 修改时就不方便,所以...
  • css层次选择器的理解

    千次阅读 2017-10-15 15:43:45
    1、css后代选择器 (1)语法:h1 em {color:red;} 表示的是从h1开始里面包含的所有的em元素变成红色,h1为祖先,其他的em都是后代,即选中后代,不管是儿子还是孙子,只要是都会被选中,为后代选择器。 (2)语法:...
  • 层次选择器的4种选择器列表

    千次阅读 2019-06-21 09:16:52
    选择器 描述 返回 示例 $("ancestor descendant") 选取ancestor元素里的所有descendant(后代)元素 集合元素span $("div span")选取<div>里的所有的<span>元素 $("parent > ...
  • CSS3选择器——2、层次选择器

    千次阅读 多人点赞 2015-02-14 17:49:46
    CSS3选择器——2、层次选择器 *{ margin: 0px; padding: 0px; } body{ width: 300px; margin: 0 auto; } div{ margin: 5px; padding: 5px; border: 1px solid #ccc; ...
  • jQuery 层次选择器

    千次阅读 2010-04-07 13:38:00
    层次选择器: 层次选择器是通过元素之间的层次关系来获取特定的元素,如后代元素、子元素、相邻元素、和兄弟元素等 后代元素 ancestor descendant 获取ancestor下的descendant元素 集合元素 $("div span")选取...
  • 一直以来,认为jquery在选择器上多此一举,既然了id选择器,那么为什么还要费劲去搞各种其它选择器,id选择器难道不是万能的吗,难道不是最简单的吗?说到最简单,可能是当之无愧,但是要说万能,确实名不副实;...
  • 一、Jquery常用的过滤选择器如下所示:  1、:first,选取第一个元素,比如$("div:first")选取第一个div元素  2、:last,选取最后一个元素,比如$("div:last")选取最后一个div元素  3、:not(选择器),...
  • 【jquery】jquery选择器有哪些

    千次阅读 2020-03-25 16:05:06
    4大类:基本选择器、层次选择器、过滤选择器、表单选择器 目录 1、jquery基本选择器 2、jquery层次选择器 3、jquery过滤选择器 4、jquery表单选择器 1、jquery基本选择器 基本选择器是JQuery最常用的选择器,...
  • 层次选择器 function f1 () { //派生选择器(父子关系)--不考虑层次 //$('div span').css('color','red'); //直接子元素选择器(父子关系)--考虑层次 //$('div >span').css('background-color','...
  • css四个层次选择器

    千次阅读 2018-10-23 14:38:37
    1.后代选择器 选中parent元素内部后代所有 n 元素。 parent n{} 2.子代选择器 选中 parent 元素内部 的子元素 n parent&gt;n{} 3.兄弟选择器 选中 brother 元素后面的所有某一类兄弟元素 n。 brother~n{} 4....
  • 一、基本选择器 基本选择器是jQuery中最常用也是最简单的选择器,它通过元素的id、class和标签名等来查找DOM元素。 1、ID选择器 #id 描述:根据给定的id匹配一个元素, 返回单个元素(注:在网页中,id名称不能重复...
  • CSS选择器有哪些? 选择符类型 例子 例子描述 通用选择器 *  类别选择器(.class) .intro 选择class=”intro”的所有元素 ID选择器(#id) #first 选择id=”first”的所有元素 标签选择器(element) div 选择...
  • jquery系列教程1-选择器全解jquery层次选择器jquery层次选择器,包括空格、>、next、+、nextAll、~、siblings等函数或表达式。 1、空格表示获取所有子孙后代元素 2、 >表示获取一级子元素 3、next函数获取紧接在...
  • jQuery的选择器分类都有哪些

    千次阅读 2020-12-18 20:26:31
    根据所获取页面中元素的不同,可以将jQuery选择器分为四大类:基本选择器、层次选择器、过滤选择器、表单选择器。其中在过滤选择器中又可分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、...
  • 无论何时,我们都要记住的一点就是通过jQuery选择器获取的jQuery对象任何时候都是一组元素。 而JQuery选择器又具有这样的特点: 隐式迭代 $(“选择器”).css(“background-color”,”red”)则是为这组元素中每个...
  • 1.基本选择器:主要通过HTML标签元素或者ID,Class属性来选择2.层次选择器:主要通过DOM元素层次关系来获取 3.过滤选择器:以特定的过滤规则来筛选DOM元素。  过滤规则与CSS中的伪类选择器语法相同。选择器
  • JQuery选择器跨frame和层次选择

    千次阅读 2013-06-03 16:01:54
    选择器已经选出元素然后在该元素中继续选择合适的元素: $(window.frames[0].document).find(".styleClass") 上面选出在第一个iframe下的类名为styleClass的所有元素。 同时注意跨frame的元素选择!

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 288,757
精华内容 115,502
关键字:

属于层次选择器的有哪些