Jquery

day01 - jQuery

学习目标：

能够说出什么是 jQuery
能够说出 jQuery 的优点
能够简单使用 jQuery
能够说出 DOM 对象和 jQuery 对象的区别
能够写出常用的 jQuery 选择器
能够操作 jQuery 样式
能够写出常用的 jQuery 动画

1.1. jQuery 介绍

1.1.1 JavaScript 库

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

简单理解： 就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。

比如 jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。

​ 常见的JavaScript 库：jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等，这些库都是对原生 JavaScript 的封装，内部都是用 JavaScript 实现的，我们主要学习的是 jQuery。

1.1.2 jQuery的概念

​ jQuery总体概况如下 :

• jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。

• j 就是 JavaScript； Query 查询； 意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。

• jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。

• 学习jQuery本质： 就是学习调用这些函数（方法）。

• jQuery 出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率。

1.1.3 jQuery的优点

1. 轻量级。核心文件才几十kb，不会影响页面加载速度。
2. 跨浏览器兼容，基本兼容了现在主流的浏览器。
3. 链式编程、隐式迭代。
4. 对事件、样式、动画支持，大大简化了DOM操作。
5. 支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等。
6. 免费、开源。

1.2. jQuery 的基本使用

1.2.1 jQuery 的下载

​ jQuery的官网地址： https://jquery.com/，官网即可下载最新版本。

各个版本的下载：https://code.jquery.com/

​ 版本介绍：

1x ：兼容 IE 678 等低版本浏览器， 官网不再更新

2x ：不兼容 IE 678 等低版本浏览器， 官网不再更新

3x ：不兼容 IE 678 等低版本浏览器， 是官方主要更新维护的版本

1.2.2. 体验jQuery

​ 步骤：

• 引入jQuery文件。
• 在文档最末尾插入 script 标签，书写体验代码。
• $('div').hide() 可以隐藏盒子。

1.2.3. jQuery的入口函数

​ jQuery中常见的两种入口函数：

// 第一种: 简单易用。
$(function () {   
    ...  // 此处是页面 DOM 加载完成的入口
}) ; 

// 第二种: 繁琐，但是也可以实现
$(document).ready(function(){
   ...  //  此处是页面DOM加载完成的入口
});

​ 总结：

1. 等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。
2. 相当于原生 js 中的 DOMContentLoaded。
3. 不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。
4. 更推荐使用第一种方式。

1.2.4. jQuery中的顶级对象$

1. $是 jQuery 的别称，在代码中可以使用 jQuery 代替，但一般为了方便，通常都直接使用 $ 。
2. $是jQuery的顶级对象，相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。

1.2.5. jQuery 对象和 DOM 对象

​ 使用 jQuery 方法和原生JS获取的元素是不一样的，总结如下 :

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

注意：

只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。

1.2.6. jQuery 对象和 DOM 对象转换

​ DOM 对象与 jQuery 对象之间是可以相互转换的。因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。

// 1.DOM对象转换成jQuery对象，方法只有一种
var box = document.getElementById('box');  // 获取DOM对象
var jQueryObject = $(box);  // 把DOM对象转换为 jQuery 对象

// 2.jQuery 对象转换为 DOM 对象有两种方法：
//   2.1 jQuery对象[索引值]
var domObject1 = $('div')[0]

//   2.2 jQuery对象.get(索引值)
var domObject2 = $('div').get(0)
 

总结：实际开发比较常用的是把DOM对象转换为jQuery对象，这样能够调用功能更加强大的jQuery中的方法。

1.3. jQuery 选择器

​ 原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。

1.3.1. 基础选择器

$("选择器")   //  里面选择器直接写 CSS 选择器即可，但是要加引号 

​

1.3.2. 层级选择器

​ 层级选择器最常用的两个分别为：后代选择器和子代选择器。

​

基础选择器和层级选择器案例代码

    
我是div
    
我是nav div
    
我是p
    

        
我是ul 的
        
我是ul 的
        
        
我是ul 的
    
    

1.3.3. 筛选选择器

​ 筛选选择器，顾名思义就是在所有的选项中选择满足条件的进行筛选选择。常见如下 :

案例代码

    

        
多个里面筛选几个
        
多个里面筛选几个
        
多个里面筛选几个
        
多个里面筛选几个
        
多个里面筛选几个
        
多个里面筛选几个
    
    

        
多个里面筛选几个
        
多个里面筛选几个
        
多个里面筛选几个
        
多个里面筛选几个
        
多个里面筛选几个
        
多个里面筛选几个
    
    

另: jQuery中还有一些筛选方法，类似DOM中的通过一个节点找另外一个节点，父、子、兄以外有所加强。

偏重于记忆，演示代码略。

1.3.4 知识铺垫

• jQuery 设置样式

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

• jQuery 里面的排他思想

// 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。
$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);

• 隐式迭代

// 遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。
// 简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。
$('div').hide();  // 页面中所有的div全部隐藏，不用循环操作

• 链式编程

// 链式编程是为了节省代码量，看起来更优雅。
$(this).css('color', 'red').sibling().css('color', ''); 

1.3.5 案例：淘宝服饰精品案例

思路分析:
1.核心原理：鼠标经过左侧盒子某个小li，就让内容区盒子相对应图片显示，其余的图片隐藏。
2.需要得到当前小li 的索引号，就可以显示对应索引号的图片
3.jQuery 得到当前元素索引号 $(this).index()
4.中间对应的图片，可以通过 eq(index) 方法去选择
5.显示元素 show() 隐藏元素 hide()

​

 $(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();
                // 链式编程
                $("#content div").eq(index).show().siblings().hide();

            })
        })

1.4. jQuery 样式操作

​ jQuery中常用的样式操作有两种：css() 和 设置类样式方法

1.4.1. 方法1: 操作 css 方法

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

​ 常用以下三种形式 :

// 1.参数只写属性名，则是返回属性值
var strColor = $(this).css('color');

// 2.  参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css(''color'', ''red'');

// 3.  参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号
$(this).css({ "color":"white","font-size":"20px"});

​ 注意：css() 多用于样式少时操作，多了则不太方便。

1.4.2. 方法2: 设置类样式方法

​ 作用等同于以前的 classList，可以操作类样式， 注意操作类里面的参数不要加点。

​ 常用的三种设置类样式方法：

// 1.添加类
$("div").addClass("current");

// 2.删除类
$("div").removeClass("current");

// 3.切换类
$("div").toggleClass("current");

​ 注意：

1. 设置类样式方法比较适合样式多时操作，可以弥补css()的不足。
2. 原生 JS 中 className 会覆盖元素原先里面的类名，jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。

1.4.3. 案例：tab 栏切换

思路分析:
1.点击上部的li，当前li 添加current类，其余兄弟移除类。
2.点击的同时，得到当前li 的索引号
3.让下部里面相应索引号的item显示，其余的item隐藏

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

1.5. jQuery 效果

​ jQuery 给我们封装了很多动画效果，最为常见的如下：

• 显示隐藏：show() / hide() / toggle() ;
• 划入画出：slideDown() / slideUp() / slideToggle() ;
• 淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
• 自定义动画：animate() ;

注意：

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

jQuery为我们提供另一个方法，可以停止动画排队：stop() ;

1.5.1. 显示隐藏

​ 显示隐藏动画，常见有三个方法：show() / hide() / toggle() ;

​ 语法规范如下:

代码演示

    显示
    隐藏
    切换
    

    

1.5.2. 滑入滑出

​ 滑入滑出动画，常见有三个方法：slideDown() / slideUp() / slideToggle() ;

​ 语法规范如下:

代码演示

    下拉滑动
    上拉滑动
    切换滑动
    

    

小案例：下拉菜单略（详情参看源码）。

1.5.3 淡入淡出

​ 淡入淡出动画，常见有四个方法：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;

​ 语法规范如下:

代码演示

    淡入效果
    淡出效果
    淡入淡出切换
    修改透明度
    

    

1.5.4 自定义动画

​ 自定义动画非常强大，通过参数的传递可以模拟以上所有动画，方法为：animate() ;

​ 语法规范如下:

代码演示

    动起来
    

    

1.5.5 停止动画排队

​ 动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。

​ 停止动画排队的方法为：stop() ;

• stop() 方法用于停止动画或效果。
• stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。

​ 总结: 每次使用动画之前，先调用 stop() ,在调用动画。

1.5.6. 事件切换

​ jQuery中为我们添加了一个新事件 hover() ; 功能类似 css 中的伪类 :hover 。介绍如下

语法

hover([over,]out)     // 其中over和out为两个函数

• over:鼠标移到元素上要触发的函数（相当于mouseenter）
• out:鼠标移出元素要触发的函数（相当于mouseleave）
• 如果只写一个函数，则鼠标经过和离开都会触发它

hover事件和停止动画排列案例

    

        

            微博
            
私信
评论
@我
        
        

            微博
            
私信
评论
@我
        
    
    

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

思路分析:
1.鼠标经过某个小li 有两步操作：
2.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入
3.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出

 $(function() {
            // 鼠标经过某个小li 有两步操作：
            $(".king li").mouseenter(function() {
                // 1.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入
                $(this).stop().animate({
                    width: 224
                }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
                // 2.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出
                $(this).siblings("li").stop().animate({
                    width: 69
                }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
            })



        });

1.6. 今日总结

day02 - jQuery

学习目标：

能够操作 jQuery 属性
能够操作 jQuery 元素
能够操作 jQuery 元素尺寸、位置

1.1. jQuery 属性操作

​ jQuery 常用属性操作有三种：prop() / attr() / data() ;

1.1.1 元素固有属性值 prop()

​ 所谓元素固有属性就是元素本身自带的属性，比如 元素里面的 href ，比如 元素里面的 type。

语法

​ 注意：prop() 除了普通属性+

1.1.2 元素自定义属性值 attr()

​ 用户自己给元素添加的属性，我们称为自定义属性。 比如给 div 添加 index =“1”。

语法

​ 注意：attr() 除了普通属性操作，更适合操作自定义属性。（该方法也可以获取 H5 自定义属性）

1.1.3 数据缓存 data()

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

语法

​ 注意：同时，还可以读取 HTML5 自定义属性 data-index ，得到的是数字型。

演示代码

    都挺好
    
    
我是div
    123
    

1.1.4 案例：购物车案例

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

$(function() {
    // 1. 全选 全不选功能模块
    // 就是把全选按钮（checkall）的状态赋值给 三个小的按钮（j-checkbox）就可以了
    // 事件可以使用change
    $(".checkall").change(function() {
        // console.log($(this).prop("checked"));
        $(".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() {
        // if(被选中的小的复选框的个数 === 3) {
        //     就要选中全选按钮
        // } else {
        //     不要选中全选按钮
        // }
        // console.log($(".j-checkbox:checked").length);
        // $(".j-checkbox").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");
        }
    });
    // 3. 增减商品数量模块 首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框。
    $(".increment").click(function() {
        // 得到当前兄弟文本框的值
        var n = $(this).siblings(".itxt").val();
        // console.log(n);
        n++;
        $(this).siblings(".itxt").val(n);
        // 3. 计算小计模块 根据文本框的值 乘以 当前商品的价格  就是 商品的小计
        // 当前商品的价格 p  
        var p = $(this).parents(".p-num").siblings(".p-price").html();
        // console.log(p);
        p = p.substr(1);
        console.log(p);
        var price = (p * n).toFixed(2);
        // 小计模块 
        // toFixed(2) 可以让我们保留2位小数
        $(this).parents(".p-num").siblings(".p-sum").html("￥" + price);
        getSum();
    });
    $(".decrement").click(function() {
        // 得到当前兄弟文本框的值
        var n = $(this).siblings(".itxt").val();
        if (n == 1) {
            return false;
        }
        // console.log(n);
        n--;
        $(this).siblings(".itxt").val(n);
        // var p = $(this).parent().parent().siblings(".p-price").html();
        // parents(".p-num") 返回指定的祖先元素
        var p = $(this).parents(".p-num").siblings(".p-price").html();
        // console.log(p);
        p = p.substr(1);
        console.log(p);
        // 小计模块 
        $(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));
        getSum();
    });
    //  4. 用户修改文本框的值 计算 小计模块  
    $(".itxt").change(function() {
        // 先得到文本框的里面的值 乘以 当前商品的单价 
        var n = $(this).val();
        // 当前商品的单价
        var p = $(this).parents(".p-num").siblings(".p-price").html();
        // console.log(p);
        p = p.substr(1);
        $(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));
        getSum();
    });
    // 5. 计算总计和总额模块
    getSum();

    function getSum() {
        var count = 0; // 计算总件数 
        var money = 0; // 计算总价钱
        $(".itxt").each(function(i, ele) {
            count += parseInt($(ele).val());
        });
        $(".amount-sum em").text(count);
        $(".p-sum").each(function(i, ele) {
            money += parseFloat($(ele).text().substr(1));
        });
        $(".price-sum em").text("￥" + money.toFixed(2));
    }
    // 6. 删除商品模块
    // (1) 商品后面的删除按钮
    $(".p-action a").click(function() {
        // 删除的是当前的商品 
        $(this).parents(".cart-item").remove();
        getSum();
    });
    // (2) 删除选中的商品
    $(".remove-batch").click(function() {
        // 删除的是小的复选框选中的商品
        $(".j-checkbox:checked").parents(".cart-item").remove();
        getSum();
    });
    // (3) 清空购物车 删除全部商品
    $(".clear-all").click(function() {
        $(".cart-item").remove();
        getSum();
    })
})

1.2. jQuery 文本属性值

​ jQuery的文本属性值常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性。

1.2.1 jQuery内容文本值

​ 常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性，主要针对元素的内容还有表单的值操作。

语法

​ 注意：html() 可识别标签，text() 不识别标签。

演示代码

    

        我是内容
    
    
    

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

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

​ 代码实现略。(详情参考源代码)

1.2.3. 案例：购物车案例模块-修改商品小计

1.核心思路：每次点击+号或者-号，根据文本框的值 乘以 当前商品的价格 就是 商品的小计
2.注意1： 只能增加本商品的小计， 就是当前商品的小计模块（p-sum）
3.修改普通元素的内容是text() 方法
4.注意2： 当前商品的价格，要把￥符号去掉再相乘 截取字符串 substr(1)
5.parents(‘选择器’) 可以返回指定祖先元素
6.最后计算的结果如果想要保留2位小数 通过 toFixed(2) 方法
7.用户也可以直接修改表单里面的值，同样要计算小计。 用表单change事件
8.用最新的表单内的值 乘以 单价即可 但是还是当前商品小计

​ 代码实现略。(详情参考源代码)

1.3. jQuery 元素操作

​ jQuery 元素操作主要讲的是用jQuery方法，操作标签的遍历、创建、添加、删除等操作。

1.3.1. 遍历元素

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

语法1

​ 注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。

语法2

​ 注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。

演示代码

    
1
    
2
    
3
    

1.3.2. 案例：购物车案例模块-计算总计和总额

1.把所有文本框中的值相加就是总额数量，总计同理。
2.文本框里面的值不同，如果想要相加需要用 each() 遍历，声明一个变量做计数器，累加即可。

​ 代码实现略。(详情参考源代码)

1.3.3. 创建、添加、删除

​ jQuery方法操作元素的创建、添加、删除方法很多，则重点使用部分，如下：

语法总和

​ 注意：以上只是元素的创建、添加、删除方法的常用方法，其他方法请参详API。

案例代码

    

        
原先的li
    
    
我是原先的div
    

1.3.4 案例：购物车案例模块-删除商品模块

1.核心思路：把商品remove() 删除元素即可
2.有三个地方需要删除： 1. 商品后面的删除按钮 2. 删除选中的商品 3. 清理购物车
3.商品后面的删除按钮： 一定是删除当前的商品，所以从 $(this) 出发
4.删除选中的商品： 先判断小的复选框按钮是否选中状态，如果是选中，则删除对应的商品
5.清理购物车： 则是把所有的商品全部删掉

​ 代码实现略。(详情参考源代码)

1.3.5 案例：购物车案例模块-选中商品添加背景

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

​ 代码实现略。(详情参考源代码)

1.4. jQuery 尺寸、位置操作

​ jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API，方便易用，内容如下。

1.4.1. jQuery 尺寸操作

​ jQuery 尺寸操作包括元素宽高的获取和设置，且不一样的API对应不一样的盒子模型。

语法

代码演示

​ 注意：有了这套 API 我们将可以快速获取和子的宽高，至于其他属性想要获取和设置，还要使用 css() 等方法配合。

1.4.2. jQuery 位置操作

​ jQuery的位置操作主要有三个： offset()、position()、scrollTop()/scrollLeft() , 具体介绍如下:

语法

代码演示

    

        

    
        
    
返回顶部
    

   
    

1.4.3. 案例：带有动画的返回顶部

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

​ 代码实现略。(详情参考源代码)

1.4.4. 案例： 品优购电梯导航（上）

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

​ 代码实现略。(详情参考源代码)

1.4.5. 案例：品优购电梯导航（下）

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

$(function() {
    // 当我们点击了小li 此时不需要执行 页面滚动事件里面的 li 的背景选择 添加 current
    // 节流阀  互斥锁 
    var flag = true;
    // 1.显示隐藏电梯导航
    var toolTop = $(".recommend").offset().top;
    toggleTool();
    function toggleTool() {
        if ($(document).scrollTop() >= toolTop) {
            $(".fixedtool").fadeIn();
        } else {
            $(".fixedtool").fadeOut();
        };
    }
    $(window).scroll(function() {
        toggleTool();
        // 3. 页面滚动到某个内容区域，左侧电梯导航小li相应添加和删除current类名
        if (flag) {
            $(".floor .w").each(function(i, ele) {
                if ($(document).scrollTop() >= $(ele).offset().top) {
                    console.log(i);
                    $(".fixedtool li").eq(i).addClass("current").siblings().removeClass();
                }
            })
        }
    });
    // 2. 点击电梯导航页面可以滚动到相应内容区域
    $(".fixedtool li").click(function() {
        flag = false;
        console.log($(this).index());
        // 当我们每次点击小li 就需要计算出页面要去往的位置 
        // 选出对应索引号的内容区的盒子 计算它的.offset().top
        var current = $(".floor .w").eq($(this).index()).offset().top;
        // 页面动画滚动效果
        $("body, html").stop().animate({
            scrollTop: current
        }, function() {
            flag = true;
        });
        // 点击之后，让当前的小li 添加current 类名 ，姐妹移除current类名
        $(this).addClass("current").siblings().removeClass();
    })
})

1.4.6.总结：

​ 获取用户对页面滚动距离：$(document).scrollTop()

​ 获取元素距离文档的top值： $(" ").offset().top;

​ 页面滚动注册事件：$(window).scroll()

​ 页面自动滚动做动画： $("body, html").stop().animate( { scrollTop: ... })

1.5. 今日总结

day03 - jQuery

学习目标：

能够说出4种常见的注册事件
能够说出 on 绑定事件的优势
能够说出 jQuery 事件委派的优点以及方式
能够说出绑定事件与解绑事件
能够说出 jQuery 对象的拷贝方法
能够说出 jQuery 多库共存的2种方法
能够使用 jQuery 插件

1.1. jQuery 事件注册

​ jQuery 为我们提供了方便的事件注册机制，是开发人员抑郁操作优缺点如下：

• 优点: 操作简单，且不用担心事件覆盖等问题。
• 缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。

语法

演示代码

1.2. jQuery 事件处理

​ 因为普通注册事件方法的不足，jQuery又开发了多个处理方法，重点讲解如下：

• on(): 用于事件绑定，目前最好用的事件绑定方法
• off(): 事件解绑
• trigger() / triggerHandler(): 事件触发

1.2.1 事件处理 on() 绑定事件

​ 因为普通注册事件方法的不足，jQuery又创建了多个新的事件绑定方法bind() / live() / delegate() / on()等，其中最好用的是: on()

语法

演示代码

    

    

        
我们都是好孩子
        
我们都是好孩子
        
我们都是好孩子
    
    


    

1.2.2. 案例：发布微博案例

1.点击发布按钮， 动态创建一个小li，放入文本框的内容和删除按钮， 并且添加到ul 中。
2.点击的删除按钮，可以删除当前的微博留言。

​ 代码实现略。(详情参考源代码)

1.2.3. 事件处理 off() 解绑事件

​ 当某个事件上面的逻辑，在特定需求下不需要的时候，可以把该事件上的逻辑移除，这个过程我们称为事件解绑。jQuery 为我们提供 了多种事件解绑方法：die() / undelegate() / off() 等，甚至还有只触发一次的事件绑定方法 one()，在这里我们重点讲解一下 off() ;

语法

演示代码

    

    

        
我们都是好孩子
        
我们都是好孩子
        
我们都是好孩子
    
    
我是一个P标签
	

1.2.4. 事件处理 trigger() 自动触发事件

​ 有些时候，在某些特定的条件下，我们希望某些事件能够自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。由此 jQuery 为我们提供了两个自动触发事件 trigger() 和 triggerHandler() ;

语法

演示代码

1.3. jQuery 事件对象

​ jQuery 对DOM中的事件对象 event 进行了封装，兼容性更好，获取更方便，使用变化不大。事件被触发，就会有事件对象的产生。

语法

演示代码

注意：jQuery中的 event 对象使用，可以借鉴 API 和 DOM 中的 event 。

1.4. jQuery 拷贝对象

​ jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API，方便易用，内容如下。

语法

演示代码

1.5. jQuery 多库共存

​ 实际开发中，很多项目连续开发十多年，jQuery版本不断更新，最初的 jQuery 版本无法满足需求，这时就需要保证在旧有版本正常运行的情况下，新的功能使用新的jQuery版本实现，这种情况被称为，jQuery 多库共存。

语法

演示代码

1.6. jQuery 插件

​ jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。 这些插件也是依赖于jQuery来完成的，所以必须要先引入

jQuery文件，因此也称为 jQuery 插件。

​ jQuery 插件常用的网站：

1. jQuery 插件库 http://www.jq22.com/

2. jQuery 之家 http://www.htmleaf.com/

   jQuery 插件使用步骤：

3. 引入相关文件。（jQuery 文件 和 插件文件）

4. 复制相关html、css、js (调用插件)。

1.4.1. 瀑布流插件（重点讲解）

​ 我们学习的第一个插件是jQuery之家的开源插件，瀑布流。我们将重点详细讲解，从找到插件所在网页，然后点击下载代码，到插件的使用等，后面的插件使用可参考瀑布流插件的使用。

下载位置

代码演示

​ 插件的使用三点： 1. 引入css. 2.引入JS 3.引入html。 （有的简单插件只需引入html和js，甚至有的只需引入js）

• 1.引入css.

• 2.引入js.

• 3.引入html.

	
	

        

            
            
我是轮播图片1
            
里面很精彩哦
        
        

            
            
我是轮播图片1
            
里面很精彩哦
        
        

            
            
我是轮播图片1
            
里面很精彩哦
        
        

            
            
我是轮播图片1
            
里面很精彩哦
        
    

总结：jQuery插件就是引入别人写好的：html 、css、js （有时也可以只引入一部分，读懂后也可以修改部分内容）

1.4.2. 图片懒加载插件

​ 图片的懒加载就是：当页面滑动到有图片的位置，图片才进行加载，用以提升页面打开的速度及用户体验。（下载略）

代码演示

​ 懒加载只需引入html 和 js操作 即可，此插件不涉及css。

• 1.引入js

• 2.引入html

1.4.3. 全屏滚动插件

​ 全屏滚动插件比较大，所以，一般大型插件都会有帮助文档，或者网站。全屏滚动插件介绍比较详细的网站为：

http://www.dowebok.com/demo/2014/77/

代码演示

​ 全屏滚动因为有多重形式，所以不一样的风格html和css也不一样，但是 js 变化不大。所以下面只演示js的引入，html和css引入根据自己实际

项目需要使用哪种风格引入对应的HTML和CSS。

注意：实际开发，一般复制文件，然后在文件中进行修改和添加功能。

1.4.4. bootstrap组件

​ Bootstrap是 Twitter 公司设计的基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，他依靠jQuery实现，且支持响应式

布局，使得 Web 开发更加方便快捷。

​ 凡是在软件开发中用到了软件的复用，被复用的部分都可以称为组件，凡是在应用程序中已经预留接口的组件就是插件。Bootstrap组件使

用非常方便: 1.引入bootstrap相关css和js 2.去官网复制html

代码演示

1. 引入bootstrap相关css和js

2. 去官网复制html的功能模块

    

        
        

            
      		Action 
    		
            

                
Action
                
Another action
                
Something else here
                

                
Separated link
            
     	
	

1.4.5. bootstrap插件（JS）

​ bootstrap中的js插件其实也是组件的一部分，只不过是需要js调用功能的组件，所以一般bootstrap的js插件一般会伴随着js代码（有的也可以

省略js，用属性实现）。

​ 步骤： 1.引入bootstrap相关css和js 2.去官网复制html 3.复制js代码，启动js插件。

代码演示

1. 引入bootstrap相关css和js

2. 去官网复制html的功能模块

Large modal

    

        

            里面就是模态框
        
    

3. 复制js代码，启动js插件。

1.4.6. bootstrap案例-阿里百秀

1.通过调用组件实现导航栏
2.通过调用插件实现登录
3.通过调用插件标签页实现 tab 栏

​ 代码实现略。(详情参考源代码)

1.7. 综合案例: toDoList案例分析

1.7.1 案例：案例介绍

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

1.7.2 案例：toDoList 分析

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

1.7.3 案例：toDoList 按下回车把新数据添加到本地存储里面

// 1.切记： 页面中的数据，都要从本地存储里面获取，这样刷新页面不会丢失数据，所以先要把数据保存到本地存储里面。
// 2.利用事件对象.keyCode判断用户按下回车键（13）。
// 3.声明一个数组，保存数据。
// 4.先要读取本地存储原来的数据（声明函数 getData()），放到这个数组里面。
// 5.之后把最新从表单获取过来的数据，追加到数组里面。
// 6.最后把数组存储给本地存储 (声明函数 savaDate())

1.7.4 案例：toDoList 本地存储数据渲染加载到页面

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

1.7.5 案例：toDoList 删除操作

// 1.点击里面的a链接，不是删除的li，而是删除本地存储对应的数据。
// 2.核心原理：先获取本地存储数据，删除对应的数据，保存给本地存储，重新渲染列表li
// 3.我们可以给链接自定义属性记录当前的索引号
// 4.根据这个索引号删除相关的数据----数组的splice(i, 1)方法
// 5.存储修改后的数据，然后存储给本地存储
// 6.重新渲染加载数据列表
// 7.因为a是动态创建的，我们使用on方法绑定事件

1.7.6 案例：toDoList 正在进行和已完成选项操作

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

1.7.7 案例：toDoList 统计正在进行个数和已经完成个数

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

代码：

$(function() {
    // 1. 按下回车 把完整数据 存储到本地存储里面
    // 存储的数据格式  var todolist = [{title: "xxx", done: false}]
    load();
    // 读取本地存储的数据 
    function getDate() {
        var data = localStorage.getItem("todolist");
        if (data !== null) {
            // 本地存储里面的数据是字符串格式的 但是我们需要的是对象格式的
            return JSON.parse(data);
        } else {
            return [];
        }
    }
    // 保存本地存储数据
    function saveDate(data) {
        localStorage.setItem("todolist", JSON.stringify(data));
    }
    // 渲染加载数据
    function load() {
        // 读取本地存储的数据
        var data = getDate();
        // 遍历之前先要清空ol里面的元素内容
        $("ol, ul").empty();
        var todoCount = 0; // 正在进行的个数
        var doneCount = 0; // 已经完成的个数
        // 遍历这个数据
        $.each(data, function(i, n) {
            // console.log(n);
            if (n.done) {
                $("ul").prepend("
 
" + n.title + "
 
");
                doneCount++;
            } else {
                $("ol").prepend("
 
" + n.title + "
 
");
                todoCount++;
            }
        });
        $("#todocount").text(todoCount);
        $("#donecount").text(doneCount);
    }
})
    $("#title").on("keydown", function(event) {
        if (event.keyCode === 13) {
            if ($(this).val() === "") {
                alert("请输入您要的操作");
            } else {
                // 先读取本地存储原来的数据
                var local = getDate();
                // console.log(local);
                // 把local数组进行更新数据 把最新的数据追加给local数组
                local.push({ title: $(this).val(), done: false });
                // 把这个数组local 存储给本地存储
                saveDate(local);
                // 2. toDoList 本地存储数据渲染加载到页面
                load();
                $(this).val("");
            }
        }
    });
    // 3. toDoList 删除操作
    $("ol, ul").on("click", "a", function() {
        // alert(11);
        // 先获取本地存储
        var data = getDate();
        console.log(data);
        // 修改数据
        var index = $(this).attr("id");
        console.log(index);
        data.splice(index, 1);
        // 保存到本地存储
        saveDate(data);
        // 重新渲染页面
        load();
    });
    // 4. toDoList 正在进行和已完成选项操作
    $("ol, ul").on("click", "input", function() {
        // alert(11);
        // 先获取本地存储的数据
        var data = getDate();
        // 修改数据
        var index = $(this).siblings("a").attr("id");
        console.log(index);
        // data[?].done = ?
        data[index].done = $(this).prop("checked");
        console.log(data);

        // 保存到本地存储
        saveDate(data);
        // 重新渲染页面
        load();
    });
})

1.8. 今日总结