Java Web 从入门到退坑 —— 第四章 jQuery
By -gregPerlinLi-
1. jQuery 介绍
什么是 jQuery？
顾名思义，也就是 JavaScript 和查询（Query），它就是辅助 JavaScript 开发的 js 类库。
jQuery 核心思想
它的核心是 **Write less to more**（写的更少，做的更多），所以它实现了很多浏览器的兼容问题
jQuery 流行程度
jQuery 现在已经成为最流行的 JavaScript 库，在世界前10000个访问最多的网站中，有超过 55% 在使用 jQuery
jQuery 的好处
jQuery 是免费、开源的，jQuery的语法设计可以使开发更便捷，例如操作文档对象、选择 DOM 元素、制作动画效果、事件处理、使用 AJAX 以及其他功能
2. jQuery 的初体验
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello world!</title>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function () { // indicates that after the page is loaded, amount to onload event
var $btnObj = $("#btnId"); // Represents a query for label objects by ID
$btnObj.click(function () { // Register click events
alert("jQuery onclick event");
});
});
</script>
</head>
<body>
<button id="btnId">SayHelloWorld</button>
</body>
</html>
常见问题：
1. 使用 jQuery 一定要引入 jQuery 库
2. jQuery 中的 $ 是一个函数
3. 怎么为按钮添加响应函数？
1. 使用 jQuery 查询标签对象
2. 使用 obj.click( function() {} );
3. jQuery 核心函数
$ 是 jQuery 的核心函数，能完成 jQuery 的很多功能，$() 就是调用 $ 这个函数
1. 传入参数为 [函数] 时：
表示页面加载完成后，相当于 window.onload = function() {}
2. 传入参数为 [HTML 字符串] 时：
会创建这个 HTML 标签对象
3. 传入参数为 [选择器字符串] 时：
$("#id propertyValue"); id 选择器，根据 id 查询标签对象
$("tagName"); 标签名选择器，根据指定的标签名查询标签对象
$(".class propertyValue") 类型选择器，可以根据 class 属性标签查询对象
4. 传入参数为 [DOM 对象] 时：
会把这个 dom 对象转化为 jQuery 对象
4. jQuery 对象和 dom 对象区分
4.1. 什么是 jQuery 对象，什么是 dom 对象
DOM 对象
1. 通过 getElementById() 查询出来的标签就是 DOM 对象
2. 通过 getElementByName() 查询出来的标签就是 DOM 对象
3. 通过 getElementByTagName() 查询出来的标签就是 DOM 对象
4. 通过 createElement() 方法创建的对象，是 DOM 对象
5. DOM 对象 alert 出来的效果为：[object HTMLTagNamelement]
jQuery 对象
1. 通过 jQuery 提供的 API 创建的对象，是 jQuery 对象
2. 通过 jQuery 包装的DOM 对象，也是 jQuery 对象
3. 通过 jQuery 提供的 API 查询到的对象，是 jQuery 对象
4. jQuery 对象 alert 出来的效果为：[object Object]
4.2. jQuery 对象的本质
jQuery 对象是 DOM 对象的数组 + jQuery 提供的一系列功能函数
4.3. jQuery 对象和 DOM 对象使用区别
jQuery 对象不能使用 DOM 对象的属性和方法
DOM 对象也不能使用 jQuery 对象的属性和方法
4.4. DOM 对象和 jQuery 对象互转（重点）
4.4.1. DOM 对象转化为 jQuery 对象
1. 先有 DOM 对象
2. $( DOMObject ) 就可以转换为 jQuery 对象
4.4.2. jQuery 对象转化为 DOM 对象
1. 先有 jQuery 对象
2. jQueryObject[subscript] 即可取出相对应地 DOM 对象
5. jQuery 选择器（重点）
5.1. 基本选择器（重点）
#ID 选择器：根据 id 查找标签对象
.class 选择器：根据 class 查找标签对象
element 选择器：根据标签名查找标签对象
* 选择器：表示任意的，所有的元素
selector1, selector2 组合选择器：合并选择器1，2的结果并返回
特殊情况：
p.myClass
表示标签名必须是 p 标签，而且 class 类型还是 myClass
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Basic selector</title>
<style type="text/css">
body {
font-family: Futura, "PingFang SC", Arial, sans-serif;
font-size: 20px;
}
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
button {
font-family: Futura, Arial, sans-serif;
}
</style>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function () {
// 1. Select the element with ID one
$("#btn1").click(function () {
// css method can get and set the styles
$("#one").css("background-color", "#bbffaa");
});
// 2. Select all the elements with class mini
$("#btn2").click(function () {
$(".mini").css("background-color", "#fffeaa");
});
// 3. Select all the elements with tag name div
$("#btn3").click(function () {
$("div").css("background-color", "#ffaaaa");
});
// 4. Select all the elements
$("#btn4").click(function () {
$("*").css("background-color", "#e6aaff");
});
// 5. Select all the element with ID two and tag name is span
$("#btn5").click(function () {
$("#two, span").css("background-color", "#aac2ff");
});
})
</script>
</head>
<body>
<input type="button" value="Select the element with ID one" id="btn1"/>
<input type="button" value="Select all the elements with class mini" id="btn2"/>
<input type="button" value="Select all the elements with tag name div" id="btn3"/>
<input type="button" value="Select all the elements" id="btn4"/>
<input type="button" value="Select all the element with ID two and tag name is span" id="btn5"/>
<br/>
<div class="one" id="one">
a div with ID one, class one
<div class="mini">a mini class</div>
</div>
<div class="one" id="two" title="test">
a div with ID two, class one, title test
<div class="mini" title="other">class mini, title other</div>
<div class="mini" title="test">class mini, title test</div>
</div>
<div class="one">
<div class="mini">class mini</div>
<div class="mini">class mini</div>
<div class="mini">class mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class mini</div>
<div class="mini">class mini</div>
<div class="mini">class mini</div>
<div class="mini" title="test">class mini, title test</div>
</div>
<div style="display: none" class="none">a div with none display of style</div>
<div class="hide">a div with class hide</div>
<div>
a div contain hidden type of input<input type="hidden" size="8">
</div>
<span class="one" id="span">^^span element^^</span>
</body>
</html>
5.2. 层级选择器（重点）
ancestor descendant 后代选择器：在给定的祖先元素下匹配所有的后代元素
parent > child 子元素选择器：在给定的元素下匹配所有的子元素
prev + next 相邻元素选择器：匹配所有紧挨在 prev 元素后的 next 元素
prev ~ sibings 之后的兄弟元素选择器：匹配 prev 元素之后的所有 siblings 元素
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Level sector</title>
<style type="text/css">
body {
font-family: Futura, "PingFang SC", Arial, sans-serif;
font-size: 20px;
}
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
button {
font-family: Futura, Arial, sans-serif;
}
</style>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// 1. Select all the div element in the body
$("#btn1").click(function () {
$("body div").css("background-color", "#bbffaa");
});
// 2. Select all the subelement in the body
$("#btn2").click(function () {
$("body > div").css("background-color", "#fffeaa");
});
// 3. Select the next div elements of the ID one
$("#btn3").click(function () {
$("#one + div").css("background-color", "#ffaaaa");
});
// 4. Select all the brother div element next to the element with ID two
$("#btn4").click(function () {
$("#two ~ div").css("background-color", "#e6aaff");
});
})
</script>
</head>
<body>
<input type="button" value="Select all the div element in the body" id="btn1"/>
<input type="button" value="Select all the subelement in the body" id="btn2"/>
<input type="button" value="Select the next div elements of the ID one" id="btn3"/>
<input type="button" value="Select all the brother div element next to the element with ID two" id="btn4"/>
<br/>
<div class="one" id="one">
a div with ID one, class one
<div class="mini">a mini class</div>
</div>
<div class="one" id="two" title="test">
a div with ID two, class one, title test
<div class="mini" title="other">class mini, title other</div>
<div class="mini" title="test">class mini, title test</div>
</div>
<div class="one">
<div class="mini">class mini</div>
<div class="mini">class mini</div>
<div class="mini">class mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class mini</div>
<div class="mini">class mini</div>
<div class="mini">class mini</div>
<div class="mini" title="test">class mini, title test</div>
</div>
<div style="display: none" class="none">a div with none display of style</div>
<div class="hide">a div with class hide</div>
<div>
a div contain hidden type of input<input type="hidden" size="8">
</div>
<span class="one" id="span">^^span element^^</span>
</body>
</html>
5.3. 过滤选择器
5.3.1. 基本过滤器
:first 获取第一个元素
:last 获取最后一个元素
:not(selector) 去除所有给定选择器
:even 匹配所有索引值为偶数的元素，从0开始计数
:odd 匹配所有索引值为奇数的元素，从0开始计数
:eq(index) 匹配一个给定索引值的元素，从0开始计数
:gt(index) 匹配所有大于给定索引值的元素，从0开始计数
:lt(index) 匹配所有小于给定索引值的元素，从0开始计数
:header 匹配如 h1，h2，h3 之类的标题元素
:animated 匹配所有正在执行动画效果的元素
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Basic filter</title>
<style type="text/css">
body {
font-family: Futura, "PingFang SC", Arial, sans-serif;
font-size: 20px;
}
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
button {
font-family: Futura, Arial, sans-serif;
}
</style>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
function animateIt() {
$("#mover").slideToggle("slow", animateIt);
}
animateIt();
});
$(document).ready(function () {
// 1. Select the first div element
$("#btn1").click(function () {
$("div:first").css("background", "#bbffaa");
});
// 2. Select the last div element
$("#btn2").click(function () {
$("div:last").css("background", "#fffeaa");
});
// 3. Select all div elements whose class is not one
$("#btn3").click(function () {
$("div:not(.one)").css("background", "#ffaaaa");
});
// 4. Select div elements with even index values
$("#btn4").click(function () {
$("div:even").css("background", "#e6aaff");
});
// 5. Select div elements with odd index values
$("#btn5").click(function () {
$("div:odd").css("background", "#aac2ff");
});
// 6. Select div elements with index values greater than 3
$("#btn6").click(function () {
$("div:gt(3)").css("background", "#aafff5");
});
// 7. Select div elements with index values lower than 3
$("#btn7").click(function () {
$("div:lt(3)").css("background", "#dd7d3e");
});
// 8. Select div elements with index values equal to 3
$("#btn8").click(function () {
$("div:eq(3)").css("background", "#ffaad6");
});
// 9. Select all title elements
$("#btn9").click(function () {
$(":header").css("background", "#33f180");
});
// 10. Select all elements that are currently animated
$("#btn10").click(function () {
$("div:animated").css("background", "#d91414");
});
// 11. Select all elements that are not animated
$("#btn11").click(function () {
$("div:not(div:animated):last").css("background", "#db198d");
});
});
</script>
</head>
<body>
<input type="button" value="Select the first div element" id="btn1"/>
<input type="button" value="Select the last div element" id="btn2"/>
<input type="button" value="Select all div elements whose class is not one" id="btn3"/>
<input type="button" value="Select div elements with even index values" id="btn4"/>
<input type="button" value="Select div elements with odd index values" id="btn5"/>
<input type="button" value="Select div elements with index values greater than 3" id="btn6"/>
<input type="button" value="Select div elements with index values lower than 3" id="btn7"/>
<input type="button" value="Select div elements with index values equal to 3" id="btn8"/>
<input type="button" value="Select all title elements" id="btn9"/>
<input type="button" value="Select all elements that are currently animated" id="btn10"/>
<input type="button" value="Select all elements that are not animated" id="btn11"/>
<h3>Basic selector</h3>
<br/>
<div class="one" id="one">
a div with ID one, class one
<div class="mini">a mini class</div>
</div>
<div class="one" id="two" title="test">
a div with ID two, class one, title test
<div class="mini" title="other">class mini, title other</div>
<div class="mini" title="test">class mini, title test</div>
</div>
<div class="one">
<div class="mini">class mini</div>
<div class="mini">class mini</div>
<div class="mini">class mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class mini</div>
<div class="mini">class mini</div>
<div class="mini">class mini</div>
<div class="mini" title="test">class mini, title test</div>
</div>
<div style="display: none" class="none">a div with none display of style</div>
<div class="hide">a div with class hide</div>
<div>
a div contain hidden type of input<input type="hidden" size="8">
</div>
<div class="one" id="mover">a div element executing animation</div>
</body>
</html>
5.3.2. 内容过滤器
:contains(text) 匹配包含给定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:parent 匹配含有子元素或者文本的元素
:has(selector) 匹配含有选择器所匹配的元素的元素
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Content filter</title>
<style type="text/css">
body {
font-family: Futura, "PingFang SC", Arial, sans-serif;
font-size: 20px;
}
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
button {
font-family: Futura, Arial, sans-serif;
}
</style>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
function animateIt() {
$("#mover").slideToggle("slow", animateIt);
}
animateIt();
});
$(document).ready(function () {
// 1. Select the div element that contains the text "di"
$("#btn1").click(function () {
$("div:contains('di')").css("background", "#bbffaa");
});
// 2. Select div elements that do not contain child elements (or text elements)
$("#btn2").click(function () {
$("div:empty").css("background", "#fffeaa");
});
// 3. Select the div element with class mini
$("#btn3").click(function () {
$("div:has(.mini)").css("background", "#ffaaaa");
});
// 4. Select the div element that contains child elements (or text elements)
$("#btn4").click(function () {
$("div:parent").css("background", "#e6aaff");
});
});
</script>
</head>
<body>
<input type="button" value="Select the div element that contains the text "di"" id="btn1"/>
<input type="button" value="Select div elements that do not contain child elements (or text elements)" id="btn2"/>
<input type="button" value="Select the div element with class mini" id="btn3"/>
<input type="button" value="Select the div element that contains child elements (or text elements)" id="btn4"/>
<br/>
<div class="one" id="one">
a div with ID one, class one
<div class="mini">a mini class</div>
</div>
<div class="one" id="two" title="test">
a div with ID two, class one, title test
<div class="mini" title="other">class mini, title other</div>
<div class="mini" title="test">class mini, title test</div>
</div>
<div class="one">
<div class="mini">class mini</div>
<div class="mini">class mini</div>
<div class="mini">class mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class mini</div>
<div class="mini">class mini</div>
<div class="mini">class mini</div>
<div class="mini" title="test">class mini, title test</div>
</div>
<div style="display: none" class="none">a div with none display of style</div>
<div class="hide">a div with class hide</div>
<div>
a div contain hidden type of input<input type="hidden" size="8">
</div>
<div class="one" id="mover">a div element executing animation</div>
</body>
</html>
5.3.3. 属性过滤器
[attribute] 匹配包含给定属性的元素
[attribute = value] 匹配给定的属性是某个特定值的元素
[attribute != value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
[attribute ^= value] 匹配给定的属性是以某些值开始的元素
[attribute $= value] 匹配给定的属性是以某些值结尾的元素
[attribute *= value] 匹配给定的属性是以包含某些值的元素
[attrSel1][attrSel2][sttrSelN] 复合属性选择器，需要同时满足多个条件时使用
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Attribute filter</title>
<style type="text/css">
body {
font-family: Futura, "PingFang SC", Arial, sans-serif;
font-size: 20px;
}
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
button {
font-family: Futura, Arial, sans-serif;
}
</style>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
function animateIt() {
$("#mover").slideToggle("slow", animateIt);
}
animateIt();
});
$(document).ready(function () {
// 1. Select the div element with the attribute title
$("#btn1").click(function () {
$("div[title]").css("background", "#bbffaa");
});
// 2. Select the div element whose attribute title value is equal to "test"
$("#btn2").click(function () {
$("div[title = 'test']").css("background", "#fffeaa");
});
// 3. Select the div element whose attribute title value is not equal to "test" (*Those without the property title will also be selected)
$("#btn3").click(function () {
$("div[title != 'test']").css("background", "#ffaaaa");
});
// 4. Select the div element whose attribute title value begins with "te"
$("#btn4").click(function () {
$("div[title ^= 'te']").css("background", "#e6aaff");
});
// 5. Select the div element whose attribute title value ends with "est"
$("#btn5").click(function () {
$("div[title $= 'est']").css("background", "#aac2ff");
});
// 6. Select the div element whose attribute title value contains "es"
$("#btn6").click(function () {
$("div[title *= 'es']").css("background", "#aafff5");
});
// 7. Firstly, select the div element with attribute ID, and then select the div element with attribute title value containing "es" in the result
$("#btn7").click(function () {
$("div[id][title *= 'es']").css("background", "#dd7d3e");
});
// 8. Select the div element with the title attribute value and the title attribute is not equal to test
$("#btn8").click(function () {
$("div[title][title != 'test']").css("background", "#ffaad6");
});
});
</script>
</head>
<body>
<input type="button" value="Select the div element with the attribute title" id="btn1"/>
<input type="button" value="Select the div element whose attribute title value is equal to "test"" id="btn2"/>
<input type="button" value="Select the div element whose attribute title value is not equal to "test" (*Those without the property title will also be selected)" id="btn3"/>
<input type="button" value="Select the div element whose attribute title value begins with "te"" id="btn4"/>
<input type="button" value="Select the div element whose attribute title value ends with "est"" id="btn5"/>
<input type="button" value="Select the div element whose attribute title value contains "es"" id="btn6"/>
<input type="button" value="Firstly, select the div element with attribute ID, and then select the div element with attribute title value containing "es" in the result" id="btn7"/>
<input type="button" value="Select the div element with the title attribute value and the title attribute is not equal to test" id="btn8"/>
<br/>
<div class="one" id="one">
a div with ID one, class one
<div class="mini">a mini class</div>
</div>
<div class="one" id="two" title="test">
a div with ID two, class one, title test
<div class="mini" title="other">class mini, title other</div>
<div class="mini" title="test">class mini, title test</div>
</div>
<div class="one">
<div class="mini">class mini</div>
<div class="mini">class mini</div>
<div class="mini">class mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class mini</div>
<div class="mini">class mini</div>
<div class="mini">class mini</div>
<div class="mini" title="test">class mini, title test</div>
</div>
<div style="display: none" class="none">a div with none display of style</div>
<div class="hide">a div with class hide</div>
<div>
a div contain hidden type of input<input type="hidden" size="8">
</div>
<div class="one" id="mover">a div element executing animation</div>
</body>
</html>
5.3.4. 表单/表单对象属性过滤器
:input 匹配所有 input，textarea，select和 button 元素
:test 匹配所有文本输入框
:password 匹配所有密码输入框
:radio 匹配所有单选框
:checkbox 匹配所有复选框
:submit 匹配所有提交按钮
:image 匹配所有 img 标签
:reset 匹配所有重置按钮
:buttom 匹配所有按钮
:file 匹配所有文件域
:hidden 匹配所有不可见的元素
:enabled 匹配所有可用的元素
:disabled 匹配所有不可用的元素
:checked 匹配所有被选中元素（复选框、单选框等，不包括 select 中的 option）
:selected 匹配所有选中的 option 元素
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form object filter</title>
<style type="text/css" >
body {
font-family: Futura, "PingFang SC", Arial, sans-serif;
font-size: 20px;
}
</style>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function () {
// 1. In the form, input assignment can be used
$("#btn1").click(function () {
// val() can operate the value properties of the form items
// it is gettable and settable
$(":text:enabled").val("Hello World!");
});
// 2. In the form, input assignment can not be used
$("#btn2").click(function () {
$(":text:disabled").val("I am omnipotent!")
});
// 3. Gets the number of multiple selection boxes
$("#btn3").click(function () {
alert($(":checkbox:checked").length);
});
// 4. Gets the content of multiple selection boxes
$("#btn4").click(function () {
// 1. Gets all selected check box label objects
var checkObj = $(":checkbox:checked");
var checkText = "";
// old traversal method
/*for ( var i = 0; i < checkObj.length; i++ ) {
checkText += ( checkObj[i].value + "\n" );
}*/
// traversal method by jQuery
$(checkObj).each(function () {
checkText += ( this.value + "\n" );
});
alert(checkText);
});
// 5. Get the content selected in the drop-down box
$("#btn5").click(function () {
// 1. Get the option label objects
var selectObj = $("select option:selected");
var selectText = "";
// traversal method by jQuery
$(selectObj).each(function () {
selectText += (this.value + "\n");
});
alert(selectText);
});
});
</script>
</head>
<body>
<h2>Form object filter</h2>
<br/>
<input type="button" id="btn1" value="In the form, input assignment can be used"/>
<input type="button" id="btn2" value="In the form, input assignment can not be used"/>
<br/>
<input type="button" id="btn3" value="Gets the number of multiple selection boxes"/>
<input type="button" id="btn4" value="Gets the content of multiple selection boxes"/>
<br/>
<input type="button" id="btn5" value="Get the content selected in the drop-down box"/>
<br/><br/>
<table>
<label>
Available element: <input type="text" value="Available text box" /><br/>
Unavailable element: <input type="text" value="Unavailable text box" disabled="disabled"/><br/>
Available element: <input type="text" value="Available text box" /><br/>
Unavailable element: <input type="text" value="Unavailable text box" disabled="disabled"/><br/>
<br/>
Checkbox：<br/>
<input type="checkbox" name="test" value="test1">test1
<input type="checkbox" name="test" value="test2">test2
<input type="checkbox" name="test" value="test3">test3
<input type="checkbox" name="test" value="test4">test4
<input type="checkbox" name="test" value="test5">test5
<br/>
Drop down list1: <br/>
<select name="list1" multiple="multiple">
<option selected="selected" value="option0">-- Please select an option--</option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
<option value="option6">option6</option>
<option value="option7">option7</option>
<option value="option8">option8</option>
</select>
<br/>
Drop down list2: <br/>
<select name="list2">
<option selected="selected" value="option0">-- Please select an option--</option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
<option value="option6">option6</option>
<option value="option7">option7</option>
<option value="option8">option8</option>
<option value="option9">option9</option>
<option value="option10">option10</option>
</select>
</label>
</table>
</body>
</html>
6. jQuery 元素筛选
eq() 获取给定索引的元素，功能和 :eq 一样
first() 获取第一个元素，功能和 :first 一样
last() 获取最后一个元素，功能和 :last 一样
filter(exp) 留下匹配的元素
is(exp) 判断是否匹配给定的选择器，只要有一个匹配就返回true
has(exp) 返回包含有匹配选择器的元素的元素，功能和 :has 一样
not(exp) 删除匹配选择器的元素，功能和 :not 一样
children(exp) 返回匹配给定选择器的子元素，功能和 parent > child 一样
find(exp) 返回匹配给定选择器的后代元素，功能和 ancestor descendant 一样
next() 返回当前元素的下一个兄弟元素，功能和 prev + next 一样
nextAll() 返回当前元素后面所有的兄弟元素，功能和 prev ~ siblings 一样
nextUntil() 返回当前元素到指定匹配的元素为止的后面元素
parent() 返回父元素
prev(exp) 返回当前元素的上一个兄弟元素
prevAll() 返回当前元素前面的所有兄弟元素
prevUntil(exp) 返回当前元素指定匹配的元素为止前面的元素
siblings(exp) 返回所有的兄弟元素
add() 把 add 匹配的选择器元素添加到当前 jQuery 对象当中
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Element select</title>
<style type="text/css">
body {
font-family: Futura, "PingFang SC", Arial, sans-serif;
font-size: 20px;
}
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
button {
font-family: Futura, Arial, sans-serif;
}
</style>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
function animateIt() {
$("#mover").slideToggle("slow", animateIt);
}
animateIt();
});
$(document).ready(function () {
// 1. Select the element with an index value of 3
$("#btn1").click(function () {
$("div").eq(3).css("background", "#bbffaa");
});
// 2. Select the first div element
$("#btn2").click(function () {
$("div").first().css("background", "#fffeaa");
});
// 3. Select the last div element
$("#btn3").click(function () {
$("div").last().css("background", "#ffaaaa");
});
// 4. Select div elements with even index values
$("#btn4").click(function () {
$("div").filter(":even").css("background", "#e6aaff");
});
// 5. Judge whether #one is :empty or :paren
$("#btn5").click(function () {
alert($("#one").is(":empty"))
});
// 6. Select div element which contain .mini
$("#btn6").click(function () {
$("div").has(".mini").css("background", "#aafff5");
});
// 7. Select div element which class not one
$("#btn7").click(function () {
$("div").not(".one").css("background", "#dd7d3e");
});
// 8. Select all div elements with class one in body"
$("#btn8").click(function () {
$("body").children("div.one").css("background", "#ffaad6");
});
// 9. Select all div descendant elements with class mini in the body
$("#btn9").click(function () {
$("body").find("div.mini").css("background", "#33f180");
});
// 10. Select the next div element of #one
$("#btn10").click(function () {
$("#one").next("div").css("background", "#d91414");
});
// 11. Select all span elements after #one
$("#btn11").click(function () {
$("#one").nextAll("span").css("background", "#db198d");
});
// 12. Select the element between the #one and span elements
$("#btn12").click(function () {
$("#one").nextUntil("span").css("background", "#e0c513");
});
// 13. Select the parent element of mini
$("#btn13").click(function () {
$(".mini").parent().css("background", "#72294d");
});
// 14. Select the previous div element of #two
$("#btn14").click(function () {
$("#two").prev("div").css("background", "#5bac7b");
});
// 15. Select all div elements before the span element
$("#btn15").click(function () {
$("span").prevAll("div").css("background", "#bf1919");
});
// 16. Select the element between the #one and span elements (reversal)
$("#btn16").click(function () {
$("span").prevUntil("#one").css("background", "#f1bfcf");
});
// 17. Select all the sibling div elements with ID two
$("#btn17").click(function () {
$("#two").siblings("div").css("background", "#9f7614");
});
// 18. Select all span elements and elements with ID two
$("#btn18").click(function () {
$("span").add("#two").css("background", "#485ce3");
});
});
</script>
</head>
<body>
<input type="button" value="Select the element with an index value of 3" id="btn1"/>
<input type="button" value="Select the first div element" id="btn2"/>
<input type="button" value="Select the last div element" id="btn3"/>
<input type="button" value="Select div elements with even index values" id="btn4"/>
<input type="button" value="Judge whether #one is :empty or :parent" id="btn5"/>
<input type="button" value="Select div element which contain .mini" id="btn6"/>
<input type="button" value="Select div element which class not one" id="btn7"/>
<input type="button" value="Select all div elements with class one in body" id="btn8"/>
<input type="button" value="Select all div descendant elements with class mini in the body" id="btn9"/>
<input type="button" value="Select the next div element of #one" id="btn10"/>
<input type="button" value="Select all span elements after #one" id="btn11"/>
<input type="button" value="Select the element between the #one and span elements" id="btn12"/>
<input type="button" value="Select the parent element of mini" id="btn13"/>
<input type="button" value="Select the previous div element of #two" id="btn14"/>
<input type="button" value="Select all div elements before the span element" id="btn15"/>
<input type="button" value="Select the element between the #one and span elements (reversal)" id="btn16"/>
<input type="button" value="Select all the sibling elements with ID two" id="btn17"/>
<input type="button" value="Select all span elements and elements with ID two" id="btn18"/>
<h3>Basic selector</h3>
<br/>
<label>
Text box <input type="text" disabled="disabled">
</label>
<br/>
<div class="one" id="one">
a div with ID one, class one
<div class="mini">a mini class</div>
</div>
<div class="one" id="two" title="test">
a div with ID two, class one, title test
<div class="mini" title="other">class mini, title other</div>
<div class="mini" title="test">class mini, title test</div>
</div>
<div class="one">
<div class="mini">class mini</div>
<div class="mini">class mini</div>
<div class="mini">class mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class mini</div>
<div class="mini">class mini</div>
<div class="mini">class mini</div>
<div class="mini" title="test">class mini, title test</div>
</div>
<div style="display: none" class="none">a div with none display of style</div>
<div class="hide">a div with class hide</div>
<span class="one" id="span">^^span element 1^^</span>
<div>
a div contain hidden type of input<input type="hidden" size="8">
</div>
<span class="one" id="span">^^span element 2^^</span>
<div class="one" id="mover">a div element executing animation</div>
</body>
</html>
7. jQuery 的属性操作
html() 可以设置和获取起始标签和结束标签中的内容，功能和 dom 属性 innerHTML 一样
text() 可以设置和获取起始标签和结束标签中的文本，功能和 dom 属性 innerText 一样
val() 可以设置和获取表单项的 value 属性值，功能和 dom 属性 value 一样
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Operate test</title>
<style type="text/css">
body {
font-family: Futura, "PingFang SC", Helvetica, Arial, sans-serif;
font-size: 20px;
}
</style>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js" ></script>
<script type="text/javascript">
$(function () {
// not transfer parameter is to get, transfer parameter is to set
alert($("div").html()); // get
$("div").html("<h1>I'm title 1 in div </h1>"); // set
// not transfer parameter is to get, transfer parameter is to set
alert($("div").text()); // get
$("div").text("<h1>I'm title 1 in div </h1>"); // set
$("#btn1").click(function () {
// not transfer parameter is to get, transfer parameter is to set
alert($("#userName").val()); // get
$("#userName").val("I'm user name input box"); // set
})
});
</script>
</head>
<body>
<div> I'm div tag <span> I'm span tag in the div </span> </div>
<br/>
<label>
User name: <input type="text" name="userName" id="userName" />
<button id="btn1">Operate input box</button>
</label>
</body>
</html>
val() 方法同时设置多个表单项的选中状态的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Operate multi form items</title>
<style type="text/css">
body {
font-family: Futura, "PingFang SC", Helvetica, Arial, sans-serif;
font-size: 20px;
}
</style>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js" ></script>
<script type="text/javascript">
$(function () {
// Step by step operation
// Batch operation radio
$(":radio").val(["radio1"]);
// Batch operation checkbox
$(":checkbox").val(["checkbox1", "checkbox2", "checkbox3"]);
// Batch operation drop down multiple selector
$("#multiple").val(["opt2", "opt3", "opt4"]);
// Batch operation drop down single selector
$("#single").val(["opt12"]);
// One time operation
$(":radio, :checkbox, #multiple, #single").val(["radio1", "checkbox1", "checkbox2", "checkbox3", "opt2", "opt3", "opt4", "opt12"]);
});
</script>
</head>
<body>
<body>
<label>
Single choice：
<input name="radio" type="radio" value="radio1" />radio1
<input name="radio" type="radio" value="radio2" />radio2
<br/>
Multiple choices:
<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/>
Drop down multiple choice:
<select id="multiple" multiple="multiple" size="4">
<option value="opt1">option1</option>
<option value="opt2">option2</option>
<option value="opt3">option3</option>
<option value="opt4">option4</option>
<option value="opt5">option5</option>
<option value="opt6">option6</option>
<option value="opt7">option7</option>
<option value="opt8">option8</option>
</select>
<br/>
Drop down single choice:
<select id="single">
<option value="opt9">option9</option>
<option value="opt10">option10</option>
<option value="opt11">option11</option>
<option value="opt12">option12</option>
<option value="opt13">option13</option>
<option value="opt14">option14</option>
</select>
</label>
</body>
</body>
</html>
attr() 可以设置和获取属性的值，不推荐操作 checked，readOnly，selected，disabled 等等
attr 方法还可以操作非标准的属性，比如自定义属性：abc， bbj等
prop() 可以设置和获取属性的值，但是只推荐操作上面不推荐的操作
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Get & set properties</title>
<style type="text/css">
body {
font-family: Futura, "PingFang SC", Helvetica, Arial, sans-serif;
font-size: 20px;
}
</style>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js" ></script>
<script type="text/javascript">
$(function () {
// attr
alert($(":checkbox:first") .attr("name")); // get
$(":checkbox:first").attr("name", "abc"); // set
// prop
alert($(":checkbox:eq(1)").prop("checked")); // get
$(":checkbox:eq(0)").prop("checked", true); // set
});
</script>
</head>
<body>
<label>
Multiple choices:
<input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
<input name="checkbox" type="checkbox" value="checkbox2" checked="checked" />checkbox2
<input name="checkbox" type="checkbox" value="checkbox3" />checkbox3
</label>
</body>
</html>
8. DOM 的增删改
内部插入
| 方法 | 示例 | 解释 |
|---|---|---|
appendTo() |
a.appendTo(b) |
把 a 插入到 b 子元素末尾，成为最后一个子元素 |
prependTo() |
a.prependTo(b) |
把 a 插入到 b 子元素前面，成为第一个子元素 |
外部插入
| 方法 | 示例 | 解释 |
|---|---|---|
insertAfter() |
a.insertAfter(b) |
把 a 插到 b 的后边，成为 ba |
insertBefore() |
a.insertBefore(b) |
把 a 插到 b 的前边，成为 ab |
替换
| 方法 | 示例 | 解释 |
|---|---|---|
replaceWith() |
a.replaceWith(b) |
用 b 替换掉 a |
replaceAll() |
a.replaceAll(b) |
用 a 替换掉所有的 b |
删除
| 方法 | 示例 | 解释 |
|---|---|---|
empty() |
a.empty() |
清除 a 标签里的内容 |
remove() |
a.remove() |
删除 a 标签 |
9. CSS 样式操作
addClass() 添加样式
removeClass() 删除样式
toggleClass() 有就删除，没有就添加样式
offset() 获取和设置元素的坐标
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Css style operate</title>
<style type="text/css">
body {
font-family: Futura, "PingFang SC", Helvetica, Arial, sans-serif;
}
div {
width: 100px;
height: 260px;
}
div.whiteBorder {
border: 2px white solid;
}
div.redDiv {
background-color: red;
}
div.blueBorder {
border: 5px blue solid;
}
</style>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function () {
var $divEle = $("div:first");
$("#btn1").click(function () {
// addClass - Add one or more classes to the selected element
$divEle.addClass("redDiv blueBorder");
});
$("#btn2").click(function () {
// removeClass - Removes one or more classes from the selected elemen
$divEle.removeClass("redDiv blueBorder");
});
$("#btn3").click(function () {
// toggleClass - Switch the operation of adding / deleting class to the selected element
$divEle.toggleClass("blueBorder whiteBorder");
});
$("#btn4").click(function () {
// offset - Returns the position of the first matching element relative to the document
var pose = $divEle.offset();
console.log(pose);
});
});
</script>
</head>
<body>
<table align="center">
<tr>
<td>
<div class="border">
</div>
</td>
<td>
<div class="btn">
<input type="button" value="addClass()" id="btn1"/>
<input type="button" value="removeClass()" id="btn2"/>
<input type="button" value="toggleClass" id="btn3"/>
<input type="button" value="offset()" id="btn4"/>
</div>
</td>
</tr>
</table>
</body>
</html>
10. jQuery 动画
基本动画
show() 将隐藏的元素显示
hide() 将可见的元素隐藏
toggle() 可见就隐藏，不可见就显示
以上的方法都可以添加参数
1. 动画执行的时长，以 ms 为单位
2. 动画的回调函数（动画完成后自动调用的函数）
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Basic animate</title>
<style type="text/css">
body {
font-family: Futura, "PingFang SC", Helvetica, Arial, sans-serif;
font-size: 15px;
}
table {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
}
td, th {
border: 1px solid black;
text-align: center;
}
div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function () {
// show()
$("#btn1").click(function () {
$("div").show(2000, function () {
alert("The show animate is finished");
});
});
// hide()
$("#btn2").click(function () {
$("div").hide(1000, function () {
alert("The hide animate is finished");
});
});
// toggle()
$("#btn3").click(function () {
$("div").toggle(1000, function () {
alert("The toggle animate is finished");
});
});
});
</script>
</head>
<body>
<table>
<tr>
<td>
<input type="button" id="btn1" value="show()"/>
</td>
<td rowspan="3">
<div>This is a div</div>
</td>
</tr>
<tr>
<td>
<input type="button" id="btn2" value="hide()"/>
</td>
</tr>
<tr>
<td>
<input type="button" id="btn3" value="toggle()"/>
</td>
</tr>
</table>
</body>
</html
淡入淡出动画
fadeIn() 淡入
fadeOut() 淡出
fadeTo() 在指定时长内将透明的修改到指定的值
fadeToggle() 淡入/淡出切换
以上的方法都可以添加参数
1. 动画执行的时长，以 ms 为单位
2. 动画的回调函数（动画完成后自动调用的函数）
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fade animate</title>
<style type="text/css">
body {
font-family: Futura, "PingFang SC", Helvetica, Arial, sans-serif;
font-size: 15px;
}
table {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
}
td, th {
border: 1px solid black;
text-align: center;
}
div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function () {
// fadeIn()
$("#btn1").click(function () {
$("div").fadeIn(2000, function () {
alert("The fadeIn animate is finished");
});
});
// fadeOut()
$("#btn2").click(function () {
$("div").fadeOut(2000, function () {
alert("The fadeOut animate is finished");
});
});
// fadeTo()
$("#btn3").click(function () {
$("div").fadeTo(2000, 0.5, function () {
alert("The fadeTo animate is finished");
})
})
// fadeToggle()
$("#btn4").click(function () {
$("div").fadeToggle(2000, function () {
alert("The fadeToggle animate is finished");
});
});
});
</script>
</head>
<body>
<table>
<tr>
<td>
<input type="button" id="btn1" value="fadeIn()"/>
</td>
<td rowspan="4">
<div>This is a div</div>
</td>
</tr>
<tr>
<td>
<input type="button" id="btn2" value="fadeOut()"/>
</td>
</tr>
<tr>
<td>
<input type="button" id="btn3" value="fadeTo()"/>
</td>
</tr>
<tr>
<td>
<input type="button" id="btn4" value="fadeToggle()"/>
</td>
</tr>
</table>
</body>
</html>
11. jQuery 事件操作
11.1. $(function() {})和 window.onload = function(){} 的区别
它们触发的顺序
1. jQuery 的页面加载完成后先执行
2. 原生 js 的页面加载完成后
它们分别是在什么时候触发
1. jQuery 是浏览器的内核解析完页面的标签创建好 DOM 对象之后就马上执行
2. 原生 js 的页面加载完成后除了要等浏览器内核解析完页面的标签创建好 DOM 对象之后，还要等标签显示时需要的内容加载完成。
它们执行的次数
1. 原生 js 的页面加载完成后，只会执行最后一次的赋值函数
2. jQuery 的页面加载完成后是全部把注册的 function 函数依次序全部执行
11.2. jQuery 中其他事件处理方法
click() 它可以绑定单击事件（传 function），以及触发单击事件（不传 function）
mouseover() 鼠标移入事件
mouseout() 鼠标移出事件
bind() 可以给元素一次性注册（绑定）一个或多个事件
one() 使用上和 bind() 一样，但是 one() 方法绑定的每个事件只会触发一次
unbind() 和 bind() 相反的操作，解除事件的注册（绑定）
live() 也是用来注册（绑定）事件，它可以用来注册（绑定）选择器匹配的所有元素的事件，哪怕这个元素是后面动态创建出来的也有效on() 方法）
on 在被选元素及子元素上添加一个或多个事件处理程序，自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event</title>
<style type="text/css">
body {
font-family: Futura, "PingFang SC", Helvetica, Arial, sans-serif;
font-size: 40px;
}
#panel {
border: black 1px solid;
width: min-content;
height: 340px;
}
h5 {
width: 360px;
height: 60px;
border: 1px solid black;
text-align: center;
background-color: red;
}
.content {
visibility: hidden;
}
</style>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function () {
// click method
$("h5").click(function () {
console.log("h5 click method register!");
});
// click trigger event
$("button").click(function () {
$("h5").click();
});
// mouseover method
$("h5").mouseover(function () {
console.log("The mouse is move in the h5 tag");
});
// mouseout method
$("h5").mouseout(function () {
console.log("The mouse is move out the h5 tag");
});
// bind method
$("h5").bind("click mouseover mouseout", function () {
console.log("this is an event for h5 tag");
});
// one method
$("h5").one("click mouseover mouseout", function () {
console.log("this is an event for h5 tag");
});
// unbind method
$("h5").unbind("click");
$("<h5 class='head'>What?</h5>").appendTo($("#panel"));
// on method
$("h5").on("click", function () {
console.log("h5 click event register by h5");
})
});
</script>
</head>
<body>
<div id="panel">
<h5 class="head">What is jQuery</h5>
<div class="content">
jQuery is an excellent JavaScript open source library, and it is created by John Resigon January 2006
</div>
<button>Button</button>
</div>
</body>
</html>
11.3. 事件的冒泡
事件的冒泡是指父子元素同时监听同一个事件，当触发子元素事件的时候，同一个事件也被传递到了父元素的事件里去响应
如何让事件冒泡
在子元素事件函数函数内，return false; 可以阻止事件的冒泡传递
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event bubbling</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-family: Futura, "PingFang SC", Helvetica, Arial, sans-serif;
}
body {
font-size: 13px;
line-height: 130%;
padding: 60px;
}
#content {
width: 220px;
border: 1px solid #0050D0;
background: #96E555;
}
span {
width: 200px;
margin: 10px;
background: #666666;
cursor: pointer;
color: white;
display: block;
}
p {
width: 200px;
background: #888;
color: white;
height: 16px;
}
</style>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script>
$(function () {
$("#content").click(function () {
alert("I'm div");
});
$("span").click(function () {
alert("I'm span");
return false;
});
});
</script>
</head>
<body>
<div id="content">
Outer div element
<span>Inner div element</span>
Outer div element
</div>
<div id="msg"></div>
<br/><br/>
<a href="https://www.baidu.com">www.baidu.com</a>
</body>
</html>
11.4. JavaScript 事件对象
事件对象，是封装有触发事件信息的一个 javaScript 对象，我们现在重点解决如何拿到这个 javaScript 事件对象函数，以及如何使用它。
如何获取 JavaScript 事件对象
在给元素注册（绑定）事件的时候，在事件的 function(event) 参数列表中添加一个参数，这个参数名，我们习惯取名为 event，而这个 event 就是 JavaScript 传递参数事件处理函数的事件对象
1. 原生 JavaScript 获取事件对象
window.onload = function () {
document.getElementById("areaDiv1").onclick = function (event) {
console.log(event);
}
}
2. jQuery 代码获取事件对象
$(function () {
$("#areaDiv").click(function (event) {
console.log(event);
});
});
3. 使用 on() 同时对多个事件绑定同一个函数，获取当前操作的是什么事件
$(function () {
$("#areaDiv3").on("mouseover mouseout click", function (event) {
console.log(event);
if ( event.type == "mouseover" ) {
console.log("Mouseover event!");
}
if ( event.type == "mouseout" ) {
console.log("mouseout event!");
}
if ( event.type == "click" ) {
console.log("click event!")
}
});
});
