jQ选择器_安科网

1.首先说一下jQ基础选择器及使用方法

<div class="box">
            <ul>
                <li class="one">目录</li>
                <li>风花雪月</li>
                <li>云淡风轻</li>
                <li>轻声细语</li>
                <li id="li">醉生梦死</li>
                <li>白雪皑皑</li>
                <li>登高望远</li>
            </ul>
            <div class="boxa">
                <p class="two">目录</p>
                <p class="gl">格林童话</p>
                <p>希腊童话</p>
                <p class="ats">安徒生童话</p>
            </div>
        </div>
        <script>
            /* 基础选择器和css里面的选择其一摸一样
            id选择器 $("#id名")
            标签选择器    $(".类名")
            交集选择器    $("div.two")  要选择元素是div而且类名要是two
            并集选择器 $(".one，.two")    这个是只要有雷名为one或者two的 都可以
             */
            $(function(){
                $("#li").css("font-size","50px");
                $(".boxa").css("backgroundColor","#0f0");
                $("li").css("color","pink");
                $(".gl, .ats").css("backgroundColor","blue");
                $(".one, .two").css("border","1px solid orange");
            })
        </script>

2.子代和迭代

<body>
        <div class="father">
            <div>
                <span>span1</span>
                <span>span2</span>
                <span>span3</span>
            </div>
            <div>
                <div>div1</div>
                <div>div2</div>
                <span>span标签</span>
                <p>p标签</p>
            </div>
            <div></div>
            <p>p1</p>
            <p>p2</p>
            <p>p3</p>
            <span>span</span>
        </div>
        <script src="./jquery-3.5.1.js"></script>
        <script>
            // 子代选择器
            /* $("父元素>子元素")
            后迭代选择器
            $("父元素 后代元素") */
            
            $(function(){
                // 需求:找到类名为father的盒子下的所有子代div标签
                console.log($(".father>div"));
                
                // 需求:找到类名为father的合资下的所有子代div标签和p标签
                // console.log($(".father>div, p"));    //获取到.father下的所有子代div标签和页面上所有的p标签
                // console.log($(".father>(div,p)"));    //报错 jQuery里面压根没这种写法
                
                console.log($(".father>div, .father>p"));
                
                // 需求:找到father下的所有后代div
                console.log($(".father div"));
            })
        </script>
    </body>

3.过滤选择器

4.筛选选择器

jQ选择器

e度空间

相关推荐

JQ focus选择器的使用

JQ focus选择器的使用

JQ 子元素过滤选择器

JQ 属性选择器

JQ 可见性过滤选择器

JQ 基本过滤选择器

JQ 层次选择器

Javascript中css选择器的陷阱

jquery选择器详解

jquery ifream选择器

find选择器、不要滥用$(this)

JQ行选择 CSS3伪类选择器：nth-child()

jQuery常用选择器详解

jQuery.prototype.init选择器构造函数源码思路分析

jquery选择器的选择使用及性能介绍

jQuery基础框架浅入剖析

JQuery里面的几种选择器查找满足条件的元素$("#控件ID")

jQuery的选择器

JQ选择器

jQuery性能优化的一些参考建议

JQ基础之选择器

jqueryAPI使用之选择器