jQuery基础语法总结

系统管理员 2023-03-01 09:11 22阅读 0赞

# jQuery必知必会 #

**看完这篇可以看看博主的其他总结：**

**1. [MySQL超详细使用总结][MySQL]  
2. [HTML & CSS初学者必看][HTML _ CSS]**

### 文章目录 ###

*  jQuery必知必会
 *   *  一、jQuery介绍
     *  二、jQuery核心函数
     *  三、jQuery对象和DOM对象的联系与区别
     *   *  1.DOM对象
         *  2.jQuery对象
     *  四、jQuery选择器
     *   *  1. 基本选择器
         *  2. 层级选择器
         *  3. 基本过滤选择器
         *  4. 内容过滤选择器
         *  5. 属性过滤选择器
         *  6. 表单过滤选择器
     *  五、jQuery元素的筛选
     *  六、jQuery的属性操作
     *  七、DOM的增删改
     *   *  1. 内部插入
         *  2. 外部插入
         *  3. 替换
         *  4. 删除
     *  八、CSS样式操作
     *  九、jQuery动画
     *  十、jQuery事件操作
     *  十一、jQuery中其他的事件处理方法
     *  十二、事件的冒泡
     *  十三、事件对象
     *  十四、jQuery库和文档
     *   *  1.jQuery库
         *  2. jQuery文档

## 一、jQuery介绍 ##

jQuery = JavaScript + Query，是辅助JavaScript开发的类库，它的核心思想是写的更少，做的更多，注意：使用jQuery一定要先通过script标签的src属性引入jQuery库，jQuery库的获取方式在文章最后方

## 二、jQuery核心函数 ##

$是jQuery的核心函数，$()就是调用$这个函数

(1) 传入的参数为函数时，在HTML文档加载完成之后自动的执行这个函数

<head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
        
        <script type="text/javascript">
            $(function () { 
                alert("页面加载完成之后，自动调用");
            })
        </script>
    </head>

(2) 传入的参数为HTML语言时，创建标签对象(jQuery对象)

<head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(function () { 
                //动态创建一个div标签对象，并将其添加到body对象中
                $("<div>" +  //光标在第二个双引号之前时按回车会自动的加上+号
                    "<span>span1</span>" +
                    "<span>span2</span>" +
                    "</div>").appendTo("body");
            })
        </script>
    </head>

(3) 传入的参数为选择器字符串时：  
① $(“\#属性值”)；id选择器，根据id查询标签对象(jQuery对象)  
② $(“标签名”)；标签名选择器，根据指定的标签名查询标签对象(jQuery对象)  
③ $(“.属性值”)；类选择器，根据class属性值查询标签对象(jQuery对象)

<head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(function () { 
                alert($("#id001")); //[object Object]
                alert($(".class002")); //[object Object]
                alert($("button").length); //3
            })
        </script>
    </head>
    <body>
        <button id="001">button1</button>
        <button class="002">button2</button>
        <button>按钮名</button>
    </body>

(4) 传入的参数为DOM对象时，会把这个DOM对象转换为jQuery对象

<head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(function () { 
                var btnObj = document.getElementById("001");
                alert(btnObj); //[object HTMLButtonElement]
                alert($(btnObj)); //[object Object]
            })
        </script>
    </head>
    <body>
        <button id="001">button1</button>
    </body>

## 三、jQuery对象和DOM对象的联系与区别 ##

### 1.DOM对象 ###

(1) 通过getElement(s)Byxxx或createElement()得到的标签对象是DOM对象  
(2) DOM对象Alert出的效果是：\[object HTML标签名 Element\]

### 2.jQuery对象 ###

(1) 通过$函数创建的对象是jQuery对象，如二(2):

alert( $("<h1></h1>") ); //[object Object]

(2) 通过jQuery包装的DOM对象是jQuery对象，如二(4)  
(3) 通过$函数查询到的对象也是jQuery对象，如二(3)  
(4) jQuery对象Alert出的效果是：\[object Object\]

3.jQuery对象的本质  
jQuery对象是DOM对象的数组 + jQuery提供的一系列功能函数

4.jQuery对象不能使用DOM对象的属性和方法，DOM对象不能使用jQuery对象的属性和方法

5.DOM对象和jQuery对象的互相转换  
(1) DOM对象转换为jQuery对象：  
① 先有DOM对象  
② $(DOM对象)就可转换为jQuery对象

(2) jQuery对象转换为DOM对象：  
① 先有jQuery对象  
② jQuery对象\[下标\]即可取出对应的DOM对象  
![在这里插入图片描述][20200727114904552.png]  
6. jQuery对象的常用方法：  
(1) jQuery对象.click( function()\{\} )；添加点击响应函数  
(2) jQuery对象.css(“background-color”,“xxx”)；可设置背景颜色  
(3) jQuery对象.val()；可以获取、赋值表单项的value属性  
(4) jQuery对象.each(function()\{\})；遍历DOM对象数组的方法，function中写每次遍历到的对象要执行的方法，function中使用this代表当前遍历到的DOM对象

代码示例：

<head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(function () { 
                var btns = document.getElementsByTagName("button");
                //jQuery对象名之前习惯加$符号
                var $btns = $(btns);
                for (var i = 0; i < $btns.length; i++) { 
                    alert($btns[i]); //输出3个[object HTMLButtonElement]
                }
                $("#button01").click(function () { 
                    alert("Hello！"); //点击按钮之后出现Hello
                })
            })
        </script>
    </head>
    <body>
        <button id="button01">button1</button>
        <button>button2</button>
        <button>button3</button>
    </body>

## 四、jQuery选择器 ##

详细可参考jQuery文档，文档获取方式在文章末尾

### 1. 基本选择器 ###

\#id ：根据id查找标签对象  
element ：根据标签名查找标签对象  
.class ：根据class查找标签对象  
\*：查找所有元素的标签对象  
selector1，selector2…selectorN ：合并选择器1，选择器2…选择器N的标签对象并返回

### 2. 层级选择器 ###

ancestor descendant ：在给定的祖先元素下匹配所有的后代元素  
parent > child ：在给定的父元素下匹配所有的子元素  
prev + next ：在同级的情况下匹配所有紧接在prev元素后的next元素  
prev ~ siblings ：在同级的情况下匹配prev元素之后的所有siblings元素

### 3. 基本过滤选择器 ###

注意：标签名前置，即冒号之前为标签名  
:first ：获取匹配的第一个元素  
:last ：获取匹配的最后一个元素  
:not(selector) ：去除所有与给定选择器匹配的元素  
:even ：匹配所有索引值为偶数的元素，从0开始计数  
:odd ：匹配所有索引值为奇数的元素，从0开始计数  
:eq(index) ：匹配一个给定索引值的元素(索引从0开始计数)  
:gt(index) ：匹配所有大于给定索引值的元素(索引从0开始计数)  
:lt(index) ：匹配所有小于给定索引值的元素(索引从0开始计数)  
:header ：匹配如h1、h2、h3之类的标题元素  
:animated ：匹配所有正在执行动画效果的元素

### 4. 内容过滤选择器 ###

注意：标签名前置，即冒号之前为标签名  
:contains(text) ：匹配包含给定文本的元素  
:has(selector) ：匹配含有选择器所匹配的的元素的元素  
:empty ：匹配所有不包含子元素或文本的空元素  
:parent ：匹配含有子元素或文本的元素

### 5. 属性过滤选择器 ###

注意：标签名前置，即中括号之前为标签名  
\[attribute\] ：匹配包含给定属性的元素  
\[attribute = value\] ：匹配给定的属性是某个特定值的元素  
\[attribute != value\] ：匹配所有不含有指定的属性或属性不等于特定值的元素  
\[attribute^ = value\] ：匹配给定的属性是以某些值开始的元素  
\[attribute$ = value\] ：匹配给定的属性是以某些值结尾的元素  
\[attribute\* = value\] ：匹配给定的属性是以包含某些值的元素  
\[selector1\]\[selector2\]…\[selectorN\] ：复合属性选择器，需要满足多个条件时使用

### 6. 表单过滤选择器 ###

:input ：匹配所有input标签元素，不论type为哪种类型  
:text \\ :password \\ :radio \\ :checkbox \\ :submit \\ :image \\ :reset \\ :button \\ :file \\ :hidden ：  
匹配所有input标签中type为指定类型的元素  
:enabled ：匹配所有可用元素(disabled属性设置为disabled为不可用：无法填入内容或选中)  
:disabled ：匹配所有不可用元素  
:checked ：匹配所有被选中的元素(复选框、单选框等，不包括select中的option)  
:selected ：匹配所有选中的option元素

## 五、jQuery元素的筛选 ##

详细可参考jQuery文档，文档获取方式在文章末尾  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTM0MzE5MA_size_16_color_FFFFFF_t_70]

## 六、jQuery的属性操作 ##

1.html()方法：可以设置和获取起始标签和结束标签中的内容(包括两边的标签)  
2. text()方法：可以设置和获取起始标签和结束标签中的文本(不包括两边的标签)  
3. val()方法：可以设置和获取表单项的value属性值

代码示例：

<head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(function () { 
                /*不传参数是获取，传递参数是设置*/
                alert($("div").html()); // div标签 <span>div - span</span>
                $("div").html("<h1>新设置的内容</h1>");
                //成功修改为：新设置的内容
                alert($("div").text()); // div标签 div - span
                $("div").text("<h1>新设置的内容</h1>");
                //成功修改为：<h1>新设置的内容</h1>
                $("button").click(function () { 
                    $("#textId").val("新设置的默认值");
                })
                //点击之后文本框中出现：新设置的默认值
            })
        </script>					
    </head>
    <body>
        <div> div标签 <span>div - span</span></div>
        <input type="text" name="textName" id="textId"/>
        <button>点击</button>
    </body>

运行结果：  
![在这里插入图片描述][20200727115142216.png]

代码示例：val()方法可同时设置多个表单项的选中状态

<head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(function () { 
                $(":radio").val(["radio1"]); //radio1被选中
                //val方法内写中括号，其中再写双引号，把要选中的项的value值写入
                $(":checkbox").val(["checkbox3", "checkbox2"]);//两个被选中
                //多个只写一个中括号，多个双引号
                $("#multiple").val(["mul2", "mul4"]);//两个被选中
                $("#single").val(["sin2"]);//2被选中
            })
        </script>
    </head>
    <body>
        单选：
        <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 id="multiple" multiple="multiple" size="3">
            <option value="mul1">mul1</option>
            <option value="mul2">mul2</option>
            <option value="mul3">mul3</option>
            <option value="mul4">mul4</option>
        </select>
        <br/>
        下拉单选 ：
        <select id="single">				
            <option value="sin1">sin1</option>
            <option value="sin2">sin2</option>
            <option value="sin3">sin3</option>
        </select>
    </body>

运行结果：  
![在这里插入图片描述][20200727115201217.png]  
4. attr()方法：可以设置和获取属性的值，不推荐操作checked、selected、disabled、readOnly，还可 以操作自定义属性。  
5. prop()方法：可以设置和获取属性的值，只推荐操作checked、selected、disabled、readOnly

代码示例：

<head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(function () { 
                //attr获取的使用：括号中的双引号中放属性名
                alert($(":checkbox:first").attr("name")); //checkbox
                //attr赋值的使用：第一个双引号中放属性名，第二个双引号中放指定的值
                $(":checkbox:first").attr("name","abc"); //name属性值修改为abc
                $(":checkbox").prop("checked",false); //两个都未被选中
                //对自定义属性进行操作
                $(":checkbox:first").attr("abc","abcValue");
                //按F12可出现，临时存放一些数据
            })
        </script>
    </head>
    <body>
        <input type="checkbox" name="checkbox" value="checkbox1" checked="checked"/>checkbox1
        <input type="checkbox" name="checkbox" value="checkbox2"/>checkbox2
        <div>1234</div>
        <div>1234</div>
    </body>

运行结果：  
![在这里插入图片描述][20200727115252903.png]  
代码示例：全选、全不选、反选

<head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(function () { 					    
                //点击全选按钮之后，四个选项以及全选全部选中
                $("#checkedAllBtn").click(function () { 
                    $(":checkbox").prop("checked",true);
                })
                //点击全不选按钮之后，四个选项以及全不选都不选中
                $("#checkedNoBtn").click(function () { 
                    $(":checkbox").prop("checked",false);
                })
                //点击反选后，四个选项反选，还需判断全选是否需要选中
                $("#checkedRevBtn").click(function () { 
                    //遍历所有的选项，反选
                    $(":checkbox[name='items']").each(function () { 
                        this.checked = !this.checked;
                    })
                    //判断选项中已经选择的选项的个数是否与整个选项个数相同
                    var allCout = $(":checkbox[name='items']").length;
                    var checkedCount = $(":checkbox[name='items']:checked").length;
                    $("#checkedAllBox").prop("checked", allCout == checkedCount);
                })
                //点击提交之后，alert出所有选中项
                $("#submitBtn").click(function () { 
                    $(":checkbox[name='items']:checked").each(function () { 
                        alert(this.value);
                    })
                })
                //点击全选/全不选之后，对选项全选中或全不选中
                $("#checkedAllBox").click(function () { 
                    //在事件的function函数中，有一个this对象，是当前正在响应事件(标签)的DOM对象
                    //将全选全不选框的是否选中状态赋值给所有的选项
                    $(":checkbox[name='items']").prop("checked", this.checked);
                })
                //当手动的将所有选项选中时，全选需要被选中
                /*思路：给每个选项绑定单击事件，每选中一个选项时， 都要判断此时选中的选项个数是否与整个选项个数相同*/
                $(":checkbox[name='items']").click(function () { 
                    var allCount = $(":checkbox[name='items']").length;
                    var checkedCount = $(":checkbox[name='items']: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="submitBtn" value="提交"/>
        </form>
    </body>

运行结果：  
![在这里插入图片描述][20200727115454482.png]

## 七、DOM的增删改 ##

以下代码示例中body中的代码如下，并已引入jQuery库

### 1. 内部插入 ###

appendTo()：a.appendTo(b) 把a插入到所有b子元素的末尾，成为最后一个子元素  
prependTo()：a.prependTo(b) 把a插入到所有b子元素的前面，成为第一个子元素

//方法中的参数可以是标签名，也可以是标签对象(jQuery对象)
    $("<h1>标题1</h1>").appendTo("div");
    $("<h2>标题2</h2>").prependTo($("div"));

运行结果：  
![在这里插入图片描述][20200727115619351.png]  
源码：  
![在这里插入图片描述][20200727115628683.png]

### 2. 外部插入 ###

insertAfter()：a.insertAfter(b) 同级的情况下得到ba  
insertBefore()：a.insertBefore(b) 同级的情况下得到ab

$("<h1>标题1</h1>").insertAfter($("div"));
    $("<h2>标题2</h2>").insertBefore($("div"));

运行结果为上一个文本框结果，源码：  
![在这里插入图片描述][20200727115651564.png]

### 3. 替换 ###

replaceWith()：a.replaceWith(b) 用一个b替换掉所有a  
replaceAll()：a.replaceAll(b) 用a替换掉所有b(有几个b就替换几次)

$("div").replaceWith($("<h1>标题1</h1>"));

运行结果：  
![在这里插入图片描述][20200727115710373.png]  
源码：  
![在这里插入图片描述][20200727115725550.png]

$("<h1>标题1</h1>").replaceAll($("div"));

运行结果：  
![在这里插入图片描述][20200727115757996.png]  
源码：  
![在这里插入图片描述][20200727115804962.png]

### 4. 删除 ###

remove()：a.remove() 删除a标签及其所有内容(包括文字或子标签等)  
empty()：a.empty() 清空a标签的内容(包括文字或子标签等)，标签留下

代码示例：两个复选框的内容从左到右、从右到左的练习

<head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            select { 
                width: 100px;
                height: 140px;
            }
            div { 
                width: 130px;
                float: left;
                text-align: center;
            }
        </style>
        <script type="text/javascript" src="jquery-1.7.2.js"></script>
        <script type="text/javascript">
            //给四个按钮赋予相应的功能
            $(function () { 
                //全部添加到右边
                $("button:eq(1)").click(function () { 
                    $("select:eq(0) option").appendTo($("select:eq(1)"));
                    //空格代表所有的select的子元素
                })
                //选中添加到右边
                $("button:eq(0)").click(function () { 
                    $("select:eq(0) option:selected").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="right">
        <select multiple="multiple" name="sel02">
        </select>
        <button>选中删除到左边</button>
        <button>全部删除到左边</button>
    </div>
    </body>

运行结果：  
![在这里插入图片描述][20200727115851655.png]  
代码示例：动态添加、删除表格记录

<head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(function () { 
                //要求点击第一张表的删除键(a标签)可删除信息(在提示框中出现：是否删除'name'字样)
                //创建一个可复用的删除函数deleteFun
                var deleteFun = function(){ 
                    //在事件响应的function函数中，有一个this对象，这个this对象是当前标签的DOM对象
                    var $trObj = $(this).parent().parent();/*a标签的父之父是行标签*/
                    //find方法用来查找后代(查找行标签的name)
                    var name = $trObj.find("td:first").text();
                    //confirm是JS提供的确认框函数，接收的参数将提示出来，
                    //点击确定返回true，点击取消返回false
                    if (confirm("你确定要删除["+name+"]吗？")) { 
                        $trObj.remove();
                    }
                    //return false;可以阻止元素的默认行为(a标签默认会跳转)
                    return false;
                };
                //给submit按钮绑定单击事件，可以添加到第一张表中
                $("#addEmpButton").click(function () { 
                    //获取姓名、邮箱、工资的内容
                    var name = $("#empName").val();
                    var email = $("#email").val();
                    var salary = $("#salary").val();
                    //创建一个行标签，将获取到的内容添加到第一张表中
                    var $trObj = $("<tr>" +
                        "<td>"+name+"</td>" +
                        "<td>"+email+"</td>" +
                        "<td>"+salary+"</td>" +
                        "<td><a href=\"deleteEmp?id=002\">Delete</a></td>" +
                        "</tr>");
                    //将获得的行标签添加到第一张表中
                    $trObj.appendTo($("#employeeTable"));
                    //需要给新添加的数据中的a标签(删除键)绑定单击事件
                    //如果函数加括号，代表调用，结果是返回值
                    //如果函数不加括号，可省略function(){}，作用一致
                    $trObj.find("a").click(deleteFun);
                });
                $("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>

运行结果：  
![在这里插入图片描述][20200727115914762.png]

## 八、CSS样式操作 ##

addClass()：添加样式  
removeClass()：删除样式  
toggleClass()：有则删除，无则添加样式  
offset()：获取和设置元素的坐标，设置时必须有两个属性top和left  
设置时的格式：jQuery对象.offset(\{top:值，left:值\})；

## 九、jQuery动画 ##

以下动画方法都可以添加参数：

1.  第一个参数是动画执行的时长，以毫秒为单位
2.  第二个参数是回调函数：function()\{\}，即动画完成之后自动执行的函数  
    show()：将隐藏的元素显示  
    hide()：将显示的元素隐藏  
    toggle()：显示则隐藏，隐藏则显示  
    fadeIn：淡入  
    fadeOut()：淡出  
    fadeToggle()：淡入/淡出切换  
    fadeTo()：在指定时长内将透明度修改到指定的值，0代表透明，1代表可见，0.5代表半透明  
    第一个参数指定时长(ms)，第个参数设置透明度，第三个参数设置回调函数

## 十、jQuery事件操作 ##

$(function()\{\});和window.onload = function()\{\};的区别：  
①触发时间：

1.  jQuery是浏览器的内核解析完页面的标签(如body中的标签)，创建好DOM对象之后就会 立马执行，此时页面上没有任何内容
2.  JS是浏览器的内核解析完标签创建好DOM对象之后等标签显示时的内容(如图片，网页 等)加载完成之后执行，此时页面上已经有body中的内容

②触发顺序：jQuery先、JS后  
③各有多个时执行的次数：

1.  jQuery所有function函数都会按照顺序执行
2.  JS只会执行最后一个function函数

## 十一、jQuery中其他的事件处理方法 ##

click()：可以绑定单击事件(参数中传function()\{\})，可以触发单击事件(参数中无function)  
mouseover()：鼠标移入事件  
mouseout()：鼠标移出事件  
bind()：可以给元素一次性绑定一个或多个事件，第一个参数加双引号，其中放空格隔开的多个  
事件，第二个参数是function()\{\}，即事件响应后的代码  
one()：用法与bind一致，但是one方法绑定的事件只会响应一次  
unbind()：与bind方法相反的操作，解除事件的绑定  
live()：用来绑定事件，即使这个元素先前并未绑定，而是后面动态创建出来的也自动绑定

## 十二、事件的冒泡 ##

1.  事件的冒泡是指父子元素绑定同一个事件时，当触发子元素的事件时，父元素的同一个事件也  
    随之自动的响应，如：  
    ![在这里插入图片描述][2020072712010357.png]
2.  阻止事件的冒泡发生：在子元素的事件函数体内return false;

## 十三、事件对象 ##

1.  事件对象：包含触发的事件的所有信息的一个对象
2.  获取事件对象的方式：在给元素绑定事件时函数格式为function(event)\{\}，参数中的名字可任意，一般取名为event，这个event就是事件对象  
    ![在这里插入图片描述][20200727120125181.png]![在这里插入图片描述][20200727120130826.png]  
    ![在这里插入图片描述][20200727120138394.png]  
    代码示例：图片跟随

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
       $(function(){ 
          $("#small").bind("mouseover mouseout mousemove",function (event) { 
             if (event.type == "mouseover") { 
                $("#showBig").show();
             } else if (event.type == "mousemove") { 
                console.log(event);
                $("#showBig").offset({ 
                   //将大图的坐标跟随鼠标的坐标即可实现大图随着鼠标移动
                   //pageX、pageY为鼠标在页面上的坐标
                   //+10的原因是让大图与鼠标保持一定的距离
                   /*原因是从小图左上角向右下角滑动时，鼠标滑动过快会导致 光标在大图上，无法识别在小图上移动，故保持一定距离*/
                   left: event.pageX + 10,
                   top: event.pageY + 10
                });
             } else if (event.type == "mouseout") { 
                $("#showBig").hide();			
             }
          });
       });
    </script>
    </head>
    <body>
       
       <img id="small" src="img/small.jpg" />
       
       <div id="showBig">
          <img src="img/big.jpg">
       </div>
    </body>
    </html>

运行结果：  
![在这里插入图片描述][20200727120349913.png]

## 十四、jQuery库和文档 ##

### 1.jQuery库 ###

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

### 2. jQuery文档 ###

![在这里插入图片描述][20200727121336756.png]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTM0MzE5MA_size_16_color_FFFFFF_t_70 1]  
***私聊我即可获得jQuery库和对应的文档~~***

**总结不易，觉得不错的话点个赞关注一下，后续会持续更新Java后端知识点的总结~~**

[MySQL]: https://blog.csdn.net/weixin_49343190/article/details/107313699
[HTML _ CSS]: https://blog.csdn.net/weixin_49343190/article/details/107314236
[20200727114904552.png]: /images/20230209/e43de58e5b03482eb4139d1c0adf8111.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTM0MzE5MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200727115040212.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTM0MzE5MA==,size_16,color_FFFFFF,t_70
[20200727115142216.png]: https://img-blog.csdnimg.cn/20200727115142216.png
[20200727115201217.png]: https://img-blog.csdnimg.cn/20200727115201217.png
[20200727115252903.png]: https://img-blog.csdnimg.cn/20200727115252903.png
[20200727115454482.png]: https://img-blog.csdnimg.cn/20200727115454482.png
[20200727115619351.png]: https://img-blog.csdnimg.cn/20200727115619351.png
[20200727115628683.png]: https://img-blog.csdnimg.cn/20200727115628683.png
[20200727115651564.png]: https://img-blog.csdnimg.cn/20200727115651564.png
[20200727115710373.png]: https://img-blog.csdnimg.cn/20200727115710373.png
[20200727115725550.png]: https://img-blog.csdnimg.cn/20200727115725550.png
[20200727115757996.png]: https://img-blog.csdnimg.cn/20200727115757996.png
[20200727115804962.png]: https://img-blog.csdnimg.cn/20200727115804962.png
[20200727115851655.png]: https://img-blog.csdnimg.cn/20200727115851655.png
[20200727115914762.png]: https://img-blog.csdnimg.cn/20200727115914762.png
[2020072712010357.png]: https://img-blog.csdnimg.cn/2020072712010357.png
[20200727120125181.png]: https://img-blog.csdnimg.cn/20200727120125181.png
[20200727120130826.png]: https://img-blog.csdnimg.cn/20200727120130826.png
[20200727120138394.png]: https://img-blog.csdnimg.cn/20200727120138394.png
[20200727120349913.png]: https://img-blog.csdnimg.cn/20200727120349913.png
[20200727121245444.png]: https://img-blog.csdnimg.cn/20200727121245444.png
[20200727121336756.png]: https://img-blog.csdnimg.cn/20200727121336756.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTM0MzE5MA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200727121357684.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTM0MzE5MA==,size_16,color_FFFFFF,t_70