【JavaWeb】JQuery基础教程（下篇）Write less，do more

怼烎@ 2023-09-26 10:14 96阅读 0赞

![在这里插入图片描述][991b0bb8e38a44cab794825365213256.png_pic_center]

**本文被 [系统学习JavaWeb][JavaWeb] 收录[点击订阅专栏][JavaWeb]**

# 写在前面 #

大家好，我是黄小黄！上一节我们学习了JQuery的入门知识，及各类选择器的使用。本节，继续学习JQuery的相关知识，记得经常复习哦。  
![在这里插入图片描述][c214224a62404f869bcf253249f70125.png_pic_center]

话不多说，接着上篇的内容，正文开始！

--------------------

### 文章目录 ###

*  写在前面
 *  5 JQuery元素筛选方法一览表
 *  6 JQuery对DOM属性操作
 *   *  6.1 html()
     *  6.2 text()
     *  6.3 val()
     *  6.4 attr() 与prop()
     *  6.5 练习题——全选、全不选、反选练习
 *  7 Dom对象的增删改
 *   *  7.1 相关方法说明
     *  7.2 方法演示示例
     *  7.3 练习题
     *   *  7.3.1 左右添加删除练习
         *  7.3.2 动态添加删除表格记录
 *  8 CSS样式
 *  9 JQurey动画入门
 *   *  9.1 基本动画方法
     *  9.2 案例演示
 *  10 JQuery的事件操作
 *   *  10.1 JQuery回顾：$(function()\{\})与window.onload的区别
     *  10.2 JQuery中的事件概览
     *  10.3 事件的绑定与触发
     *  10.4 bind事件处理
     *  10.5 one事件处理
     *  10.6 unbind事件处理
     *  10.7 live事件处理
     *  10.8 事件的冒泡
     *  10.9 javaScript 事件对象
 *  写在最后

--------------------

# 5 JQuery元素筛选方法一览表 #

**使用格式：jq对象.方法名（）**

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>eq()</td> 
   <td>获取给定索引的元素 功能跟:eq() 一样</td> 
  </tr> 
  <tr> 
   <td>first()</td> 
   <td>获取第一个元素 功能跟:first 一样</td> 
  </tr> 
  <tr> 
   <td>last()</td> 
   <td>获取最后一个元素 功能跟:last 一样</td> 
  </tr> 
  <tr> 
   <td>filter(exp)</td> 
   <td>留下匹配的元素</td> 
  </tr> 
  <tr> 
   <td>is(exp)</td> 
   <td>判断是否匹配给定的选择器，只要有一个匹配就返回，true</td> 
  </tr> 
  <tr> 
   <td>has(exp)</td> 
   <td>返回包含有匹配选择器的元素的元素 功能跟:has 一样</td> 
  </tr> 
  <tr> 
   <td>not(exp)</td> 
   <td>删除匹配选择器的元素 功能跟 :not 一样</td> 
  </tr> 
  <tr> 
   <td>children(exp)</td> 
   <td>返回匹配给定选择器的子元素 功能跟 parent&gt;child 一样</td> 
  </tr> 
  <tr> 
   <td>find(exp)</td> 
   <td>返回匹配给定选择器的后代元素 功能跟 ancestor descendant 一样</td> 
  </tr> 
  <tr> 
   <td>next()</td> 
   <td>返回当前元素的下一个兄弟元素 功能跟 prev + next 功能一样</td> 
  </tr> 
  <tr> 
   <td>nextAll()</td> 
   <td>返回当前元素后面所有的兄弟元素 功能跟 prev ~ siblings 功能一样</td> 
  </tr> 
  <tr> 
   <td>nextUntil()</td> 
   <td>返回当前元素到指定匹配的元素为止的后面元素</td> 
  </tr> 
  <tr> 
   <td>parent()</td> 
   <td>返回父元素</td> 
  </tr> 
  <tr> 
   <td>prev(exp)</td> 
   <td>返回当前元素的上一个兄弟元素</td> 
  </tr> 
  <tr> 
   <td>prevAll()</td> 
   <td>返回当前元素前面所有的兄弟元素</td> 
  </tr> 
  <tr> 
   <td>prevUnit(exp)</td> 
   <td>返回当前元素到指定匹配的元素为止的前面元素</td> 
  </tr> 
  <tr> 
   <td>siblings(exp)</td> 
   <td>返回所有兄弟元素</td> 
  </tr> 
  <tr> 
   <td>add()</td> 
   <td>把 add 匹配的选择器的元素添加到当前 jquery 对象中</td> 
  </tr> 
 </tbody> 
</table>

--------------------

# 6 JQuery对DOM属性操作 #

## 6.1 html() ##

设置和获取起始标签和结束标签中的内容。跟 dom 属性 innerHTML 一样。

html([val|fn]);

*  val：用于设定html内容的值
 *  无参数：返回html的内容的值

**示例如下：**

> 返回p元素的内容。

$('p').html();

> 设置所有 p 元素的内容。

$("p").html("Hello <b>world</b>!");

## 6.2 text() ##

设置和获取起始标签和结束标签中的文本。跟 dom 属性 innerText 一样。

text([val|fn]);

*  val：用于设置元素内容的文本
 *  无参数：返回返回元素的文本内容

**示例如下：**

> 返回p元素的文本内容。

$('p').text();

> 设置所有 p 元素的文本内容。

$("p").text("Hello world!");

## 6.3 val() ##

设置和获取表单项的 value 属性值。

val([val|fn|arr]);

*  val：要设置的值
 *  array：用于 check/select 的值
 *  无参数：获取文本框中的值

**示例如下：**

> 获取文本框中的值

$("input").val();

> 设定文本框的值

$("input").val("hello world!");

> 实现单选、多选及下拉框的多选

html：

单选：
        <input name="radio" type="radio" value="radio1"/>radio1
        <input name="radio" type="radio" value="radio2"/>radio2
        <br/>
        多选
        <input name="checkbox" type="checkbox" value="checkbox1"/>checkbox1
        <input name="checkbox" type="checkbox" value="checkbox2"/>checkbox2
        <input name="checkbox" type="checkbox" value="checkbox3"/>checkbox3
        <br/>
        下拉框多选
        <select multiple="mutiple" size="4">
            <option value="mul1">mul1</option>
            <option value="mul2">mul2</option>
            <option value="mul3">mul3</option>
            <option value="mul4">mul4</option>
        </select>

JQuery：

![在这里插入图片描述][9aec0f6a2914497981706a7ba1123251.png]

## 6.4 attr() 与prop() ##

*  **attr()：** 可以设置和获取属性的值，不推荐操作 checked、readOnly、selected、disabled等。 attr 方法还可以操作非标准的属性，比如自定义属性：abc,bbj
 *  **prop()：** 可以设置和获取属性的值，只推荐操作 checked、readOnly、selected、disabled 等。

**示例代码如下：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>attr() 与prop()</title>
        <script type="text/javascript" src="../javascript/jquery-3.5.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
          
                //attr 可以设置和获取属性的值 不推荐操作 checked、readOnly、selected、disabled
                //获取 一个参数
                alert($(":checkbox:first").attr("name")); //checkbox
     
                //赋值 两个参数
                $(":checkbox:first").attr("name","checkbox01");
                alert($(":checkbox:first").attr("name"));//checkbox01
     
                //attr可以自定义非官方标准的属性
                $(":checkbox:first").attr("abc", "abcValue");
                alert($(":checkbox:first").attr("abc")); //abcValue
     
                //attr 不推荐操作 checked、readOnly、selected、disabled
                alert($(":checkbox:first").attr("checked"));//undefined 官方认为undefined是一个错误
     
                //prop()  可以设置和获取属性的值 只推荐操作 checked、readOnly、selected、disabled
                alert($(":checkbox:first").prop("checked")); //false
                $(":checkbox:first").prop("checked",true);
                alert($(":checkbox:first").prop("checked")); //true
            });
        </script>
    </head>
    <body>
        多选
        <input name="checkbox" type="checkbox" value="checkbox1"/>checkbox1
        <input name="checkbox" type="checkbox" value="checkbox2"/>checkbox2
        <input name="checkbox" type="checkbox" value="checkbox3"/>checkbox3
        <br/>
    </body>
    </html>

## 6.5 练习题——全选、全不选、反选练习 ##

题目摘自，尚硅谷JavaWeb课程。  
**需求如下：**

> 1.点击全选按钮，以上全部复选框全部选中，点击全不选按钮反之  
> 2.点击反选，已选中的变为未选中，未选中的变为已选中  
> 3.点击全选/全不选复选框，会出现对应全选或全不选  
> 4.当点击中间4个复选框时，全选/全不选复选框 不同步对应  
> 5.点击提交按钮，会将选中的爱好用警告框显示出来

![在这里插入图片描述][3253fc499ad6484a96871ff7c182b511.png]  
**参考代码：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>全选练习题</title>
        <script type="text/javascript" src="../javascript/jquery-3.5.1.min.js"></script>
        <script type="text/javascript">
            $(function (){
          
                //全选按钮
                $("#checkedAllBtn").click(function (){
          
                    $(":checkbox").each(function (){
          
                        this.checked = true;
                    })
                });
    
                //全不选按钮
                $("#checkedNoBtn").click(function () {
          
                    $(":checkbox").each(function () {
          
                        this.checked = false;
                    });
                });
    
                //反选按钮
                var items = $("[name=items]");
                $("#checkedRevBtn").click(function () {
          
                    items.each(function () {
          
                        this.checked = !this.checked;
                    });
                    var flag = $("[name='items']:checked").length == 4;
                    $("#checkedAllBox").prop("checked", flag)
                });
    
                //提交按钮
                $("#sendBtn").click(function () {
          
                    $("[name='items']:checked").each(function () {
          
                        alert(this.value)
                    });
                });
    
                //全选/全不选复选框
                $("#checkedAllBox").click(function () {
          
                    items.attr("checked", this.checked);
                });
                //全选/全不选复选框同步
                items.click(function () {
          
                    //获取全部球类个数
                    var allCount = $(":checkbox[name='item']").length;
                    //获取选中的个数
                    var checkedCount = $(":checkbox[name='item']:checked").length;
                    $("#checkedAllBox").prop("checked", allCount == checkedCount);
                });
    
            })
    
        </script>
    </head>
    <body>
    <form method="post" action="">
        你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选
        <br/>
        <input type="checkbox" name="items" value="足球"/>足球
        <input type="checkbox" name="items" value="篮球"/>篮球
        <input type="checkbox" name="items" value="羽毛球"/>羽毛球
        <input type="checkbox" name="items" value="乒乓球"/>乒乓球
        <br/>
        <input type="button" id="checkedAllBtn" value="全　选"/>
        <input type="button" id="checkedNoBtn" value="全不选"/>
        <input type="button" id="checkedRevBtn" value="反　选"/>
        <input type="button" id="sendBtn" value="提　交"/>
    </form>
    </body>
    </html>

--------------------

# 7 Dom对象的增删改 #

## 7.1 相关方法说明 ##

图片引自博文：[JavaWeb jQuery][]

![在这里插入图片描述][963dba5251cd44249a67d8e4f3ec10fc.png]

## 7.2 方法演示示例 ##

**示例代码如下，具体见代码注释：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>内部插入demo</title>
        <script type="text/javascript" src="../javascript/jquery-3.5.1.min.js"></script>
        <script type="text/javascript">
            $(function (){
          
                //内部插入:
                $("<span>黄小黄~</span>").appendTo($("#div01"));
                $("<span>奇迹皆有始</span>").prependTo($("#div02"));
    
                //外部插入:
                $("<span>黄小黄~</span>").insertAfter($("#div03"));
                $("<span>你好！</span>").insertBefore($("#div04"));
    
                //替换:
                $("[title=span01]").replaceWith($("<span>replaceWith</span>")); //后换前
                $("<span>replaceAll</span>)").replaceAll($("[title=span02]")); //前换后
    
                //删除:
                $("#div05").remove(); //删除标签
                $("#div06").empty(); //删除内容
            })
        </script>
    </head>
    <body>
    <h3>内部插入:</h3>
    <div id="div01">你好！</div>
    <div id="div02">,当下即行动！</div>
    <hr/>
    
    <h3>外部插入:</h3>
    <div id="div03">你好！</div>
    <div id="div04">黄小黄~</div>
    <hr/>
    
    <h3>替换:</h3>
    <span title="span01">你好！黄小黄~（span01）</span>
    <span title="span01">你好！黄小黄~（span01）</span>
    <hr/>
    <span title="span02">你好！黄小黄~（span02）</span>
    <span title="span02">你好！黄小黄~（span02）</span>
    <hr/>
    
    <h3>删除:</h3>
    <div id="div05">div05</div>
    <div id="div06">div06</div>
    <hr/>
    </body>
    </html>

**html页面：**  
![在这里插入图片描述][76f40108968f4189ba1ddc5419445c1a.png]

**执行JQuery代码后的结果：**  
![在这里插入图片描述][3b9325efde2d45b4a6b2d4b4c789359b.png]

## 7.3 练习题 ##

练习题参考尚硅谷JavaWeb从入门到精通

### 7.3.1 左右添加删除练习 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>左右移动练习</title>
        <title>Insert title here</title>
        <style type="text/css"> select {
          
            width: 100px;
            height: 140px;
        }
    
        div {
          
            width: 130px;
            float: left;
            text-align: center;
        }
        </style>
        <script type="text/javascript" src="../javascript/jquery-3.5.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
          
                // 第一个按钮 【选中添加到右边】
                $("button:eq(0)").click(function () {
          
                    $("select:eq(0) option:selected").appendTo($("select:eq(1)"));
                });
    
                // 第二个按钮 【全部添加到右边】
                $("button:eq(1)").click(function () {
          
                    $("select:eq(0) option").appendTo($("select:eq(1)"));
                });
    
                // 第三个按钮 【选中删除到左边】
                $("button:eq(2)").click(function () {
          
                    $("select:eq(1) option:selected").appendTo($("select:eq(0)"));
                });
    
                // 第四个按钮 【全部删除到左边】
                $("button:eq(3)").click(function () {
          
                    $("select:eq(1) option").appendTo($("select:eq(0)"));
                });
            });
    
        </script>
    </head>
    <body>
    <div id="left">
        <select multiple="multiple" name="sel01">
            <option value="opt01">选项 1</option>
            <option value="opt02">选项 2</option>
            <option value="opt03">选项 3</option>
            <option value="opt04">选项 4</option>
            <option value="opt05">选项 5</option>
            <option value="opt06">选项 6</option>
            <option value="opt07">选项 7</option>
            <option value="opt08">选项 8</option>
        </select>
        <button>选中添加到右边</button>
        <button>全部添加到右边</button>
    </div>
    
    <div id="rigth">
        <select multiple="multiple" name="sel02">
        </select>
        <button>选中删除到左边</button>
        <button>全部删除到左边</button>
    </div>
    </body>
    </html>

![在这里插入图片描述][15e3f81794b6476bb645cf84a48af497.gif_pic_center]

### 7.3.2 动态添加删除表格记录 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>动态添加删除表格记录</title>
      <style type="text/css">
        #employeeTable, #employeeTable tr,
        #employeeTable th, #employeeTable td {
          
          border: 1px gray solid;
          border-collapse: collapse;
          text-align: center;
        }
      </style>
      <script type="text/javascript" src="../javascript/jquery-3.5.1.min.js"></script>
      <script type="text/javascript">
        $(function () {
          
          // 创建一个用于复用的删除的 function 函数
          function deleteFun(){
          
            // 在事件响应的 function 函数中，有一个 this 对象。这个 this 对象是当前正在响应事件的 dom 对象。
            var tr = $(this).parent().parent();
            var name = tr.find("td:first").text();
            /**
             * confirm 是 JavaScript 语言提供的一个确认提示框函数。你给它传什么，
             * 它就提示什么<br/>
             *  当用户点击了确定，就返回 true。当用户点击了取消，就返回 false
             *
             */
            if(confirm("你确定要删除["+name+"]的信息吗！！！")){
          
              tr.remove();
            }
            return false;
          }
    
          // 给【Submit】按钮绑定单击事件
          $("#addEmpButton").click(function () {
          
    
            // 获取输入框，姓名，邮箱，工资的内容
            var name = $("#empName").val();
            var email = $("#email").val();
            var salary = $("#salary").val();
    
            // 创建一个行标签对象，添加到显示数据的表格中
            var tr = $("<tr>" +
                    "<td>" + name + "</td>" +
                    "<td>" + email + "</td>" +
                    "<td>" + salary + "</td>" +
                    "<td><a href=\"deleteEmp?id=001\">Delete</a></td>" +
                    "</tr>");
    
            // 添加到显示数据的表格中
            tr.appendTo($("#employeeTable"));
    
            // 给添加的行的 a 标签绑上事件
            tr.find($("a")).click(deleteFun);
          });
          // 给删除的 a 标签绑定单击事件
          $("a").click(deleteFun);
        });
      </script>
    </head>
    <body>
    <table id="employeeTable">
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Salary</th>
        <th> </th>
      </tr>
      <tr>
        <td>Tom</td>
        <td>tom@tom.com</td>
        <td>5000</td>
        <td><a href="deleteEmp?id=001">Delete</a></td>
      </tr>
      <tr>
        <td>Jerry</td>
        <td>jerry@sohu.com</td>
        <td>8000</td>
        <td><a href="deleteEmp?id=002">Delete</a></td>
      </tr>
      <tr>
        <td>Bob</td>
        <td>bob@tom.com</td>
        <td>10000</td>
        <td><a href="deleteEmp?id=003">Delete</a></td>
      </tr>
    </table>
    <div id="formDiv"><h4>添加新员工</h4>
      <table>
        <tr>
          <td class="word">name:</td>
          <td class="inp"><input type="text" name="empName" id="empName"/></td>
        </tr>
        <tr>
          <td class="word">email:</td>
          <td class="inp"><input type="text" name="email" id="email"/></td>
        </tr>
        <tr>
          <td class="word">salary:</td>
          <td class="inp"><input type="text" name="salary" id="salary"/></td>
        </tr>
        <tr>
          <td colspan="2" align="center">
            <button id="addEmpButton" value="abc"> Submit</button>
          </td>
        </tr>
      </table>
    </div>
    </body>
    </html>

![在这里插入图片描述][df541d8b33d14f379f18c0ff30e74836.gif_pic_center]

--------------------

# 8 CSS样式 #

![在这里插入图片描述][a356064df1a54be8b47c95bbab4d98fd.png]

--------------------

# 9 JQurey动画入门 #

## 9.1 基本动画方法 ##

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>show()</td> 
   <td>将隐藏的元素显示</td> 
  </tr> 
  <tr> 
   <td>hide()</td> 
   <td>将可见的元素隐藏</td> 
  </tr> 
  <tr> 
   <td>toggle()</td> 
   <td>可见就隐藏，不可见就显示淡入淡出动画</td> 
  </tr> 
  <tr> 
   <td>fadeIn()</td> 
   <td>淡入（慢慢可见）</td> 
  </tr> 
  <tr> 
   <td>fadeOut()</td> 
   <td>淡出（慢慢消失）</td> 
  </tr> 
  <tr> 
   <td>fadeToggle()</td> 
   <td>淡入/ 淡出 切换</td> 
  </tr> 
  <tr> 
   <td>fadeTo()</td> 
   <td>在指定时长内慢慢的将透明度修改到指定的值。0 透明， 1 完成可见， 0.5 半透明</td> 
  </tr> 
 </tbody> 
</table>

**以上动画方法（除了fadeTo）都可以添加参数：**

*  第一个参数是动画 执行的时长，以毫秒为单位
 *  第二个参数是动画的回调函数 (动画完成后自动调用的函数)

**对于fadeTo方法：**

*  第一个参数是动画 执行的时长，以毫秒为单位
 *  第二个参数设置透明度：0 透明，1 完成可见，0.5 半透明
 *  第三个参数是动画的回调函数 (动画完成后自动调用的函数)

## 9.2 案例演示 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <style>
            table,td {
          
                border: 1px solid;
                border-collapse: collapse;
            }
    
            span {
          
                background-color: #fb6;
                text-align: center;
                width: 100px;
                height: 50px;
                display: block;
            }
        </style>
        <script type="text/javascript" src="../javascript/jquery-3.5.1.min.js"></script>
        <script type="text/javascript">
            /*
                基本
                show([speed,[easing],[fn]])
                hide([speed,[easing],[fn]])
                toggle([speed],[easing],[fn])
                滑动
                slideDown([spe],[eas],[fn])
                slideUp([speed,[easing],[fn]])
                slideToggle([speed],[easing],[fn])
                淡入淡出
                fadeIn([speed],[eas],[fn])
                fadeOut([speed],[eas],[fn])
                fadeTo([[spe],opa,[eas],[fn]])
                fadeToggle([speed,[eas],[fn]])
                */
            $(function(){
          
                //显示   show()
                $("#btn1").click(function(){
          
                    $("#div1").show(1000);
                });
                //隐藏  hide()
                $("#btn2").click(function(){
          
                    $("#div1").hide(1000);
                });
                //切换   toggle()
                $("#btn3").click(toggle);
                function toggle() {
          
                    $("#div1").toggle(1000,toggle);
                };
    
                //淡入   fadeIn()
                $("#btn4").click(function(){
          
                    $("#div1").fadeIn(500);
                });
                //淡出  fadeOut()
                $("#btn5").click(function(){
          
                    $("#div1").fadeOut(500);
                });
    
                //淡化到  fadeTo()
                $("#btn6").click(function(){
          
                    $("#div1").fadeTo("slow",Math.random());
                });
                //淡化切换  fadeToggle()
                $("#btn7").click(function(){
          
                    $("#div1").fadeToggle("slow","linear");
                });
            })
        </script>
    
    </head>
    <body>
    <table style="float: left;">
        <tr>
            <td><button id="btn1">显示show()</button></td>
        </tr>
        <tr>
            <td><button id="btn2">隐藏hide()</button></td>
        </tr>
        <tr>
            <td><button id="btn3">显示/隐藏切换 toggle()</button></td>
        </tr>
        <tr>
            <td><button id="btn4">淡入fadeIn()</button></td>
        </tr>
        <tr>
            <td><button id="btn5">淡出fadeOut()</button></td>
        </tr>
        <tr>
            <td><button id="btn6">淡化到fadeTo()</button></td>
        </tr>
        <tr>
            <td><button id="btn7">淡化切换fadeToggle()</button></td>
        </tr>
    </table>
    
    <div id="div1" style="float:left;border: 1px solid;
    background-color: blue;width: 300px;height: 200px;">
        <font color="#f0ffff">jquery动画定义了很多种动画效果，可以很方便的使用这些动画效果</font>
    </div>
    </body>
    
    </html>

![在这里插入图片描述][5c47843955db4650be821866b51b7cfe.gif_pic_center]

--------------------

# 10 JQuery的事件操作 #

## 10.1 JQuery回顾：$(function()\{\})与window.onload的区别 ##

**触发的时间不同：**

> 1、 jQuery 的页面加载完成之后是浏览器的内核解析完页面的标签创建好 DOM 对象之后就会马上执行。  
> 2、原生 js 的页面加载完成之后，除了要等浏览器内核解析完标签创建好 DOM 对象，还要等标签显示时需要的内容加载完成。

**触发顺序的不同：**

> 1、 jQuery 页面加载完成之后先执行  
> 2、原生 js 的页面加载完成之后

**执行的次数的不同：**

> 1、原生 js 的页面加载完成之后，只会执行最后一次的赋值函数。  
> 2、 jQuery 的页面加载完成之后是全部把注册的 function 函数，依次顺序全部执行。

## 10.2 JQuery中的事件概览 ##

<table> 
 <thead> 
  <tr> 
   <th>事件类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>click()</td> 
   <td>它可以绑定单击事件，以及触发单击事件（事件都可以绑定和触发）</td> 
  </tr> 
  <tr> 
   <td>mouseover()</td> 
   <td>鼠标移入事件</td> 
  </tr> 
  <tr> 
   <td>mousemove()</td> 
   <td>鼠标移动事件</td> 
  </tr> 
  <tr> 
   <td>mouseout()</td> 
   <td>鼠标移出事件</td> 
  </tr> 
  <tr> 
   <td>bind()</td> 
   <td>可以给元素一次性绑定一个或多个事件。</td> 
  </tr> 
  <tr> 
   <td>one()</td> 
   <td>使用上跟 bind 一样。但是 one 方法绑定的事件只会响应一次。</td> 
  </tr> 
  <tr> 
   <td>unbind()</td> 
   <td>跟 bind 方法相反的操作，解除事件的绑定</td> 
  </tr> 
  <tr> 
   <td>live()</td> 
   <td>用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件， 哪怕这个元素是后面动态创建出来的也有效</td> 
  </tr> 
 </tbody> 
</table>

参考尚硅谷JavaWeb的案例，以下给出html的代码，之后的例子均为JQuery代码：

<body>
    <div id="panel">
        <h5 class="head">什么是jQuery?</h5>
        <div class="content">
            jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig
            创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，
            极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。
            它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
            <br/>
        </div>
        <button id="button">按钮</button>
    </div>
    </body>

## 10.3 事件的绑定与触发 ##

![在这里插入图片描述][29a5851c11434564978b311283ed7697.gif_pic_center]

## 10.4 bind事件处理 ##

## 10.5 one事件处理 ##

$(function () {
        
                //3.one()只绑定一次,绑定的事件只会发生一次one(type,[data],fn)
                //函数把元素和事件绑定起来
                //type表示要绑定的事件   [data]表示传入的数据   fn表示事件的处理方法
                 	$(".head").one("click mouseover",function(){
        
                        $(".content").toggle();
                    }); 
            });

## 10.6 unbind事件处理 ##

## 10.7 live事件处理 ##

## 10.8 事件的冒泡 ##

事件的冒泡是指：父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应。

**那么如何阻止事件冒泡呢？**  
在子元素事件函数体内，return false; 可以阻止事件的冒泡传递。

## 10.9 javaScript 事件对象 ##

事件对象，是封装有触发的事件信息的一个 javascript 对象。  
我们重点关心的是怎么拿到这个 javascript 的事件对象。以及使用。

**如何获取呢 javascript 事件对象呢？**

> 在给元素绑定事件的时候，在事件的 function( event ) 参数列表中添加一个参数，这个参数名，我们习惯取名为 event。 这个 event 就是javascript 传递参事件处理函数的事件对象。

1️⃣ **使用原生JS获取事件对象：**

2️⃣ **jQuery代码获取事件对象：**

$(function () {
        
                $("#button").click(function (event) {
        
                    console.log(event);
                });
     
            });

**示例：使用 bind 同时对多个事件绑定同一个函数。**  
调用event事件对象的属性

$(function () {
        
                $(".head").bind("mouseover mouseout",function (event) {
        
                    if (event.type == "mouseover") {
        
                        console.log("鼠标移入");
                    }else{
        
                        console.log("鼠标移出");
                    }
                });
            });

--------------------

# 写在最后 #

好了，本文内容到这里就告一段落了，下一节，将开始xml的学习，欢迎大家订阅专栏，加入学习！**[点击订阅][JavaWeb]**

如果你有任何问题，欢迎私信，感谢您的支持！  
![在这里插入图片描述][33ad3bfbfa084fe792cdcea04e64ede9.gif_pic_center]  
![在这里插入图片描述][ad16d93416c74666a97b046cb173134c.gif_pic_center]

[991b0bb8e38a44cab794825365213256.png_pic_center]: https://img-blog.csdnimg.cn/991b0bb8e38a44cab794825365213256.png#pic_center
[JavaWeb]: https://blog.csdn.net/m0_60353039/category_12029794.html
[c214224a62404f869bcf253249f70125.png_pic_center]: https://img-blog.csdnimg.cn/c214224a62404f869bcf253249f70125.png#pic_center
[9aec0f6a2914497981706a7ba1123251.png]: https://img-blog.csdnimg.cn/9aec0f6a2914497981706a7ba1123251.png
[3253fc499ad6484a96871ff7c182b511.png]: https://img-blog.csdnimg.cn/3253fc499ad6484a96871ff7c182b511.png
[JavaWeb jQuery]: https://blog.csdn.net/weixin_65637841/article/details/125881854
[963dba5251cd44249a67d8e4f3ec10fc.png]: https://img-blog.csdnimg.cn/963dba5251cd44249a67d8e4f3ec10fc.png
[76f40108968f4189ba1ddc5419445c1a.png]: https://img-blog.csdnimg.cn/76f40108968f4189ba1ddc5419445c1a.png
[3b9325efde2d45b4a6b2d4b4c789359b.png]: https://img-blog.csdnimg.cn/3b9325efde2d45b4a6b2d4b4c789359b.png
[15e3f81794b6476bb645cf84a48af497.gif_pic_center]: https://img-blog.csdnimg.cn/15e3f81794b6476bb645cf84a48af497.gif#pic_center
[df541d8b33d14f379f18c0ff30e74836.gif_pic_center]: https://img-blog.csdnimg.cn/df541d8b33d14f379f18c0ff30e74836.gif#pic_center
[a356064df1a54be8b47c95bbab4d98fd.png]: https://img-blog.csdnimg.cn/a356064df1a54be8b47c95bbab4d98fd.png
[5c47843955db4650be821866b51b7cfe.gif_pic_center]: https://img-blog.csdnimg.cn/5c47843955db4650be821866b51b7cfe.gif#pic_center
[29a5851c11434564978b311283ed7697.gif_pic_center]: https://img-blog.csdnimg.cn/29a5851c11434564978b311283ed7697.gif#pic_center
[33ad3bfbfa084fe792cdcea04e64ede9.gif_pic_center]: https://img-blog.csdnimg.cn/33ad3bfbfa084fe792cdcea04e64ede9.gif#pic_center
[ad16d93416c74666a97b046cb173134c.gif_pic_center]: https://img-blog.csdnimg.cn/ad16d93416c74666a97b046cb173134c.gif#pic_center