jQuery引入----练习

忘是亡心i 2024-03-22 11:09 78阅读 0赞

## jQuery引入----练习 ##

*  html

<!DOCTYPE html>
    <html>
    
    <head>
        <title>
            jQuery引入
        </title>
    
        
        <link rel="stylesheet" href="../css/a.css">
    
        
        <script type="text/javascript" src="../js/jquery-3.6.4.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("div").click(function () {
                    $(this).hide();
                });
            });
    /*         $(function () {
                $("ul li").css("color", "red");
            }); */
            $(function(){
                $("ul li:first").css("color","green");
                $("ul li:last").css("color","red");
                $("ul li:eq(1)").css("color","pink");
            })
    
            $(function(){
                $("ol li:odd").css("color","skyblue");  //奇数
                $("ol li:even").css("color","pink");   //偶数
            })
    
        </script>
    </head>
    
    <body>
        <div id="0">
            我叫div
        </div>
        <div id="1">
            hhhh
        </div>
        <div id="1">
            HHHHHHHHHHHH
        </div>
    
        <ul>
            <li>
                aaaaaaaaa
            </li>
            <li>
                bbbbbbbbb
            </li>
            <li>
                ccccccccccc
            </li>
        </ul>
    
        <ol>
            <li>
                ddddddddddddddddddddd
            </li>
            <li>
                eeeeeeeeeeeeeeeeeeeeeeeeeee
            </li>
            <li>
                fffffffffffffffffffffffffffffffffff
            </li>
            <li>
                ggggggggggggggggggggggggggggggggggggggggg
            </li>
        </ol>
    
    </body>
    
    </html>

*  css

div{
        width: 300px;
        height: 100px;
        background-color: pink;
    }
    /* ul{
        color: red;
    } */

*  效果：

![d5d7120c47e54fe0b04d366d9b0d28b6.png][]

--------------------

html

<!DOCTYPE html>
    <html>
    
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                font-size: 12px;
            }
    
            ul {
                list-style: none;
            }
    
            a {
                text-decoration: none;
            }
    
            .wrapper {
                width: 250px;
                height: 248px;
                margin: 100px auto 0;
                border: 1px solid pink;
                border-right: 0;
                overflow: hidden;
            }
    
            #left,
            #content {
                float: left;
            }
    
            #left li {
                background: url(images/lili.jpg) repeat-x;
            }
    
            #left li a {
                display: block;
                width: 48px;
                height: 27px;
                border-bottom: 1px solid pink;
                line-height: 27px;
                text-align: center;
                color: black;
            }
    
            #left li a:hover {
                background-image: url(images/abg.gif);
            }
    
            #content {
                border-left: 1px solid pink;
                border-right: 1px solid pink;
            }
        </style>
        <script src="../js/jquery-3.6.4.min.js"></script>
    
        <script>
            $(function(){
                $("#left li").mouseover(function(){
                    var index=$(this).index();
                    //console.log(index);
                    $("#content div").eq(index).show();
                    $("#content div").eq(index).siblings().hide();
                })
            })
        </script>
    </head>
    
    <body>
        <div class="wrapper">
            <ul id="left">
                <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>
            <div id="content">
                <div>
                    <a href="#"><img src="../images/女靴.jpg" width="200" height="250" /></a>
                </div>
                <div>
                    <a href="#"><img src="../images/雪地靴.jpg" width="200" height="250" /></a>
                </div>
                <div>
                    <a href="#"><img src="../images/冬裙.jpg" width="200" height="250" /></a>
                </div>
                <div>
                    <a href="#"><img src="../images/呢大衣.jpg" width="200" height="250" /></a>
                </div>
                <div>
                    <a href="#"><img src="../images/毛衣.jpg" width="200" height="250" /></a>
                </div>
                <div>
                    <a href="#"><img src="../images/棉服.jpg" width="200" height="250" /></a>
                </div>
                <div>
                    <a href="#"><img src="../images/女裤.jpg" width="200" height="250" /></a>
                </div>
                <div>
                    <a href="#"><img src="../images/羽绒服.jpg" width="200" height="250" /></a>
                </div>
                <div>
                    <a href="#"><img src="../images/牛仔裤.jpg" width="200" height="250" /></a>
                </div>
    
            </div>
    
    
        </div>
    </body>
    
    </html>

效果：

![1a1446eaa3cb41ea9c454f1318514bf6.png][]

![6350ded6f8274423a2cd80ab499c7185.png][]

--------------------

html

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="../js/jquery-3.6.4.min.js"></script>
    </head>
    
    <body>
        <button>快速</button>
        <button>快速</button>
        <button>快速</button>
        <button>快速</button>
        <button>快速</button>
        <button>快速</button>
        <button>快速</button>
    
        <script>
            $(function(){
                $("button").click(function(){
                    $(this).css("background","pink");
                    $(this).siblings("button").css('background',"");
                });
            })
        </script>
    </body>
    
    </html>

效果：

![55dfa68f486647138670b91b86837b64.png][]

![d1c5ac9d98454395a6ff73d1d7d60a6e.png][]

--------------------

html

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>新浪下拉菜单</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            li {
                list-style-type: none;
            }
            
            a {
                text-decoration: none;
                font-size: 14px;
            }
            
            .nav {
                margin: 100px;
            }
            
            .nav>li {
                position: relative;
                float: left;
                width: 80px;
                height: 41px;
                text-align: center;
            }
            
            .nav li a {
                display: block;
                width: 100%;
                height: 100%;
                line-height: 41px;
                color: #333;
            }
            
            .nav>li>a:hover {
                background-color: #eee;
            }
            
            .nav ul {
                display: none;
                position: absolute;
                top: 41px;
                left: 0;
                width: 100%;
                border-left: 1px solid #FECC5B;
                border-right: 1px solid #FECC5B;
            }
            
            .nav ul li {
                border-bottom: 1px solid #FECC5B;
            }
            
            .nav ul li a:hover {
                background-color: #FFF5DA;
            }
        </style>
        <script src="../js/jquery-3.6.4.min.js"></script>
    </head>
    
    <body>
        <ul class="nav">
            <li>
                <a href="#">微博</a>
                <ul>
                    <li>
                        <a href="">私信</a>
                    </li>
                    <li>
                        <a href="">评论</a>
                    </li>
                    <li>
                        <a href="">@我</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">微博</a>
                <ul>
                    <li>
                        <a href="">私信</a>
                    </li>
                    <li>
                        <a href="">评论</a>
                    </li>
                    <li>
                        <a href="">@我</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">微博</a>
                <ul>
                    <li>
                        <a href="">私信</a>
                    </li>
                    <li>
                        <a href="">评论</a>
                    </li>
                    <li>
                        <a href="">@我</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">微博</a>
                <ul>
                    <li>
                        <a href="">私信</a>
                    </li>
                    <li>
                        <a href="">评论</a>
                    </li>
                    <li>
                        <a href="">@我</a>
                    </li>
                </ul>
            </li>
        </ul>
        <script>
            $(function() {
                // 鼠标经过
                $(".nav>li").mouseover(function() {
                    // $(this) jQuery 当前元素  this不要加引号
                    // show() 显示元素  hide() 隐藏元素
                    $(this).children("ul").show();
                });
                // 鼠标离开
                $(".nav>li").mouseout(function() {
                    $(this).children("ul").hide();
                })
            })
        </script>
    </body>
    
    </html>

效果：

![c2237254f45d488f83e3e4a58d2d5a64.png][]

![950660d74f26444890d286dd6e8d9de1.png][]

--------------------

html

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="../js/jquery-3.6.4.min.js"></script>
    </head>
    
    <body>
        woshi body 的文字
        <button>快速</button>
        <button>快速</button>
        <button>快速</button>
        <button>快速</button>
        <button>快速</button>
        <button>快速</button>
        <button>快速</button>
        <script>
            $(function() {
                // 1. 隐式迭代 给所有的按钮都绑定了点击事件
                $("button").click(function() {
                    // 2. 让当前元素颜色变为红色
                    // $(this).css("color", "red");
                    // 3. 让其余的姐妹元素不变色 
                    // $(this).siblings().css("color", "");
    
                    // 链式编程
                    //$(this).css("color", "red").siblings().css("color", "");
                    // 我的颜色为红色, 我的兄弟的颜色为空
    
                    // $(this).siblings().css('color', 'red');
                    // 我的兄弟变为红色  ,我本身不变颜色
                    
                   $(this).siblings().parent().css('color', 'blue');
                    // 最后是给我的兄弟的爸爸 body 变化颜色 
    
                });
            })
        </script>
    </body>
    
    </html>

效果：

![dfdaffad893f495aacaea90a8be31918.png][]

--------------------

### **2.1**  **操作** **css** **方法** ###

![215e5b4dd5544e279c330b58eb4fd93b.png][]

html

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="../js/jquery-3.6.4.min.js"></script>
        <style>
            div {
                width: 200px;
                height: 200px;
                background-color: pink;
            }
        </style>
    </head>
    
    <body>
        <div></div>
        <script>
            // 操作样式之css方法
            $(function() {
                console.log($("div").css("width"));
                // $("div").css("width", "300px");
                // $("div").css("width", 300);
                // $("div").css(height, "300px"); 属性名一定要加引号
                $("div").css({
                    width: 400,
                    height: 400,
                    backgroundColor: "red"
                        // 如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号
                })
            })
        </script>
    </body>
    
    </html>

效果：

![b1e13952cede4091baab5fc0c57c9bfd.png][]

### **2.2**  **设置类样式方法** ###

--------------------

![99cd152978474043a21c053fe1f17763.png][]

html

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            div {
                width: 150px;
                height: 150px;
                text-align: center;
                background-color: pink;
                margin: 100px auto;
                transition: all 1s;
            }
    
            .current {
                background-color: red;
                transform: rotate(360deg);
            }
        </style>
        <script src="../js/jquery-3.6.4.min.js"></script>
    </head>
    
    <body>
        <div class="current">I am a boy !</div>
        <script>
            $(function () {
                // 1. 添加类 addClass()
                /*$("div").click(function() {
                    $(this).addClass("current");
                }) 
                */
    
                // 2. 删除类 removeClass()
                /*$("div").click(function () {
                    $(this).removeClass("current");
                }) */
    
                // 3. 切换类 toggleClass()
                $("div").click(function(){
                    $(this).toggleClass("current");
                })
    
            })
        </script>
    </body>
    
    </html>

效果：

![0d6e6d385f4640cfb23a97ddca56c3e6.png][]

![73733b17772740fe83d186a86cbb3eaf.png][]

![ac03b57e8bce4228ba2bd308fc2ffcfe.png][]

--------------------

### **案例：****tab** **栏切换** ###

① 点击上部的 li ，当前 li  添加 current 类，其余兄弟移除类。

② 点击的同时，得到当前 li  的索引号

③ 让下部里面相应索引号的 item 显示，其余的 item 隐藏

#### html： ####

效果：

![ce574253027f4f81b4a835fb61cfb39b.png][]

![cf235746f1734dafabb48bc3a4c2e40c.png][]

--------------------

### **3.1**  **显示隐藏效果** ###

#### **1.** **显示语法规范** ####

> show(\[speed,\[easing\],\[fn\]\])

#### **2.** **显示****参数** ####

> （1）参数都可以省略， 无动画直接显示。
> 
> （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
> 
> （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
> 
> （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

#### **1.** **切换****语法****规范** ####

![59606f69a51f4438ae4ca7f7b9ab605d.png][]

*  html

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            div {
                width: 150px;
                height: 300px;
                background-color: pink;
            }
    
            #Img0{
                width: 150px;
                height: 300px;
            }
        </style>
        <script src="../js/jquery-3.6.4.min.js"></script>
    </head>
    
    <body>
        <button>显示</button>
        <button>隐藏</button>
        <button>切换</button>
        <div>
            <img id="Img0" src="../images/冬裙.jpg" alt="0">
        </div>
        <script>
    
            $(function(){
    
                $("button").eq(0).click(function(){
                    $("div").show(1000,function(){
                        alert(1);
                    });
                })
    
                $("button").eq(1).click(function(){
                    $("div").hide(1000,function(){
                        alert(1);
                    });
                })
    
                $("button").eq(2).click(function(){
                    $("div").toggle(1000);
                })
            })
        </script>
    </body>
    
    </html>

*  效果：

![f0e3b34fa72846ebbf1a45c67e2bf997.png][]

![8c442d9a629b4b4eb13b9518b9328420.png][]

--------------------

### **3.2**  **滑动效果** ###

![e93e00add6e8410b873d06036a279094.png][]

![bc4c337cd4664b3ca8004b07e866a217.png][]

![d82d80904b964552948f1614b7555b31.png][]

*  html

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            div {
                width: 150px;
                height: 300px;
                background-color: pink;
                display: none;
            }
        </style>
        <script src="../js/jquery-3.6.4.min.js"></script>
    </head>
    
    <body>
        <button>下拉滑动</button>
        <button>上拉滑动</button>
        <button>切换滑动</button>
        <div></div>
        <script>
            $(function () {
                $("button").eq(0).click(function () {
                    // 下滑动 slideDown()
                    $("div").slideDown();
                })
                $("button").eq(1).click(function () {
                    // 上滑动 slideUp()
                   $("div").slideUp(500);
                })
                $("button").eq(2).click(function () {
                    // 滑动切换 slideToggle()
                    $("div").slideToggle(500);
    
                });
    
            });
        </script>
    </body>
    
    </html>

*  效果：

![03bf20fd2ab745f2bc6ad21bcab7996e.png][]

![2529778aebb64be1bc8a2d614276bb8f.png][]

--------------------

### 3.3  事件切换 ###

![b8e24c66e2f44a78852ccbd0925bfb64.png][]

*  html

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            li {
                list-style-type: none;
            }
            
            a {
                text-decoration: none;
                font-size: 14px;
            }
            
            .nav {
                margin: 100px;
            }
            
            .nav>li {
                position: relative;
                float: left;
                width: 80px;
                height: 41px;
                text-align: center;
            }
            
            .nav li a {
                display: block;
                width: 100%;
                height: 100%;
                line-height: 41px;
                color: #333;
            }
            
            .nav>li>a:hover {
                background-color: #eee;
            }
            
            .nav ul {
                display: none;
                position: absolute;
                top: 41px;
                left: 0;
                width: 100%;
                border-left: 1px solid #FECC5B;
                border-right: 1px solid #FECC5B;
            }
            
            .nav ul li {
                border-bottom: 1px solid #FECC5B;
            }
            
            .nav ul li a:hover {
                background-color: #FFF5DA;
            }
        </style>
        <script src="../js/jquery-3.6.4.min.js"></script>
    </head>
    
    <body>
        <ul class="nav">
            <li>
                <a href="#">微博</a>
                <ul>
                    <li>
                        <a href="">私信</a>
                    </li>
                    <li>
                        <a href="">评论</a>
                    </li>
                    <li>
                        <a href="">@我</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">微博</a>
                <ul>
                    <li>
                        <a href="">私信</a>
                    </li>
                    <li>
                        <a href="">评论</a>
                    </li>
                    <li>
                        <a href="">@我</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">微博</a>
                <ul>
                    <li>
                        <a href="">私信</a>
                    </li>
                    <li>
                        <a href="">评论</a>
                    </li>
                    <li>
                        <a href="">@我</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">微博</a>
                <ul>
                    <li>
                        <a href="">私信</a>
                    </li>
                    <li>
                        <a href="">评论</a>
                    </li>
                    <li>
                        <a href="">@我</a>
                    </li>
                </ul>
            </li>
        </ul>
        <script>
            $(function() {
                // 鼠标经过
                // $(".nav>li").mouseover(function() {
                //     // $(this) jQuery 当前元素  this不要加引号
                //     // show() 显示元素  hide() 隐藏元素
                //     $(this).children("ul").slideDown(200);
                // });
                // // 鼠标离开
                // $(".nav>li").mouseout(function() {
                //     $(this).children("ul").slideUp(200);
                // });
                // 1. 事件切换 hover 就是鼠标经过和离开的复合写法
                // $(".nav>li").hover(function() {
                //     $(this).children("ul").slideDown(200);
                // }, function() {
                //     $(this).children("ul").slideUp(200);
                // });
                // 2. 事件切换 hover  如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
                $(".nav>li").hover(function(){
                    $(this).children("ul").slideToggle();
                })
            })
        </script>
    </body>
    
    </html>

*  效果：【有个bug----》》来回滑动时，产生下拉排队】

![e32b3791ec3147199d369b0bcab05ac7.png][]

--------------------

###  ###

### **3.4**  **动画队列及其停止排队方法** ###

![47e31242cae44c84b3cdd8b24a995489.png][]

*  html

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            li {
                list-style-type: none;
            }
            
            a {
                text-decoration: none;
                font-size: 14px;
            }
            
            .nav {
                margin: 100px;
            }
            
            .nav>li {
                position: relative;
                float: left;
                width: 80px;
                height: 41px;
                text-align: center;
            }
            
            .nav li a {
                display: block;
                width: 100%;
                height: 100%;
                line-height: 41px;
                color: #333;
            }
            
            .nav>li>a:hover {
                background-color: #eee;
            }
            
            .nav ul {
                display: none;
                position: absolute;
                top: 41px;
                left: 0;
                width: 100%;
                border-left: 1px solid #FECC5B;
                border-right: 1px solid #FECC5B;
            }
            
            .nav ul li {
                border-bottom: 1px solid #FECC5B;
            }
            
            .nav ul li a:hover {
                background-color: #FFF5DA;
            }
        </style>
        <script src="../js/jquery-3.6.4.min.js"></script>
    </head>
    
    <body>
        <ul class="nav">
            <li>
                <a href="#">微博</a>
                <ul>
                    <li>
                        <a href="">私信</a>
                    </li>
                    <li>
                        <a href="">评论</a>
                    </li>
                    <li>
                        <a href="">@我</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">微博</a>
                <ul>
                    <li>
                        <a href="">私信</a>
                    </li>
                    <li>
                        <a href="">评论</a>
                    </li>
                    <li>
                        <a href="">@我</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">微博</a>
                <ul>
                    <li>
                        <a href="">私信</a>
                    </li>
                    <li>
                        <a href="">评论</a>
                    </li>
                    <li>
                        <a href="">@我</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">微博</a>
                <ul>
                    <li>
                        <a href="">私信</a>
                    </li>
                    <li>
                        <a href="">评论</a>
                    </li>
                    <li>
                        <a href="">@我</a>
                    </li>
                </ul>
            </li>
        </ul>
        <script>
            $(function() {
                // 鼠标经过
                // $(".nav>li").mouseover(function() {
                //     // $(this) jQuery 当前元素  this不要加引号
                //     // show() 显示元素  hide() 隐藏元素
                //     $(this).children("ul").slideDown(200);
                // });
                // // 鼠标离开
                // $(".nav>li").mouseout(function() {
                //     $(this).children("ul").slideUp(200);
                // });
                // 1. 事件切换 hover 就是鼠标经过和离开的复合写法
                // $(".nav>li").hover(function() {
                //     $(this).children("ul").slideDown(200);
                // }, function() {
                //     $(this).children("ul").slideUp(200);
                // });
                // 2. 事件切换 hover  如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
                $(".nav>li").hover(function() {
                    // stop 方法必须写到动画的前面
                    $(this).children("ul").stop().slideToggle();
                });
            })
        </script>
    </body>
    
    </html>

*  效果：

![609a4dfc5bba40f4a3c1d13b147f92c4.png][]

--------------------

### **3.5**  **淡入淡出效果** ###

1.  ![d460ff4cb1d2478981f074501e13b203.png][]
2.  ![199a58b64cee419885840efa137ccf62.png][]
3.  ![16686a71d773466394c0647cc4e240b9.png][]

*  html

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            div {
                width: 150px;
                height: 300px;
                background-color: pink;
                display: none;
            }
        </style>
        <script src="../js/jquery-3.6.4.min.js"></script>
    </head>
    
    <body>
        <button>淡入效果</button>
        <button>淡出效果</button>
        <button>淡入淡出切换</button>
        <button>修改透明度</button>
        <div></div>
        <script>
            $(function () {
    
                $("button").eq(0).click(function () {
                    // 淡入 fadeIn()
                    $("div").fadeIn(1000);
                })
                $("button").eq(1).click(function () {
                    // 淡出 fadeOut()
                    $("div").fadeOut(1000);
    
                })
                $("button").eq(2).click(function () {
                    // 淡入淡出切换 fadeToggle()
                    $("div").fadeToggle(1000);
    
                });
                $("button").eq(3).click(function () {
                    //  修改透明度 fadeTo() 这个速度和透明度要必须写
                    $("div").fadeTo(1000, 0.5);
    
                });
            });
        </script>
    </body>
    
    </html>

*  效果：

![09c826a8d88349b29b1dceef6df2a85f.png][]

![a4d36d917549441ab28c7dd9a5560df2.png][]

--------------------

### **案例****：****王****者荣耀手风琴效果** ###

> ① 鼠标经过某个小 li 有两步操作：
> 
> ② 当前小 li  宽度变为  224px ， 同时里面的小图片淡出，大图片淡入
> 
> ③ 其余兄弟小 li 宽度变为 69px ， 小图片淡入， 大图片淡出

*  html

<!DOCTYPE html>
    <html>
    
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            ul {
                list-style: none;
            }
            
            body {
                background: #000;
            }
            
            .wrap {
                margin: 100px auto 0;
                width: 630px;
                height: 394px;
                padding: 10px 0 0 10px;
                background: #000;
                overflow: hidden;
                border: 1px solid #fff;
            }
            
            .wrap li {
                float: left;
                margin: 0 10px 10px 0;
            }
            
            .wrap img {
                display: block;
                border: 0;
            }
        </style>
        <script src="../js/jquery-3.6.4.min.js"></script>
        <script>
            $(function() {
                //鼠标进入的时候,其他的li标签透明度：0.5
               $(".wrap li").hover(function(){
                $(this).siblings().stop().fadeTo(400,0.5);
               },function(){
               // 鼠标离开，其他li 透明度改为 1
               $(this).siblings().stop().fadeTo(400,1);
               })
    
    
            });
        </script>
    </head>
    
    <body>
        <div class="wrap">
            <ul>
                <li>
                    <a href="#"><img src="../image/01.jpg" alt="" /></a>
                </li>
                <li>
                    <a href="#"><img src="../image/02.jpg" alt="" /></a>
                </li>
                <li>
                    <a href="#"><img src="../image/03.jpg" alt="" /></a>
                </li>
                <li>
                    <a href="#"><img src="../image/04.jpg" alt="" /></a>
                </li>
                <li>
                    <a href="#"><img src="../image/05.jpg" alt="" /></a>
                </li>
                <li>
                    <a href="#"><img src="../image/06.jpg" alt="" /></a>
                </li>
            </ul>
        </div>
    </body>
    
    </html>

*  效果：

![477f6b17a286441b870de3d9805c2a2a.png][]

![d7c9114218f04eedbd53a92db309b5d3.png][]

--------------------

### **3.6**  **自定义动画** **animate** ###

![8c208570212747db9e729b0415f9708d.png][]

*  html

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="../js/jquery-3.6.4.min.js"></script>
        <style>
            div {
                text-align: center;
                position: absolute;
                width: 200px;
                height: 200px;
                background-color: pink;
            }
        </style>
    </head>
    
    <body>
        <button>动起来</button>
        <div>我在这</div>
        <script>
            $(function() {
                $("button").click(function() {
                    $("div").animate({
                        left: 500,
                        top: 300,
                        opacity: .4,
                        width: 500
                    }, 500);
                })
            })
        </script>
    </body>
    
    </html>

*  效果：

![2002f96845c1420b860a792c8b31bea3.png][]

![444b3c307e2f44d0bd4336e722eaba44.png][]

--------------------

### **案例****：****王****者荣耀手风琴效果** ###

*  html

<!doctype html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>手风琴案例</title>
    
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            img {
                display: block;
            }
            
            ul {
                list-style: none;
            }
            
            .king {
                width: 852px;
                margin: 100px auto;
                background: url(../img/bg.png) no-repeat;
                overflow: hidden;
                padding: 10px;
            }
            
            .king ul {
                overflow: hidden;
            }
            
            .king li {
                position: relative;
                float: left;
                width: 69px;
                height: 69px;
                margin-right: 10px;
            }
            
            .king li.current {
                width: 224px;
            }
            
            .king li.current .big {
                display: block;
            }
            
            .king li.current .small {
                display: none;
            }
            
            .big {
                width: 224px;
                display: none;
            }
            
            .small {
                position: absolute;
                top: 0;
                left: 0;
                width: 69px;
                height: 69px;
                border-radius: 5px;
            }
        </style>
    
    </head>
    
    <body>
        <script src="../js/jquery-3.6.4.min.js"></script>
        <script type="text/javascript">
            $(function() {
                // 鼠标经过某个小li 有两步操作：
                $(".king li").mouseenter(function() {
                    // 1.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入
                    $(this).stop().animate({
                        width: 224
                    }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
                    // 2.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出
                    $(this).siblings("li").stop().animate({
                        width: 69
                    }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
                })
    
            });
        </script>
        <div class="king">
            <ul>
                <li class="current">
                    <a href="#">
                        <img src="../img/m1.jpg" alt="" class="small">
                        <img src="../img/m.png" alt="" class="big">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../img/l1.jpg" alt="" class="small">
                        <img src="../img/l.png" alt="" class="big">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../img/c1.jpg" alt="" class="small">
                        <img src="../img/c.png" alt="" class="big">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../img/w1.jpg" alt="" class="small">
                        <img src="../img/w.png" alt="" class="big">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../img/z1.jpg" alt="" class="small">
                        <img src="../img/z.png" alt="" class="big">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../img/h1.jpg" alt="" class="small">
                        <img src="../img/h.png" alt="" class="big">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../img/t1.jpg" alt="" class="small">
                        <img src="../img/t.png" alt="" class="big">
                    </a>
                </li>
            </ul>
    
        </div>
    
    
    
    
    </body>
    
    </html>

*  效果：

![35862384b56647eda08af399fd87b24f.png][]

--------------------

### **案例：购物车案例****模块****-****全选分析** ###

> ① 全选思路：里面 3 个小的复选框按钮（ j-checkbox ）选中状态（ checked ）跟着全选按钮（ checkall ）走。
> 
> ② 因为 checked  是复选框的固有属性，此时我们需要利用 prop() 方法获取和设置该属性。
> 
> ③ 把全选按钮状态赋值给 3 小复选框就可以了。
> 
> ④ 当 我们每次点击小的复选框按钮，就来判断：
> 
> ⑤ 如果小复选框被选中的个数等于 3  就应该把全选按钮选上，否则全选按钮不选。
> 
> ⑥ : checked  选择器  :checked  查找被选中的表单元素。

#### **6. jQuery** **内容文本值** ####

![b75c02e2788946d8ac27fb74d6fe60ec.png][]

![65ef50802a334e92940d8e938a9d4f67.png][]

#### **案例：购物车案例****模块****-****增减****商品数量** ####

> ① 核心思路：首先声明一个变量，当我们点击 \+ 号（ in crement ），就让这个值 \++ ，然后赋值给文本框。
> 
> ② 注意 1 ： 只能增加本商品的数量， 就是当前 \+ 号 的兄弟文本框（ itxt ）的值。 
> 
> ③ 修改表单的值是 val ()  方法
> 
> ④ 注意 2 ： 这个变量初始值应该是这个文本框的值，在这个值的基础上 \++ 。要获取表单的值
> 
> ⑤ 减号（ decrement ）思路同理，但是如果文本框的值是 1 ，就不能再减了。

[d5d7120c47e54fe0b04d366d9b0d28b6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/93c2b6b5af7346cf8bddabebdfd626ce.png
[1a1446eaa3cb41ea9c454f1318514bf6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/eedc990c334447fca61c1634b4970f17.png
[6350ded6f8274423a2cd80ab499c7185.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/5007225055804218b6913004a3779fce.png
[55dfa68f486647138670b91b86837b64.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/fe2374f234bb4d30b8e3bb21e72f1d9e.png
[d1c5ac9d98454395a6ff73d1d7d60a6e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/6c3883357d3043abbf8a6c3fc07ca98f.png
[c2237254f45d488f83e3e4a58d2d5a64.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/37b9090b13964a5693bb879000102e74.png
[950660d74f26444890d286dd6e8d9de1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/cc43324dada4438e98bdaffd91736f07.png
[dfdaffad893f495aacaea90a8be31918.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/249afd0cc1a749cf8776cd33cece00e1.png
[215e5b4dd5544e279c330b58eb4fd93b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/c30f3f164b4241e182368a78ab6595ab.png
[b1e13952cede4091baab5fc0c57c9bfd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/84e7bf49337e48e9b53402c6d84d1c63.png
[99cd152978474043a21c053fe1f17763.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/586ed5c1f4f34f5fbe8397f6bd453f0e.png
[0d6e6d385f4640cfb23a97ddca56c3e6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/3b299ae119404b2093b73393cbd27bbc.png
[73733b17772740fe83d186a86cbb3eaf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/49ca48a2c62b4dea995cecb2b2eafc11.png
[ac03b57e8bce4228ba2bd308fc2ffcfe.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/45d8e2e64c434c17b4314285543a612f.png
[ce574253027f4f81b4a835fb61cfb39b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/6c217db587574f38af4c3fe22995c975.png
[cf235746f1734dafabb48bc3a4c2e40c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/6102c3cbfa4546be9ada8809d883eb36.png
[59606f69a51f4438ae4ca7f7b9ab605d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/0f037b77212940cb948928b5c38d97dd.png
[f0e3b34fa72846ebbf1a45c67e2bf997.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/00bcf61d419d4632a28870d41aafb965.png
[8c442d9a629b4b4eb13b9518b9328420.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/9880595f42eb4956b190ee8bf68440e1.png
[e93e00add6e8410b873d06036a279094.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/38b39b127b2642bab2a993f30829f18b.png
[bc4c337cd4664b3ca8004b07e866a217.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/541579d060954bca8224281cdfb8be28.png
[d82d80904b964552948f1614b7555b31.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/da616184f00f401aa04b968caa8bdfff.png
[03bf20fd2ab745f2bc6ad21bcab7996e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/85ef6e50b9ae430f9f7a37ee1594b4d5.png
[2529778aebb64be1bc8a2d614276bb8f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/bec11cd2648e42d7b3d5ab15bed7c22e.png
[b8e24c66e2f44a78852ccbd0925bfb64.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/116d91202164448995079b53d96aa6bf.png
[e32b3791ec3147199d369b0bcab05ac7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/07fb1df1c185400a9714dab043b1dddd.png
[47e31242cae44c84b3cdd8b24a995489.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/f60e101783c8413b8a0c0b7172017a8d.png
[609a4dfc5bba40f4a3c1d13b147f92c4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/7e2bda0632694365952df87cc8bdf09a.png
[d460ff4cb1d2478981f074501e13b203.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/f7c9719c8efb46b5a40f7084720133c3.png
[199a58b64cee419885840efa137ccf62.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/cdeb0fc730ef4eceb22f7f20989adab8.png
[16686a71d773466394c0647cc4e240b9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/61a39eb051bc42a28fcbf5aa0a84338d.png
[09c826a8d88349b29b1dceef6df2a85f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/6c2368c71a7541f3ac805fc2fdf81992.png
[a4d36d917549441ab28c7dd9a5560df2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/75ddbf4e2779462b84d4d61280350ed7.png
[477f6b17a286441b870de3d9805c2a2a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/7af843c34fde4d38adad4db5905d6311.png
[d7c9114218f04eedbd53a92db309b5d3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/f469888bf2a04c83a324030b822a1579.png
[8c208570212747db9e729b0415f9708d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/2f016a47f64b46b1b5ed36fd30e4a204.png
[2002f96845c1420b860a792c8b31bea3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/dc0f77038ca04fb48f4c6eb4b4b1a9ba.png
[444b3c307e2f44d0bd4336e722eaba44.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/982b2439ff2d4c26b19dd0e48bef9506.png
[35862384b56647eda08af399fd87b24f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/652ddaef99e74d38aba26c155448d7b4.png
[b75c02e2788946d8ac27fb74d6fe60ec.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/338ff69023be4a609c0565b9d4283087.png
[65ef50802a334e92940d8e938a9d4f67.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/678a3c6dd079494085df4e360e9aa401.png