移入图片透明设置多个css 样式的方法添加样式删除样式样式的切换判断样式是否存在选项卡点击点击简化和更多元素的添加，和使用

本文链接：https://blog.csdn.net/red_HTML/article/details/126297834

移入图片透明，默认样式opactiy 为1

<!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>
        div {
            width: 350px;
            height: 230px;
            border: 1px solid red;
            margin: 20px auto;
            background: black;
        }
        
        div ul {
            margin: 0;
            padding: 0;
        }
        
        div ul li {
            list-style: none;
            float: left;
        }
        
        div ul li:nth-child(4) {
            clear: both;
        }
        
        div ul li img {
            width: 100px;
            height: 100px;
            border: 3px solid rgb(255, 255, 255);
        }
    </style>
</head>

<body>
    <div>
        <ul>
            <li><img src="img/01.jpg" alt=""></li>
            <li><img src="img/02.jpg" alt=""></li>
            <li><img src="img/03.jpg" alt=""></li>
            <li><img src="img/01.jpg" alt=""></li>
            <li><img src="img/02.jpg" alt=""></li>
            <li><img src="img/03.jpg" alt=""></li>
        </ul>
    </div>
    <script>
        $(function() {
            $("ul li").mouseover(function() {
                $(this).css("opacity", 1).siblings().css("opacity", 0.5)
            })
            $("ul li").mouseout(function() {
                $("ul li").css("opacity", 1)
            })
        })
    </script>
</body>

</html>

visible 用来获取可见的元素

hidden 用来获取到隐藏的元素

<!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>
        div {
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
</head>

<body>
    <div>

    </div>
    <input type="button" value="button" id="button">
    <script>
        $(function() {
            $("#button").click(function() {
                // visible 获取显示的div
                $("div:visible").hide(1000)
                    // 获取隐藏的元素
                $("div:hidden").show(1000)
            })

        })
    </script>
</body>

</html>

设置多个css 样式的方法

<!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>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        
        .div {
            background: orange;
        }
    </style>
</head>

<body>
    <div>
        wwwwwwwwwwwwwwwwwwww
    </div>
    <script>
        $(function() {
            // 链式第一种方式
            $("div").click(function() {
                    $("div").css("background", "black").css("color", "white")
                })
                // 第二种方式
                $("div").click(function() {
                    $("div").css({
                        "background": "black",
                        "color": "white"
                    })
                })
            // $("div").click(function() {
            //     $("div").toggleClass("div")
            // })

        })
    </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>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            float: left;
            text-align: center;
            line-height: 100px;
            margin: 10px;
        }
        
        .basic {
            background: red;
        }
        
        .bigger {
            color: orange;
        }
    </style>
</head>

<body>
    <input type="button" value="点击追加样式">
    <input type="button" value="添加bigger类">
    <input type="button" value="移除bigger类">
    <input type="button" value="判断bigger类">
    <input type="button" value="切换">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <script>
        $(function() {
            // 点击追加样式  addClass() 添加样式
            $("input").eq(0).click(function() {
                    $("div").addClass("basic")
                })
                // 添加bigger类 
            $("input").eq(1).click(function() {
                    $("div").addClass("bigger")
                })
                // 移除bigger类 removeclass() 删除样式
            $("input").eq(2).click(function() {
                    $("div").removeClass("bigger")
                })
                // 判断bigger类
            $("input").eq(3).click(function() {
                    console.log($("div").hasClass("bigger"))
                    if (!$("div").hasClass("bigger")) {
                        $("div").addClass("basic")
                    }
                })
                // toggleClass("bigger")切换 可用于 样式的切换  toggkleClass()  用于样式的切换
            $("input").eq(4).click(function() {
                $("div").toggleClass("bigger")
            })
        })
    </script>
</body>

</html>

addClass 给元素添加 class 如果元素上已经有其他的 class name ，那么将会新增加的追加到现有的classname后面

removeClass 可已经元素的某个class移除，如果为传参数则可以元素上的class的所有class移除掉

hasClass() 用于判断元素上是否有class 如果有就返回true 如果没有就返回false

toggleClass("bigger")切换可用于样式的切换 toggkleClass() 用于样式的切换

选项卡点击

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul li {
            width: 100px;
            height: 40px;
            border: 1px solid red;
            float: left;
            list-style: none;
            text-align: center;
            line-height: 40px;
            background: red;
            border: 1px solid black;
        }
        
        ul li a {
            text-decoration: none;
            color: black;
        }
        
        div {
            width: 300px;
            height: 200px;
            border: 3px solid black;
            display: none;
            line-height: 200px;
            text-align: center;
        }
        
        .active {
            display: block;
        }
        
        .green {
            background: green;
        }
    </style>
</head>

<body>
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
    <div class="active">1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function() {
            $("ul li").click(function() {
                // children("a")  获取当前元素的子元素
                // parent("li")  获取他的父元素
                $(this).children("a").addClass("green").parent("li").siblings().children("a").removeClass("green")
                    //  获取元素的下标
                var index = $(this).index()
                $("div").eq(index).addClass("active").siblings("div").removeClass("active")
            })
        })
    </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>
        .box {
            width: 300px;
            height: 400px;
        }
        
        .box div {
            width: 300px;
            height: 100px;
        }
        
        ul {
            margin: 0;
            padding: 0;
        }
        
        ul li {
            list-style: none;
            width: 90px;
            height: 30px;
            float: left;
            text-align: center;
            line-height: 30px;
        }
        
        a {
            text-decoration: none;
        }
        
        #a0 {
            width: 300px;
            height: 30px;
            display: inline-block;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li><a href="">文本</a></li>
            <li><a href="">文本</a></li>
            <li><a href="">文本</a></li>
            <li><a href="">文本</a></li>
            <li><a href="">文本</a></li>
            <li><a href="">文本</a></li>
            <li><a href="">文本</a></li>
            <li><a href="">文本</a></li>
            <li><a href="">最后一个</a></li>
        </ul>
        <a href="#" id="a0">简化</a>
    </div>
    <script>
        $(function() {
            $("#a0").click(function() {
                if ($(this).text() == "简化") {
                    $("ul li:gt(4):not(:last)").hide()
                    $(this).text("更多")
                } else {
                    $("ul li:gt(4):not(:last)").show()
                    $(this).text("简化")
                }
            })
        })
    </script>
</body>

</html>

元素的添加，和使用

append( )给某元素添加子元素

appendto( )将某个元素添加到目标元素中

<!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>
    <input type="button" value="append" class="btn1">
    <input type="button" value="appendTo" class="btn2">
    <input type="button" value="prepend" class="btn3">
    <input type="button" value="preoendTo" class="btn4">
    <input type="button" value="before" class="btn5">
    <input type="button" value="after" class="btn6">
    <input type="button" value="remove" class="btn7">
    <input type="button" value="empty" class="btn8">
    <input type="button" value="替换内容" class="btn9">
    <input type="button" value="替换指定内容" class="btn10">
    <input type="button" value="复制" class="btn11">
    <ul>
        <li>苹果1</li>
        <li>苹果2</li>
        <li>苹果3</li>
    </ul>
    <script>
        $(function() {
            $(".btn1").click(function() {
                // 直接给ul元素添加li标签在尾部添加
                $("ul").append("<li>11</li>")
            })
            $(".btn2").click(function() {
                // appendTo指定元素添加到那？尾部添加
                $("<li>22</li>").appendTo("ul")
            })
            $(".btn3").click(function() {
                // 直接给ul元素添加li标签在头部添加
                $("ul").prepend("<li>33</li>")
            })
            $(".btn4").click(function() {
                // 指定元素添加到那？头部添加
                $("<li>33</li>").prependTo("ul")
            })
            $(".btn5").click(function() {
                //添加到ul的兄弟元素 添加到上面
                $("ul").before("<h3>biaodan </h3>")
            })
            $(".btn6").click(function() {
                //添加到ul的兄弟元素 添加到下面
                $("ul").after("<h3>biaodan </h3>")
            })
            $(".btn7").click(function() {
                //删除指定元素  eq指定下标 从0 开始
                $("ul li").remove(":eq(1)")
            })
            $(".btn8").click(function() {
                //删除全部的子元素
                $("ul").empty()
            })
            $(".btn9").click(function() {
                //替换内容
                $("ul li:eq(1)").replaceWith("<li>ssssssss</li>")
            })
            $(".btn10").click(function() {
                //替换指定内容
                $("<li>ssssssss</li>").replaceAll("ul li:eq(1)")
            })
            $(".btn11").click(function() {
                //复制元素  并指定元素进行添加
                $("ul li:eq(0)").clone().replaceAll("ul li:eq(1)")
            })

        })
    </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;
        }
    </style>
</head>

<body>
    <input type="text" id="text1">
    <input type="text" id="text2">
    <input type="button" value="添加" id="tj">
    <input type="button" value="删除" id="sc">
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" name="" id=""></th>
                <th>姓名</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox"></td>
                <td>大明</td>
                <td>二明</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>大明</td>
                <td>二明</td>
            </tr>
        </tbody>
        <script>
            $(function() {
                $("#tj").click(function() {
                    var text1 = $("#text1").val()
                    var text2 = $("#text2").val()
                    var tr = $("<tr><td><input type='checkbox'></td><td>" + text1 + "</td><td>" + text2 + "</td></tr>")
                    $("tbody").append(tr)
                })
                $("#sc").click(function() {
                    // parent() 返回到上一级的父元素
                    $("tbody tr td input:checked").parent().parent().remove()
                })
            })
        </script>
    </table>
</body>

</html>

绑定bind("事件类型"，function(){ } )

on事件绑定可以实现动态绑定

<!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: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>

<body>
    <div>
        这是一个div标签
    </div>
    <p>ssssss</p>
    <input type="button" value="button" id="btn">
    <script>
        $(function() {
            // $("div").click(function() {
            //     $(this).css("color", "white")
            // })
            // $("div").mouseover(function() {
            //     $(this).css("background", "green")
            // })
            // $("div").mouseout(function() {
            //     $(this).css("background", "red")
            // })
            // on({
            // 事件：函数（）{
            // 要干什么
            // }
            // })
            $("div").on({
                "click": function() {
                    $(this).css("color", "white")
                },
                "mouseover": function() {
                    $(this).css("background", "green")
                },
                "mouseout": function() {
                    $(this).css("background", "red")
                }
            })

            // $("#btn").click(function() {
            //         $("body").append("<div>这是一个新增的div</div>")
            //     })
            // on事件绑定可以实现动态绑定
            // 实现所有的body都可以绑定上click事件
            // body  on事件       p元素    
            $("body").on("click", "p", function() {
                // 当前的 p 标签颜色 改变
                $(this).css("color", "orange")
            })
        })
    </script>
</body>

</html>

unbind("事件名称") 解绑所有事件

键盘按键移动盒子改变盒子的样式

<!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;
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="div"></div>
    <script>
        $(function() {
            var x = 0
            $(document).on("keydown", function(event) {
                switch (event.keyCode) {
                    case 65:
                        $("div").css("background", "blue")
                        break;
                    case 66:
                        $("div").css("background", "orange")
                        break;
                    case 67:
                        $("div").css("background", "green")
                        break;
                    case 68:
                        $("div").css("background", "yellow")
                        break;
                    case 39:
                        x += 10
                        $("div").css("left", x + "px")
                        break;
                    default:
                        break;
                }
            })
        })
    </script>
</body>

</html>