精华内容
下载资源
问答
  • 层级选择器
    2021-01-27 03:21:05

    除了基本的选择器外,jQuery的层级选择器更加灵活,也更强大。

    因为DOM的结构就是层级结构,所以我们经常要根据层级关系进行选择。

    层级选择器(Descendant Selector)

    如果两个DOM元素具有层级关系,就可以用$('ancestor descendant')来选择,层级之间用空格隔开。例如:

    • JavaScript
    • Python
    • Lua

    要选出JavaScript,可以用层级选择器:

    $('ul.lang li.lang-javascript'); // [

    JavaScript]

    $('div.testing li.lang-javascript'); // [

    JavaScript]

    因为

    • 都是
    • 的祖先节点,所以上面两种方式都可以选出相应的
    • 节点。

      要选择所有的

    • 节点,用:

      $('ul.lang li');

      这种层级选择器相比单个的选择器好处在于,它缩小了选择范围,因为首先要定位父节点,才能选择相应的子节点,这样避免了页面其他不相关的元素。

      例如:

      $('form[name=upload] input');

      就把选择范围限定在name属性为upload的表单里。如果页面有很多表单,其他表单的不会被选择。

      多层选择也是允许的:

      $('form.test p input'); // 在form表单选择被

      包含的

      子选择器(Child Selector)

      子选择器$('parent>child')类似层级选择器,但是限定了层级关系必须是父子关系,就是节点必须是节点的直属子节点。还是以上面的例子:

      $('ul.lang>li.lang-javascript'); // 可以选出[

    • JavaScript]

    $('div.testing>li.lang-javascript'); // [], 无法选出,因为

    和不构成父子关系

    过滤器(Filter)

    过滤器一般不单独使用,它通常附加在选择器上,帮助我们更精确地定位元素。观察过滤器的效果:

    $('ul.lang li'); // 选出JavaScript、Python和Lua 3个节点

    $('ul.lang li:first-child'); // 仅选出JavaScript

    $('ul.lang li:last-child'); // 仅选出Lua

    $('ul.lang li:nth-child(2)'); // 选出第N个元素,N从1开始

    $('ul.lang li:nth-child(even)'); // 选出序号为偶数的元素

    $('ul.lang li:nth-child(odd)'); // 选出序号为奇数的元素

    表单相关

    针对表单元素,jQuery还有一组特殊的选择器:

    :input:可以选择,,和;

    :file:可以选择,和input[type=file]一样;

    :checkbox:可以选择复选框,和input[type=checkbox]一样;

    :radio:可以选择单选框,和input[type=radio]一样;

    :focus:可以选择当前输入焦点的元素,例如把光标放到一个上,用$('input:focus')就可以选出;

    :checked:选择当前勾上的单选框和复选框,用这个选择器可以立刻获得用户选择的项目,如$('input[type=radio]:checked');

    :enabled:可以选择可以正常输入的、

    等,也就是没有灰掉的输入;

    :disabled:和:enabled正好相反,选择那些不能输入的。

    此外,jQuery还有很多有用的选择器,例如,选出可见的或隐藏的元素:

    $('div:visible'); // 所有可见的div

    $('div:hidden'); // 所有隐藏的div

    练习

    针对如下HTML结构:

    • JavaScript
    • Python
    • Lua
    1. Swift
    2. Java
    3. C

    选出相应的内容并观察效果:

    'use strict';

    var selected = null;

    ----

    // 分别选择所有语言,所有动态语言,所有静态语言,JavaScript,Lua,C等:

    selected = ???

    ----

    // 高亮结果:

    if (!(selected instanceof jQuery)) {

    return console.log('不是有效的jQuery对象!');

    }

    $('#test-jquery').find('*').css('background-color', '');

    selected.css('background-color', '#ffd351');

    JavaScript

    Python

    Lua

    Swift

    Java

    C

    更多相关内容
  • 如下所示: <!DOCTYPE ...<... <head>...层级 </title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <script type="text/javascrip
  • 主要为大家详细介绍了jQuery层级选择器实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 1. 子元素选择器 用于查找在给定的父元素下查找 这个父元素下的所有子元素,语法格式: 代码如下:$(“parent->chilid”); 2. 后代元素选择器 用于在给定的祖先元素下匹配所有的后代元素,语法格式: 代码如下:$(...
  • 层级选择器(Descendant Selector) 如果两个DOM元素具有层级关系,就可以用$(‘ancestor descendant’)来选择,层级之间用空格隔开。例如: <!-- HTML结构 --> <li class=lang-javascript>JavaScript ...
  • 下面小编就为大家带来一篇jquery层级选择器(匹配父元素下的子元素实现代码)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • CSS04:层级选择器

    2022-02-10 16:48:15
    后代选择器 在某个元素的后面;比如祖爷爷的“后代选择器”有爷爷、爸爸、你 举例:body 后的所有 p 元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...

    后代选择器(空格)

            在某个元素的后面;比如祖爷爷的“后代选择器”有爷爷、爸爸、你

    举例:body 后的所有 p 元素

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <style>
            /* 后代选择器 */
            body p {
                background: chartreuse;
            }
        </style>
    </head>
    <body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>
            <p>p4</p>
        </li>
        <li>
            <p>p5</p>
        </li>
        <li>
            <p>p6</p>
        </li>
    </ul>
    <p>p7</p>
    <p>p8</p>
    </body>
    </html>

    子选择器(>)

            某个元素的下一级元素;比如爷爷的“子选择器”是爸爸

    举例:body 的下一级 p 元素

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <style>
            /* 子选择器 */
            body > p {
                background: #ff008a;
            }
        </style>
    </head>
    <body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>
            <p>p4</p>
        </li>
        <li>
            <p>p5</p>
        </li>
        <li>
            <p>p6</p>
        </li>
    </ul>
    <p>p7</p>
    <p>p8</p>
    </body>
    </html>

    相邻兄弟选择器(+)

            同级向下相邻一个元素;比如你有一个哥哥和一个弟弟,那么你的“相邻兄弟选择器”是你的弟弟

    举例:p1 的相邻兄弟 p 元素,只有 p2 的样式会发生改变

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <style>
            /* 相邻兄弟选择器,只有p2的样式会发生改变 */
            .active + p {
                background: gold;
            }
        </style>
    </head>
    <body>
    <p class="active">p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>
            <p>p4</p>
        </li>
        <li>
            <p>p5</p>
        </li>
        <li>
            <p>p6</p>
        </li>
    </ul>
    </body>
    </html>

    通用兄弟选择器(~)

            当前元素的向下所有兄弟元素;你的“通用兄弟选择器”是你的弟弟妹妹们

    举例:p2 的通用兄弟 p 元素,是 p2 后面的所有 p 元素

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <style>
            /* 通用选择器 */
            .active ~ p {
                background: aqua;
            }
        </style>
    </head>
    <body>
    <p>p1</p>
    <p class="active">p2</p>
    <p>p3</p>
    <ul>
        <li>
            <p>p4</p>
        </li>
        <li>
            <p>p5</p>
        </li>
        <li>
            <p>p6</p>
        </li>
    </ul>
    <p>p7</p>
    <p>p8</p>
    </body>
    </html>

    展开全文
  • 层级选择器(基础)+基本选择器

    千次阅读 2020-10-17 17:33:28
    ancestor descendant 后代选择器 :在给定的祖先元素下匹配所有的后代元素 语法:$("ancestor descendant") ancestor是祖辈或者父辈的标签或者属性,descendant是后代的标签或者属性


    ancestor descendant 后代选择器 :在给定的祖先元素下匹配所有的后代元素
    parent > child 子元素选择器:在给定的父元素下匹配所有的子元素
    prev + next 相邻元素选择器:匹配所有紧接在
    prev 元素后的 next 元素
    prev ~ sibings 之后的兄弟元素选择器:匹配 prev 元素之后的所有 siblings 元素

    $(“ancestor descendant”)后代选择器

    ancestor descendant 后代选择器 :在给定的祖先元素下匹配所有的后代元素
    语法:$("ancestor descendant")

    ancestor是祖辈或者父辈的标签或者属性,descendant是后代的标签或者属性在这里插入图片描述

    $(“父>子”)选择器

    语法:$("father>son")
    选择指定父元素的子元素
    后代选择器类似,不过这个只能用于父子之间,不能跨越父子关系
    在这里插入图片描述
    当然,这里,父子不仅可以为标签也可为属性,如#id,.class…

    $(“兄弟+兄弟”)选择器

    选择指定元素指定的且紧挨着的兄弟元素
    语法:$("兄+兄")
    在这里插入图片描述
    不能选到自己的后代,同时,指定的限制条件可以为属性

    $(“兄~兄”)选择器

    选择元素的所有指定兄弟元素
    语法:$("兄~兄")
    在这里插入图片描述
    可以用兄弟元素的属性,不一定非为标签,而且这个不用紧挨着

    基本选择器

    在这里插入图片描述
    #ID选择器:($("#id"))根据 id 查找标签对象

    .class选择器:($(".class"))根据 class 查找标签对象

    element选择器:($("element"))根据标签名查找标签对象 (element表示元素也就是标签)

    * 选择器:($("*"))表示任意的,所有的元素

    selector1,selector2组合选择器:将每种选择器匹配到的元素合并后一起返回,即返回一个包含所有dom对象的数组。(("element,#id,.class"))合并选择器 1(element选择器)和选择器 2(#id选择器)和(.class选择器) 的结果并返回


    还可$(选择器1选择器2...)来选择可以匹配这里面所有选择器的元素,选择器间紧挨着,当然如果其中选择器中有element则·其必须写在开头不然会出错,这一疙瘩的整个选择器也可放在组合选择器里面当做一个选择器来用

    展开全文
  • 层级选择器(后代选择器) id选择器 组选择器 伪类选择器 3. 标签选择器 根据标签来选择标签,以标签开头,此种选择器影响范围大,一般用来做一些通用设置。 示例代码 <style type="text/css"> p{ ...

    css 选择器的定义

            css 选择器是用来选择标签的,选出来以后给标签加样式。

    css 选择器的种类

    1. 标签选择器
    2. 类选择器
    3. 层级选择器(后代选择器)
    4. id选择器
    5. 组选择器
    6. 伪类选择器
    7. 通配符选择器

    标签选择器

    • 概念:

      标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。

    • 语法:

    标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 
    • 作用:

      标签选择器 可以把某一类标签全部选择出来 比如所有的div标签 和 所有的 span标签

    • 优点:

      是能快速为页面中同类型的标签统一样式

    • 缺点:

      不能设计差异化样式。

    示例代码

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Test</title>
        <style type="text/css">
            p {
                color: red;
            }
        </style>
    </head>
    
    <body>
        <div>hello</div>
        <p>hello</p>
    </body>
    
    </html>

    类选择器

            根据类名来选择标签,以 . 开头, 一个类选择器可应用于多个标签上,一个标签上也可以使用多个类选择器,多个类选择器需要使用空格分割,应用灵活,可复用,是css中应用最多的一种选择器。

            类选择器使用“.”(英文点号)进行标识,后面紧跟类名.

    • 语法:

      • 类名选择器

      .类名  {   
          属性1:属性值1; 
          属性2:属性值2; 
          属性3:属性值3;     
      }
      • 标签

    <p class='类名'></p>
    • 优点:

      • 可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签

    • 注意

      • 类选择器使用“.”(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的)

      • 长名称或词组可以使用中横线来为选择器命名。

      • 不要纯数字、中文等命名, 尽量使用英文字母来表示。

    多类名注意:

    • 各个类名中间用空格隔开。

    • 多类名选择器在后期布局比较复杂的情况下,还是较多使用的。

    示例代码:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Test</title>
        <style type="text/css">
            .blue {
                color: blue
            }
    
            .big {
                font-size: 20px
            }
    
            .box {
                width: 100px;
                height: 100px;
                background: gold
            }
        </style>
    </head>
    
    <body>
        <div class="blue">这是一个div</div>
        <h3 class="blue big box">这是一个标题</h3>
        <p class="blue box">这是一个段落</p>
    
    </body>
    
    </html>

     示例代码:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Test</title>
        <style type="text/css">
            .blue {
                color: blue;
                font-size: 100px;
            }
    
            .red {
                color: red;
                font-size: 100px;
            }
    
            .orange {
                color: orange;
                font-size: 100px;
            }
    
            .green {
                color: green;
                font-size: 100px;
            }
        </style>
    </head>
    
    <body>
        <span class="blue">G</span>
        <span class="red">o</span>
        <span class="orange">o</span>
        <span class="blue">g</span>
        <span class="green">l</span>
        <span class="red">e</span>
    </body>
    
    </html>

    层级选择器(后代选择器)

            根据层级关系选择后代标签,以选择器1 选择器2开头,主要应用在标签嵌套的结构中,减少命名。

    示例代码:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Test</title>
        <style type="text/css">
            div p {
                color: red;
            }
    
            .con {
                width: 300px;
                height: 80px;
                background: green
            }
    
            .con span {
                color: red
            }
    
            .con .pink {
                color: pink
            }
    
            .con .gold {
                color: gold
            }
        </style>
    </head>
    
    <body>
        <div>
            <p>hello</p>
        </div>
    
        <div class="con">
            <span>哈哈</span>
            <a href="#" class="pink">百度</a>
            <a href="#" class="gold">谷歌</a>
        </div>
        <span>你好</span>
        <a href="#" class="pink">新浪</a>
    </body>
    
    </html>

    运行效果:

    注意点:

            这个层级关系不一定是父子关系,也有可能是祖孙关系,只要有后代关系都适用于这个层级选择器

    id选择器

            根据id选择标签,以#开头, 元素的id名称不能重复,所以id选择器只能对应于页面上一个元素,不能复用,id名一般给程序使用,所以不推荐使用id作为选择器。

            id选择器使用#进行标识,后面紧跟id名

    • 其基本语法格式如下:

      • id选择器

        #id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
      • 标签

        <p id="id名"></p>
    • 元素的id值是唯一的,只能对应于文档中某一个具体的元素。

    • 用法基本和类选择器相同。

    示例代码

    <style type="text/css">
        #box{color:red} 
    </style>
    
    <p id="box">这是一个段落标签</p>   <!-- 对应以上一条样式,其它元素不允许应用此样式 -->
    <p>这是第二个段落标签</p> <!-- 无法应用以上样式,每个标签只能有唯一的id名 -->
    <p>这是第三个段落标签</p> <!-- 无法应用以上样式,每个标签只能有唯一的id名  -->
    

    注意点:

            虽然给其它标签设置id=“box”也可以设置样式,但是不推荐这样做,因为id是唯一的,以后js通过id只能获取一个唯一的标签对象。

    id选择器和类选择器区别

    • W3C标准规定,在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class。

      • 类选择器(class) 好比人的名字, 是可以多次重复使用的, 比如 张伟 王伟 李伟 李娜

      • id选择器 好比人的身份证号码, 全中国是唯一的, 不得重复。 只能使用一次,经常和javascript 搭配使用。

            id选择器和类选择器最大的不同在于 使用次数上。

    组选择器

            根据组合的选择器选择不同的标签,以 , 分割开, 如果有公共的样式设置,可以使用组选择器。

    示例代码

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Test</title>
        <style type="text/css">
            .box1,
            .box2,
            .box3 {
                width: 100px;
                height: 100px
            }
    
            .box1 {
                background: red
            }
    
            .box2 {
                background: pink
            }
    
            .box2 {
                background: gold
            }
        </style>
    </head>
    
    <body>
        <div class="box1">这是第一个div</div>
        <div class="box2">这是第二个div</div>
        <div class="box3">这是第三个div</div>
    </body>
    
    </html>

    伪类选择器

            用于向选择器添加特殊的效果, 以 : 分割开, 当用户和网站交互的时候改变显示效果可以使用伪类选择器

    示例代码

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Test</title>
        <style type="text/css">
            .box1 {
                width: 100px;
                height: 100px;
                background: gold;
            }
    
            .box1:hover {
                width: 300px;
            }
        </style>
    </head>
    
    <body>
        <div class="box1">这是第一个div</div>
    </body>
    
    </html>

    通配符选择器

    • 概念

              通配符选择器用*号表示, * 就是 选择所有的标签 他是所有选择器中作用范围最广的,能匹配页面中所有的元素。

    • 其基本语法格式如下:

    * { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

    例如下面的代码,使用通配符选择器定义CSS样式,清除所有HTML标记的默认边距。

    * {
      margin: 0;                    /* 定义外边距*/
      padding: 0;                   /* 定义内边距*/
    }
    • 注意:

      会匹配页面所有的元素,降低页面响应速度,不建议随便使用

    示例代码:

    <!DOCTYPE html>
    <html lang="en">
     
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Test</title>
        <style>
            * {
                color: pink;
            }
            .red {
                color: red;
            }
            li {
                color: green;
            }
        </style>
    </head>
     
    <body>
        <div>hello word!</div>
        <div>hello word!</div>
        <p>hello word!</p>
        <span>hello word!</span>
        <div>
            <ul>
                <li class="red">hello word!</li>
                <li>hello word!</li>
            </ul>
        </div>
        <div>
            <ul>
                <li>hello word!</li>
                <li>hello word!</li>
            </ul>
        </div>
    </body>
     
    </html>

    展开全文
  • 提示:我们可以从jquery文档上学习哦~ 下面简单的介绍几种常用的选择器 ===================================基本选择器================================== id选择器 #id --> 匹配指定id名称 元素选择器 --...
  • js的层级选择器

    2020-05-17 08:49:08
    在表单中查询对应的标签: $(“form input”); 在给定的父元素下查所有子元素: $(“form > input”); 匹配紧跟在指定元素后面的标签: $(“label + input”); 匹配指定元素同辈的后面的所有元素 ...
  • 子代选择器 $(“ul>li”) 使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素 后代选择器 $(“ul li”) 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等 跟CSS的选择器一模一样。...
  • vue层级选择器多选

    千次阅读 2019-09-12 16:12:18
    来了一个需求,需要层级多选器,二级需要多选,自己造的时候花了半天没造出来,给的时间有限呀,确实不好造,造了...1. 层级选取器之多选,如图,基于element-ui的级联多选选择器,友好显示下拉箭头,样式与element...
  • 背景:学习前端知识,自己做...css伪类选择器,是在CSS选择器中添加关键字,指定匹配元素的特殊状态. css-hover伪类选择器: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-...
  • python 零基础学习篇
  • jQuery选择器 1. JS中选择DOM元素的方法 考虑兼容性的话,js里面提供的选择DOM的方法只有两个: JavaScript选择元素的方法 document.getElementById(); 通过id属性获取指定...
  • js 层级选择器

    千次阅读 2017-11-23 14:35:12
    Name: -- 1 Newsletter: ...1. 后代选择器 $("form input")  答:1,2 2.子选择器 + $("form > input")答 :1 3.后选择器 + $("lable + input")答:1,2 4.同级选择器 $("form ~ in
  • 简介: Android 多层级选择器,地址选择器,省市区选择器 更多:作者提 Bug 标签: 多层级选择器。默认提供了一个由其实现的中国大陆省市区选择器RegionPicker。 正在上传…重新上传取消 开始使用 在项目根...
  • jquery层级选择器

    千次阅读 2018-03-20 16:41:34
    层级选择器 层级共包括后代元素、子元素、相邻元素和同级元素四种。 后代选择器 后代选择器$(‘ancestor descendant’)选择给定的祖先元素的所有后代元素,并返回集合元素 &lt;div id="test"...
  • JavaScript基础之层级选择器

    千次阅读 2017-09-18 16:46:50
    除了基本的选择器外,JQuery的层级选择器更加灵活,也更强大。 因为DOM的结构就是层级结构,所以我们经常要根据层级关系进行选择。层级选择器(Descendant Selector)如果两个DOM元素具有层级关系,就可以用$(...
  • jQuery选择器之层级选择器

    千次阅读 2017-03-24 09:55:32
    >(大于号)紧跟父子关系 如$("div > p")表示选择div下的直接层是p的节点。 +(加号) 紧跟兄弟关系 如$("div + p")表示选择div同层的左右相邻的p节点。 ~ (波浪线)任意距离兄弟关系 如$("div + p")
  • jQuery层级选择器

    千次阅读 2019-06-11 13:11:00
    jQuery层级选择器 (A)后代选择器 $('ancestor descendant') 在给定的祖先元素下,匹配所有的后代元素 (B)直接后代选择 $('parent > child') 在给定的父元素下匹配所有的子元素 (C)兄弟元素选择器 (1)相邻...
  • &lt;!...gt; &...层次选择器&lt;/title&gt; &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt; &lt;script type="te
  • js 练习-层级选择器

    千次阅读 2018-04-03 15:27:35
    // 分别选择所有语言,所有动态语言,所有静态语言,JavaScript,Lua,C等: selected = $('div.test-selector li ');//所有语言 selected = $('ul.test-lang li');//动态语言 selected = $('ol.test-lang li')...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 95,103
精华内容 38,041
关键字:

层级选择器

友情链接: Heat RevA.rar