jQuery基础 点击 按钮 是div隐藏和显示 后再选择器 和 后代子元素选择器 基本属性选择器的案例 全选全部选 jquery 缓慢弹出 在弹回 案例

于 2022-08-11 20:32:20 发布
阅读量306 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/red_HTML/article/details/126279749

$ == jquery

$(function(){

        基本结构

})

点击 按钮 是div隐藏和显示 

<!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.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: red;
            margin-bottom: 20px;
            display: none;
        }
    </style>
</head>

<body>
    <input type="button" value="显示" id="button">
    <input type="button" value="隐藏" id="button1">
    <div></div>
    <div></div>
    <script>
        $("#button").click(function() {
            // $("div").css("display", "block")
            // show(1000) 代表运行1秒
            $("div").show(1000)
        })
        $("#button1").click(function() {
            $("div").hide(1000)
        })
    </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.min.js"></script>
    <style>
        input {
            outline-style: none;
        }
        
        p,
        div {
            width: 300px;
            height: 300px;
            background: red;
        }
    </style>
</head>

<body>
    <input type="text" id="text1">+
    <input type="text" id="text2">=
    <input type="text" id="sum" disabled>
    <input type="button" value="求和" id="qh">
    <input type="button" value="变化" id="bh">
    <div>这是一个div</div>
    <p class="p0">这是一个p标签</p>
    <script>
        //简答的求和运算
        $(function() {
                $("#qh").click(function() {
                    var text1 = $("#text1").val()
                    var text2 = $("#text2").val()
                    var he = parseInt(text1) + parseInt(text2)
                    $("#sum").val(he)
                })
            })
            //div 和 p标签里面的颜色和 背景的改变
        $(function() {
            $("#bh").click(function() {
                $("div,p").css("color", "white")
                $("p.p0").css("background", "orange")
            })
        })
    </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.min.js"></script>
</head>

<body>
    <ul class="ul">
        <li>
            第一个ul里面的li
            <ul>
                <li>
                    第二个ul里面的li
                </li>
            </ul>
        </li>
        <li>
            第一个ul里面的li
        </li>
    </ul>
    <script>
        $(function() {
            $(".ul li").css("border", "1px solid blue")
            $(".ul>li").css("border", "1px solid red")
        })
    </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.min.js"></script>
    <style>
        .flex {
            display: flex;
            width: 1000px;
        }
        
        div {
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <input type="button" value="全部的class" id="class0">
    <input type="button" value="没有box" id="class1">
    <input type="button" value="全部的b" id="class2">
    <input type="button" value="class的值是box" id="class3">
    <input type="button" value="clas的值 是以b开头的" id="class4">
    <div class="flex">
        <div>没有class</div>
        <div class="box">box</div>
        <div class="box">box</div>
        <div class="boo">boo</div>
        <div class="reds">redse</div>
    </div>

    <script>
        $(function() {
            $("#class0").click(function() {
                $("div[class]").css("background", "red")
            })
            $("#class1").click(function() {
                $("div[class!='box']").css("background", "blue")
            })

            $("#class2").click(function() {
                $("div[class*='b']").css("background", "orange")
            })
            $("#class3").click(function() {
                $("div[class='box']").css("background", "black")
            })
            $("#class4").click(function() {
                $("div[class^='b']").css("background", "green")
            })
        })
    </script>
</body>

</html>

 

 全选全部选 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="jquery-3.6.0.min.js"></script>
    <style>
        table {
            /* background: rgb(219, 0, 0); */
            border: 1px solid red;
            border-collapse: collapse;
        }
        
        tr th {
            width: 100px;
        }
        
        tr th,
        td {
            /* background: white; */
            height: 40px;
            text-align: center;
            border: 1px solid red;
            /* padding: 0px 30px; */
        }
    </style>
</head>

<body>
    <form action="">
        <table border="0">
            <thead>
                <tr>
                    <th><input type="checkbox" name="" id="qx"></th>
                    <th>全选</th>
                    <th><input type="checkbox" name="" id="fx"></th>
                    <th>反选</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" name="" id="input0"></td>
                    <td colspan="3">web前端0</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="" id="input1"></td>
                    <td colspan="3">web前端1</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="" id="input2"></td>
                    <td colspan="3">web前端2</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="" id="input3"></td>
                    <td colspan="3">web前端3</td>
                </tr>
            </tbody>
        </table>
    </form>
    <input type="button" value="隔行变色" id="btn1">
    <input type="button" value="第一行改变背景" id="btn2">
    <input type="button" value="找到第一个元素" id="btn3">
    <input type="button" value="大于索引值1的最小的是3" id="btn4">
    <script>
        $(function() {
            $("#qx").click(function() {
                var qx = $("#qx").prop("checked")
                    // console.log(qx)
                    // 获取到全部的input 在 然后qx的状态 附到 input
                $("tbody input[type='checkbox']").prop("checked", qx)
            })

            $("tbody input[type='checkbox']").click(function() {
                // 获取到全部选中的个数
                var length = $("tbody input[type='checkbox']").length
                    // 获取到当前选中了多少个
                var count = $("tbody input[type='checkbox']:checked").length

                if (count == length) {
                    $("#qx").prop("checked", true)
                } else {
                    $("#qx").prop("checked", false)
                }
            })
            $("#fx").click(function() {
                $("tbody input[type='checkbox']").each(function() {
                    // 获取到选中的状态
                    this.checked = !this.checked
                    var length = $("tbody input[type='checkbox']").length
                        // 获取到当前选中了多少个
                    var count = $("tbody input[type='checkbox']:checked").length
                    if (count == length) {
                        $("#qx").prop("checked", true)
                    } else {
                        $("#qx").prop("checked", false)
                    }
                })

            })
            $("#btn1").click(function() {
                $("tbody tr:odd").css("background", "red")
            })
            $("#btn2").click(function() {
                $("tbody tr:eq(0)").css("background", "green")
            })
            $("#btn3").click(function() {
                $("tbody tr:first").css("background", "orange")
            })
            $("#btn4").click(function() {
                $("tbody tr:gt(1):lt(3)").css("background", "blue")
            })
        })
    </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="jquery-3.6.0.min.js"></script>
    <style>
        ul li {
            list-style: none;
        }
        
        ul li span {
            width: 200px;
            height: 30px;
            display: block;
            line-height: 30px;
            text-align: center;
            background: red;
            border: 1px solid black;
        }
        
        ul li div {
            width: 200px;
            height: 200px;
            background: gainsboro;
            border: 1px solid gainsboro;
            display: none;
        }
    </style>
</head>

<body>
    <div>
        <ul>
            <li>
                <span>第一个span</span>
                <div></div>
            </li>
            <li>
                <span>第一个span</span>
                <div></div>
            </li>
            <li>
                <span>第一个span</span>
                <div></div>
            </li>
            <li>
                <span>第一个span</span>
                <div></div>
            </li>
        </ul>
    </div>
    <script>
        $(function() {
            $("ul li span").click(function() {
                $(this).next().slideDown(1000).parent().siblings().children("div").slideUp(1000)
            })


        })
    </script>
</body>

</html>

 

大坤...
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值