精华内容
下载资源
问答
  • 层次选择器: 通过DOM元素间的层次关系获取元素,其主要的层次关系包括后代、父子、相邻、兄弟关系,通过其中基类关系可以方便快捷地定位元素 jQuery选择器详解 根据所获取页面中元素的不同,可以将jQuery选择器分为...
  • 主要介绍了jQuery入门之层次选择器用法,以简单实例形式分析了jQuery层次选择器中ancestor descendant与parent>child的区别,需要的朋友可以参考下
  • 主要介绍了jQuery基本选择器和层次选择器使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 本文主要是通过表格向大家展示了jQuery选择器之基本选择器与层次选择器,方便大家对比学习,有需要的小伙伴参考下。
  • jQuery允许开发者使用从CSS1到CSS3... jQuery选择器类型 jQuery选择器主要分为四类: 1、基本选择器 2、层次选择器 3、过滤选择器 4、表单选择器 由于过滤选择器内容比较多,因此本文仅介绍前两种,下篇文章将介绍后两
  • CSS|层次选择器

    2021-07-25 19:26:30
    CSS|层次选择器 1.分类 层次选择器分为四种类型: 后代选择器 子选择器 相邻兄弟选择器 通用选择器 我们先构建一个网页: body内放5个段落,第五个段落中放一个无序列表: <!DOCTYPE html> <...

    CSS|层次选择器


    1.分类

    层次选择器分为四种类型:

    • 后代选择器
    • 子选择器
    • 相邻兄弟选择器
    • 通用选择器

    我们先构建一个网页:

    body内放5个段落,第五个段落中放一个无序列表:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>层次选择器</title>
    </head>
    <body>
    
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <p>p4</p>
    <p>
      水果:
      <ul>
      <li>西瓜</li>
      <li>苹果</li>
      <li>香蕉</li>
    </ul>
    </p>
    
    </body>
    </html>
    

    在这里插入图片描述

    我们可以很容易的想到:

    • p1-p4一级水果:都是body的儿子
    • 西瓜、苹果、香蕉是水果:的后代

    2.后代选择器

    从上面可以看出所有的标签都是body的后代,那么我们使用后代选择器,就可以将body的后代(所有标签)改变样式:

    后代选择器 是用祖先加上空格再加上后代标签类型进行声明的:

    body p{
        background-color: aqua;
    }
    

    如上,就是将body的所有的后代p标签全部变为aqua色:

    在这里插入图片描述

    3.子选择器

    子选择器可后代选择器相比,就是把空格变成>

    body>p{
        background-color: aqua;
    }
    

    子选择只会把body子代的p标签背景变成aqua色:

    在这里插入图片描述

    4.相邻兄弟选择器

    相比后代选择器,将空格变为+,将前标签改为类:

    .style1+p{
        background-color: aqua;
    }
    

    这个就是将引用了style1这个类的标签的下一个兄弟(相同级别的)p标签背景改为aqua色:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>层次选择器</title>
        <link rel="stylesheet" href="Style-demo06.css">
    </head>
    <body>
    
    <p>p1</p>
    <p class="style1">p2</p>
    <p>p3</p>
    <p>p4</p>
    <p>
      水果:
      <ul>
      <li><p>香蕉</p></li>
      <li><p>苹果</p></li>
      <li><p>香蕉</p></li>
    </ul>
    </p>
    
    </body>
    </html>
    

    p2引用了,那么就应该是p3变色:

    在这里插入图片描述

    5.通用选择器

    相比于相邻兄弟选择器,将+改为~:

    .style1~p{
        background-color: aqua;
    }
    

    它的功能是将后续所有的兄弟(相同等级的)p标签背景全部改为aqua色:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>层次选择器</title>
        <link rel="stylesheet" href="Style-demo06.css">
    </head>
    <body>
    
    <p>p1</p>
    <p class="style1">p2</p>
    <p>p3</p>
    <p>p4</p>
    <p>
      水果:
      <ul>
      <li><p>香蕉</p></li>
      <li><p>苹果</p></li>
      <li><p>香蕉</p></li>
    </ul>
    </p>
    
    </body>
    </html>
    

    在这里插入图片描述


    人生没有白走的路,每一步都算数!

    展开全文
  • CSS3层次选择器实例

    2016-08-22 18:51:17
    wrote based on a book
  • 主要介绍了jQuery选择器之层次选择器用法,结合实例形式分析了jQuery后代元素选择器、子元素选择器、相邻元素选择器、兄弟元素选择器等相关使用技巧,需要的朋友可以参考下
  • JQ 层次选择器

    2019-08-13 01:03:12
    NULL 博文链接:https://onestopweb.iteye.com/blog/2290059
  • jquery 中多条件选择器,相对选择器,层次选择器的区别介绍,需要的朋友可以参考下
  • CSS 四种层次选择器

    2020-12-14 14:16:00
    实例结构图 后代选择器 格式:元素 标签{} 特点 作用域为元素所有子代标签 实例 <!DOCTYPE html>...层次选择器</title> <style> body p{ background: red; } </sty

    实例结构图

    在这里插入图片描述

    后代选择器

    格式:元素 标签{}

    特点

    1. 作用域为元素所有子代标签
    实例
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>层次选择器</title>
        <style>
           body p{
              background: red;
           }
        </style>
    </head>
    <body>
    <p>h1</p>
    <p>h2</p>
    <p>h3</p>
    <ul>
        <li><p>h4</p></li>
        <li><p>h5</p></li>
    </ul>
    <p>h6</p>
    </body>
    </html>
    

    在这里插入图片描述

    子选择器

    格式:元素>标签{}

    特点

    1. 作用域为元素下一子代标签
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>层次选择器</title>
        <style>
           body>p{
              background: red;
           }
        </style>
    </head>
    <body>
    <p>h1</p>
    <p>h2</p>
    <p>h3</p>
    <ul>
        <li><p>h4</p></li>
        <li><p>h5</p></li>
    </ul>
    <p>h6</p>
    </body>
    </html>
    

    在这里插入图片描述

    相邻兄弟选择器

    格式:选中元素+标签{}

    特点

    1. 作用域为同层相邻且仅下一个标签

    实例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>层次选择器</title>
        <style>
           .active+p{
              background: red;
           }
        </style>
    </head>
    <body>
    <p>h1</p>
    <p class="active">h2</p>
    <p>h3</p>
    <ul>
        <li><p>h4</p></li>
        <li><p>h5</p></li>
    </ul>
    <p>h6</p>
    </body>
    </html>
    

    在这里插入图片描述

    通用选择器

    格式:选中元素~标签{}

    特点

    1. 作用域为同层且下面所有标签

    实例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>层次选择器</title>
        <style>
           .active~p{
              background: red;
           }
        </style>
    </head>
    <body>
    <p>h1</p>
    <p class="active">h2</p>
    <p>h3</p>
    <ul>
        <li><p>h4</p></li>
        <li><p>h5</p></li>
    </ul>
    <p>h6</p>
    </body>
    </html>
    

    在这里插入图片描述

    展开全文
  • 主要介绍了jQuery层次选择器用法,结合实例形式分析了jQuery针对页面元素层级操作的层次选择器使用技巧,需要的朋友可以参考下
  • 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中层次选择器用法,以实例形式较为详细的分析了jQuery中层次选择器的各种常见使用技巧,并备有较为详细的注释说明,需要的朋友可以参考下
  • 今天小编就为大家分享一篇关于jquery层次选择器的介绍,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
  • 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 选择器之基本选择器与层次选择器方便大 家对比学习有需要的小伙伴参考下 基本选择器 基本选择器是 jQuery 中最常用的选择器也是最简单的选择器它通过元素 id class 和标签名...
  • HTML层次选择器

    2020-10-10 21:55:04
    层次选择器 后代选择器:在某个元素的后面 /*后代选择器*/ <style> body p{ background:red; } </style> 123456 子选择器,一代 /*子选择器*/ <style> body>p{ background:orange; } &...
  • 上一讲我们讲解了CSS3中的基本选择器,这一节我们详解下层次选择器。 什么是层次选择器 我们都知道DOM是一个树状结构,在树状结构中有根节点、父节点、子节点、兄弟节点等概念。CSS也引入了这些概念到选择器中,对应...
  • jquery 层次选择器包括siblings与nextAll,本文为大家介绍下具体的使用方法,想学习的朋也可以参考下,希望对大家有所帮助
  • 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 2 3 4 5 ... 20
收藏数 306,989
精华内容 122,795
关键字:

层次选择器怎么用