jQuery选择器

伯思

于 2022-08-11 19:27:02 发布

阅读量193

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/hbl020305/article/details/126288591

版权

jQuery简介：

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。目前超过90%的网站都使用了jQuery库，jQuery的宗旨：写的更少，做得更多！

jQuery官网：

点击打开

jQuery选择器：

jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素，注意：jQuery选择器返回的是jQuery对象。

jQuery选择器有很多，基本兼容了css1到css3所有的选择器，并且jQuery还添加了很多复杂的选择器。

jQuery选择器虽然有很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到，所以我们平时真正能用到的只是少数的最常用的选择器。

基本选择器：

层次选择器：

基本属性选择器：

操作标签的属性：

过滤选择器：

筛选选择器：

筛选选择器（方法）：

全选反选：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.6.0.js"></script>
    <style>
        div {
            width: 200px;
            /* height: 20px; */
            margin-top: 10px;
        }
        
        .hover {
            background: rgba(54, 68, 230, .5);
        }
    </style>
</head>

<body>
    <input type="checkbox" id="qx">全选
    <input type="checkbox" id="fx">反选
    <hr>
    <div>
        <input type="checkbox" name="" id="">aa
    </div>
    <div>
        <input type="checkbox" name="" id="">ss
    </div>
    <div>
        <input type="checkbox" name="" id="">dd
    </div>
    <div>
        <input type="checkbox" name="" id="">ww
    </div>
    <div>
        <input type="checkbox" name="" id="">qq
    </div>
    <input type="button" value="点击" id="aaa">
    <input type="button" value="点击" id="aaaa">
    <script>
        // 全选
        $(function() {
            $("#qx").click(function() {
                var xuan = $("#qx").prop("checked");
                // console.log(xuan);
                $("div>input").prop("checked", xuan);
            })
            $("div>input").click(function() {
                    var xuan3 = $("div>input").length;
                    var xuan2 = $("div>input:checked").length;
                    // console.log(xuan2);
                    // console.log(xuan3);
                    if (xuan2 == xuan3) {
                        $("#qx").prop("checked", true);
                    } else {
                        $("#qx").prop("checked", false);
                    }
                })
                // 反选
            $("#fx").click(function() {
                $("div>input").each(function() {
                    var aa = $(this).prop("checked");
                    console.log(aa);
                    $(this).prop("checked", !aa);

                })
                var len1 = $('div>input').length;
                var len2 = $('div>input:checked').length;
                console.log(len1)
                console.log(len2)
                if (len2 == len1) {
                    $('#qx').prop('checked', true);
                } else {
                    $('#qx').prop('checked', false);
                }
            })

            $("div").mouseover(function() {
                $(this).attr("class", "hover")
            })
            $("div").mouseout(function() {
                $(this).removeAttr("class", "hover")
            })

            $("#aaa").click(function() {
                $("div:odd").css("background-color", "red")
            })
            $("#aaaa").click(function() {
                $("div:first").css("background-color", "yellow")
            })
        })
    </script>
</body>

</html>

点击展开盒子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.6.0.js"></script>
    <style>
        ul li {
            width: 150px;
            /* height: 30px; */
            list-style: none;
            background-color: yellow;
            text-align: center;
            line-height: 30px;
            border: 1px solid black;
        }
        
        ul li div {
            width: 150px;
            height: 300px;
            border: 1px solid black;
            display: none;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <span>aa</span>
            <div>啊啊</div>
        </li>
        <li>
            <span>bb</span>
            <div>娃娃</div>
        </li>
        <li>
            <span>cc</span>
            <div>全球</div>
        </li>
        <li>
            <span>dd</span>
            <div>谔谔</div>
        </li>
        <li>
            <span>ee</span>
            <div>头疼</div>
        </li>
    </ul>
    <script>
        $(function() {
                $("span").click(function() {
                    $(this).next().slideDown(1000).parent().siblings("li").children("div").slideUp(1000)
                })
            })
            //
    </script>
</body>

</html>