jQuery基础03：事件注册 + 拷贝对象 + toDolist案例（重点练习）

我就是我 2022-12-18 05:54 111阅读 0赞

## 1.1. jQuery 事件注册 ##

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

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

**语法**

element.事件(function() \{ \})

$(“div”).click(function() \{ 事件处理程序 \})

其他事件和原生基本一致。

比如：mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等

**演示代码**

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

## 1.2. jQuery 事件处理 ##

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

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

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

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

其中最好用的是: on()

**语法**

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

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

如果事件处理程序相同

$("div").on("mouseover mouseout",function() {
       $(this).toggleClass("current")
    });

on() 方法优势2：

可以事件委托操作，事件委托定义是：把原来加给子元素身上的事件绑定在父元素身上，就是把事件委托给父元素

$("ul").on("click","li",function() {
       alert('hello world!');
    });

在此之前有bind()，live()，delegate()等方法来处理事件绑定或者事件委托，最新版本的请用on替代他们

on() 方法优势3：动态创建的元素，click() 没有办法绑定事件，on() 可以给动态生成的元素绑定事件

$("div").on("click","p",function() {
       alert('俺可以给动态生成的元素绑定事件');
    });
    
    $("div").append($("<p>我是动态创建的p</p>"));

**演示代码**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <style>
        div { 
          width: 100px;
          height: 100px;
          background-color: pink;
        }
    
        .current { 
          background-color: purple;
        }
      </style>
      <script src="jquery.min.js"></script>
    </head>
    
    <body>
      <div></div>
      <ul>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
      </ul>
      <ol>
    
      </ol>
      <script>
        $(function () { 
    
          // 1. 单个事件注册
          $("div").click(function () { 
            $(this).css("background", "purple");
          });
          $("div").mouseenter(function () { 
            $(this).css("background", "skyblue");
          });
    
          // 2. 事件处理on 可以绑定1个或者多个事件处理程序
          $("div").on({ 
            mouseenter: function () { 
              $(this).css("background", "skyblue");
            },
            click: function () { 
              $(this).css("background", "purple");
            },
            mouseleave: function () { 
              $(this).css("background", "blue");
            }
          });
    
          // 3. 鼠标经过和离开添加和删除类
          $("div").on("mouseenter mouseleave", function () { 
            $(this).toggleClass("current");
          });
    
          /* (2) on可以实现事件委托（委派） 原来的写法： 事件绑定在每个li上面 $("ul li").click(); 现在的写法如下：click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li */
          $("ul").on("click", "li", function () { 
            alert(11);
          });
    
          /* (3) on可以给未来动态创建的元素绑定事件【on绑定事件的优势】 原来的写法，无法给未来动态创建的元素绑定事件：$("ol li").click(function() { alert(11) }) */
          $("ol").on("click", "li", function () { 
            alert(11);
          })
          var li = $("<li>我是后来创建的</li>");
          $("ol").append(li);
    
        })
      </script>
    </body>
    
    </html>

### 1.2.2. 案例：发布微博案例 ###

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

<!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 () { /* 点击发布按钮 */ $(".btn").on("click", function () { var li = $("<li></li>"); // 动态创建一个小li li.html($(".txt").val() + "<a href='javascript:;'> 删除</a>"); // li里面放入文本框的内容和删除按钮 $("ul").prepend(li); // 并且添加到ul中 li.slideDown(); $(".txt").val(""); // 清空输入框的内容 }) /* on可以给动态创建的元素绑定事件 点击的删除按钮，可以删除当前的微博留言li 给ul绑定事件，通过事件冒泡，点击a从而触发事件 执行上滑动画之后，才会执行下面的删除操作 $(this).remove(); */ $("ul").on("click", "a", function () { $(this).parent().slideUp(function () { $(this).remove(); // 注意此时 $(this)指li }); }) }) </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() ;

**语法**

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

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

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

**演示代码**

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

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

**语法**

第一种：trigger()

element.click()    		 // 第一种简写形式
    element.trigger("type")  // 第二种自动触发模式

第二种：triggerHandle()

element.triggerHandler(type)   // 第三种自动触发模式

triggerHandler模式不会触发元素的默认行为，这是和前面两种的区别

**演示代码**

## 1.3. jQuery 事件对象 ##

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

**语法**

element.on(events,[selector],function(event){ })
    
    阻止默认行为：event.preventDefault() 或者 return false
    阻止冒泡：event.stopPropagation()

**演示代码**

<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，方便易用，内容如下。

**语法**

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

1.  deep：如果设为true为深拷贝，默认为false 浅拷贝
2.  target：要拷贝的目标对象
3.  object1：待拷贝到第一个对象的对象
4.  objectN：待拷贝到第N个对象的对象
5.  浅拷贝目标对象引用的被拷贝的对象地址，修改目标对象会影响被拷贝对象。
6.  深拷贝，前面加true，完全克隆，修改目标对象不会影响被拷贝对象。

**演示代码**

## 1.5. jQuery 多库共存 ##

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

**语法**

jQuery 解决方案：

1.  把里面的$符号，统一改为jQuery。比如：jQuery(“div”)
2.  jQuery 变量规定新的名称：`$.noConflict() var xx = $.noConflict();`

**演示代码**

## 1.6. jQuery 插件 ##

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

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

jQuery 插件常用的网站：

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

jQuery 插件使用步骤：

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

### 1.4.4. bootstrap组件 ###

Bootstrap是 Twitter 公司设计的基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，他依靠jQuery实现，且支持响应式布局，使得 Web 开发更加方便快捷。

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

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

#### 案例-阿里百秀 ####

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()