jQ选择器

Posted zycs

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQ选择器相关的知识,希望对你有一定的参考价值。

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

 1 <div class="box">
 2             <ul>
 3                 <li class="one">目录</li>
 4                 <li>风花雪月</li>
 5                 <li>云淡风轻</li>
 6                 <li>轻声细语</li>
 7                 <li id="li">醉生梦死</li>
 8                 <li>白雪皑皑</li>
 9                 <li>登高望远</li>
10             </ul>
11             <div class="boxa">
12                 <p class="two">目录</p>
13                 <p class="gl">格林童话</p>
14                 <p>希腊童话</p>
15                 <p class="ats">安徒生童话</p>
16             </div>
17         </div>
18         <script>
19             /* 基础选择器和css里面的选择其一摸一样
20             id选择器 $("#id名")
21             标签选择器    $(".类名")
22             交集选择器    $("div.two")  要选择元素是div而且类名要是two
23             并集选择器 $(".one,.two")    这个是只要有雷名为one或者two的 都可以
24              */
25             $(function(){
26                 $("#li").css("font-size","50px");
27                 $(".boxa").css("backgroundColor","#0f0");
28                 $("li").css("color","pink");
29                 $(".gl, .ats").css("backgroundColor","blue");
30                 $(".one, .two").css("border","1px solid orange");
31             })
32         </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.过滤选择器

<!-- 过滤选择器前面都会加一个冒号
:odd 找到索引号为奇数行的元素
:even 找到索引号为偶数行的元素

:eq(index) 找到传入的索引号对应的元素
-->

4.筛选选择器

<!--
筛选选择器主要是方法
children(选择器) 子类选择器 $("父元素>子元素") 用法 $("父元素").children("子元素选择器")
find(选择器) 后代选择器 $(“父元素 子元素) 用法 $("父元素").find("子元素选择器")
siblings(选择器) 兄弟选择器 $(我的是兄弟节点 不包括自己) 用法 $("兄弟元素").siblings("兄弟元素")
parent() 父元素选择器 用法 $("选择器").parent()
next() 下一个兄弟元素 用法 $("选择器").next()
prev() 上一个兄弟元素 用法 $("选择器").prev()
eq(index) 找对应索引的元素 $("li:eq(0)") 用法 $("li").eq(0)
-->

以上是关于jQ选择器的主要内容,如果未能解决你的问题,请参考以下文章

jq-选择器

jqueryAPI使用之选择器

JQ001-认识jQuery 和 JQ002-jQuery选择器

VSCode自定义代码片段——CSS选择器

jq框架封装学习笔记1-框架介绍与选择器框架

jq基础