JQUERY选择器--筛选选择器-阿里云开发者社区

JQUERY选择器--筛选选择器

2023-02-17 65

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： JQUERY选择器--筛选选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>筛选选择器</title>
    <script src="jquery-3.6.js"></script>
</head>
<body>
<ol>
    <li>borther元素1</li>
    <li>borther元素2</li>
    <li >borther元素3</li>
    <li>borther元素4</li>
    <li>borther元素5</li>
    <li>borther元素6</li>
    <li>borther元素11</li>
    <li>borther元素21</li>
    <li >borther元素31</li>
    <li>borther元素41</li>
    <li>borther元素51</li>
    <li>borther元素61</li>
    <a href="#">borther元素7</a>
</ol>
<ul>
    <li>borther元素8</li>
    <li>borther元素9</li>
    <li>borther元素10</li>
    <li>borther元素11</li>
    <li>borther元素12</li>
    <li class="items">borther元素13</li>
    <li>borther元素18</li>
    <li>borther元素19</li>
    <li>borther元素110</li>
    <li>borther元素111</li>
    <li>borther元素112</li>
    <li>borther元素113</li>
    <a href="#">borther元素14</a>
</ul>
<div class="current">current</div>
<div> not current</div>
<script>
    $(function () {
        /*$('*').css("font-size","45px");
        $('ul li ').css("color","red");
        $('ul li ').css("font-size","50px");
        $('ul li ').css("background-color","yellow");
        $('ol li.item').css("color","red");
        $('div.current:first').css("color","green");
        $('div:last').hasClass('current').css("color","blue");
        $('ul.li').nextAll().css("color","green");
*/
        var idx =2;
        $('ol li ').eq(idx).css("background-color","red");
        $('ul li:eq('+idx+')').css("background-color","pink");
        $('ul li.items').siblings().css("color","red");
      /*  console.log($('div:first')).hasClass('current');*/
       /* console.log($('div:last')).hasClass('current');*/
    });
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="jquery-3.6.js"></script>
    <title>筛选选择器</title>
</head>
<body>
<div class="father">
    <div class="son">我是father的儿子div1</div>
    <div class="son">我是father的女儿div3</div>
</div>
<div class="father">
    <div class="son">我是father的儿子div2</div>
</div>
<div class="nav">
    <p>这是nav的儿子</p>
    <div class="b">
        <p  class="c">这是nav的孙子1</p>
        <p  class="e">这是nav的孙子2</p>
        <p >这是nav的孙子3</p>
        <p class="f">这是nav的孙子4</p>
        <p >这是nav的孙子34</p>
        <p >这是nav的孙子44</p>
        <p class="a">这是nav的孙女</p>
    </div>
    <a href="">儿子</a>
</div>
<script>
    $(function () {
        /*$('*').css("font-size","30px");*/
        //父paarent
        $('.son').parent().css("color","red");
        $('.son').parent().css("font-size","23px");
        console.log($('p').parent());
        console.log($('p').parents());
        //查找p的父级
        //2子
        $('.a').parent().css("color","red");
        $('.a').parent().css("background-color","yellow");
        $('div.b>p').css("color","red");
        $('div.b>p').css("font-size","32px");
        $('div.b>p.c').css("color","pink");
        $('div.b>p.e').css("color","green");
        $("div.b>p.c:first").css("background", "red");
        $("div.b>p.c:first").css("font-size", "100px");
        $("div.b>p.f.first").css("font-size", "100px");
        $("div:eq(3)").css("background", "brown");
      /*  $('.nav').find('div:eq(0)').css("background-color", "pink");*/
        console.log($('div'));
        console.log($('.nav>div'));
        console.log($('.nav>div').children());
       /* console.log($('.nav>div').children('div'));
        console.log($('.nav>div').children('div').children());*/
        $('.nav').children("a").css("font-size","60px");
        $('nav>div').children('p').css("color","red");
    });
    //fond
</script>
</body>
</html>

JQUERY选择器--筛选选择器

热门文章

最新文章

相关课程

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

JQUERY选择器--筛选选择器

热门文章

最新文章

相关课程

相关电子书