jQuery引入----练习

captain_dong

已于 2023-05-02 21:47:34 修改

阅读量599

点赞数

分类专栏： Javaweb网站练习课外新知识 Javaweb模块模型文章标签： jquery javascript html

于 2023-05-01 21:31:36 首次发布

本文链接：https://blog.csdn.net/m0_63064861/article/details/130459064

版权

Javaweb网站练习同时被 3 个专栏收录

32 篇文章 0 订阅

订阅专栏

Javaweb模块模型

18 篇文章 0 订阅

订阅专栏

课外新知识

13 篇文章 0 订阅

订阅专栏

jQuery引入----练习

html

<!DOCTYPE html>
<html>

<head>
    <title>
        jQuery引入
    </title>

    <!-- css样式引入 -->
    <link rel="stylesheet" href="../css/a.css">

    <!-- jquery函数库引入 -->
    <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>

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

效果：

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>

效果：

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>

效果：

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>

效果：

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>

效果：

2.1 操作 css 方法

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>

效果：

2.2 设置类样式方法

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>

效果：

案例：tab 栏切换

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

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

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

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;
        }
        
        .tab {
            width: 978px;
            margin: 100px auto;
        }
        
        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }
        
        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }
        
        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }
        
        .item_info {
            padding: 20px 0 0 20px;
        }
        
        .item {
            display: none;
        }
    </style>
    <script src="../js/jquery-3.6.4.min.js"></script>
</head>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（50000）</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价（50000）模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>

        </div>
    </div>
    <script>
        $(function(){
             // 1.点击上部的li，当前li 添加current类，其余兄弟移除类
            $(".tab_list li").click(function(){
                // 链式编程操作
                $(this).addClass("current").siblings().removeClass("current");
                // 2.点击的同时，得到当前li 的索引号
                var index=$(this).index();
                console.log(index);
                 // 3.让下部里面相应索引号的item显示，其余的item隐藏
                 $(".tab_con .item").eq(index).show().siblings().hide();
            })                                                         
        })
    </script>
</body>

</html>

效果：

3.1 显示隐藏效果

1. 显示语法规范

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

2. 显示参数

（1）参数都可以省略，无动画直接显示。

（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。

（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。

（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

1. 切换语法规范

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>

效果：

3.2 滑动效果

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>

效果：

3.3 事件切换

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----》》来回滑动时，产生下拉排队】

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

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>

效果：

3.5 淡入淡出效果

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>

效果：

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

① 鼠标经过某个小 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>

效果：

3.6 自定义动画 animate

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>

效果：

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

① 鼠标经过某个小 li 有两步操作：

② 当前小 li 宽度变为 224px ，同时里面的小图片淡出，大图片淡入

③ 其余兄弟小 li 宽度变为 69px ，小图片淡入，大图片淡出

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>

效果：

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

① 全选思路：里面 3 个小的复选框按钮（ j-checkbox ）选中状态（ checked ）跟着全选按钮（ checkall ）走。

② 因为 checked 是复选框的固有属性，此时我们需要利用 prop() 方法获取和设置该属性。

③ 把全选按钮状态赋值给 3 小复选框就可以了。

④ 当我们每次点击小的复选框按钮，就来判断：

⑤ 如果小复选框被选中的个数等于 3 就应该把全选按钮选上，否则全选按钮不选。

⑥ : checked 选择器 :checked 查找被选中的表单元素。

6. jQuery 内容文本值

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

① 核心思路：首先声明一个变量，当我们点击 + 号（ in crement ），就让这个值 ++ ，然后赋值给文本框。

② 注意 1 ：只能增加本商品的数量，就是当前 + 号的兄弟文本框（ itxt ）的值。

③ 修改表单的值是 val () 方法

④ 注意 2 ：这个变量初始值应该是这个文本框的值，在这个值的基础上 ++ 。要获取表单的值

⑤ 减号（ decrement ）思路同理，但是如果文本框的值是 1 ，就不能再减了。

captain_dong

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery引入----练习

csshtml效果：html效果： html效果：html效果：html效果： html效果：效果：效果：效果：效果：【有个bug----》》来回滑动时，产生下拉排队】效果：效果：效果：效果：
复制链接

扫一扫