jQuery一些常用的选择器

最新推荐文章于 2024-07-22 15:13:59 发布

飞翔的荷兰人103

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量93

点赞数

分类专栏： jQuery 文章标签： jquery javascript js

本文链接：https://blog.csdn.net/jhaglkl/article/details/105847191

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

所有选择器都在代码中，就不一一列出了！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/jquery/dist/jquery.js"></script>
</head>
<body>
    <!-- <div class="divs">1</div>
    <div id="div1">2</div>
    <div class="divs">3</div>
    <div>4</div>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button> -->
    <!-- <ul>
        <li>1</li>
        <li>2
            <div>3</div>
        </li>
        <li>4
            <div>5</div>
        </li>
        <li>6
            <div>7</div>
        </li>
        <li>8</li>
    </ul>
    <ul class="divs">
        <li>1</li>
        <li>2
            <div>3</div>
        </li>
        <li>4
            <div>5</div>
        </li>
        <li>6
            <div>7</div>
        </li>
        <li>8</li>
    </ul>
    <div>9</div>

    <div class="divs">
        <div></div>
        <div class="divs"></div>
        <div></div>
    </div>
    <div class="divs">
        <div></div>
        <div class="divs"></div>
        <div></div>
    </div>
    <div class="divs">
        <div></div>
        <div class="divs"></div>
        <div></div>
    </div> -->

   <!--  <ul>
        <li>-1</li>
        <span>0</span>
        <li>1</li>
        <li>2</li>
        <li id="li0">3</li>  
        <li>4</li>
        <li>5</li>
        <span>0</span>
        <li>6</li>
    </ul> -->

    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <script>
        $("div");//按照标签名称将元素放在一个列表中，这个列表就叫做jQuery对象

        console.log($("div"));
        $("div").html("<a href='#'>1</a>")


        var divs=document.querySelectorAll("div");
        for(var i=0;i<divs.length;i++){
            divs[i].innerHTML="<a href='#'>1</a>";
        }


           console.log( $("#div1"));//id选择器

        console.log($(".divs"));
        $(".divs").css("color","red");


        标签名选择器  id选择器   class选择器

        jQuery对象是一个列表，可以包含很多，也可以包含一个元素，
        所有的DOM方法，jQuery对象都不能使用


        DOM对象是一个对象，只能是一个对象，所有的jQuery方法DOM都不能使用

        jQuery常用方法
        DOM转换为jQuery
        jQuery转换为DOM数组
        jQuery列表中提取DOM
        jQuery列表中提取某个形成新的jQuery对象


        当使用jQuery，我们都转换为jQuery使用，尽量不使用DOM
        $("div").html(""); 添加html
        $("div").text(""); 添加文本
        $("div").width(100);  设置div的行内样式width
        $("div").height(100);  设置div的行内样式width
        $("div").css("color","red");  设置div的行内样式
        $("div").on("click",clickHandler);  给所有div添加点击事件侦听
        $("div").off("click",clickHandler);  给所有div删除点击事件侦听


        $("button").on("click",clickHandler);
        function clickHandler(e){
            // console.log(this);
            console.log($(this));
        }

        将DOM元素转换为jQuery对象
        $(DOM)


        将jQuery元素转换成DOM对象
        将jQuery列表转换为DOM对象的数组
       var arr=Array.from($("button"));
       console.log(arr);
    将jQuery列表中第几个DOM元素提取出来出来变为了DOM对象
        console.log($("button")[0]);
        console.log($("button").get(0));


       console.log( $($("div")[3]));
        console.log($("div").eq(3))

        将jQuery列表中指定下标的元素筛选形成新的jQuery对象
        $("div").eq(3).css("color","red");
        $("div:eq(3)").css("color","red");



    // 上面讲了标签名、id、Class选择器

    * 通配符选择器
    div,span  群组选择器
    div span  后代选择器
    div>span  子代选择器
    div+span  紧邻的下一个兄弟选择器
    div~span  div下面的所有兄弟选择器

    console.log( $("li,div"));//群组选择器
    console.log($("ul div"));//后代选择器
    console.log($("li>div"));//子代选择器
    
    选择div标签中class是divs的所有元素
    console.log($("div.divs"));
    选择div标签后代中class是divs的元素
    console.log($("div .divs"));
        console.log($("div").find(".divs"));//等同于$("div .divs")

    所有div的子代有多少个元素
    console.log($("div>*").length);
    console.log($("div").children("span"));//等同于$("div>span");
    console.log($("div *"));
    


    $("#li0+").css("color","red");
    查找id是li0的下一个兄弟元素，这个兄弟元素可以是任意元素
    $("#li0+*").css("color","red");
    查找id是li0的下一个兄弟元素必须是li的，如果不是li元素就不能被选中
    $("#li0+li").css("color","red");
        $("#li0").next("li")  等同于$("#li0+li")
        $("#li0").next()  等同于$("#li0+")

    $("#li0~").css("color","red");
    查找id是li0的后面所有兄弟元素
    $("#li0~*").css("color","red");
    查找id是li0的后面所有li标签的兄弟元素
    $("#li0~li").css("color","red");
    $("#li0~span").css("color","red");
    $("#li0").nextAll("li")  等同于$("#li0~li")

        从id是li0的元素开始向下选择兄弟元素到span元素之前为止
        $("#li0").nextUntil("span").css("color","red");

        获取id是li0的上一个兄弟元素是li元素的
        $("#li0").prev("li").css("color","red");
        获取id是li0的向上所有兄弟元素是li元素的
        $("#li0").prevAll("li").css("color","red");
        从id是li0的元素开始向上选择兄弟元素到span元素之前为止
        $("#li0").prevUntil("span").css("color","red");

        根据id是li0的元素所有的上下的兄弟元素中是span
        $("#li0").siblings("span").css("color","red");




        $("div").width(50).height(50).css({
            backgroundColor:"red",
            border:"1px solid #000000"
        }).on("click",function(e){
           $(this).css("backgroundColor","green")
           .siblings().css("backgroundColor","red");
        });

    </script>
</body>
</html>

有关其他的选择器
jQuery属性选择器

飞翔的荷兰人103

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery一些常用的选择器

所有选择器都在代码中，就不一一列出了！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...
复制链接

扫一扫

专栏目录