「jQuery」基础 - 03

请注意，本文编写于 2508 天前，最后修改于 610 天前，其中某些信息可能已经过时。

1.1. jQuery 事件注册

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

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

语法

演示代码

<!-- 引入jQuery文件 -->
<script src="jquery.min.js"></script>
<!-- 编写jquery代码 -->
<script>
    $(function() {
        $('div').click(function() {
            $(this).css('background-color', 'red');
        })

        $('div').mouseover(function() {
            $(this).css('background-color', 'green');
        })
    })
</script>

1.2. jQuery 事件处理

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

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

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

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

语法

演示代码：

<!-- 引入jQuery文件 -->
<script src="jquery.min.js"></script>
<!-- 编写jquery代码 -->
<script>
    $(function() {
        $('div').on({
            "click": function() {
                $(this).css('background-color', 'red');
            },
            "mouseover": function() {
                $(this).css('background-color', 'cyan');
            },
            "mouseleave": function() {
                $(this).css('background-color', 'skyblue');
            }
        })
    })
</script>

on的另一种用法：

<!-- 引入jQuery文件 -->
<script src="jquery.min.js"></script>
<!-- 编写jquery代码 -->
<script>
    $(function() {
        $('div').on('mouseenter mouseleave', function() {
            $(this).toggleClass('div-toggle');
        })
    })
</script>

on事件的一些功能：

// (2) on可以实现事件委托（委派）
// $("ul li").click();
$("ul").on("click", "li", function() {
    alert(11);
});

// click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li
// (3) on可以给未来动态创建的元素绑定事件
// $("ol li").click(function() {
//     alert(11);
// })
$("ol").on("click", "li", function() {
    alert(11);
})
var li = $("<li>我是后来创建的</li>");
$("ol").append(li);

1.2.2. 案例：发布微博案例

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

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        
        ul {
            list-style: none
        }
        
        .box {
            width: 600px;
            margin: 100px auto;
            border: 1px solid #000;
            padding: 20px;
        }
        
        textarea {
            width: 450px;
            height: 160px;
            outline: none;
            resize: none;
        }
        
        ul {
            width: 450px;
            padding-left: 80px;
        }
        
        ul li {
            line-height: 25px;
            border-bottom: 1px dashed #cccccc;
            display: none;
        }
        
        input {
            float: right;
        }
        
        ul li a {
            float: right;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function() {
            var txtValue = "";
            $(".btn").on("click", function() {
                if ($(".txt").prop("value")) {
                    if (txtValue !== $(".txt").prop("value")) {
                        var li = $("<li></li>");
                        li.html($(".txt").val() + "<a href='javascript:;'>删除</a>");
                        $("ul").prepend(li);
                        li.slideDown(300);
                        txtValue = $(".txt").prop("value");
                    } else {
                        alert("请勿重复发表！");
                    }
                } else {
                    alert("评论必须输入内容！");
                }
            })

            $("ul>li>a").click(function() {
                /*
                    为何不能使用此种方式绑定事件？
                    因为ul中的li是JS动态创建的，在页面加载时Docoment中并没有此元素，选择器并不能选取。
                */
            })

            $("ul").on("click", "li>a", function() { // on 可以为动态创建的元素绑定事件。
                $(this).parent().slideUp(function() {
                    // 当元素拉上去之后并不是真正的删除，而是隐藏了，这个时候执行回调函数，让元素真的删除。
                    $(this).remove();
                });
            })
        })
    </script>
</head>

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

</html>

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

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

演示代码

<body>
    <div></div>
    <ul>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
    </ul>
    <p>我是一个P标签</p>
    <script>
        $(function() {
              // 事件绑定
            $("div").on({
                click: function() {
                    console.log("我点击了");
                },
                mouseover: function() {
                    console.log('我鼠标经过了');
                }
            });
            $("ul").on("click", "li", function() {
                alert(11);
            });
  
            // 1. 事件解绑 off 
            // $("div").off();  // 这个是解除了div身上的所有事件
            $("div").off("click"); // 这个是解除了div身上的点击事件
            $("ul").off("click", "li");
  
            // 2. one() 但是它只能触发事件一次
            $("p").one("click", function() {
                alert(11);
            })
        })
    </script>
</body>

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

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

语法

演示代码

<body>
    <div></div>
    <input type="text">
      
    <script>
    $(function() {
      // 绑定事件
      $("div").on("click", function() {
        alert(11);
      });

      // 自动触发事件
      // 1. 元素.事件()
      // $("div").click();会触发元素的默认行为
      
      // 2. 元素.trigger("事件")
      // $("div").trigger("click");会触发元素的默认行为
      $("input").trigger("focus");
      
      // 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为
      $("input").on("focus", function() {
        $(this).val("你好吗");
      });
      // 一个会获取焦点，一个不会
      $("div").triggerHandler("click");
      // $("input").triggerHandler("focus");
    });
    </script>
</body>

1.3. jQuery 事件对象

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

语法

演示代码

<body>
    <div></div>

    <script>
        $(function() {
            $(document).on("click", function() {
                console.log("点击了document");
            })
            $("div").on("click", function(event) {
                // console.log(event);
                console.log("点击了div");
                event.stopPropagation();
            })
        })
    </script>
</body>

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

1.4. jQuery 拷贝对象

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

语法

演示代码

<script>
    $(function() {
        // 1.合并数据
        var targetObj = {};
        var obj = {
            id: 1,
            name: "andy"
        };
        // $.extend(target, obj);
        $.extend(targetObj, obj);
        console.log(targetObj);

        // 2. 会覆盖 targetObj 里面原来的数据
        var targetObj = {
            id: 0
        };
        var obj = {
            id: 1,
            name: "andy"
        };
        // $.extend(target, obj);
        $.extend(targetObj, obj);
        console.log(targetObj); 
    })
</script>

1.5. jQuery 多库共存

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

语法

演示代码

<script>
    $(function() {
          // 让jquery 释放对$ 控制权 让用自己决定
          var suibian = jQuery.noConflict();
          console.log(suibian("span"));
    })
</script>

1.6. jQuery 插件

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

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

jQuery 插件常用的网站：

jQuery 插件库 http://www.jq22.com/
jQuery 之家 http://www.htmleaf.com/

jQuery 插件使用步骤：

引入相关文件。（jQuery 文件和插件文件）
复制相关html、css、js (调用插件)。

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

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

下载位置

代码演示

插件的使用三点：

引入css；
引入JS；
引入html。

有的简单插件只需引入html和js，甚至有的只需引入js。

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

1.4.2. 图片懒加载插件

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

代码演示

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

1.引入js

<script src="js/EasyLazyload.min.js"></script>
<script>
       lazyLoadInit({
           showTime: 1100,
           onLoadBackEnd: function(i, e) {
             console.log("onLoadBackEnd:" + i);
           },
           onLoadBackStart: function(i, e) {
             console.log("onLoadBackStart:" + i);
           }
     });
</script>

2.引入html

 <img data-lazy-src="upload/floor-1-3.png" alt="">

1.4.3. 全屏滚动插件

全屏滚动插件比较大，所以，一般大型插件都会有帮助文档，或者网站。全屏滚动插件介绍比较详细的网站为：http://www.dowebok.com/demo/2014/77/

代码演示

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

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

<script src="js/jquery.min.js"></script>
<script src="js/fullpage.min.js"></script>
<script>
      $(function() {
          $('#dowebok').fullpage({
            sectionsColor: ['pink', '#4BBFC3', '#7BAABE', '#f90'],
            navigation: true
          });
    });
</script>

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

1.4.4. bootstrap组件

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

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

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

引入bootstrap相关css和js
去官网复制html

代码演示

引入bootstrap相关css和js

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

去官网复制html的功能模块

    <div class="container">
        <!-- Single button -->
        <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Action <span class="caret"></span>
            </button>
            <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>
         </div>
    </div>

1.4.5. bootstrap插件（JS）

bootstrap中的js插件其实也是组件的一部分，只不过是需要js调用功能的组件，所以一般bootstrap的js插件一般会伴随着js代码（有的也可以省略js，用属性实现）。步骤：

引入bootstrap相关css和js；
去官网复制html；
复制js代码，启动js插件。

代码演示

引入bootstrap相关css和js

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

去官网复制html的功能模块

<!-- 模态框 -->
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            里面就是模态框
        </div>
    </div>
</div>

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

<script>
    // 当我们点击了自己定义的按钮，就弹出模态框
    $(".myBtn").on("click", function() {
        // alert(11);
        $('#btn').modal()
    })
</script>

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

1.7.1 案例：案例介绍

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

1.7.2 案例：toDoList 分析

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

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

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

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

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

1.7.5 案例：toDoList 删除操作

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

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

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

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

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

1.8. 今日总结

----- END -----

博客站点：亚灿网志（Yacan's Blog）
本文链接：https://blog.manyacan.com/archives/1770/
版权声明：本文章采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 。

Web jQuery

「jQuery」基础 - 03

1.1. jQuery 事件注册

1.2. jQuery 事件处理

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

1.2.2. 案例：发布微博案例

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

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

1.3. jQuery 事件对象

1.4. jQuery 拷贝对象

1.5. jQuery 多库共存

1.6. jQuery 插件

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

1.4.2. 图片懒加载插件

1.4.3. 全屏滚动插件

1.4.4. bootstrap组件

1.4.5. bootstrap插件（JS）

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

1.7.1 案例：案例介绍

1.7.2 案例：toDoList 分析

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

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

1.7.5 案例：toDoList 删除操作

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

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

1.8. 今日总结

「jQuery」基础 - 02

「JS高级」面向对象编程