笔记

最新推荐文章于 2020-07-23 14:30:06 发布
最新推荐文章于 2020-07-23 14:30:06 发布
阅读量156 收藏
点赞数
分类专栏： 前端学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43514149/article/details/105423133
版权
jQuery概述
javaScript库

JavaScript库：即library，是一个封装好
的特定的集合（方法和函数），从封装的一大堆函数的角度理解库，就是在这个库中，封装了很多预定义好的函数在里面，比如动画animate、hide、show，比如获取元素
在这里插入图片描述
在这里插入图片描述

jQuery的概念


在这里插入图片描述

jQuery的入口函数

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <script>
        // $('div').hide();
        //1 等着页面DOM加载完毕再去执行js代码
        // $(document).ready(function() {
        //     $('div').hide();
        // })
        //2 等着页面DOM加载完毕执行js代码
        $(function() {
            $('div').hide();
        })
    </script>
    <div></div>

</body>
</html>
jQuery对象和DOM对象
  1. 用原生js获取来的对象就是DOM对象
  2. 用jQuery获取来的对象就是jQuery对象
  3. jQuery对象的本质是：利用$对DOM对象包装后产生的对象（伪数组形式存储）
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div>

    </div>
    <span></span>
    <script>
        //1 DOM对象：用原生js获取过来的对象就是DOM对象
        var myDiv = document.querySelector('div'); //myDiv是DOM对象
        var myspan = document.querySelector('span');
        console.dir(myDiv);
        //2 jQuery对象：用jQuery方式获取来的对象是jQuery对象，本质：通过$把DOM元素进行包装
        $('div'); //$('div')是一个jQuery对象
        console.dir($('div'));
        // 这两个对象有区别
        $('span');
        //3 jQuery对象只能使用jQuery方法，DOM对象则使用原生的js属性和方法
        myDiv.style.display = 'none';
        // $('div').style.display='none';//jQuery没有这个属性值
    </script>
</body>

</html>
jQuery对象和DOM对象

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js">
    </script>
</head>

<body>
    <video src="mov.mp4" muted></video>
    <script>
        //1 DOM对象转换成jQuery对象
        //（1）我们直接获取视频，得到的就是jQuery对象
        $('video');
        //（2）我们已经使用原生js获取过来的DOM对象
        var myvideo = document.querySelector('video');
        // $(myvideo).play();jQuery里面没有play这个方法

        //2 jQuery对象转化成DOM对象 
        // myvideo.play();
        $('video')[0].play(); //转换成DOM对象可以使用play方法
        $('video').get(0).play();
    </script>
</body>

</html>

在这里插入图片描述

jQuery API
jQuery基础选择器

在这里插入图片描述

隐式迭代

遍历内部DOM元素（伪数组形式存储）的过程就叫隐式迭代。
简单理解：给匹配的所有元素进行循环遍历，执行相应的方法，而不用我们再次循环遍历，简化我们的操作

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div>惊喜不，意外不</div>
    <div>惊喜不，意外不</div>
    <div>惊喜不，意外不</div>
    <div>惊喜不，意外不</div>
    <ul>
        <li>相同的操作</li>
        <li>相同的操作</li>
        <li>相同的操作</li>
    </ul>
    <script>
        //1 获取四个div元素
        console.log($("div")); //以伪数组形式存储
        //2 给4个div设置背景颜色为粉色
        $('div').css("backgroundColor", "pink");
        //3 隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法
        $('ul li').css("color", "red");
    </script>
</body>

</html>
jQuery筛选选择器

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js">
    </script>
</head>

<body>
    <ul>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
    </ul>
    <ol>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
    </ol>
    <script>
        $(function() {
            $("ul li:first").css("color", "pink");
            //选取索引号为2
            $("ul li:eq(2)").css("color", "red");
            // 选取奇数
            $("ol li:odd").css("color", "blue");
            // 宣州区偶数
            $("ol li:even").css("color", "blue");

        })
    </script>
</body>

</html>
jQuery筛选方法

在这里插入图片描述

案例：新浪下拉菜单
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        li {
            list-style: none;
        }
        
        a {
            text-decoration: none;
            font-size: 14px;
        }
        
        .nav {
            margin: 100px;
        }
        /* 子代选择器 */
        
        .nav>li {
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
            line-height: 41px;
        }
        
        .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-right: 1px solid #FECC5B;
            border-left: 1px solid #FECC5B;
        }
        
        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }
        
        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    </style>
    <script src="jquery.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不加引号
                $(this).children("ul").show();
            })
            $("ul>li").mouseout(function() {
                $(this).children("ul").hide();
            })
        })
    </script>
</body>

</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="jquery.min.js"></script>
</head>

<body>
    <ol>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li class="item">我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
    </ol>
    <ul>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
    </ul>
    <div class="current">俺有current</div>
    <div>俺木有current</div>
    <script>
        //注意一下都是方法记得带上括号
        $(function() {
            //1 兄弟元素 除了自身元素之外的所有亲兄弟
            $("ol .item").siblings("li").css("color", "red");
            // nextALL prevAll当前元素之前或者之后的所有元素
            $("ol .item").nextAll("li").css("color", "pink");
            $("ol .item").prevAll("li").css("color", "pink");
            // 2 (1)选取第n个元素
            // $("ul li:eq(2)").css("color", "blue");
            // 更推荐下面这种
            // (2)我们可以利用选择方法的方式选择
            $("ul li").eq(2).css("color", "red");
            // 3 判断是否有某个特定的类名
            console.log($("div:first").hasClass("current"));

        })
    </script>
</body>

</html>
jQuery里面的排他思想

想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式

淘宝服饰精品案例

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js">
    </script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        li {
            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;
            font-size: 12px;
        }
        
        #left li a:hover {
            color: #fff;
            background-image: url(../images/abg.gif);
        }
        
        #content {
            border-left: 1px solid pink;
            border-right: 1px solid pink;
        }
    </style>
    <script>
        $(function() {
            //1 鼠标经过左侧的小li
            $("#left li").mouseover(function() {
                //2 得到当前小li的索引号
                var index = $(this).index();
                // console.log(index);
                //3 让我们右侧的盒子相应索引号的图片显示出来就好了
                $("#content div").eq(index).show();
                //4 让其余的图片隐藏
                $("#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>
jQuery样式操作

操作css方法
jQuery可以使用css方法来修改简单元素样式，也可以操作类，修改多个样式。

  1. 参数只写属性名，则是返回属性值
  2. 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加上引号，值如果是数字可以不用跟单位和引号
  3. 参数可以是对象形式，方便设置多组样式，属性名和属性值用冒号隔开，属性可以不用加引号
    在这里插入图片描述
设置类样式方法

作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不要加点
在这里插入图片描述

通过设置类样式的话可以避免出现冗长的css代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            transition: all 0.5s;
        }
        
        .current {
            background-color: skyblue;
            transform: rotate(360deg);
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div></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切换
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .tab {
            margin: 100px auto;
            width: 978px;
        }
        
        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }
        
        li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
            list-style: none;
        }
        
        .current {
            background-color: #c81623;
            color: #fff;
        }
        
        .item {
            display: none;
        }
    </style>
</head>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul class="nav">
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价</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类，其余兄弟移除类

            $(".nav li").click(function() {

                // 链式编程操作 给当前的添加current类其余的兄弟移除类
                $(this).addClass("current").siblings().removeClass("current");
                //2 点击的同时，得到当前的li的索引号
                var index = $(this).index();
                console.log(index);

                //3 让下面对应的索引号的item显示，其余的item隐藏
                $(".item").eq(index).show().siblings().hide();
            })

        })
    </script>
</body>

</html>

原生的非常麻烦
在这里插入图片描述

jQuery类操作和className的区别

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one {
            width: 100px;
            height: 100px;
            background-color: pink;
            transition: all 0.5s;
        }
        
        .two {
            transform: rotate(360deg);
        }
    </style>
    <script src="jquery.min.js">
    </script>
</head>

<body>
    <div class="one"></div>
    <script>
        // 原生js会覆盖掉原来的类名
        // var one=document.querySelector('.one');
        // one.className="two";
        $(".one").addClass("two"); //addClass相当于追加类名 不影响以前的类名
        $(".one").removeClass("two");
    </script>
</body>

</html>
jQuery效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div>

    </div>
    <script>
        $(function() {
            $("button").eq(1).click(function() {
                //隐藏完之后然后执行回调函数
                $("div").hide(1000, function() {
                    alert(11);
                });
            })
            $("button").eq(0).click(function() {
                //隐藏完之后然后执行回调函数
                $("div").show(1000, function() {
                    alert(11);
                });
            })
            $("button").eq(2).click(function() {
                    //隐藏完之后然后执行回调函数
                    $("div").toggle(1000);
                })
                //一般情况下不加参数，直接显示隐藏就可以了
        })
    </script>
</body>

</html>

滑动效果

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js">
    </script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            display: none;
        }
    </style>
</head>

<body>
    <button>下拉滑动</button>
    <button>上拉滑动</button>
    <button>切换滑动</button>
    <div></div>

    <script>
        $(function() {
            //1 下拉滑动给slideDown()
            $("button").eq(0).click(function() {
                    $("div").slideDown();
                })
                //2 上拉滑动slideUp()
            $("button").eq(1).click(function() {
                    $("div").slideUp();

                })
                //3 滑动切换slideToggle()
            $("button").eq(2).click(function() {
                $("div").slideToggle();

            })
        })
    </script>
</body>

</html>

在这里插入图片描述
动画队列及其停止排队方法
在这里插入图片描述
优化：新浪下拉菜单

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        li {
            list-style: none;
        }
        
        a {
            text-decoration: none;
            font-size: 14px;
        }
        
        .nav {
            margin: 100px;
        }
        /* 子代选择器 */
        
        .nav>li {
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
            line-height: 41px;
        }
        
        .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-right: 1px solid #FECC5B;
            border-left: 1px solid #FECC5B;
        }
        
        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }
        
        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    </style>
    <script src="jquery.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不加引号
        //         // $(this).children("ul").show();
        //         $(this).children("ul").slideDown();
        //     })
        //     $("ul>li").mouseout(function() {
        //         // $(this).children("ul").hide();

        //         $(this).children("ul").slideUp();

        //     })
        // })
        //可以把鼠标经过和离开用hover
        // $(function() {
        //     $(".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(200);
        })
    </script>
</body>

</html>

淡入淡出效果中的调节透明度多了一个参数
在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <button>淡入效果</button>
    <button>淡出效果</button>
    <button>淡入淡出切换</button>
    <button>修改透明度</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                //淡入
                $("div").fadeIn(1000);
            })
            $("button").eq(1).click(function() {
                //淡出效果
                $("div").fadeOut();
            })
            $("button").eq(2).click(function() {
                $("div").fadeToggle();
                //淡入淡出效果
            })
            $("button").eq(1).click(function() {
                //修改透明度 速度和透明度一定要写
                $("div").fadeTo(1000,0.5);

            })
        })
    </script>
</body>

</html>

案例：突出显示

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js">
    </script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        li {
            list-style: none;
        }
        
        body {
            background-color: #000;
        }
        
        .wrap {
            margin: 100px auto;
            width: 630px;
            height: 383px;
            border: 1px solid #fff;
            background-color: #000;
            overflow: hidden;
        }
        
        ul li {
            float: left;
            margin: 0 10px 10px 0;
        }
        
        .wrap img {
            display: block;
            border: 0;
        }
    </style>
</head>

<body>
    <script>
        $(function() {
            $(".wrap li").hover(function() {
                // 因为有动画排队所以要加stop停止排队动画 谁做动画给谁加
                $(this).siblings().stop().fadeTo(400, 0.5);
            }, function() {
                $(this).siblings().stop().fadeTo(400, 1);
            })
        })
    </script>
    <div class="wrap">
        <ul>
            <li>
                <a href="#"><img src="../images/01.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="../images/02.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="../images/03.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="../images/04.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="../images/05.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="../images/06.jpg" alt="" /></a>
            </li>
        </ul>
    </div>
</body>

</html>

字定义动画
在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        div {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <button>动起来</button>
    <div></div>
    <script>
        $(function() {
            $("button").click(function() {
                $("div").animate({
                    left: 200,
                    top: 300,
                    opacity: 0.4,
                    width: 500
                }, 500);
            })
        })
    </script>
</body>

</html>
王者荣耀手风琴案例

一个小li里面装着a在包含一张小图和大图，小图片用定位定在大图片上方即可
在这里插入图片描述
在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        img {
            display: block;
        }
        
        ul {
            list-style: none;
        }
        
        .king {
            width: 852px;
            margin: 100px auto;
            background: url(../images/bg1.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>
        $(function() {
            $(".king li").mouseenter(function() {
                //1 当前小li宽度编程224 同时里面的小图片淡入大图淡出 注意small不是li的亲儿子，所以建议用find查找
                $(this).stop().animate({
                    width: 224
                }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
                //2 其余兄弟的宽度编程69 小图片淡入大图片淡出
                $(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="../images/m1.jpg" alt="" class="small">
                    <img src="../images/m.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../images/l1.jpg" alt="" class="small">
                    <img src="../images/l.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../images/c1.jpg" alt="" class="small">
                    <img src="../images/c.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../images/w1.jpg" alt="" class="small">
                    <img src="../images/w.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../images/z1.jpg" alt="" class="small">
                    <img src="../images/z.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../images/h1.jpg" alt="" class="small">
                    <img src="../images/h.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../images/t1.jpg" alt="" class="small">
                    <img src="../images/t.png" alt="" class="big">
                </a>
            </li>
        </ul>
    </div>
</body>

</html>
jQuery属性操作

prop()、attr()、data()
在这里插入图片描述
在这里插入图片描述
和原生js的seiAttribute和geiAttribute类似

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>

<body>
    <a href="www.baidu.com" title="ds"></a>
    <input type="checkbox">

    <div index="1" data-index="
    12"></div>
    <span>123</span>
    <script>
        $(function() {
            //element.prop("属性名")获取元素固有的属性值
            console.log($("a").prop("href"));
            // 修改其属性值
            $("a").prop("title", "wome");
            $("input").change(function() {
                    console.log($(this).prop("checked"));

                })
                //字定义元素通过attr()获取
            console.log($("div").prop("index")); //undefined
            // 2元素字定义属性 我们能通过attr()
            console.log($("div").attr("index")); //undefined
            $("div").attr("index", "4");
            //3 数据缓存data()这个里面的数据是存放在元素的内存里面 把元素当一个变量来看
            $("span").data("uname", "andy");

            console.log($("span").data("uname"));
            // 这个方法获取H5自定义属性第一个不用写data- 而且返回的是数值型
            console.log($("div").data("index"));
        })
    </script>
</body>

</html>
案例：购物车案例模块-全选

在这里插入图片描述

$(function() {
    //1 全选 全不选功能模块
    // 就是把全选按钮(checkall)的状态赋值给三个小的按钮(j-checkbox)就可以
    //事件可以使用change
    $(".checkall").change(function() {
        // $(this).prop("checked")
        //下面的复选框的checked属性值和全选按钮状态一样 隐式迭代会把其它的三个选上
        // 还要加上一个checkall因为有两个全选按钮，任何一个全选按钮的选中状态都会影响其它的按钮的选中状态
        $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
    });
    //2 如果小复选框选中的个数等于3就应该把全选框选上，否则全选按钮不选
    $(".j-checkbox").change(function() {
        // jQuery提供选中的个数
        // console.log($(".j-checkbox:checked").length);
        if ($(".j-checkbox:checked").length == $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }
    })
})
案例：购物车增减商品数量

在这里插入图片描述

        //增减商品数量分析
        //加号
    $(".increment").click(function() {
            //得到兄弟文本框的value
            var n = $(this).siblings(".itxt").val();
            // console.log(n);
            n++;
            $(this).siblings().val(n);
        })
        // 减号
    $(".decrement").click(function() {
        var n = $(this).siblings(".itxt").val();
        // 如果n已经等于1 就不能再减了
        if (n == 1) {
            return false;
        }
        n--;
        $(this).siblings().val(n);
    })
案例：商品小计模块

在这里插入图片描述
parents能返回指定祖先元素，toFixed是保留两位小数

//3 计算商品小计模块 根据文本框的值乘以当前商品的价格就是小计
        // 从this出发 一层一层往上找
        var p = $(this).parents(".p-num").siblings(".p-price").html();
        p = p.substr(1);
        // html()是获取当前节点下的html代码
        $(this).parents(".p-num").siblings(".p-sum").html("¥" + (p * n).toFixed(2));
案例：计算总计和总额

在这里插入图片描述

    //计算总计和总和可以用遍历
    getSum(); //默认页面一打开就开始计算
    function getSum() {
        var cnt = 0;
        var money = 0;
        $(".itxt").each(function(i, ele) {
            cnt += parseInt($(ele).val());
        });
        $(".amount-sum em").text(cnt);
        $(".p-sum").each(function(i, ele) {
            money += parseFloat($(ele).text().substr(1));
        });
        $(".price-sum em").text(("¥" + money.toFixed(2)));
    }
案例：删除商品模块
 $(".p-action a").click(function() {
            // 商品后面的删除模块
            $(this).each(function(i, ele) {
                $(this).parents(".cart-item").remove();
            })
            getSum();
        })
        //删除选中模块
    $(".remove-batch").click(function() {
            $(".j-checkbox:checked").parents(".cart-item").remove();
            getSum();
        })
        //清理购物车模块
    $(".clear-all").click(function() {
        $(".cart-item").remove();
        getSum();
    })
案例：选中商品改变背景

这个背景通过类名修改是核心
在这里插入图片描述
全选按钮：

 if ($(this).prop("checked")) {
            // 让所有的商品添加 check-cart-item 类名
            $(".cart-item").addClass("check-cart-item");
        } else {
            // check-cart-item 移除
            $(".cart-item").removeClass("check-cart-item");
        }

单选按钮：

 if ($(this).prop("checked")) {
            // 让当前的商品添加 check-cart-item 类名
            $(this).parents(".cart-item").addClass("check-cart-item");
        } else {
            // check-cart-item 移除
            $(this).parents(".cart-item").removeClass("check-cart-item");
        }
案例：完整版购物车
$(function() {
    //1 全选 全不选功能模块
    // 就是把全选按钮(checkall)的状态赋值给三个小的按钮(j-checkbox)就可以
    //事件可以使用change
    $(".checkall").change(function() {
        // $(this).prop("checked")
        //下面的复选框的checked属性值和全选按钮状态一样 隐式迭代会把其它的三个选上
        // 还要加上一个checkall因为有两个全选按钮，任何一个全选按钮的选中状态都会影响其它的按钮的选中状态
        $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
        if ($(this).prop("checked")) {
            // 让所有的商品添加 check-cart-item 类名
            $(".cart-item").addClass("check-cart-item");
        } else {
            // check-cart-item 移除
            $(".cart-item").removeClass("check-cart-item");
        }
    });
    //2 如果小复选框选中的个数等于3就应该把全选框选上，否则全选按钮不选
    $(".j-checkbox").change(function() {
            // jQuery提供选中的个数
            // console.log($(".j-checkbox:checked").length);
            if ($(".j-checkbox:checked").length == $(".j-checkbox").length) {
                $(".checkall").prop("checked", true);
            } else {
                $(".checkall").prop("checked", false);
            }
            if ($(this).prop("checked")) {
                // 让当前的商品添加 check-cart-item 类名
                $(this).parents(".cart-item").addClass("check-cart-item");
            } else {
                // check-cart-item 移除
                $(this).parents(".cart-item").removeClass("check-cart-item");
            }
        })
        //增减商品数量分析
        //加号
    $(".increment").click(function() {
        //得到兄弟文本框的value
        var n = $(this).siblings(".itxt").val();
        // console.log(n);
        n++;
        $(this).siblings(".itxt").val(n);
        //3 计算商品小计模块 根据文本框的值乘以当前商品的价格就是小计
        // 从this出发 一层一层往上找
        var p = $(this).parents(".p-num").siblings(".p-price").html();
        p = p.substr(1);
        // html()是获取当前节点下的html代码
        $(this).parents(".p-num").siblings(".p-sum").html("¥" + (p * n).toFixed(2));
        // toFixed(2)是保留两位小数
        getSum();

    });
    // 减号
    $(".decrement").click(function() {
        var n = $(this).siblings(".itxt").val();
        // 如果n已经等于1 就不能再减了
        if (n == 1) {
            return false;
        }
        n--;
        $(this).siblings().val(n);
        var p = $(this).parents(".p-num").siblings(".p-price").html().substr(1);
        $(this).parents(".p-num").siblings(".p-sum").text("¥" + (p * n).toFixed(2));
        getSum();

    });
    //4 用户修改文本内框的值 计算小计模块
    $(".itxt").change(function() {
            //先将文本框里面的值乘以当前商品的单价
            var n = $(this).val();
            var p = $(this).parents(".p-num").siblings(".p-price").html().substr(1);
            $(this).parents(".p-num").siblings(".p-sum").text("¥" + (p * n).toFixed(2));
            getSum();
        })
        //计算总计和总和可以用遍历
    getSum(); //默认页面一打开就开始计算
    function getSum() {
        var cnt = 0;
        var money = 0;
        $(".itxt").each(function(i, ele) {
            cnt += parseInt($(ele).val());
        });
        $(".amount-sum em").text(cnt);
        $(".p-sum").each(function(i, ele) {
            money += parseFloat($(ele).text().substr(1));
        });
        $(".price-sum em").text(("¥" + money.toFixed(2)));
    }
    $(".p-action a").click(function() {
            // 商品后面的删除模块
            $(this).each(function(i, ele) {
                $(this).parents(".cart-item").remove();
            })
            getSum();
        })
        //删除选中模块
    $(".remove-batch").click(function() {
            $(".j-checkbox:checked").parents(".cart-item").remove();
            getSum();
        })
        //清理购物车模块
    $(".clear-all").click(function() {
            $(".cart-item").remove();
            getSum();
        })
        //选中商品添加背景


})
jQuery内容文本值

html（）获取当前节点下的html代码、text()用于普通文本的值、val（）用于表单的值

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div>
        <span>我是内容</span>
    </div>
    <input type="text" value="请输入内容">
    <script>
        //1 获取设置元素内容html()
        console.log($("div").html());
        //修改里面的内容
        $("div").html("123");
        //2 获取设置元素文本内容text() 标签忽略掉 只输出值
        console.log($("div").text());
        //3 获取设置表单值
        console.log($("input").val());
    </script>
</body>

</html>
jQuery元素操作

遍历元素
在这里插入图片描述
遍历元素有两种方法，要遍历的.each(回调函数)和$.each(遍历的对象或者数组，回调函数)，后者主要是用于处理数据

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js">
    </script>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function() {
            //如果针对同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大）
            //1 each方法遍历元素
            // $("div").css("color", "red");
            var sum = 0;
            var arr = ["red", "green", "pink"];
            $("div").each(function(index, domEle) {
                //回调函数第一个参数是索引号,可以自己制定索引号名称
                // console.log(index);
                //第二个参数是dom元素对象,是dom对象没有css方法 要转换成jQuery对象
                // console.log(domEle);
                $(domEle).css("color", arr[index]);
                sum += parseInt($(domEle).text());
            })
            console.log(sum);
        })
    </script>
</body>

</html>

添加元素
在这里插入图片描述
删除元素
在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>

<body>
    <ul>
        <li>原先的li</li>
    </ul>
    <div class="test">我是原先的div</div>
    <script>
        $(function() {
            //1 创建元素
            var li = $("<li>我是后来创建的小li</li>")
                //2 添加元素
                //(1)内部添加
            $("ul").append(li); //放在内容的最后面相当于appendChild
            $("ul").prepend(li); //放在内容的最前面
            // (2)外部添加
            var div = $("<div>我是后来的div</div>");
            //放在外部
            $(".test").after(div);
            $(".test").before(div);
            // 3 删除元素
            // $("ul").remove();//删除匹配的元素（本身）
            // $("ul").empty();//删除匹配元素的子节点
            $("ul").html('');//把内容清空跟empty一样
        })
    </script>
</body>
</html>
jQuery事件

在这里插入图片描述
在这里插入图片描述

 $("ul").on("click", "li", function() {
                alert(11);
            });

给父亲绑定点击事件，触发的是子元素li，第二个参数是子元素，并且on还可以给未来创建的元素绑定事件

 $("ol").on("click", function() {
                alert(34567);
            })
            var li = $("<li>新创建的</li>");
            $("ol").append(li);
案例：发布微博案例
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            width: 450px;
            padding-right: 80px;
        }
        
        ul li {
            line-height: 25px;
            border-bottom: 1px dashed #ccc;
            display: none;
        }
        
        ul li a {
            float: right;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function() {
            //1 点击发布按钮，动态创建一个小li，放入文本框的内容和删除按钮，并且添加到ul中
            $(".btn").on("click", function() {
                    // var li = $("<li></li>");
                    // li.html($(".txt").val() + "<a href='javascript:;'> 删除</a>");
                    // $("ul").prepend(li);
                    // li.slideDown();
                    // $(".txt").val("");
                    var li = $("<li></li>");
                    li.html($(".txt").val() + "<a href='javascript:;'>删除</a>");
                    // 在前面进行添加
                    $("ul").prepend(li);
                    li.slideDown();
                    $(".txt").val('');
                })
                //2 点击删除按钮，可以删除当前微博留言
                // 开始没有点击a就没有绑定事件 所以不能绑定
                // $("ul a").click(function() {  // 此时的click不能给动态创建的a添加事件
                //     alert(11);
                // })
                // on可以给动态创建的元素绑定事件
            $("ul").on("click", "a", function() {
                $(this).parent().slideUp(function() {
                    $(this).remove();
                });
            })
        })
    </script>
</head>

<body>
    <div class="box">
        <span>微博发布</span>
        <textarea name="" id="" cols="30" rows="10" class="txt"></textarea>
        <button class="btn">发布</button>
        <ul></ul>
    </div>
</body>

</html>
案例：事件处理off()解绑事件

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: black;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function() {
            $("div").on({
                click: function() {
                    console.log("我点击了");
                },
                mouseover: function() {
                    console.log("鼠标经过了");
                }
            });
            //事件委托
            $("ul").on("click", "li", function() {
                    alert(12);
                })
                //1 事件解绑off
                // $("div").off();//解除所有事件
            $("div").off("click"); //解除点击事件
            $("ul").off("click", "li")
        })
    </script>
</head>

<body>
    
    <div></div>
    <ul>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
    </ul>
</body>

</html>

one()可以让事件只触发一次

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: black;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function() {
            $("div").on({
                click: function() {
                    console.log("我点击了");
                },
                mouseover: function() {
                    console.log("鼠标经过了");
                }
            });
            //事件委托
            $("ul").on("click", "li", function() {
                    alert(12);
                })
                //1 事件解绑off
                // $("div").off();//解除所有事件
            $("div").off("click"); //解除点击事件
            $("ul").off("click", "li")
                //2 one()但是它只能触发事件一次
            $("p").one("click", function() {
                alert(2);
            })
        })
    </script>
</head>

<body>
    <div></div>
    <ul>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
    </ul>
    <p>我是p</p>
</body>

</html>
自动触发事件

元素.trigger()、元素.click()、元素.triggerHandler()（后者于前面两个的不同之处在于不会触发元素默认事件）

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script>
        $(function() {
            $("div").on("click", function() {
                    alert(11);
                })
                //自动触发事件
                //1 元素，事件（）
                // $("div").click();
                //2 trigger()
                // $("div").trigger("click");
                //3 元素.trigger("事件") 不会触发元素的默认行为
            $("div").triggerHandler("click");
            $("input").on("focus", function() {
                $(this).val("你好吗");
            })
            $("input").triggerHandler("focus");
            //触发之后不会触发默认行为（光标闪烁）
        })
    </script>
</head>

<body>
    <div></div>
    <input type="text">
</body>

</html>

在这里插入图片描述

jQuery其它方法

在这里插入图片描述

对象拷贝

在这里插入图片描述

对对象进行浅拷贝的话，把地址赋值给新的对象，他们指向同一个地方，缺点是修改任何一个值其它的都会修改
在这里插入图片描述
在这里插入图片描述

jQuery多库共存

在这里插入图片描述

jQuery插件

在这里插入图片描述
图片懒加载：
在这里插入图片描述

案例：todolist

在这里插入图片描述
todolist本地存储：

1.先获取本地存储里的数据
2.往本地存储里面追加数据
3.追加完之后在保存本地存储的数据
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
slice和splice的区别：
slice(start,end)方法是从已有数组中返回选定的元素，返回一个新数组，包含从start到end的数组元素，该方法不会改变原数组，而是返回一个子数组，如果想要删除数组中的一段元素，应该使用Array.splice()方法，该方法会改变原来的数组

在这里插入图片描述

$(function() {
    //1 按下回车把完整数据存储到本地存储里面
    // 存储的数据格式 var todolist=[{title:"xxx",done:false}];
    load(); //每次打开页面就要加载
    $("#title").on("keydown", function(e) {
        if (e.keyCode == 13) {
            if ($(this).val() === "") {
                alert("请输入待办事项");
            } else {
                // alert(13);
                //先读取本地存储原来的数据
                var local = getData();
                // console.log(local);
                // 把local数组进行更新数据 把最新的数据追加到loacal数组
                local.push({ title: $(this).val(), done: false });
                //把这个数组local存储给本地存储
                saveData(local);
                //2 todolist本地存储渲染到页面
                load();
                $(this).val("");
            }
        }
    });
    //3 todolist删除操作
    // 动态创建的元素用on来绑定
    $("ol,ul").on("click", "a", function() {
        // 先获取本地存储
        var data = getData();
        // 修改数据 获取自定义属性用attr
        var index = $(this).attr("id");
        data.splice(index, 1); //删除当前元素
        // 保存到本地存储
        saveData(data);
        // 重新渲染页面
        load();
    });
    //4 todolist正在进行和已经完成选项操作
    $("ol,ul").on("click", "input", function() {
        //先获取本地存储的数据
        var data = getData();
        // 修改数据
        // 从input的兄弟a的索引号可以得到input的索引号
        var index = $(this).siblings("a").attr("id");
        console.log(index);
        data[index].done = $(this).prop("checked");
        console.log(data);
        // 保存到本地存储
        saveData(data);
        // 重新渲染页面
        load(data);
    });
    //读取本地存储的数据
    function getData() {
        var data = localStorage.getItem("todolist");
        if (data != null) {
            //本地存储里面的格式是字符串格式 但是我们需要的是对象格式的 所以转换后才能使用
            return JSON.parse(data);
        } else {
            return [];
        }
    }
    //保存本地存储数据
    function saveData(data) {
        localStorage.setItem("todolist", JSON.stringify(data));
    }
    // 渲染加载数据
    function load() {
        // 读取本地存储的数据
        var data = getData();
        // console.log(data);
        //遍历这个数据
        // 遍历之前一定要先清空ol里面的内容避免重复添加
        $("ol").empty();
        $("ul").empty();
        var todoCount = 0; //正在进行的个数
        var doneCount = 0; //已经完成二等个属于
        $.each(data, function(i, n) {

            // i为下标，n为值
            // console.log(n);
            //ol或者ul里面生成小li

            if (n.done == false) {
                $("ol").prepend("<li><input type='checkbox'><p>" + n.title + "</p><a href='javascript:;' id=" + i + "></a></li>");
                todoCount++;
            } else {
                $("ul").prepend("<li><input type='checkbox' checked='checked'><p>" + n.title + "</p><a href='javascript:;' id=" + i + "></a></li>");
                doneCount++;
            }

            //给a字定义属性id
        });
        $("#todocount").text(todoCount);
        $("#donecount").text(doneCount);
    }
})
jQuery尺寸

在这里插入图片描述

jQuery位置

在这里插入图片描述
position是返回带有父级定位的

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 300px;
            height: 300px;
            background-color: pink;
            position: relative;
        }
        
        .son {
            position: absolute;
            top: 10px;
            left: 10px;
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div class="father">
        <div class="son">

        </div>
    </div>
    <script>
        $(function() {
            //1 获取设置距离文档的位置（偏移）offset
            console.log($(".son").offset());
            console.log($(".son").offset().top);
            // 距离文档的距离而不是距离父亲盒子的距离
            $(".son").offset({
                top: 20,
                left: 20
            });
            console.log($(".son").offset().top);
            //2 获取距离带有定位父级位置（偏移）position 如果带有定位的
            console.log($(".son").position());
            // $(".son").position({
            //     top: 20,
            //     left: 20
            // });
            // 这个方法是错误的，只能获取不能设置偏移
        })
    </script>
</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 900px;
            height: 500px;
            background-color: pink;
            margin: 100px auto;
        }
        
        .back {
            position: fixed;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 50px;
            height: 50px;
            display: none;
            background-color: skyblue;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div class="back">返回顶部</div>
    <div class="container"></div>
    <script>
        $(function() {
            //赋值操作 刷新页面直接让页面跳到100像素的位置
            $(document).scrollTop(100);
            //被卷去的头部scrollTop()/被卷去的左侧scrollLeft()
            //大盒子距离文档顶部的值
            var boxTop = $(".container").offset().top;
            $(window).scroll(function() {
                console.log($(document).scrollTop());
                if ($(document).scrollTop() >= boxTop) {
                    $(".back").fadeIn();
                } else {
                    $(".back").fadeOut();
                }
            });
            // 返回顶部
            $(".back").click(function() {

                // $(document).scrollTop(0);
                // 元素才有动画 不能写成文档的形式而是html和body元素做动画
                $("body,html").stop().animate({
                    scrollTop: 0
                });
                // 带有动画的返回顶部
            });
        });
    </script>
</body>

</html>

在这里插入图片描述

马小兜-
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
each方法，创建添加删除元素
weixin_59425810的博客
03-20 153
创建添加删除元素
get_attribute的常用方法
Qiu先生的博客
07-19 1万+
获取元素标签的内容(文本信息)： get_attribute(‘textContent’) 获取元素内的全部HTML： get_attribute('innerHTML') 获取包含选中元素的HTML： get_attribute('outerHTML') ...
getAttribute()与直接获取节点属性的区别
makerbeen的博客
10-28 1万+
关于getAttribute,setArribute,setArribute的理解 今天温习红宝书，看到264页DOM操作的取得特性，感觉很 疑惑之前获取特性一直都是直接获取可是为什么万能的高程书非得搞得这么麻烦弄出getArribute()这样的一个操作方法，所以我专门的去讨论了这三种方法，与直接操作属性的区别; 那么让我们先来看我们经常采取的一种获取标签中特性的方式
getAttribute
娓娓道来
08-03 8436
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>$永远的24k纯帅$</title> <style> ul{ list-style-type: none; cursor: poi...
gerAttriBute和getcomputedStyle()区别
HWSss的博客
07-23 264
元素.gerAttriBute(“属性”) 获取的是行内属性 window.getComputedStyle(选择器).属性 可以获取的到css样式表的属性 兼容IE8以上 window.getComputedStyle(box,“after”).属性 获取伪元素的属性 window.getComputedStyle(box).borderBottom 获取连字符的属性 使用驼峰时命名 ...
java超强笔记
12-03
"Java超强笔记"正是一份专为新手准备的学习资源，它全面涵盖了从Java环境的搭建到软件设计的各种概念，旨在提供一个易读且系统的学习路径。 首先，笔记可能会从Java的起源和发展开始介绍，让你了解这门语言的历史...
冰河的渗透实战笔记-冰河.pdf
05-18
冰河整理的全网首个开源的以实战案例为背景的渗透实战笔记，全书共442页，共计37万字（不计空格）。整本书的内容涵盖：Kali基础、渗透工具、木马制作、钓鱼链接生成、爆破密码、内存溢出攻击、web渗透、数据提权、...
javaweb项目实（含笔记与详细实现步骤）
07-20
JavaWeb项目实（含笔记与详细实现步骤） JavaWeb是一种基于Java技术的Web应用程序开发框架，它涵盖了服务器端编程、数据库交互、用户界面设计等多个方面。对于初学者来说，掌握JavaWeb开发是步入Web开发领域的关键...
狂神说笔记大全.rar
11-25
狂神的笔记
getParameter和getAttribute区别（超详细分析）
热门推荐
疯狂的卡夫卡的博客
02-25 7万+
getParameter和getAttribute区别（超详细分析） 对getParameter过程，如下图： 对getAttribute过程，如下图： 两者区别： ①getParameter()获取的是客户端设置的数据。 getAttribute()获取的是服务器设置的数据。 ②getParameter()永远返回字符串 getAttribute()返...
基于微信小程序的高校体育互动平台设计与实现
07-21
在当前移动互联网技术广泛渗透各行业的背景下，高校体育教育面临着新的发展机遇和挑战。本研究以满足学生多样化体育需求、促进高校体育信息化管理为目标，探索了利用微信小程序等现代技术的体育互动平台设计与实施。通过深入文献回顾和定性、定量研究方法，全面了解了高校学生的体育需求及现有技术解决方案。在微信小程序技术支持下，设计了功能全面、用户友好、安全性高的平台，并多次迭代优化。实际应用和评估显示，该平台为学生提供了信息发布、活动报名、成绩查询和互动交流等综合体育活动管理服务。数据分析表明，相较传统管理方式，平台显著提升了学生体育活动参与度，增强了锻炼意识，同时为教育工作者提供了高效便捷的管理工具。基于微信小程序的高校体育互动平台为体育教育带来新的研究方向和实践机遇，不仅满足学生需求，还为教育工作者提供了灵活、有效的管理工具。 建议高校体育部门深入合作，结合国家政策推广完善该平台，提供培训和技术支持，确保其广泛应用和推广。
机器学习Python实战-重庆理工大学编著 教学ppt
07-21
机器学习Python实战-重庆理工大学编著 全6章教学ppt（500+页）
软件杯 基于bert4keras与T5进行标题生成模型的训练与微调，对模型进行Quantize，并使用ONNX部署模型.zip
07-21
中国软件杯 全国二等奖基于 bert4keras 与 T5-pegasus 进行标题生成模型的训练与微调，对模型进行 Quantize，并使用 ONNX 部署模型，部署后服务请求时长约 0.6220 秒（Ubuntu 20 & 8 核 CPU） 【项目资源】：包含前端、后端、移动开发、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源，毕业设计等各种技术项目的源码。包括C++、Java、python、web、C#、EDA等项目的源码。 【适用人群】：适用于希望学习不同技术领域的初学者或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】：项目具有较高的学习借鉴价值，也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。鼓励下载和使用，并欢迎大家互相学习，共同进步。
java毕设&课设-asp小型企业网上订单系统的设计与实现(源代码+论文).zip
07-21
计算机毕业设计资源包含（项目部署视频+源码+LW+开题报告等等），所有项目经过助教老师跑通，有问题可以私信博主解决，可以免费帮部署。
气动控制基本资料，考生考点汇总
07-21
气动控制基本资料，考生考点汇总
更新校准2490+书源.json
最新发布
07-21
更新校准2490+书源.json
C#编程基础教程笔记
"这是一份关于C#编程语言的学习笔记，主要针对初学者，内容涵盖了C#的基础知识，包括C#教程的概述、C#语言的特点、开发环境的设置、程序结构、基本语法、数据类型、类型转换、变量、常量、运算符、判断语句、循环...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值