JQuery详解

最新推荐文章于 2024-05-07 14:42:48 发布

CharmDeer

最新推荐文章于 2024-05-07 14:42:48 发布

阅读量679

点赞数 3

分类专栏：前端三剑客详解文章标签： jquery

本文链接：https://blog.csdn.net/m0_57249797/article/details/119817107

版权

前端三剑客详解专栏收录该内容

9 篇文章 1 订阅

订阅专栏

主页目录

JQuery入门
JQuery常用API
中文文档：https://jqueryapi.net/
w3School教程：https://www.w3school.com.cn/jquery/jquery_ref_manipulation.asp
官方文档：https://www.jquery123.com/
JQuery事件
JQuery其他方法
bootstrap js插件
toDoList综合案例及源码
JQuery之AJAX异步交互常用方法（结合后端SpringBoot进行数据交互）

一、JQuery入门

JQuery的概述
JQuery的基本使用-引入
JQuery的入口函数
JQuery对象和DOM对象的转换

学习目标：

能够说出什么是JQuery
能够说出JQuery的优点
能够简单使用JQuery
能够说出DOM对象和JQuery对象的区别

1、JQuery的概述

1.1、JavaScript库

仓库：可以把很多东西放到这个仓库里面，找东西只需要到仓库里面查找到就可以了。
JavaScript库：即library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。
简单理解：就是一个JS文件，里面对我们原生js代码进行了封装，存放到里面，这样我们可以快速高效的使用这些封装好的功能了，比如JQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。
拓展：常见的JavaScript库

JQuery
Prototype
YUI
Dojo
Ext JS
移动端的zepto

这些库都是对JavaScript的封装，内部都是用JavaScript实现的，我们主要学习的是JQuery

1.2、JQuery的概述

JQuery是一个快速、简洁的JavaScript库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
J就是JavaScript；Query是查询；意思就是查询JavaScript，把js中的DOM操作做了封装，我们可以快速的查询并使用里面的功能
JQuery封装了JavaScript里面的功能代码，优化了DOM操作、事件处理、动画设计和AJAX交互。学习JQuery的本质；就是学习调用这些函数（方法）
JQuery出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它。从而提高开发效率。

2、JQuery的基本使用

2.1、JQuery的下载

官方网址：https://jquery.com/
进去后点击下面图片示例开始下载：
在这里插入图片描述
选择压缩版文件（点进去看看是不是压缩版）：

点进去复制全部内容到自己新建的后缀名为.js文件中（文件位于项目根目录下)。
注：视频里老师用的是3.3.1版本，但是现在是3.6.0版本，复制粘贴没有用了，一直报错：
在这里插入图片描述
研究之后猜想为没有导入jar包的原因，因此我用maven下载了jar包，并把jar包里的文件复制到项目目录下，再引入JQuery，例图：

jquery.js下面有个min版

代码引入：

 <script src="3.3.1/dist/jquery.min.js"></script>

输出jquery对象成功：
在这里插入图片描述
仔细观察文件，发现里面很多js代码，包括AJAX等的，所以这是可取的引入方式之一。

当然作为一个高手，肯定不会这么麻烦的引入了
直接输入下面代码：

<script src="https://cdn.bootcss.com//jquery/3.3.1/jquery.min.js"></script>

然后移到链接上面按Alt+Enter帮我们自动下载jquery对应的js文件
在这里插入图片描述
完事直接使用就行了。

2.2、JQuery的入口函数

$(function(){
	...//此处是页面DOM加载完成的入口
})

$(document).ready(function(){
	...//此处是页面DOM加载完成的入口
})

两种入口函数的写法都可，推荐第一种简洁的写法，（入口函数可以理解为main函数！！！因此，在单独的js文件中这个是必须存在且极其重要的）

2.3、JQuery的顶级对象$

$是JQuery的别称，在代码中可以使用JQuery代替,但一般为了方便，通常都直接使用前者。

2.4、JQuery对象和DOM对象

用原生JS获取来的对象就是DOM对象
JQuery方法获取的元素就是JQuery对象
JQuery对象的本质是：利用$对DOM对象包装后产生的对象（伪数组形式存储）

    <script>
        $(function () {
           //1.DOM对象：利用原生js获取过来的对象就是DOM对象
            var Div=document.querySelector("div");//Div是一个DOM对象
            var Span=document.querySelector("span");//Span是一个DOM对象
            console.log(Div);
            console.log(Span);
            //2.JQuery对象：用JQuery方式获取过来的对象就是JQuery对象，本质：通用$把DOM元素进行了包装
            var $div = $("div");//$div是一个JQuery对象
            var $span = $("span");//$span是一个JQuery对象
            console.log($div);
            console.log($span);
            //3.JQuery对象只能使用JQuery方法，DOM对象则使用原生的JavaScript属性和方法，也不能使用JQuery对象是方法。
            
        });
    </script>

2.5、JQuery对象和DOM对象

DOM对象与jQuery对象之间是可以相互转换的。

因为原生的js比JQuery更大，原生的一些属性和方法JQuery没有给我们封装，要想使用这些属性和方法需要把JQuery对象转换为DOM对象才能使用。

DOM对象转换为JQuery对象：$(DOM对象)

    <script>
        $(function () {
          // var div = document.querySelectorAll("div");
          var div = document.querySelector("div");
          console.log(div)//DOM对象
          console.log($(div));//JQuery对象，用$('')直接获取的也是JQuery对象
        });
    </script>

JQuery对象转换为DOM对象(两种方式)
$(‘div’)[index] index是索引号
$(‘div’).get(index) index是索引号

二、JQuery常用API

返回主页
目录：

JQuery选择器
JQuery样式操作
JQuery效果
JQuery属性操作
JQuery文本属性值
JQuery元素操作
JQuery尺寸、位置操作

1、JQuery选择器

1.1、JQuery基础选择器

请添加图片描述

1.2、JQuery层级选择器

请添加图片描述

1.3、JQuery的隐式迭代

知识铺垫
JQuery设计样式(css()方法)：

$('div').css('属性','值');

    <script>
        $(function () {
            //获取四个div元素
            var Div = $("div");
            //给四个div设置背景颜色为粉色 JQuery对象不能使用style属性
            Div.css('background','pink');
        });
    </script>
<body>
    <div>我是1</div>
    <div>我是2</div>
    <div>我是3</div>
    <div>我是4</div>
</body>

结果图：
在这里插入图片描述
不必再利用for循环就能给每个伪数组中的对象设置样式这就是隐式迭代
或许说：遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代

1.4、JQuery筛选选择器

请添加图片描述

1.5、JQuery筛选方法(重点)

请添加图片描述

1.6、新浪下拉菜单案例（筛选案例一）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新浪下拉菜单案例</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        .nav{
            width: 400px;
            height: 200px;
            margin: 100px auto;
        }
        .nav>li{
            float: left;
            margin-left: 10px;
        }
        .nav li ul li{
            /*display: inline-block;*/
            border: 1px solid yellow;
            width: 50px;
            height: 30px;
            text-align: center;

        }
        .nav li ul{
            display: none;
        }
        .nav li{
            margin-right: 5px;
            width: 50px;
            text-align: center;
        }
        .nav>li:hover{
            background-color: skyblue;

        }
        .nav>li:hover ul li{
            background-color: white;
        }
    </style>

    <script src="3.3.1/dist/jquery.min.js"></script>
    <script>
        $(function () {
            $(".nav>li").mouseover(function () {
                //$(this) 指的是当前JQuery对象，这里是$(".nav>li")，注意this不能加引号
                //show()显示元素的意思
                $(this).children("ul").show();
            })
            $(".nav>li").mouseout(function () {
                $(this).children("ul").hide();
            })
        })
    </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>
</body>
</html>

确实比css麻烦，这里的目的在于认识并巩固学到的JQuery筛选方法

1.7、JQuery的排他思想（筛选案例二）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery的排他思想</title>
</head>
    <script src="3.3.1/dist/jquery.min.js"></script>
    <script>
        $(function () {
            //1.隐式迭代 给所有的按钮都绑定了点击事件
            $("button").click(function () {
            //2.当前的元素变化背景颜色
            $(this).css("background","pink")
            //3.其余的兄弟去掉背景颜色 隐式迭代
            $(this).siblings("button").css("background","");
            })
        })
    </script>

<body>
    <button>选中变色</button>
    <button>选中变色</button>
    <button>选中变色</button>
    <button>选中变色</button>
    <button>选中变色</button>
    <button>选中变色</button>
    <button>选中变色</button>
    <button>选中变色</button>
</body>
</html>

1.8、淘宝服饰精品案例（筛选案例三）

核心原理：鼠标经过左侧盒子某个小li，就让内容区相应图片显示，其余图片隐藏
需要得到当前小li的索引号，就可以显示对应索引号的图片
JQuery得到当前元素索引号：$(this).index();返回值是number
中间对应的图片，可以通过eq(index)方法去选择
显示元素show() 隐藏元素hide()

1.9、链式编程

    <script>
        $(function () {
           $("button").click(function () {
               //让被点击的按钮变红色字体
               // $(this).css("color","red");
               //让其余兄弟元素不变色
               // $(this).css("color","");
               //上面的两句话采用链式编程:
               $(this).css("color","red").css("color","");
           })
        })
    </script>

链式编程的对象一定为同一个对象！使代码更简洁，看起来更优雅

2、JQuery的样式操作

返回目录

2.1、操作css方法

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

css方法参数值写属性名，则是返回属性值（取值方法）。

$(this).css("color");

修改样式：参数是属性名，属性值，中间用逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号，属性名一定要加引号

$(this).css("color","red");
$(this).css("width",300);//同效果$(this).css("width","300px");

参数可以是对象形式，方便设置多组样式，属性名和属性值用冒号分开，属性名可以不用加引号。如果是复合属性就必须采取驼峰命名法，不是数字的值也必须加引号

$(this).css({"color":"white","font-size":"20px"});
//推荐写法
$(this).css({
            width:200,
            height:200,
          	backgroundColor:"red"
        })

2.2、JQuery修改样式操作类

设置样式类方法
添加类 addClass();div没有current类名的时候添加此类名
删除类 removeClass();div有current类名的时候移除此类名
切换类 toggleClass();div没有current类名的时候添加，有的时候移除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淘宝服饰精品案例</title>
    <script src="3.3.1/dist/jquery.min.js"></script>
    <style>
        div{
            width: 150px;
            height: 150px;
            background-color: pink;
            margin: 100px auto;
        }
        .current{
            background-color: red;
        }
    </style>


    <script>
       $(function () {
           //注意操作类里面的参数千万不能加点
           //1.添加类 addClass();div没有current类名的时候添加此类名
           /*
           $("div").click(function () {
               $(this).addClass("current");
           })
           */
           //2.删除类 removeClass();div有current类名的时候移除此类名
           /*
           $("div").click(function () {
               $(this).removeClass("current");
           })
            */
           //3.切换类 toggleClass();div没有current类名的时候添加，有的时候移除
           $("div").click(function () {
               $(this).toggleClass("current");
           })
       })
    </script>
    
</head>
<body>
<!--添加类的<div></div>-->
<!--删除类的<div class="current"></div>-->
<div></div>
</body>
</html>

2.3、tab栏切换案例（筛选案例四）

筛选案例第一种方法：排他思想

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淘宝服饰精品案例</title>
    <script src="3.3.1/dist/jquery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        li{
            list-style: none;
            float: left;
            margin-left: 10px;
            cursor: pointer;
        }
        ul{
            width: 600px;
            height: 150px;
            margin: 100px auto;
            position: relative;
        }
        ul li div{
            width: 600px;
            height: 100px;
            background-color: pink;
            position: absolute;
            top: 30px;
            left: 0;
            display: none;
            color: black;
        }

    </style>
    <script>
        $(function () {
            $("li").click(function () {
                $(this).css({background:"red",color:"white"}).siblings("li").css({background:"",color:"black"});
                //$(this).eq(index).children('div').show().siblings(this).children('div').hide();
                // 上面这个写法是错误的，$(this)在这里是单选事件，表示li已经被选中出来了，且只有一个li，并不具备伪数组的形式。需要重新选择多个li。
                //正确写法:
                var index=$(this).index();
                $('li').eq(index).children('div').show();
                $(this).siblings('li').children('div').hide();//这句话也不要写成$('li')的兄弟节点了，应该是被选中的li也就是$(this)的兄弟节点
                //上面的三句话可以合并为一句话：
                //$(this).children('div').show().parent('li').siblings('li').children('div').hide();
            })
            // $('li').eq(0).click();//默认第一个被点击
            $('li').eq(0).trigger("click");//与上面方法一样
        })
    </script>
</head>
<body>
<ul>
    <li>商品介绍
        <div>商品介绍模块</div>
    </li>
    <li>规格与包装
        <div>规格与包装模块</div>
    </li>
    <li>售后保障
        <div>售后保障模块</div>
    </li>
    <li>商品评价(3万+)
        <div>商品评价模块</div>
    </li>
    <li>手机社区
        <div>手机社区模块</div>
    </li>
</ul>

</body>
</html>

筛选案例第二种方法：修改样式操作类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淘宝服饰精品案例</title>
    <script src="3.3.1/dist/jquery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        li{
            list-style: none;
            float: left;
            margin-left: 10px;
            cursor: pointer;
        }
        ul{
            width: 600px;
            height: 150px;
            margin: 100px auto;
            position: relative;
        }
        ul li div{
            width: 600px;
            height: 100px;
            background-color: pink;
            position: absolute;
            top: 30px;
            left: 0;
            display: none;
            color: black;
        }
        .show{
            display: block;
        }
        .color01{
            background-color: red;
            color: white;
        }

    </style>
    <script>
        $(function () {
            $("li").click(function () {
                $(this).addClass('color01').siblings().removeClass('color01');
                var index=$(this).index();
                $('li').eq(index).children('div').addClass('show');
                $(this).siblings().children('div').removeClass('show');
            //上面的三句话都可以合并为一句话：
            //$(this).children('div').addClass('show').parent('li').siblings().children('div').removeClass('show');
            })
            $('li').eq(0).click();
        })
    </script>
</head>
<body>
<ul>
    <li>商品介绍
        <div>商品介绍模块</div>
    </li>
    <li>规格与包装
        <div>规格与包装模块</div>
    </li>
    <li>售后保障
        <div>售后保障模块</div>
    </li>
    <li>商品评价(3万+)
        <div>商品评价模块</div>
    </li>
    <li>手机社区
        <div>手机社区模块</div>
    </li>
</ul>

</body>
</html>

2.4、类操作与className的区别

原生JS中className会覆盖元素原先里面的类名
JQuery里面类操作只是对指定类进行操作，不影响原先的类名。

3、JQuery效果

返回目录

JQuery给我们封装了很多动画效果，最常见的如下：请添加图片描述

3.1、显示隐藏与切换效果

1.语法规范

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

2.参数

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="3.3.1/dist/jquery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        div{
            width: 300px;
            height: 500px;
            background-color: pink;
        }
        button{
            width: 50px;
            height: 20px;
        }
    </style>
    <script>
        $(function () {
            $('button').click(function () {
                var index=$(this).index();
                if(index===0){
                    $('div').stop().hide(2000,function () {
                        alert("我已经消失了");
                    });
                }else if(index===1){
                    $('div').stop().show(1000,'swing',function () {
                        alert("我成功出现了");
                    });
                }else {
                    $('div').stop().toggle(3000,'linear',function () {
                        alert("切换成功");
                    });
                }
            })
        })
    </script>
</head>
<body>
    <button>消失</button>
    <button>显示</button>
    <button>切换</button>
    <div></div>
</body>
</html>

3.2、滑动效果以及事件切换

1.语法规范
下拉滑动，上拉滑动，滑动切换

slideDown([speed,[easing],[fn]])
slideUp([speed,[easing],[fn]])
slideToggle([speed,[easing],[fn]])

2.参数

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="3.3.1/dist/jquery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        div{
            width: 300px;
            height: 500px;
            background-color: pink;
            display: none;
        }
        button{
            width: 70px;
            height: 20px;
        }
    </style>
    <script>
        $(function () {
            $('button').click(function () {
                var index=$(this).index();
                if(index===0){
                    $('div').stop().slideDown(500,function () {
                        alert("下拉滑动显示了");
                    });
                }else if(index===1){
                    $('div').stop().slideUp(1000,'swing',function () {
                        alert("上拉滑动消失了");
                    });
                }else {
                    $('div').stop().slideToggle(300,'linear');
                }
            })
        })
    </script>
</head>
<body>
    <button>下拉滑动</button>
    <button>上拉滑动</button>
    <button>切换滑动</button>
    <div></div>
</body>
</html>

3.3、停止动画排队stop

1.动画或效果队列
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
2.停止排队

stop();

stop()方法用于停止动画或效果
注意：stop()写到动画或者效果的前面，相当于停止结束上一次的动画
前面的代码我很多都已经写上了，参考就行了

3.4、淡入淡出，切换以及突出显示案例

1.语法规范
下拉滑动，上拉滑动，滑动切换

fadeIn([speed],[easing],[fn])
fadeOut([speed],[easing],[fn])
fadeToggle([speed],[easing],[fn])
//突出显示有两个参数是必写的，一个是速度，一个是透明度
fadeTo(speed,opacity,[easing],[fn])

2.参数

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="3.3.1/dist/jquery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        div{
            float: right;
            width: 100px;
            height: 500px;
            background-color: pink;
            display: none;
        }
        button{
            width: 70px;
            height: 20px;
            text-align: center;
        }
    </style>
    <script>
        $(function () {
            $('button').click(function () {
                var index=$(this).index();
                if(index===0){
                   $('div').stop().fadeIn(500);
                }else if(index===1){
                    $('div').stop().fadeOut();
                }else if(index===2){
                    $('div').stop().fadeToggle();
                }else{
                    $('div').eq(0).siblings('div').stop().fadeTo(500,0.4);
                }
            })
        })
    </script>
</head>
<body>
    <button>淡入</button>
    <button>淡出</button>
    <button>切换</button>
    <button>突出显示</button>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

突出显示应用场景（结合排他思想）：
请添加图片描述

3.5、自定义动画animate

1.语法

animate(params,[speed],[easing],[fn])

2.参数

params：想要更改的样式属性，以对象的形式传递，必须写。如果是复合属性则需要采取驼峰命名法，例backgroundColor。其余参数都可以省略。
speed：三种预定速度之一的字符串(“slow”,“normal”,“fast”)或表示动画时长的毫秒数值(如：1000)。
easing：(Optional)用来指定切换的效果，默认是"swing"(慢快慢)，可用参数"linear"(匀速的)
fn：回调函数，在动画完成时执行的函数，每个元素执行一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="3.3.1/dist/jquery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        div{
            width: 100px;
            height: 300px;
            background-color: pink;
        }
        button{
            width: 100px;
            height: 20px;
            text-align: center;
        }
    </style>
    <script>
        $(function () {
            $('button').click(function () {
                var index=$(this).index();
                if(index===0){
                    $('div').animate({
                        marginLeft:400
                    },500)
                }else if(index===1){
                    $('div').animate({
                        marginLeft:400,
                        marginTop:100
                    },500)
                }else if(index===2){
                    $('div').animate({
                        marginLeft:400,
                        marginTop:100,
                        width:300,
                        height:500
                    },500)
                }else{
                    $('div').animate({
                        marginLeft:400,
                        marginTop:100,
                        width:300,
                        height:500,
                        opacity:0.4
                    },500)
                }
            })
        })
    </script>
</head>
<body>
    <button>向右移动</button>
    <button>移到右斜下方</button>
    <button>移动改变宽高</button>
    <button>移动改变透明度</button>
    <div></div>
</body>
</html>

3.6、王者手风琴案例

样式图：
在这里插入图片描述

图片获取网址：(各位高手都应该知道怎么获取吧)
https://pvp.qq.com/web201605/herolist.shtml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>王者手风琴案例</title>
    <script src="3.3.1/dist/jquery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        li{
            list-style: none;
        }
        header{
            width: 760px;
            height: 130px;
            background-color: #20466e;
            border-radius: 10px;
            margin: 100px auto;
        }
        section{
            height: 43px;
            color: #a6afbc;
        }
        article::after,ul::after{
            content: '';
            display: table;
            clear: both;
            height: 0;
            visibility: hidden;
        }
        article ul li{
            width: 69px;
            height: 69px;
            float: left;
            margin-left: 10px;
            border-radius: 10px;
            background-color: pink;
        }
        article ul li:first-of-type{
            width: 224px;
        }
        article ul li img:first-of-type{
            border-radius: 10px;
            display: none;
        }
        article ul li img:last-of-type{
            float: left;
            width: 69px;
            height: 69px;
            border-radius: 10px;
        }
        article ul li:first-of-type img:first-of-type{
            display: block;
        }
        article ul li:first-of-type img:last-of-type {
            display: none;
        }
        span{
            font-size: 16px;
            font-weight: 600;
            display: inline-block;
            transform: translate(20px,10px);
        }
    </style>
    <script>
        var num=300;
        $(function () {
            // 鼠标经过某个小li,有两步操作
            $('li').mouseover(function () {
                //1.当前小li 宽度变为 224px ，同时里面的小图片淡出，大图片淡入
               $(this).stop().animate({
                   width:224
               },num).find('.small').stop().fadeOut(num).siblings(".big").stop().fadeIn(num);
               //2.其余兄弟小li宽度变为69px，小图片淡入，大图片淡出
               $(this).siblings('li').stop().animate({
                	width:69
                },num).find('.small').stop().fadeIn(num).siblings(".big").stop().fadeOut(num);
            })
        })
    </script>
</head>
<body>
    <header>
        <section><span>周免英雄 (8月16日-8月22日)</span></section>
    <article>
        <ul>
            <li><a href=""><img src="king-images/lp-big.png" alt="" class="big"><img src="king-images/lp-small.jpg" alt="" class="small"></a></li>
            <li><a href=""><img src="king-images/mk-big.png" alt="" class="big"><img src="king-images/mk-small.jpg" alt="" class="small"></a></li>
            <li><a href=""><img src="king-images/hz-big.png" alt="" class="big"><img src="king-images/hz-small.jpg" alt="" class="small"></a></li>
            <li><a href=""><img src="king-images/zg-big.png" alt="" class="big"><img src="king-images/zg-small.jpg" alt="" class="small"></a></li>
            <li><a href=""><img src="king-images/msy-big.png" alt="" class="big"><img src="king-images/msy-small.jpg" alt="" class="small"></a></li>
            <li><a href=""><img src="king-images/smy-big.png" alt="" class="big"><img src="king-images/smy-small.jpg" alt="" class="small"></a></li>
            <li><a href=""><img src="king-images/lx-big.png" alt="" class="big"><img src="king-images/lx-small.jpg" alt="" class="small"></a></li>
        </ul>
    </article>
    </header>
</body>
</html>

4、JQuery属性操作

返回目录

4.1、设置或获取元素固有属性值 prop()

所谓元素固有属性就是元素本身自带的属性，比如<a>元素里面的href，比如<input>元素里面的type
1.获取属性语法

//element.prop('属性名') 获取元素固有的属性值
prop('属性名')

2.设置属性语法

prop('属性名','属性值')

案例：判断按钮是否选中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="3.3.1/dist/jquery.min.js"></script>
    <script>
        $(function () {
            $('input').change(function () {
                console.log($(this).prop('checked'));
            })
        })
    </script>
</head>
<body>
    <input type="checkbox" checked>
</body>
</html>

在这里插入图片描述

4.2、设置或获取元素自定义属性值 attr()

本来没有的属性，我们通过该方法为元素添加上
1.获取属性的语法

attr('属性名')  //类似原生getAttribute()

注意区别上面的prop()：

    <script>
        $(function () {
               $('input').change(function () {
                    console.log($(this).prop('checked'))
               })
        })
    </script>
    //以这种方式获取的固有属性值控制台打印的是true或false

    <script>
        $(function () {
               $('input').change(function () {
                    console.log($(this).attr('checked'))
               })
        })
    </script>
	//以这种方式获取的属性值控制台打印的是状态结果值

在这里插入图片描述
2.设置属性的语法

attr('属性名','属性值')   //类似原生setAttribute()

例如给div加上没有的属性index (该方法是有就修改，没有就添加设置的属性)

$('div').attr('index','2');

拓展：该方法也可以获取H5自定义属性

4.3、数据缓存data()

data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被删除。
1.附加数据语法

data('属性名','属性值')  //向被选元素附加数据

2.获取数据语法

data('属性名') //向被选元素获取数据

同时，还可以读取HTML5自定义属性 data-index，得到的是数字型（可以不用写data-）
综合attr()方法对比的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="3.3.1/dist/jquery.min.js"></script>
    <script>
      $(function () {
            console.log($('div').attr('data-index')); // 1
            console.log($('div').data('index')); // 1
            $('span').data('name','张三');
            console.log($('span').data('name')); // 张三
      })
    </script>
</head>
<body>
    <span></span>
    <div data-index="1"></div>
</body>
</html>

4.4、案例之购物车模块-全选

思路与要求：

里面的3个小的复选框按钮的选中状态跟着全选按钮走
方法利用的是prop()来获取和设置固有属性
当3个小的复选框被选上后，2个全选框也要被选上

样式图：
在这里插入图片描述
实验代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="3.3.1/dist/jquery.min.js"></script>
    <script>
      $(function () {
            $('.shopAll').change(function () {
                // if($(this).prop('checked')){
                //     $('.shops').prop('checked','checked');
                //     $(this).siblings().prop('checked','checked');
                // }else{
                //     $('.shops').prop('checked','');
                //     $(this).siblings().prop('checked','');
                // }
                //上面的步骤代码可以合并为下面的一条
                $('.shops,.shopAll').prop('checked',$(this).prop('checked'));
            })
            $('.shops').change(function () {
                //这里我改进了一下，使得无论增加多少商品都可以达到全选反应的状态
               if($('.shops:checked').length===$('.shops').length){
                   $('.shopAll').prop('checked','checked');
               }else{
                   $('.shopAll').prop('checked',false);
               }
            })
      })
    </script>
</head>
<body>
    <label for="">
        全选: <input type="checkbox" name="shopALL" class="shopAll"><br/>
        商品1<input type="checkbox" name="shop" class="shops"><br/>
        商品2<input type="checkbox" name="shop" class="shops"><br/>
        商品3<input type="checkbox" name="shop" class="shops"><br/>
        商品4<input type="checkbox" name="shop" class="shops"><br/>
        全选: <input type="checkbox" name="shopALL" class="shopAll">
    </label>
</body>
</html>

5、JQuery内容文本值

返回目录

5.1、JQuery内容文本值相关操作方法

主要针对元素的内容还有表单的值操作
1.普通元素内容html() (相当于原生innerHTML)

html()        //获取元素的内容
html('内容')   //设置元素的内容

2.普通元素文本内容text() (相当于元素innerText())

text()        //获取普通文本内容
text('内容')   //设置元素的文本内容

3.表单元素value值的获取与修改

val()         //获取表单value值
val('内容')    //设置表单value值

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

核心思路：首先声明一个变量，当我们点击加号(increment)，就让这个值++，然后赋值给文本框（获取值，设置值)
注意1：只能增加本商品的数量，就是当前+号的兄弟文本框的值
修改表单的值是val()方法
注意2：这个变量初始值应该是这个文本框的值，在这个值的基础上++。要获取表单的值

首先回顾一下利用HTML5新的数字框来设置（范围在1-10）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="3.3.1/dist/jquery.min.js"></script>
    <script>
        $(function () {
            $('input').click(function () {
                if(parseInt($(this).val())<1){
                    $('input').val('1');
                }else if(parseInt($(this).val())>10){
                    $('input').val('10');
                }
            })
        })
    </script>
    <style>
        input{
            width: 40px;
            height: 20px;
        }
    </style>
</head>
<body>
<label>
    <input type="number" value="1">
</label>

</body>
</html>

再使用新方法设置（老师写的这个对象bug还是挺多的，有兴趣的可以自己改）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="3.3.1/dist/jquery.min.js"></script>

    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        input{
            width: 30px;
            height: 20px;
            outline-style: none;
            border-color: gray;
            border-right: none;
            border-left: none;
            text-align: center;
        }
        button{
            width: 20px;
            height: 20px;
            border-radius: 1px;
            border-color: gray;
        }
        div{
            width: 200px;
            margin: 100px auto;
        }

    </style>
    <script>
        $(function () {
        	//刷新页面值都为1
            $('input').val('1')
            //增减商品数量模块 首先声明一个变量，当我们点击+号(increment) ， 就让这个值++，然后赋值给文本框
            $('.increment').click(function () {
            //得到当前兄弟文本框的值
                var n=$(this).siblings('.itxt').val();
            // console.log(n)
                n++;
                $(this).siblings('.itxt').val(n);
            })
            $('.decrement').click(function () {
                //得到当前兄弟文本框的值
                var n=$(this).siblings('.itxt').val();
                if(n == 1){
                    return false;//return后面代码不再执行
                }
                // console.log(n)
                n--;
                $(this).siblings('.itxt').val(n);
            })
        })
    </script>
</head>
<body>

<div>
    <button class="decrement">-</button>
    <input type="text" class="itxt" value="1">
    <button class="increment">+</button>
</div>
<div>
    <button class="decrement">-</button>
    <input type="text" class="itxt" value="1">
    <button class="increment">+</button>
</div>
<div>
    <button class="decrement">-</button>
    <input type="text" class="itxt" value="1">
    <button class="increment">+</button>
</div>

</body>
</html>

5.3、购物车案例模块-修改商品小计分析

核心思路：每次点击+号或者-号，根据文本框的值乘以当前商品的价格就是商品的小计
注意1：只能增加本商品的小计，就是当前商品的小计模块（p-sum）
修改普通元素的内容是text()方法
注意2：当前商品的价格，要把￥符合去掉再相乘截取字符串substr(1)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="3.3.1/dist/jquery.min.js"></script>

    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        input{
            width: 30px;
            height: 20px;
            outline-style: none;
            border-color: gray;
            border-right: none;
            border-left: none;
            text-align: center;
        }
        button{
            width: 20px;
            height: 20px;
            border-radius: 1px;
            border-color: gray;
        }
        div{
            width: 400px;
            margin: 100px auto;
        }
        i{
            font-style: normal;
        }
    </style>
    <script>
        $(function () {
        	//刷新页面值都为1
            $('input').val('1')
            //增减商品数量模块 首先声明一个变量，当我们点击+号(increment) ， 就让这个值++，然后赋值给文本框
            $('.increment').click(function () {
            //得到当前兄弟文本框的值
                var n=$(this).siblings('.itxt').val();
                var p=$(this).siblings('i').text();
                p = p.substr(1);
            // console.log(n)
                n++;
                $(this).siblings('.itxt').val(n);
                $(this).siblings('span').text("￥"+p*n);
            })
            $('.decrement').click(function () {
                //得到当前兄弟文本框的值
                var n=$(this).siblings('.itxt').val();
                var p=$(this).siblings('i').text();
                p = p.substr(1);
                if(n == 1){
                    return false;//return后面代码不再执行
                }
                // console.log(n)
                n--;
                $(this).siblings('.itxt').val(n);
                $(this).siblings('span').text("￥"+p*n);
            })
        })
    </script>
</head>
<body>

<div>
    单价:<i>￥10</i>
    <button class="decrement">-</button>
    <input type="text" class="itxt" value="1">
    <button class="increment">+</button>
    小计:<span>￥10</span>元
</div>
<div>
    单价:<i>￥12.0</i>
    <button class="decrement">-</button>
    <input type="text" class="itxt" value="1">
    <button class="increment">+</button>
    小计:<span>￥12.0</span>元
</div>
<div>
    单价:<i>￥24.5</i>
    <button class="decrement">-</button>
    <input type="text" class="itxt" value="1">
    <button class="increment">+</button>
    小计:<span>￥24.5</span>元
</div>

</body>
</html>

拓展：
前辈（祖先）选择器parents();

parents()  //选择该元素所有的父亲或者父亲的父亲们
parents('选择器') //可以指定选择某个具体的前辈

最后计算的结果如果想保留n位小数通过toFixed(n) (n>0)方法
例如上面价格计算结果保留两位小数：

var price=(p*n).toFixed(2)

用户也可以直接修改表单里面的值，同样要计算小计。用表单change事件
用最新的表单内的值乘以单价即可但是还是当前商品小计

            //用户修改文本框的值 计算 小计模块
            $('.itxt').change(function () {
                //先得到文本框里面的值 乘以 当前商品的单价
                var n=$(this).val()
                //当前商品的单价
                var p=$(this).siblings('i').text().substr(1);
                $(this).siblings('span').text("￥"+(p*n).toFixed(2));
            })

6、JQuery元素操作

返回目录
主要是遍历、创建、添加、删除元素操作

6.1、遍历元素

JQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历
语法1：

$('div').each(funcation(index,domEle){...;})

each()方法遍历匹配的每一个元素。主要用DOM处理。each每一个
里面的回调函数有2个参数：index是每个元素的索引号；DemEle是每个DOM元素对象，不是JQuery对象
所以要使用JQuery方法，需要给这个dom元素转换为JQuery对象$(domEle)

案例一把不同div的背景颜色修改为红绿蓝

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="3.3.1/dist/jquery.min.js"></script>
    <script>
        $(function () {
            //如果针对同一类元素做不同操作，需要用到遍历元素(类似for，但比for强大)
            //1.each() 方法遍历元素
            var arr=['red','green','blue'];
            $('div').each(function (index,domEle) {
                //回调函数第一个参数一定是索引号 并且参数名称可以修改
                console.log(index);
                //回调函数第二个参数一定是 dom元素对象
                console.log(domEle);
                //domEle.css('color')//报错，dom对象没有css方法
                $(domEle).css('background-color',arr[index]);
            })
        })
    </script>
</head>
<body>
        <div>1</div>
        <div>2</div>
        <div>3</div>
</body>
</html>

案例二把不同div中的值相加（计商品总数的方法）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="3.3.1/dist/jquery.min.js"></script>
    <script>
        $(function () {
            var sum=0;//定义相加
            $('div').each(function (index,domEle) {
                sum+=parseInt($(domEle).text());
            })
            //输出相加结果
            console.log(sum);//6
        })
    </script>
</head>
<body>
        <div>1</div>
        <div>2</div>
        <div>3</div>
</body>
</html>

6.2、遍历数据$.each

$.each(object,funcation(index,domEle){...;})

$.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
里面的函数有两个参数：index是每个元素的索引号；element遍历内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="3.3.1/dist/jquery.min.js"></script>
    <script>
       $(function () {
           //遍历元素
           // $.each($('div'),function (index,ele) {
           //     console.log(index);
           //     console.log(ele);
           // })
           //遍历数组
           // var arr=['red','green','blue'];
           // $.each(arr,function (index,element) {
           //     console.log(index);
           //     console.log(element);
           // })
           //遍历对象
           var obj={
               name:'张三',
               age:18,
               height:185
           }
           $.each(obj,function (index,element) {
               console.log(index);//name age height 输出的是属性名
               console.log(element);//张三 18 185 输出的是属性值
           })
       })
    </script>
</head>
<body>
        <div>1</div>
        <div>2</div>
        <div>3</div>
</body>
</html>

6.3、购物车案例模块-计算总计和总额

核心思路：把所有文本框里面的值相加就是总计数量。总额同理
文本框里面的值不相同，如果想要相加想要用到each遍历。声明一个变量，相加即可
点击+号-号，会改变总计和总额，如果用户修改了文本框里面的值同样会改变总计和总额
因此可以封装一个函数求总计和总额的，以上2个操作调用这个函数即可。
注意1：总计是文本框里面的值，相加用val() 总额是普通元素的内容用text()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车计算总数量和总价</title>
    <script src="3.3.1/dist/jquery.min.js"></script>

    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        input{
            width: 30px;
            height: 20px;
            outline-style: none;
            border-color: gray;
            border-right: none;
            border-left: none;
            text-align: center;
        }
        button{
            width: 20px;
            height: 20px;
            border-radius: 1px;
            border-color: gray;
        }
        div{
            width: 400px;
            margin: 100px auto;
        }
        i{
            font-style: normal;
        }
    </style>
    <script>
        $(function () {
            //刷新页面值都为1
            $('input').val('1')
            //增减商品数量模块 首先声明一个变量，当我们点击+号(increment) ， 就让这个值++，然后赋值给文本框
            $('.increment').click(function () {
                //得到当前兄弟文本框的值
                var n=$(this).siblings('.itxt').val();
                var p=$(this).siblings('i').text();
                p = p.substr(1);
                // console.log(n)
                n++;
                $(this).siblings('.itxt').val(n);
                $(this).siblings('span').text("￥"+(p*n).toFixed(2));
                getSum();
            })
            $('.decrement').click(function () {
                //得到当前兄弟文本框的值
                var n=$(this).siblings('.itxt').val();
                var p=$(this).siblings('i').text();
                p = p.substr(1);
                if(n == 1){
                    return false;//return后面代码不再执行
                }
                // console.log(n)
                n--;
                $(this).siblings('.itxt').val(n);
                $(this).siblings('span').text("￥"+(p*n).toFixed(2));
                getSum();
            })
            //用户修改文本框的值 计算 小计模块
            $('.itxt').change(function () {
                //先得到文本框里面的值 乘以 当前商品的单价
                var n=$(this).val()
                //当前商品的单价
                var p=$(this).siblings('i').text().substr(1);
                $(this).siblings('span').text("￥"+(p*n).toFixed(2));
                getSum();
            });

            //计算总计和总额模块
            getSum();
            function getSum() {
                var count=0;//计算总件数
                var money=0;//计算总价钱
                $('.itxt').each(function (index,element) {
                    count+=parseInt($(element).val());
                });
                $('.amount-sum').text(count);
                $('.p-sum').each(function (index,element) {
                    money+=parseFloat($(element).text().substr(1));
                })
                $('.price-sum').text("￥"+money.toFixed(2));
            }
        })
    </script>
</head>
<body>

<div>
    单价:<i>￥10</i>
    <button class="decrement">-</button>
    <input type="text" class="itxt">
    <button class="increment">+</button>
    小计:<span class="p-sum">￥10</span>元
</div>
<div>
    单价:<i>￥12.6</i>
    <button class="decrement">-</button>
    <input type="text" class="itxt">
    <button class="increment">+</button>
    小计:<span class="p-sum">￥12.6</span>元
</div>
<div>
    单价:<i>￥24.5</i>
    <button class="decrement">-</button>
    <input type="text" class="itxt">
    <button class="increment">+</button>
    小计:<span class="p-sum">￥24.5</span>元
</div>
<div>
    总计:<span class="amount-sum"></span>件,总价:<span class="price-sum"></span>元
</div>

</body>
</html>

6.4、创建、添加、删除元素

1.创建元素
语法：

$('<li></li>');

动态的创建一个li标签

2.添加元素

内部添加语法：

element.prepend('内容');//内部添加,并且放到内容的最前面
element.append('内容');//把内容放入匹配元素内部后面，类似原生appendChild

外部添加语法

element.before('内容');//外部添加,把内容放到目标元素前面
element.after('内容');//外部添加,把内容放到目标元素后面

内部添加元素，生成之后，它们是父子关系
外部添加元素，生成之后，它们是兄弟关系
3.删除元素

element.remove() //删除匹配的元素(删本身及孩子)
element.empty()  //删除匹配的元素集合中所有的子节点(删孩子)
element.html('') //清空匹配的元素内容()

6.5、购物车模块-删除商品模块

核心思路：把商品remove()删除元素即可
有三个地方需要删除：1.商品后面的删除按钮2.删除选中的商品3.清理购物车
商品后面的删除按钮：一定是删除当前是商品，所以从$(this)出发
商品删除点击后，一定要重新计算总数量和总额，也就是再次调用自定义的getSum()方法

案例后面写个完整的模块出来

6.6、选中商品添加背景颜色

核心思路：选中的商品添加背景颜色，不选中的移除背景颜色即可
全选按钮点击：如果全选是选中的，则所有的商品添加背景，否则移除背景
小的复选框点击：如果是选中状态，则当前商品添加背景，否则移除背景
这个背景，可以通过类名修改，添加类和删除类

综合案例：
效果图：
代码：

7、JQuery尺寸、位置操作

返回目录

7.1、JQuery 尺寸

以上参数为空，则是获取相应值，返回的是数字型
如果参数是数字，则是修改相应值
参数可以不必写单位

7.2、JQuery 位置

位置主要有三个：offset()、position()/scrollLeft()
1. offset() 设置或获取元素偏移

offset() 方法设置或返回被选中元素相对于文档的偏移坐标，跟父级没关系
该方法有2个属性left、top。offset().top 用于获取距离文档顶部的距离，offset().left 用于获取距离文档左侧的距离
可以设置元素的偏移：offset({top:10,left:30});
2. position() 获取元素偏移
position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准
这个方法只能获取不能设置

综合代码：
请添加图片描述

7.3、JQuery被卷去头部方法

scrollTop()/scroolLeft() 设置或获取元素被卷去的头部和左侧

scrollTop() 方法设置或返回被选中元素被卷去的头部

案例：当滑动到某一位置的时候，返回顶部盒子显现出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="3.3.1/dist/jquery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        article{
            width: 600px;
            height: 1200px;
            background-color: #b3d4fc;
            margin: 300px auto;
        }
        div{
            position: fixed;
            bottom: 100px;
            right: 30px;
            width: 80px;
            height: 50px;
            background-color: pink;
            text-align: center;
            line-height: 50px;
            display: none;
        }
    </style>
    <script>
        $(function () {
            // 被卷去的头部 scrollTo() / 被卷去的左侧 scrollLeft(),这里设置默认卷去（滚动）100px
            $(document).scrollTop(100);
            //获取内容的上偏移，offset是相对于文档的
            var boxTop=$('article').offset().top;
            //页面滚动事件
            $(window).scroll(function () {
                console.log($(document).scrollTop());//打印一下整个页面被卷去的头部距离
                if($(document).scrollTop() >= boxTop){//如果文档被卷去的头部距离等于内容偏移量（也就是内容与顶部距离为0时）
                    $('div').fadeIn();//返回顶部盒子出现
                }else{
                    $('div').fadeOut();
                }
            })
        })
    </script>
</head>
<body>
   <article>
   </article>
    <div>返回顶部</div>
</body>
</html>

案例拓展—带有动画的返回顶部

核心原理：使用animate动画返回顶部
animate动画函数里面有个scrollTop属性，可以设置位置
但是是元素做动画，因此$(‘body,html’).animate({scrollTop:0})

            //带有动画的返回顶部
            $('div').click(function () {
                // $(document).scrollTop(0);
                $('body,html').stop().animate({//注意:不能写$(document)文档做动画，只能是元素做动画
                    scrollTop:0
                })
            })

7.4、案例之品优购的电梯导航

当我们滚动到某一模块，就让电梯导航显示出来
点击电梯导航页面可以滚动到相应内容区域
核心算法：因为电梯导航模块和内容区模块是一一对应的
当我们点击电梯导航某个小模块，就可以拿到当前小模块的索引号
就可以把animate要移动的距离求出来：当前索引号内容区模块它的offset().top
然后执行动画即可

初版代码1.0：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电梯导航案例</title>
    <script src="3.3.1/dist/jquery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        footer{
            height: 500px;
        }
        article{
            margin-top: 200px;
            text-align: center;
        }
        span{
            display: inline-block;
            width: 80px;
            height: 50px;
            line-height: 50px;
            background-color: yellow;
        }
        div{
            text-align: left;
            width: 600px;
            height: 600px;
            margin: 0 auto;
        }
        li{
            list-style: none;
            width: 80px;
            height: 30px;
            line-height: 30px;
            border: 1px solid yellow;
            cursor: pointer;
        }
        ul{
            position: fixed;
            top: 300px;
            left: 300px;
            display: none;
        }
        .backgroundColor{
            background-color: red;
            color: white;
        }
    </style>
    <script>
        $(function () {
            $(window).scroll(function () {
                if($(document).scrollTop()>=$('span').offset().top){
                    $('ul').fadeIn();
                }else{
                    $('ul').fadeOut();
                }
            })
            $('li').click(function () {
                // console.log($(this).index());
                //当我们点击小li 就需要计算出页面要去往的位置
                //选出对应索引号的内容区的盒子 计算它的.offset().top
                var top = $('div').eq($(this).index()).offset().top;
                //页面动画滚动效果
                $('body,html').stop().animate({
                    scrollTop:top
                });
            })
        })

    </script>
</head>
<body>
    <article>
        <span>今日推荐</span>
        <div>家用电器<hr/></div>
        <div>手机通讯<hr/></div>
        <div>电脑办公<hr/></div>
        <div>精品家具<hr/></div>
    <ul>
        <li>家用电器</li>
        <li>手机通讯</li>
        <li>电脑办公</li>
        <li>精品家具</li>
    </ul>
    </article>
    <footer
    </footer>
</body>
</html>

升级代码2.0，增加在指定刷新页面出现导航条，增加导航条选中颜色代码：

将判断距离代码封装，在页面刷新和滚动处调用
当我们点击电梯导航某个小li，当前小li添加backgroundColor类名，兄弟移除类名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电梯导航案例</title>
    <script src="3.3.1/dist/jquery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        footer{
            height: 500px;
        }
        article{
            margin-top: 200px;
            text-align: center;
        }
        span{
            display: inline-block;
            width: 80px;
            height: 50px;
            line-height: 50px;
            background-color: yellow;
        }
        div{
            text-align: left;
            width: 600px;
            height: 600px;
            margin: 0 auto;
        }
        li{
            list-style: none;
            width: 80px;
            height: 30px;
            line-height: 30px;
            border: 1px solid yellow;
            cursor: pointer;
        }
        ul{
            position: fixed;
            top: 300px;
            left: 300px;
            display: none;
        }
        .backgroundColor{
            background-color: red;
            color: white;
        }
    </style>
    <script>
        $(function () {
            toggleTool();
            function toggleTool() {//封装成函数在页面刷新和滚动的时候调用
                if($(document).scrollTop()>=$('span').offset().top){
                    $('ul').fadeIn();
                }else{
                    $('ul').fadeOut();
                }
            }
            $(window).scroll(function () {//滚动事件
                toggleTool();
            })
            $('li').click(function () {//点击事件
                // console.log($(this).index());
                //当我们点击小li 就需要计算出页面要去往的位置
                //选出对应索引号的内容区的盒子 计算它的.offset().top
                var top = $('div').eq($(this).index()).offset().top;
                //页面动画滚动效果
                $('body,html').stop().animate({
                    scrollTop:top
                });
                $(this).addClass('backgroundColor').siblings('li').removeClass('backgroundColor');
            })
        })

    </script>
</head>
<body>
    <article>
        <span>今日推荐</span>
        <div>家用电器<hr/></div>
        <div>手机通讯<hr/></div>
        <div>电脑办公<hr/></div>
        <div>精品家具<hr/></div>
    <ul>
        <li class="backgroundColor">家用电器</li>
        <li>手机通讯</li>
        <li>电脑办公</li>
        <li>精品家具</li>
    </ul>
    </article>
    <footer
    </footer>
</body>
</html>

升级版代码3.0，滑动页面电梯导航自动增加backgroundColor类

当我们页面滚动到内容区域某个模块，左侧电梯导航，相应的小li模块，也会添加backgroundColor类，兄弟移除backgroundColor类
触发的事件是页面滚动，因此这个功能要写到页面滚动事件里面
需要用到each，遍历内容区域大模块。each里面能拿到内容区域每一个模块元素和索引号
判断的条件：被卷去的头部大于等于内容区域里面每个模块的offset().top
就利用这个索引号找到相应的电梯导航小li并使它添加backgroundColor类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电梯导航案例</title>
    <script src="3.3.1/dist/jquery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        footer{
            height: 500px;
        }
        article{
            margin-top: 200px;
            text-align: center;
        }
        span{
            display: inline-block;
            width: 80px;
            height: 50px;
            line-height: 50px;
            background-color: yellow;
        }
        div{
            text-align: left;
            width: 600px;
            height: 600px;
            margin: 0 auto;
        }
        li{
            list-style: none;
            width: 80px;
            height: 30px;
            line-height: 30px;
            border: 1px solid yellow;
            cursor: pointer;
        }
        ul{
            position: fixed;
            top: 300px;
            left: 300px;
            display: none;
        }
        .backgroundColor{
            background-color: red;
            color: white;
        }
    </style>
    <script>
        $(function () {
            toggleTool();
            function toggleTool() {//封装成函数在页面刷新和滚动的时候调用
                if($(document).scrollTop()>=$('span').offset().top){
                    $('ul').fadeIn();
                }else{
                    $('ul').fadeOut();
                }
            }
            $(window).scroll(function () {//滚动事件
                toggleTool();
                //3.页面滚动到某个内容区域，左侧电梯导航小li相应添加和删除backgroundColor类名
                $('div').each(function (index,element) {
                        if($(document).scrollTop()>=$(element).offset().top){
                            $('li').eq(index).addClass('backgroundColor').siblings('li').removeClass('backgroundColor');
                        }
                })
            })
            $('li').click(function () {//点击事件
                // console.log($(this).index());
                //当我们点击小li 就需要计算出页面要去往的位置
                //选出对应索引号的内容区的盒子 计算它的.offset().top
                var top = $('div').eq($(this).index()).offset().top;
                //页面动画滚动效果
                $('body,html').stop().animate({
                    scrollTop:top
                });
                $(this).addClass('backgroundColor').siblings('li').removeClass('backgroundColor');
            })
        })

    </script>
</head>
<body>
    <article>
        <span>今日推荐</span>
        <div>家用电器<hr/></div>
        <div>手机通讯<hr/></div>
        <div>电脑办公<hr/></div>
        <div>精品家具<hr/></div>
    <ul>
        <li class="backgroundColor">家用电器</li>
        <li>手机通讯</li>
        <li>电脑办公</li>
        <li>精品家具</li>
    </ul>
    </article>
    <footer
    </footer>
</body>
</html>

终极版代码4.0，为电梯导航添加节流阀(互斥锁)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电梯导航案例</title>
    <script src="3.3.1/dist/jquery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        footer{
            height: 500px;
        }
        article{
            margin-top: 200px;
            text-align: center;
        }
        span{
            display: inline-block;
            width: 80px;
            height: 50px;
            line-height: 50px;
            background-color: yellow;
        }
        div{
            text-align: left;
            width: 600px;
            height: 600px;
            margin: 0 auto;
        }
        li{
            list-style: none;
            width: 80px;
            height: 30px;
            line-height: 30px;
            border: 1px solid yellow;
            cursor: pointer;
        }
        ul{
            position: fixed;
            top: 300px;
            left: 300px;
            display: none;
        }
        .backgroundColor{
            background-color: red;
            color: white;
        }
    </style>
    <script>
        $(function () {
            //当我们点击了小li 此时不需要执行 页面滚动事件里面的li的背景选择 不给它添加backgroundColor类
            //方法:节流阀 互斥锁
            var flag=true;
            //1.显示隐藏电梯导航
            toggleTool();
            function toggleTool() {//封装成函数在页面刷新和滚动的时候调用
                if($(document).scrollTop()>=$('span').offset().top){
                    $('ul').fadeIn();
                }else{
                    $('ul').fadeOut();
                }
            }
            $(window).scroll(function () {//滚动事件
                toggleTool();
                //3.页面滚动到某个内容区域，左侧电梯导航小li相应添加和删除backgroundColor类名
               if(flag){
                   $('div').each(function (index,element) {
                       if($(document).scrollTop()>=$(element).offset().top){
                           $('li').eq(index).addClass('backgroundColor').siblings('li').removeClass('backgroundColor');
                       }
                   })
               }
            })
            $('li').click(function () {//点击事件
                flag=false;
                // console.log($(this).index());
                //当我们点击小li 就需要计算出页面要去往的位置
                //选出对应索引号的内容区的盒子 计算它的.offset().top
                var top = $('div').eq($(this).index()).offset().top;
                //页面动画滚动效果
                $('body,html').stop().animate({
                    scrollTop:top
                },function () {
                    flag=true;
                });
                $(this).addClass('backgroundColor').siblings('li').removeClass('backgroundColor');
            })
        })

    </script>
</head>
<body>
    <article>
        <span>今日推荐</span>
        <div>家用电器<hr/></div>
        <div>手机通讯<hr/></div>
        <div>电脑办公<hr/></div>
        <div>精品家具<hr/></div>
    <ul>
        <li class="backgroundColor">家用电器</li>
        <li>手机通讯</li>
        <li>电脑办公</li>
        <li>精品家具</li>
    </ul>
    </article>
    <footer
    </footer>
</body>
</html>

三、JQuery事件

返回主页
目标：

掌握4种常见的注册事件
掌握on绑定事件并熟悉其优势
掌握JQuery事件委派并熟悉其优点以及方式
掌握绑定事件与解绑事件

目录：

JQuery事件注册–on
JQuery事件处理–off
JQuery事件对象

1、JQuery事件注册

返回目录

1.1、JQuery事件注册

回顾单个事件注册
语法：

element.事件(function(){
	事件处理程序;
})

常见的事件有：mouseover、mouseout、blur、focus、change、keyup、resize、scroll等等
以往注册事件的缺点在于只能进行单个事件的注册

    <script>
        $(function () {
            //1.单个事件注册
            $('div').click(function () {
                $(this).css('background-color','purple');
            });
            $('div').mouseenter(function () {
                $(this).css('background','skyblue');
            });
            
        })
    </script>

1.2、JQuery事件处理

事件处理on()绑定事件
on()方法在匹配元素上绑定一个或多个事件的事件处理函数
语法：

element.on(events,[selector],fn);

events:一个或多个用空格分隔的事件类型，如"click"或"keydown"
selector:元素的子元素选择器
fn：回调函数即绑定在元素身上的侦听函数

下面案例需要用到的css和html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="3.3.1/dist/jquery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        div{
            width: 200px;
            height: 100px;
        }
        .y{
        	background-color:pink;
        }
    </style>
</head>
<body>
    <div>
    <ul>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
    </ul>
    </div>
    <ol></ol>
</body>
</html>

on()方法优势1：
可以绑定多个事件，多个处理事件处理程序
可以这样写：

        $('div').on({
            mouseover:function () {},
            mouseout:function () {},
            click:function () {}
        })

也可以这样写（处理事件程序相同）：

        //都执行回调函数
        $('div').on('mouseover mouseout',function () {
            $(this).toggleClass('y');
        })
     })

1.3、on实现事件委派和给动态元素绑定事件

on()方法优势2：
可以事件委派操作。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。（这样我们只给一个元素绑定了事件，大大提高了程序运行效率）

        //on可以实现事件委托（委派）
            $('div').on('click','li',function () {
                $(this).css('background-color','pink');
            })

在此之前有bind(),live(),delegate()等方法来处理事件绑定或者事件委派，最新版本的请用on替代他们·。
on方法优势3：
动态创建的元素，click()没有办法绑定事件，on()可以给动态生成的元素绑定事件

        $('ol').on('click','li',function () {
            alert('11');
        })
            var li=$('<li>我是后来创建的小li</li>')
            $('ol').append(li);

1.4、发布微博案例

点击发布按钮，动态的创建一个小li，放入文本框的内容和删除按钮，并且添加到ul中
点击删除按钮，删除当前小li

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发布微博案例</title>
    <script src="3.3.1/dist/jquery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        header{
            width: 400px;
        }
        article{
            /*word-break: break-word;*/
            word-break: break-all;
        }
        ul{
            width: 320px;
            margin-left: 30px;
            list-style: none;
        }
        div{
            margin-left: 30px;
        }
        a{
            float: right;
        }

    </style>
    <script>
        $(function () {
          //点击发布按钮，动态的创建一个小li，放入文本框的内容和删除按钮，并且添加到ul中
          $('button').on('click',function () {
             var li=$('<li></li>');
             li.html($('.txt').val()+'<a href="javascript:;">删除</a>');
              $('ul').prepend(li);
              $('li').stop().slideDown();
              $('.txt').val('');
          })
          //点击删除按钮，可以删除当前的微博留言
          // $('ul a').click(function () {//此时的click不能给动态创建的a添加事件
          //     alert(11);
          // })
          //on可以给动态创建的元素绑定事件
          $('ul').on('click','a',function () {
              $(this).parent().remove();
          })
        })
    </script>
</head>
<body>

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

</body>
</html>

2.JQuery事件处理

返回目录

2.1、事件处理off()解绑事件
off()方法可以移除通过on()方法添加的事件处理程序

$('ul').off()   //解除ul元素所有事件处理程序
$('ul').off('click')   //解绑ul元素上面的点击事件 后面的foo是侦听函数名
$('ul').off('click','li')  //解绑事件委托

如果有的事件只想触发一次，可以使用one()来绑定事件

2.2、JQuery自动触发

有些事件希望自动触发，比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发

element.click() //第一种简写形式（自动点击一次点击事件）

element.trigger('type') //第二种自动触发模式，type为事件类型，例click

element.triggerHandler('type') //不会触发元素的默认行为，上面两个都会触发元素默认行为

element.on('type',funcuton)//不会触发元素的默认行为(本人研究发现)
其中function为具体的封装函数，并不能是回调函数

实验证明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../JQuery/3.3.1/dist/jquery.min.js"></script>
    <script>
        $(function () {
            $('button').on('click',f())
            function f() {
                $('button').css('background-color','yellow')
            }
            $('div').on('click',function () {
                console.log('div我被点击了')
            })
        })

    </script>
</head>
<body>
    <div>
    <button>颜色</button>
    </div>
</body>
</html>

自动触发且无冒泡现象：
在这里插入图片描述

3.JQuery事件对象

返回目录
事件被触发，就会有事件对象的产生

element.on(events,[selector],funcation(event){})

阻止默认行为：event.preventDefault()或者return false
阻止冒泡：event.stopPropagation()
冒泡解释：子元素与父元素绑定有相同事件，子元素触发的同时，也会触发父元素的相同事件。（子触发父而父不会触发子）
例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="3.3.1/dist/jquery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
    </style>
    <script>
        $(function () {
            $('ul').on('click',function () {
                console.log('ul被点击了')
            })
            $('li').on('click',function () {
                console.log('li被点击了')
            })

        })
    </script>
</head>
<body>
     <ul>
         <li>a</li>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
     </ul>

</body>
</html>

四、JQuery其他方法

返回主页
目标：

掌握JQuery对象的拷贝方法
掌握JQuery多库共存的2种方法
掌握JQuery插件

目录：

JQuery拷贝对象
多库共存
JQuery插件

1、JQuery拷贝对象

返回目录

如果想把某个对象拷贝（合并）给另外一个对象使用。此时可以使用$.extend()方法
语法：

$.extend ( [deep] , target ,object1 , [objectN] )

deep:如果设为true为深拷贝，默认为false 浅拷贝
target：要拷贝的目标对象
object1：待拷贝到第一个对象的对象
objectN：待拷贝到第N个对象的对象
浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象

相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="3.3.1/dist/jquery.min.js"></script>
    <script>
        $(function () {
            //1
            // var targetObj={};
            // var obj={
            //     id:1,
            //     name:'andy'
            // }
            // $.extend(targetObj,obj)
            // console.log(targetObj)//拷贝
            //2*****************************************
            // var targetObj={
            //     id:0
            // };
            // var obj={
            //     id:1,
            //     name:'andy'
            // }
            // $.extend(targetObj,obj)
            // console.log(targetObj)//会覆盖targetObj里面原来的数据
            //3****************************************
            // var targetObj={
            //     id:0
            //
            // };
            // var obj={
            //     id:1,
            //     name:'andy',
            //     msg:{
            //         age:18
            //     }
            // }
            // $.extend(targetObj,obj)
            // console.log(targetObj)//会覆盖targetObj里面原来的数据
            // //浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象
            // targetObj.msg.age=20;
            // console.log(targetObj)//msg.age=20
            // console.log(obj)//msg.age=20
            //4*****************************************
            var targetObj={
                id:0,//不冲突属性会覆盖
                msg:{
                    sex:'男'//浅拷贝这也会覆盖，深拷贝则不会
                }
            }
            var obj={
                id:1,
                name:'andy',
                msg:{
                    age:18
                }
            }
            //深拷贝把里面的数据完全复制一份给目标对象 如果里面有不冲突的属性，会合并到一起
            $.extend(true,targetObj,obj)
            console.log(targetObj)
            //深拷贝不会影响原来的数据
            targetObj.msg.age=20;
            console.log(targetObj)//msg.age=20
            console.log(obj)//msg.age=20
        })
    </script>
</head>
<body>


</body>
</html>

2、多库共存

返回目录
问题描述：
JQuery使用$作为表示符，随着JQuery的流行，其他js库也会用其作为标志符，这样一使用会引起冲突
客观需求：
需要一个解决方案，让JQuery和其他的js库不存在冲突，可以同时存在，这就叫做多库共存
JQuery解决方案：
请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="3.3.1/dist/jquery.min.js"></script>
    <script>
        $(function () {
            function $(ele) {
                return document.querySelector(ele)
            }
            console.log($('div'));
            //1.如果$符号冲突 我们就使用jQuery
            jQuery('div').hide()
            //2.让JQuery释放$控制权 让用户自己决定
            var suibian=jQuery.noConflict();//把JQuery里的$符改为suibian
            console.log(suibian('span'));
            suibian.css('background-color','yellow')
        })
    </script>
</head>
<body>
<div>拜拜</div>
<span>随便</span>
</body>
</html>

3、JQuery插件

返回目录

3.1、JQuery插件网站介绍

JQuery功能比较有限，想要更复杂的特效效果，可以借助JQuery插件完成
注意：这些插件也是依赖于JQuery来完成的，所以必须要先引入JQuery文件，因此也被称为JQuery插件
JQuery插件常用的网站：
JQuery插件库 :https://www.jq22.com/
推荐使用JQuery之家：http://www.htmleaf.com/

把插件下载下来，解压，然后把相关文件引入到我们的项目中

3.2、图片懒加载技术

图片懒加载(图片使用延迟加载在可提高网页下载速度，它也能帮助减轻服务器负载)
当我们页面滑动到可视区域，再显示图片
这时候使用JQuery插件库 :https://www.jq22.com/
搜索懒加载技术，下载
我们使用JQuery插件库EasyLazyload。注意，此时的js引入文件和js调用必须写到DOM元素(图片)最后面

3.2、图片滚动技术(fullpage.js)

略了吧，不常用

五、Bootstrap js插件

返回主页
Bootstrap框架也是依赖于JQuery开发的，因此里面的js插件使用，也必须引入JQuery文件！！！
可以参考之前的Bootstrap笔记：点击跳转
使用也是拿来主义与css一样的，没什么好说的。想了解css的看之前的笔记，不想了解的跳过笔记继续看。

注意先引入Bootstrap的.min.css文件，再引入JQuery文件，最后引入.min.js文件
例：路径为真实路径

    <link rel="stylesheet" href="../bootstrap-study/bstrap/css/bootstrap.min.css">
    <script src="3.3.1/dist/jquery.min.js"></script>
    <script src="../bootstrap-study/bstrap/js/bootstrap.min.js"></script>

现在就可以去Bootstrap官网中组件和JavaScript插件中去寻找需要的了

这个网址查找:https://v3.bootcss.com/

成功案例：
在这里插入图片描述
成功案例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航条</title>
    <link rel="stylesheet" href="../bootstrap-study/bstrap/css/bootstrap.min.css">
    <script src="3.3.1/dist/jquery.min.js"></script>
    <script src="../bootstrap-study/bstrap/js/bootstrap.min.js"></script>

</head>
<body>
<div class="container">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Brand</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</div>
</body>
</html>

我试了试，上面的三个引入必须存在才能使用Bootstrap开发

六、toDoList综合案例toDoList

返回主页
目录：

基本布局
核心思路以及本地存储格式
toDoList按下回车把新数据添加到本地存储里面
toDoList按下回车保存最新数据到本地存储
toDoList本地存储数据渲染加载到页面
toDoList删除操作
toDoList 正在进行和已完成选项操作
toDoList 统计正在进行个数和已经完成个数
最终代码

6.1、基本布局

返回目录

文本框里面输入内容，按下回车，就可以生成待办事项
点击待办事项复选框，就可以吧当前数据添加到已完成事项里面
点击已完成事项复选框，就可以把当前数据添加到待办事项里面
但是本页面内容刷新页面不会丢失

案例总代码在最后！！！！! ！

6.2、核心思路以及本地存储格式

返回目录

刷新页面不会丢失数据，因此需要用到本地存储localhostStorage
核心思路：不管按下回车，还是点击复选框，都是把本地存储的数据加载到页面中，这样保证刷新关闭页面不会丢失数据
存储的数据格式：var todolist=[{title:‘xxx’,done:false}]
注意点1：本地存储localStorage里面只能存储字符串格式，因此需要把对象转换为字符串JSON.string(data)
注意点2：获取本地存储数据，需要把里面的字符串转换为对象格式JSON.parse()我们才能使用里面的数据

注意点例子：

    <script>
        var todolist=[{
            title:'我今天吃八个馒头',
            done:false
        },{
            title:'我今天学习jq',
            done:false
        }]
        localStorage.setItem('todo',todolist);
        //本地存储里面只能存储字符串的数据格式
    </script>

在这里插入图片描述 存储的是对象类型那个字符串object，是看不到内容的，所以需要我们转为字符串再存储！
把我们的数组对象转换为字符串格式：

JSON.stringify()

上面代码只需改：

localStorage.setItem('todo',JSON.stringify(todolist));

再查看：
在这里插入图片描述
存进去的是字符串，当然取出来的也是字符串，并不能使用属性，方法。
获取本地存储的数据，我们需要把里面的字符串数据转换为对象格式

JSOn.parse()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var todolist=[{
            title:'我今天吃八个馒头',
            done:false
        },{
            title:'我今天学习jq',
            done:false
        }]
        localStorage.setItem('todo',JSON.stringify(todolist));
        var data=localStorage.getItem('todo');
        data=JSON.parse(data);
        console.log(data)
        document.write(data[0].title)
        document.write(data[1].title)
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

6.3、toDoList按下回车把新数据添加到本地存储里面

返回目录

切记：页面中的数据，都要从本地存储里面获取，这样刷新页面不会丢失数据，所以先要把数据保存到本地存储里面
利用事件对象.keyCode判断用户按下回车键(ASCLL码为13)
声明一个数组，保存数据
先要读取本地存储原来的数据(声明函数getData()),放到这个数组里面
然后再把最新从表单获取过来的数据，追加到数组里面
最后把数组存储给本地存储(声明函数savaData())

6.4、toDoList按下回车保存最新数据到本地存储

返回目录
在这里插入图片描述

6.5、toDoList本地存储数据渲染加载到页面

返回目录

因为后面也会经常渲染加载操作，所以声明一个函数load，方便后面调用
先要读取本地存储数据（数据不要忘记转换为对象格式）
之后遍历这个数据($.each()),有几条数据，就生成几个小li添加到ol里面
每次渲染之前，先把原先里面ol的内容清空，然后渲染加载最新的教程

6.6、toDoList删除操作

返回目录

点击里面的a链接，不是删除的li，而是删除本地存储对应的数据
核心原理：先获取本地存储数据，删除对应的数据，保存给本地存储，重新渲染列表li
我们可以给链接自定义自定义属性记录当前的索引号
根据这个索引号删除相关的数据-----数组的splice(i,n)方法（参数i是从哪个位置开始删除，参数n是删除几个元素）
存储修改后的数据，然后存储给本地存储
重新渲染加载数据列表
因为a是动态创建的，我们使用on方法绑定事件

6.7、toDoList 正在进行和已完成选项操作

返回目录

==当我们点击了小的复选框，修改本地存储数据，再重新渲染数据列表
点击之后，获取本地存储数据。
修改对应数据属性done为当前复选框的checked状态
之后保存数据到本地存储
重新渲染加载数据列表
load加载函数里面，新增一个条件，如果当前数据的done为true就是已经完成的，就把列表渲染加载到ul里面
如果当前数据的done为false，则是待办事项，就把列表渲染加载到ol里面

6.8、toDoList 统计正在进行个数和已经完成个数

返回目录

在我们load函数里面操作
声明2个变量：todoCount待办个数doneCount已完成个数
当进行遍历本地存储数据的时候，如果数据done为false，则todoCount++，否则doneCount++
最后修改相应的元素text()

6.9、最终代码

返回目录
样式：
在这里插入图片描述
首先是HTML代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>ToDoList</title>
    <!--bootstrap的-->
    <link rel="stylesheet" href="../bootstrap-study/bstrap/css/bootstrap.min.css">
    <script src="../bootstrap-study/bstrap/js/bootstrap.min.js"></script>
    <!--jQuery的-->
    <script src="../JQuery/3.3.1/dist/jquery.min.js"></script>
    <!--自己的-->
    <link rel="stylesheet" href="CSS/todolist.css">
    <script src="JS/todolist.js"></script>
</head>
<body>
<header>
    <section>
        <label for="title">ToDoList</label>
        <input type="text" id="title" name="title" placeholder="添加ToDo" required="required">
    </section>
</header>
    <section>
        <h3><button class="todoall">全选</button><button class="todoclear">全删</button>正在进行<span id="todocount"></span></h3>
        <ol id="todolist" class="demo-box">

        </ol>
        <h3><button class="doneall">全不选</button><button class="doneclear">全删</button>已经完成<span id="donecount"></span></h3>
        <ul id="donelist" class="demo-box-done">

        </ul>
    </section>
    <footer>
        Copyright &copy; 2021 todolist.clear
    </footer>
</body>
</html>

然后是CSS代码：

*{
    margin: 0;
    padding: 0;
    box-sizing:border-box;
}
li{
    list-style: none;
    width: 550px;
    height: 30px;
    background-color: white;
    margin-left: 500px;
    border-radius: 3px;
    line-height: 30px;
    margin-top: 10px;
    position: relative;
}
li::before{
    content: '';
    width: 5px;
    height: 30px;
    border-radius: 3px;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    background-color: #69929a;
    float: left;
}
body{
    height: 600px;
    background-color: #cccdcc;
}
header{
    height: 50px;
    background-color: #303130;

}
header label{
    color: #d1d7d2;
    font-size: 22px;
    line-height: 50px;
    font-weight: 400;
    margin-left: 500px;
}
header input{
    width: 300px;
    height: 25px;
    margin-left: 150px;
    outline: none;
    border-radius: 5px;
    border: none;
    padding-left: 10px;
}
::placeholder{
    color: gray;
    font-weight: 500;
}
section h3{
    margin-left: 380px;
    color: black;
    font-weight: 600;
}
footer{
    text-align: center;
    color: #919395;
}
.demo-box input,.demo-box-done input{
    float: left;
    margin: 8px 8px;
}
.demo-box-done li{
    background-color: #e4e6e4;
    opacity: .9;
}
p{
    float: left;
}
.demo-box a,ul a{
    float: right;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 9px 12px;
    background-color: pink;
    position: relative;
}
.demo-box a:after,ul a:after{
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid pink;
    position: absolute;
    top: -4px;
    left: -4px;
}
span{
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: white;
    text-align: center;
    font-size: 20px;
    margin-left: 426px;
}
button{
    width: 50px;
    height: 20px;
    font-size: 12px;
    font-weight: normal;
    margin-right: 10px;
    vertical-align: middle;
}

最后是JQuery代码：

$(function () {
    load();
    $('#title').on('keydown',function (event) {
        if(event.keyCode===13){
          if($(this).val()===''){
              alert('请正确输入')
          }else {
              //先读取本地存储原来的数据
              var local=getData();
              //把local数组进行更新数据 把最新的数据追加给local数组
              local.push({
                  title:$(this).val(),
                  done:false
              });
              //把这个数组local 存储给本地存储
              saveData(local);
              //2.toDoList本地存储数据渲染加载到页面
              load();
              $(this).val('');
          }
        }
    })
    //3.toDoList 删除操作
    $("ol,ul").on('click','a',function () {
        //先获取本地存储
        var data=getData();
        //修改数据
        var index=$(this).attr('id');
        data.splice(index,1);
        //保存到本地存储
        saveData(data);
        //重新渲染页面
        load();
    })
    //4.toDoList 正在进行和已经完成选项操作
    $('ol , ul').on('click','input',function () {
        // 先获取本地存储的数据
        var data =getData();
        //修改数据
        var index=$(this).siblings('a').attr('id');
        data[index].done=$(this).prop('checked');
        //保存到本地数据
        saveData(data);
        //重新渲染页面
        load();
    })
    //全选(自己增加的功能)
    $('.todoall').on('click',function () {
        var data=getData();
        // for (var i=0;i<data.length;i++){
        //     data[i].done=true;
        // }
        $(data).each(function (index,element) {//坑1:data是DOM对象
            element.done=true//坑二,生成的element是DOM对象，不能转换为JQuery对象修改或查看DOM对象的done属性
        })
        saveData(data);
        load();
    })
    $('.doneall').on('click',function () {
        var data=getData();
        $(data).each(function (index,element) {
           element.done=false;
        })
        saveData(data);
        load();
    })
    //全删(自己增加的功能)
    $('.todoclear').on('click',function () {
        var data=getData();
       for(var i=0;i<data.length;i++){
           if(data[i].done.toString()==='false'){
               data.splice(i,1)
               i=-1;
           }
       }
        saveData(data);
        load();
    })
    $('.doneclear').on('click',function () {
        var data=getData();
        for(var i=0;i<data.length;i++){
            if(data[i].done.toString()==='true'){
                data.splice(i,1)
                i=-1;
            }
        }
        saveData(data);
        load();
    })
    //
    //读取本地存储的数据
    function getData() {
        var data=localStorage.getItem('todolist');
        if(data !==null){
            //本地存储里面的数据是字符串格式的 但我们需要的是对象格式的
            return JSON.parse(data);
        }else{
            return [];
        }
    }
    //保存本地存储数据
    function saveData(localData) {
        localStorage.setItem('todolist',JSON.stringify(localData));
    }
    //渲染加载数据
    function load() {
        //读取本地存储的数据
        var data=getData();
        //遍历之前先要清空ol,ul里面的元素内容
        $('ol,ul').empty();
        var todoCount=0;//正在进行的个数
        var doneCount=0;//已经完成的个数
        //遍历这个数据
        $.each(data,function (i,e) {
            if(e.done){
                $('ul').prepend('<li><input type="checkbox" checked="checked"><p>'+e.title+'</p><a href="javascript:;" id='+i+'></a></li>');
                doneCount++;
            }else {
                $('ol').prepend('<li><input type="checkbox"><p>'+e.title+'</p><a href="javascript:;" id='+i+'></a></li>');
                todoCount++;
            }

        });
        $('#todocount').text(todoCount);
        $('#donecount').text(doneCount);
    }
})

七、JQuery之AJAX异步交互常用方法

返回主页
目录：

$.ajax()方法
$.get() 方法、 $.post() 方法
$.getJSON()方法的简单区别
与后端数据交互例子链接

7.1、$.ajax

返回目录

JQuery调用AJAX的方法：
格式：

$.ajax({});

参数（键值对方式）：

type：请求方式GET/POST（掌握）
url：请求地址url（掌握）
async：是否异步，默认是true表示异步
data：发送到服务器的数据（掌握）
dataType：预期服务器返回的数据类型
contentType：设置请求头
success：请求成功时调用此函数（掌握）
error：请求失败时调用此函数

同步：必须等待请求返回结果才能继续往下操作（比如等水烧开再去洗碗，再去扫地）
异步：不必等待请求返回结果，可以继续其他操作，等到返回结果到达再处理与其相关操作（边扫地边等水烧开，水烧开了再去洗碗）
1.$.ajax用法例：
data数据：
在这里插入图片描述
请求数据代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../JQuery/3.3.1/dist/jquery.min.js"></script>
    <script>
        $(function () {
            $.ajax({
              type:'get',  //请求方式
              url:'data.txt',  //请求地址
              data:{    //请求数据，json对象格式
                  uname:'zhangsan'
              },
              success:function (datas) { //请求成功时调用的函数，datas是一个形参名，代表的是我们返回的数据
                  console.log(datas) //返回的是一个字符串
              }
            })
        })
    </script>
</head>
<body>

</body>
</html>

请求结果：
在这里插入图片描述
成功请求到数据！！！
将字符串数据反序列化为JSON对象才能操作数据

 var obj=JSON.parse(datas)
 console.log(obj)

在这里插入图片描述
2.注意点
当我们的文件为json文件的时候：

再请求并打印数据：

这里可以看到打印的就直接是一个json对象，并不需要我们进行转换
我们不知道后端会给我们返回什么类型的数据

因此需要我们指定数据类型

dataType:'json'//预期返回的数据类型，如果是json格式，在接收到返回值时会自动封装成json对象

3.把数据打印到页面上
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../JQuery/3.3.1/dist/jquery.min.js"></script>
    <script>
        $(function () {
            $('button').on('click',function () {
                send()
            })
        })
        function send(){
            $.ajax({
                type:'get',  //请求方式
                url:'data.json',  //请求地址
                data:{    //请求数据，json对象格式
                    // uname:'zhangsan'
                },
                dataType: 'json',
                success:function (datas) { //请求成功时调用的函数，datas是一个形参名，代表的是我们返回的数据
                    //DOM操作
                    //创建ul
                    var ul=$('<ul></ul>')
                    $(datas).each(function (index,element) {
                        //有几条数据就创建几个小li
                        var li=$('<li>'+element.userName+'</li>')
                        //把小li添加到ul中
                        ul.append(li)
                    })
                    //把ul添加到body中
                    $('body').append(ul);
                }
            })
        }
    </script>
</head>
<body>
    <button>查询数据</button>
</body>
</html>

在这里插入图片描述

7.2、$.get

返回目录

这是一个简单的GET请求功能，以取代复杂 $.ajax()
请求成功时可调用回调函数，如果需要在出错时执行函数，请使用 $.ajax()

//1.请求json文件，忽略返回值
$.get(".json文件的url或请求的servlet路径");

//2.请求json文件，传递参数，忽略返回值
$.get(".json文件的url或请求的servlet路径"，{name:“tom”,age:18});

//3.请求json文件，拿到返回值，请求成功后可拿到返回值
$.get(".json文件的url或请求的servlet路径"，function(datas){
console.log(datas);
});

//4.请求json文件，传递参数，拿到返回值(最常用)
$.get(".json文件的url或请求的servlet路径"，{name:“tom”,age:18}，function(datas){
console.log(datas);
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../JQuery/3.3.1/dist/jquery.min.js"></script>
    <script>
        $(function () {
            $('button').on('click',function () {
                send()
            })
        })
        function send(){
            $.get('data.json',{}, function (datas) {//还是要保证数据是json格式的字符串
                    var ul=$('<ul></ul>')
                    $(datas).each(function (index,element) {
                        var li=$('<li>'+element.userName+'</li>')
                        ul.append(li)
                    })
                    $('body').append(ul);
                })
        }
    </script>
</head>
<body>
    <button>查询数据</button>
</body>
</html>

7.3、$.post

把get改为post即可，方法与上面四个一样。

7.4、$.getJSON

返回目录

与上面两个方法基本一致，但是这个方法只能JSON格式的数据！
例：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../JQuery/3.3.1/dist/jquery.min.js"></script>
    <script>
        $(function () {
            $('button').on('click',function () {
                ajax();//成功输出
                sendGet();//成功输出
                sendPsot();//成功输出
                json();//查询不到数据
            })
        })
        function ajax() {
            $.ajax({
                url:'a.txt',
                success:function (datas) {
                    console.log(datas)
                }
            })
        }
        function sendPsot(){
            $.post('a.txt',{}, function (datas) {//还是要保证数据是json格式的字符串
                console.log(datas)
                })
        }
        function sendGet() {
            $.get('a.txt',{}, function (datas) {//还是要保证数据是json格式的字符串
                console.log(datas)
            })
        }
        function json() {
            $.getJSON('a.txt',{}, function (datas) {//还是要保证数据是json格式的字符串
                console.log(datas)
            })
        }

    </script>
</head>
<body>
    <button>查询数据</button>
</body>
</html>