精华内容
下载资源
问答
  • 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不需要考虑这个问题。
    展开全文
  • 1.层次选择器: 通过DOM元素间的层次关系获取元素,其主要的层次关系包括后代、父子、相邻、兄弟关系,通过其中基类关系可以方便快捷地定位元素 jQuery选择器详解 根据所获取页面中元素的不同,可以将jQuery选择...
  • css3选择器--层次选择器

    千次阅读 2017-06-01 16:29:37
    层次选择器:通过html的dom元素间的层次关系获取元素,主要层次关系有 后代、父子、相邻兄弟和通用兄弟。 1. 后代选择器: E F, 作用的是选择元素的后代元素。包括子元素、孙辈元素等。(常用) div div{ color...
  • 基本选择器 说明:通过元素id、class和标签名等来查找DOM元素 1.id选择器:$("#test");//选取id为test的元素 2.类选择器:$(".test");//选取所有class为test的元素,其他:$('div.mini') 3.标签选择器:$("div");//...
  • jQuery层次选择器

    千次阅读 2012-02-23 16:16:23
    jQuery基础教程之强大的选择器(层次选择器) 无论何时,我们都要记住的一点就是通过jQuery选择器获取的jQuery对象任何时候都是一组元素。 而JQuery选择器又具有这样的特点: 隐式迭代 $(“选择器”).css(...
  • JQuery选择器:
  • css层次选择器 1.后代选择器  写法:  父..父级选择器 父级选择器 子级选择器{样式1;样式2;}  作用:一级一级去寻找直到找到子级选择器,然后对子级进行样式控制。一般的标签的嵌套使用的比较多。  实际:...
  • Jquery选择器使用方法大全

    千次阅读 热门讨论 2015-09-26 08:04:08
    本文主要讲是Jquery中选择器使用方法 点我改变颜色 我是divOne 我是divTwo
  • 无论何时,我们都要记住的一点就是通过jQuery选择器获取的jQuery对象任何时候都是一组元素。 而JQuery选择器又具有这样的特点: 隐式迭代 $(“选择器”).css(“background-color”,”red”)则是为这组元素中每个...
  • CSS3高级选择器用法

    千次阅读 2016-08-24 17:16:49
    CSS3高级选择器用法介绍
  • 使用JQuery层次选择器实现树形菜单的收缩/展开特效 &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;...
  • JavaScript 库作用及对比 ...能帮助使用者建立有高难度交互的Web2.0 特性的富客户端页面, 并且兼容各大浏览器 当前流行的JavaScript 库有: jQuery 简介 jQuery 是继 Prototype 之后又一个优秀的 J
  • 知识点:了解jQuery选择器的基本概念及优势、能够使用不同的jQuery选择器选取元素,比如基本选择器、层次选择器、属性选择器、基本过滤选择器、可见性过滤选择器的使用,了解使用jQuery选择器的注意事项。...
  • 关于jquery中的选择器的概念和各个选择器用法及功能   概念:选择器允许您对元素组或单个元素进行操作,在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器   选择器的分类:基本、层次、简单...
  • 一、jQuery中的选择器有以下几种 ...5、层次选择器 使用规则 $("who").when.what(); 二、判断对象是否存在,attr()方法使用 示例代码: .cls { background-color:red; }
  • jQuery开发之选择器

    2015-06-15 15:24:43
    2,层次选择器 可以使用next()方法来代替$('prev + next') 选择器,如下所示: 可以使用nextAll()方法来代替$('prev ~ siblings') 选择器,如下所示: 3,过滤选择器过滤选择器主要是通过特定的过滤规则来...
  • 04- jQuery 选择器大全教程收藏备用

    万次阅读 多人点赞 2020-09-19 09:08:37
    层次选择器 作者:曾庆林 jQuery选择器的优势 写法简单 支持CSS1至CSS3选择器 完善的处理机制 CSS选择器回顾 选择器 语法 ID选择器 #ID{CSS规则} 类选择器 .className{CSS规则} 分组选择器 E1,E2,E3{...
  • jQuery选择器和JS选择器

    万次阅读 2015-07-27 10:48:27
    jQuery选择器的写法和CSS选择器的写法非常相似,在学习之前了解下CSS选择器,对掌握jQuery选择器是非常有帮助的(一) 基本选择器:主要包含id选择器、class选择器、*选择器、标签选择器以及复合选择器a: Id选择器:$...
  • 1、多条件选择器 用途:使用多个条件同时选择多个标签 用法:$(“条件1,条件2,条件3,……,条件n “); 特征:多个条件在“”内用逗号隔开; 用例:$(“div#id,span.tip,p”); //同时选择id为“id”的div标签,...
  • CSS的四种基本选择器和四种高级选择器

    万次阅读 多人点赞 2018-07-11 13:48:38
    CSS选择器:就是指定CSS要作用的标签,那个标签的名称就是选择器。... 通用选择器(通配符):针对所有的标签都适用(不建议使用) 下面来分别讲一讲。 1、标签选择器选择器的名字代表html页面上的标签...
  • WEB入门之十三 jQuery选择器

    千次阅读 2017-02-23 20:23:41
    学习内容 jQuery层次选择器 jQuery属性选择器 jQuery表单选择器 jQuery过滤选择器能力目标 熟悉jQuery各种选择器的使用场合能熟练使用jQuery各种选择器本章简介上一章我初步接触了jQuery,并能够编写一些简单的...
  • jQuery选择器

    2016-04-07 22:03:12
    基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标签名来查找 DOM 元素(在网页中 id 只能使用一次, class 允许重复使用). 1、#id 用法: $(”#myDiv”); 返回值 单个元素的组成...
  • $()就是jQuery中的函数,它的功能是获得()中指定的标签元素。如示例中$(“p”)会得到一组P标签元素,其中“p”表示CSS中的标签选择器。$()中的()不一定是指定元素,也可能是函数。...#id 选择器(使用身份证号来找人)
  • html中的高级选择器的种类和用法,a标签和img标签 伪类选择器
  • JQuery中的选择器

    万次阅读 多人点赞 2020-08-10 21:09:40
    层次选择器3.过滤选择器3.1 、基本过滤选择器3.2、内容过滤选择器3.3 、可见性过滤选择器3.4 、属性过滤选择器3.5 、子元素过滤选择器3.6 、表单对象属性过滤选择器4、表单选择器 JQuery的引入 1.本地引入 <...
  • CSS3新增选择器

    千次阅读 2019-04-21 17:53:55
    都知道css有三个简单常用的选择器,#id、class和标签选择器。但是css3又新增了一些选择器,可以减少结构代码中ID属性和class属性的定义。使用它们可以减少不少冗杂的代码,便捷开发。下面介绍: css3属性选择器 css...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 243,623
精华内容 97,449
关键字:

层次选择器用法表