精华内容
下载资源
问答
  • 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选择器完全继承了CSS选择的风格,将jQuery选择器分为4类:基本选择器、层次选择器、过滤选择器和表单选择器。 基本选择器 基本选择器是jQuery中最常用的选择器,通过元素的id、className或tagName来查找页面中...

    jQuery选择器

    通过jQuery选择器可以方便快捷地获得页面中的元素,然后为其添加相应行为,无需担心浏览器的兼容性问题。jQuery选择器完全继承了CSS选择的风格,将jQuery选择器分为4类:基本选择器、层次选择器、过滤选择器和表单选择器。

    基本选择器

    基本选择器是jQuery中最常用的选择器,通过元素的id、className或tagName来查找页面中的元素,如下表:

    选择器描述返回
    #ID根据元素的ID进行匹配单个jQuery对象
    .class根据元素的class属性进行匹配jQuery对象数组
    element根据元素的标签名进行匹配jQuery对象数组
    selector1,selectot2,…,selectorN将每个选择器匹配的结果合并后一起返回jQuery对象数组
    *匹配页面的所有元素,包括html、head、body等jQuery对象数组

    示例:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>jQuery基本选择器</title>
    		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
    	</head>
    	<body>
    		<div id="idDiv">idDIv</div>
    		<div class="classDiv" style="border: 1px;">classDiv</div>
    		<div class="classDiv">classDiv</div>
    		<span class="classSpan">classSpan</span>
    		<script type="text/javascript">
    			$(function(){
    				$("#idDiv").css("color","blue");
    				$(".classDiv").css("background-color", "#dddddd");
    				$("span").css("font-size", "40px");
    				$("#idDiv,.classSpan").css("font-style","italic");
    			});
    		</script>
    	</body>
    </html>
    

    在这里插入图片描述

    层次选择器

    jQuery层次选择器是通过DOM对象的层次关系来获取特定的元素,如同辈元素、后代元素、子元素和相邻元素等。层次选择器的用法与基本选择器相似,也是使用$()函数来实现,返回结果均为jQuery对象数组。

    选择器描述返回
    $(“ancestor descendant”)选取ancestor元素中的所有的子元素jQuery对象数组
    $(“parent > child”)选择parent元素中的直接子元素jQuery对象数组
    $(“prev+next”)选取紧邻prev元素之后的next元素jQuery对象数组
    $(“prev~siblings”)选取prev元素之后的siblings兄弟元素jQuery对象数组

    示例:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>jQuery层次选择器</title>
    		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
    	</head>
    	<body>
    		<div>
    			搜索条件<input name="search"/>
    			<form>
    				<label>用户名:</label>
    				<input name="userName" />
    				<fieldset>
    					<label>密  码:</label>
    					<input name="password" />
    				</fieldset>
    			</form>
    			<hr />
    			身份证号:<input name="none" /><br />
    			联系电话:<input naem="none"/>
    		</div>
    		<script type="text/javascript">
    			$(function(){
    				//form下的所有input
    				$("form input").css("width","200px");
    				//form的直接子元素input
    				$("form>input").css("background","pink");
    				//紧邻label的input
    				$("label+input").css("border-color","blue");
    				//$("label").next("input").css("border-color","blue");
    				//form之后相邻的input
    				$("form~input").css("border-bottom-width","5px");
    				//$("form").nextAll("input").css("border-bottom-width","4px");
    				$("*").css("padding-top","10px");
    			});
    		</script>
    	</body>
    </html>
    

    在这里插入图片描述

    展开全文
  • 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") 选取...
  • css3选择器--层次选择器

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

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

    千次阅读 2019-06-21 09:16:52
    选择器 描述 返回 示例 $("ancestor descendant") 选取ancestor元素里的所有descendant(后代)元素 集合元素span $("div span")选取<div>里的所有的<span>元素 $("parent > ...
  • 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(选择器),...
  • 层次选择器 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系列教程1-选择器全解jquery层次选择器jquery层次选择器,包括空格、>、next、+、nextAll、~、siblings等函数或表达式。 1、空格表示获取所有子孙后代元素 2、 >表示获取一级子元素 3、next函数获取紧接在...
  • 无论何时,我们都要记住的一点就是通过jQuery选择器获取的jQuery对象任何时候都是一组元素。 而JQuery选择器又具有这样的特点: 隐式迭代 $(“选择器”).css(“background-color”,”red”)则是为这组元素中每个...
  • 1.基本选择器:主要通过HTML标签元素或者ID,Class属性来选择2.层次选择器:主要通过DOM元素层次关系来获取 3.过滤选择器:以特定的过滤规则来筛选DOM元素。  过滤规则与CSS中的伪类选择器语法相同。选择器
  • JavaScript 库作用及对比 为了简化JavaScript 的开发, 一些 JavsScript 库诞生了. JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互的Web2.0 特性的富客户端页面, 并且兼容各大浏览器 ...
  • JQuery选择器跨frame和层次选择

    千次阅读 2013-06-03 16:01:54
    选择器已经选出元素然后在该元素中继续选择合适的元素: $(window.frames[0].document).find(".styleClass") 上面选出在第一个iframe下的类名为styleClass的所有元素。 同时注意跨frame的元素选择!
  • 使用JQuery层次选择器实现树形菜单的收缩/展开特效 &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;...
  • css高级选择器和基本选择器

    千次阅读 多人点赞 2019-07-05 16:11:22
    1.层次选择器 *相邻兄弟选择器,只对后面的兄弟有作用,对前面的兄弟没效果。 *相邻兄弟选择器,E+F E不会产生效果效果 2.结构伪类选择器 使用E F:nth-child(n)和E F:nth-of-type(n)的 关键点 E F:nth-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 294,876
精华内容 117,950
关键字:

层次选择器的作用