精华内容
下载资源
问答
  • JQuery层级选择器

    千次阅读 2018-11-28 23:48:29
    JQuery层级选择器

    parent > child:选择父元素parent的所有直接子元素child。parent是任何合法的选择器,child是用于过滤子元素的选择器。eg:选择div下的直接子元素p,$("div > p")。

    parent descendant:选择父元素parent的后代所有元素child。parent是任何合法的选择器,child是用于过滤子元素的选择器。元素的后代可以是元素的第一代、第二代、第三代等等。eg:选择div下的所有p元素,$("div p")。

    element + next:选择element元素的直接子元素next,只选择紧邻的第一个next元素。element是任何合法的选择器,next是用于过滤元素的选择器。eg:选择与div相邻的第一个直接子元素p,$("div + p")。

    element ~ siblings:选择element元素的所有直接子元素siblings,element是任何合法的选择器,siblings是用于过滤元素的选择器。eg:选择div下所有的直接子元素p,$("div ~ p")。

    展开全文
  • JQuery 层级选择器

    2020-06-14 13:53:29
    层级选择器 后代选择器 语法: $(“A B”)选择A元素内部的所有B元素 子选择器 语法: $(“A > B”)选择A元素内部的所有B子元素 ...JQuery层级选择器</title> <script src="js/jquery-3.4.1.min.js"&g

    层级选择器

    1. 后代选择器
      语法: $(“A B”)选择A元素内部的所有B元素
    2. 子选择器
      语法: $(“A > B”)选择A元素内部的所有B子元素
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JQuery层级选择器</title>
        <script src="js/jquery-3.4.1.min.js"></script>
    
        <style>
            #div1{
                background-color: red;
                height: 100px;
                width: 100px;
            }
            #div2{
                background-color: red;
                height: 100px;
                width: 100px;
            }
            #div3{
                background-color: red;
                height: 50px;
                width: 50px;
            }
        </style>
    
        <script>
            $(function () {
                //使用b1改变body标签所有div的背景色为绿色
                $("#b1").click(function () {
                    $("body div").css("backgroundColor","green");
                })
    
                //使用b2改变body内子div的背景色为蓝色
                $("#b2").click(function () {
                    $("body > div").css("backgroundColor","blue");
                })
            })
        </script>
    </head>
    
    <body>
    
        <div id="div1">div1...</div>
        <div id="div2">div2...
            <div id="div3">div3...</div>
        </div>
    
        <input type="button" id="b1" value="改变body内div的颜色">
        <input type="button" id="b2" value="改变body子div的颜色">
    
    </body>
    </html>
    
    展开全文
  • jQuery层级选择器

    千次阅读 2019-06-11 13:11:00
    jQuery层级选择器 (A)后代选择器 $('ancestor descendant') 在给定的祖先元素下,匹配所有的后代元素 (B)直接后代选择 $('parent > child') 在给定的父元素下匹配所有的子元素 (C)兄弟元素选择器 (1)相邻...

    jQuery层级选择器

    (A)后代选择器

    $('ancestor descendant')

    在给定的祖先元素下,匹配所有的后代元素

    (B)直接后代选择

    $('parent > child')

    在给定的父元素下匹配所有的子元素

    (C)兄弟元素选择器

    (1)相邻下一个兄弟元素选择器

    $('prevSibling + nextSibling')

    匹配所有紧接在prevSibling元素后的nextSibling元素。

    (2)后排兄弟元素选择器

    $('prev ~ sibling')

    匹配所有紧接在prev元素后所有的siblings元素。

    示例代码:

    <!DOCTYPE html>
    <html>
    
    <head lang="zh-CN">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
        <title>多项选择器</title>
        <style></style>
    </head>
    
    <body>
        <section>
            <ul id="one" class="animal">
                <li>猴子</li>
                <li>猛犸</li>
                <li>猩猩</li>
            </ul>
            <ul id="two" class="plant">
                <li>牡丹</li>
                <li>樱花</li>
                <li>仙人掌</li>
            </ul>
            <ul id="three" class="microbe">
                <li>草履虫</li>
                <li>酵母菌</li>
                <li>念珠菌</li>
            </ul>
        </section>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                //此处填写代码
    
            });
        </script>
    </body>
    
    </html>

    (A)后代选择器$('ancestor descendant')

    示例代码

    var a = $('section li');
    console.log(a);

    获取元素集合为section的所有后代元素中的li元素。

    (B)直接后代选择$('parent > child')

    示例代码

    var a = $('#one>li');
    console.log(a);

    获取元素为id="one"的三个子元素:

    (C)兄弟元素选择器

    (1)相邻下一个兄弟元素选择器

    $('prevSibling + nextSibling')

    示例代码

    var a = $('#two+ul');
    console.log(a);

    获取元素为id选择器#two后面紧邻的兄弟元素ul元素,实际选择元素为ul#three

     

    (2)后排兄弟元素选择器

    $('prev ~ sibling')

    示例代码

    var a = $('#one~ul');
    console.log(a);

    获取元素为id选择器#one后面所有的兄弟元素ul元素

     

    转载于:https://www.cnblogs.com/f6056/p/11003080.html

    展开全文
  • jquery层级选择器

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

    层级选择器

    层级共包括后代元素、子元素、相邻元素和同级元素四种。

    后代选择器
    后代选择器$(‘ancestor descendant’)选择给定的祖先元素的所有后代元素,并返回集合元素

    <div id="test">
        <div>
            <div>1</div>
            <div>2</div>
        </div>
    </div>
    <script>
    $('#test div').css('margin','10px');
    console.log($('#test div').length);//3
    </script>

    对应DOM的getElement类方法

    Array.prototype.forEach.call(document.getElementById('test').getElementsByTagName('div'),function(item,index,arr){
        item.style.margin = '10px';
    });

    或者使用querySelectorAll()方法

    Array.prototype.forEach.call(document.querySelectorAll('#test div'),function(item,index,arr){
        item.style.margin = '10px';
    });

    子元素选择器

    子元素选择器$(‘parent > child’)选择所有指定’parent’元素中指定的’child’的直接子元素,并返回集合元素

    <div id="test">
        <div>
            <div>1</div>
            <div>2</div>
        </div>
    </div>
    <script>
    $('#test > div').css('margin','10px');
    console.log($('#test > div').length);//1
    </script>

    对应DOM的querySelectorAll()方法

    Array.prototype.forEach.call(document.querySelectorAll('#test > div'),function(item,index,arr){
        item.style.margin = '10px';
    });

    一般兄弟选择器
    一般兄弟选择器$(‘prev ~ siblings’)选择’prev’元素之后的所有同级的’siblings’元素,并返回集合元素

    <ul>
        <li id="test">1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
    $('#test ~ li').css('color','red');
    console.log($('#test ~ li').length);//2
    </script>

    对应DOM的querySelectorAll()方法

    Array.prototype.forEach.call(document.querySelectorAll('#test ~ li'),function(item,index,arr){
        item.style.color = 'red';
    });

    相邻兄弟选择器
    相邻兄弟选择器$(‘prev + next’)选择所有紧跟在’prev’元素后的’next’元素,并返回集合元素

    <ul>
        <li id="test">1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
    $('#test + li').css('color','red');
    console.log($('#test + li').length);//1
    </script>

    对应DOM的querySelectorAll()方法

    Array.prototype.forEach.call(document.querySelectorAll('#test + li'),function(item,index,arr){
        item.style.color = 'red';
    });
    展开全文
  • jQuery 层级选择器

    2018-11-13 16:23:00
    除了基本的选择器外,jQuery层级选择器更加灵活,也更强大。 因为DOM的结构就是层级结构,所以我们经常要根据层级关系进行选择。 层级选择器(Descendant Selector) 如果两个DOM元素具有层级关系,就可以用$('...
  • jquery 层级选择器

    2019-10-29 11:49:31
    关于层级选择器。 $("parent > child") 选择所有指定“parent”元素中指定的“child”的直接子项元素。 parent :任何有效的选择器。 child: 用来筛选子元素的选择...
  • 主要介绍了jQuery层级选择器用法,实例分析了常见的四种层级选择器的使用技巧,并给出了实例总结,需要的朋友可以参考下
  • 主要为大家详细介绍了jQuery层级选择器实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • Jquery层级选择器

    2021-02-26 15:26:51
    1.ancestor descendant 在给定的祖先元素下匹配所有的后代元素 parent > child 在给定的父元素下匹配所有的子元素 prev + next 匹配所有紧接在 prev 元素后的 next 元素 prev ~ siblings 匹配 prev 元素之后的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,054
精华内容 4,821
关键字:

jquery层级选择器