1jQuery概述
1.1 jQuery优势
设计理念是“少写多做”，是一种将JavaScript、css、DOM、ajax等特征集于一体的强大框架，通过简单的代码来实现各种页面特效。
主要提供了以下功能：
（1）访问和操作DOM元素：jQuery中封装了大量的DOM操作，可以非常方便地获取或修改页面中的某个元素，包括元素的移动、复制、删除等操作。
（2）强大的选择器：jQuery允许开发人员使用css1-css3所有的选择器，方便快捷地控制元素的css样式，并很好地兼容各种浏览器。
（3）可靠的时间处理机制：使用jQuery将表现层与功能分离，可靠的事件处理机制让开发者更多关注于程序的逻辑设计；在预留退路、循序渐进以及入侵式方面，jQuery表现得优秀。
（4）完善的ajax操作
（5）链式操作方式
（6）完善的文档
1.2 搭建jQuery开发环境
引入jQuery库：jQuery不需要安装，只需将下载的jQuery库放到站点的一个公共目录下，然后在页面中通过<script>标签引入即可。
jQuery简单测试：在页面中引入jQuery库后，通过$()函数来获取页面中的元素，并对元素进行定位或效果处理。在没有特别说明的情况下，$符号极为jQuery对象的缩写形式。
<head>
<meta charset="UTF-8">
<title>jQuery测试示例</title>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
</head>
<body>
<div id="myDiv">Hello jQuery,欢迎光临漫步时尚广场！</div>
<script type="text/javascript">
$(document).ready(function(e){
//alert(jQuery("#myDiv").html());
alert($("#myDiv").html());
});
</script>
</body>
<head>
<meta charset="UTF-8">
<title>jQuery测试示例</title>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
</head>
<body>
<div id="myDiv">Hello jQuery,欢迎光临漫步时尚广场！</div>
<script type="text/javascript">
$(document).ready(function(e){
//alert(jQuery("#myDiv").html());
alert($("#myDiv").html());
});
</script>
</body>
上述代码中，通过jQuery读取div标签中的内容。$(document).ready()方法的作用类似于Javascript中window.onload事件，但也有一定的区别。
区别项 |
Window.onload |
$(document).ready() |
执行时间 |
必须在页面全部加载完毕后才能执行 |
在页面所有DOM结构下载完毕后执行，此时可能DOM元素关联的内容并没有加载完毕 |
执行次数 |
一个页面只能有一个，当页面中存在多个window.onload时，仅输出最后一个的结果，无法完成多个结果输出 |
一个页面可以有多个，结果可以相继输出 |
简化写法 |
无 |
可以简写成$() |
1.3 DOM对象和jQuery对象
用JavaScript获取DOM对象，通过getElementByid()、getElementByClassName()和querySelector()等来获取页面中的HTML元素.
Var menuDiv=document.getElementById(“menuDiv”)
Var baseSpan=menuDiv.getElementByClassName(“baseClass”)
Var span=document.querySelector(“#menuDiv”)
jQuery对象是指通过jQuery库中提供的方法来获得的元素对象，jQuery对象本身不能直接调用DOM对象的方法，而是通过将jQuery对象转换成DOM对象后再调用DOM对象的方法。
（1）DOM对象转成jQuery对象
使用jQuery库中的$()方法将DOM对象封装起来，并返回一个jQuery对象。
示例：
//获得DOM对象
Var domObject=document.getElementById(“myDiv”);
//获得DOM对象中的innerHTML属性值
Alert(domObject.innerHTML);
//将DOM对象转换成jQuery对象
Var jQueryObject=$(domObject);
//调用jQuery对象的HTML()方法
Alert（jQueryObject.html()）;
（2）jQuery对象转成DOM对象
将jQuery对象转换成DOM对象时，可以把jQuery对象看做一个数组，通过索引[index]或get(index)方法获得DOM对象。
示例：jQuery对象转成DOM对象
//获得jQuery对象（有页面中所有的Div组成）
Var jQueryObject=$(“div”)
//1、通过下标获取DOM对象
Var domObject1=jQueryObject[0];
//2、通过get()方法获取DOM对象
Var domObject2=jQueryObject.get(1);
//获得dom对象中的innerHTML属性值
Alert(“第一个DIV内容是：”+domObject1.innerHTML
+”/n第二个DIV内容是：”+domObject2.innerHTML);
2. jQuery选择器
通过jQuery选择器可以方便快捷地获取页面中的元素，然后为其添加相应行为，无须担心浏览器的兼容性问题。jQuery选择器分为四种：基本选择器、层次选择器、过滤选择器和表单选择器。
2.1 基本选择器
基本选择器是通过元素的id、className或tagName来查找页面中的元素。由于id是元素的唯一标识，不能重复，所以id选择器返回单个jQuery对象；而class属性用于设定元素的样式，允许多个元素使用同一样式，所以class选择器返回一个jQuery对象类型的数组。
选择器 |
描述 |
返回 |
#ID |
根据元素的ID属性进行匹配 |
单个jQuery对象 |
.class |
根据元素的class属性进行匹配 |
jQuery对象数组 |
Element |
根据元素的标签名进行匹配 |
jQuery对象数组 |
Selector1/selector2.. |
将每一选择器匹配的结果合并后一起返回 |
jQuery对象数组 |
* |
匹配页面的所有元素，包括html、head、body等 |
jQuery对象数组 |
2.2 层次选择器
jQuery层次选择器是通过DOM对象的层次关系来获取特定的元素，如同背元素、后代元素、子元素和相邻元素等。层次选择器的用法与基本选择器相似，也是使用$()函数来实现，返回结果均为jQuery对象数组。
选择器 |
描述 |
返回 |
$(“ancestor descentant”) |
选取ancestor元素中的所有的子元素 |
jQuery对象数组 |
$(“parent>child”) |
选取parent元素中的直接子元素 |
jQuery对象数组 |
$(“prev+next”) |
选取紧邻prev元素之后的next元素 |
jQuery对象数组 |
$(“prev+siblings”) |
选取prev元素之后的sibling兄弟元素 |
jQuery对象数组 |
$(“prev+next”)用于选取晋绥prev元素之后的next元素，且prev元素和next元素有共同的父元素，功能与$(“prev”).next(“next”)相同。而$(“prev-siblings”)用于选取prev元素之后的siblings元素，两者有共同的父元素而不必紧邻，功能与$(“prev”).nextAll(“siblings”)相同。
2.3 过滤选择器
简单选择器和层次选择器可以满足大部分页面元素的选取需求。在jQuery中还提供了功能更加强大的过滤选择器，根据特定的过滤规则来筛选出所需要的页面元素。过滤选择器又分为简单过滤选择器、内容过滤选择器、属性过滤选择器、子元素过滤选择器和表单对象属性过滤选择器。左图为简单过滤选择器。
内容过滤选择器：是指根据元素的文字内容或所包含的子元素的特征进行过滤的选择器。
选择器 |
描述 |
返回 |
：contains(text) |
选取包含text内容的元素 |
jQuery对象数组 |
：has(selector) |
选取含有selector所匹配的元素 |
jQuery对象数组 |
：empty |
选取所有不包含文本或者子元素的空元素 |
jQuery对象数组 |
：parent |
选取含有子元素或文本的元素 |
jQuery对象数组 |
可见性过滤选择器是指根据元素的可见性来筛选元素的选择器，包括了：
：hidden选择器用于选择所有不可见元素，或者type为hidden的元素
：visible选择器用于选取所有的可见元素。
属性过滤选择器是指根据元素的属性来筛选元素的选择器，在属性匹配开始时以“[”开始，以“]”结束如下表:
选择器 |
描述 |
返回 |
[attribute] |
选择包含给定属性的元素 |
jQuery对象数组 |
[attribute=value] |
选取属性等于某个特定值的元素 |
jQuery对象数组 |
[attribute!=value] |
选取属性不等于或不包含某个特定值的元素 |
jQuery对象数组 |
[attribute^=value] |
选取属性以某个值开始的元素 |
jQuery对象数组 |
[attribute$=value] |
选取属性以某个值结束的元素 |
jQuery对象数组 |
[Attribute*=value] |
选取属性中包含某个值的元素 |
jQuery对象数组 |
[attribute1][attribute2][attribute3] |
符合属性选择器，需要同时满足多个条件时使用 |
jQuery对象数组 |
子元素过滤选择器，在页面设计过程中需要某些行时，可以通过基本过滤器选择其中的：eq()来实现表中行的凸显，但不能同时让多个表具有相同的效果。在jQuery中，子元素过滤选择器可以轻松地选取所有父元素中的指定元素，并进行处理。
注意：1)nth-child(N|odd|even)选择器中，元素的小标从1开始。当参数N为整数时，选择集合中的第N元素；当参数为odd时，表示选取集合中所有下标为奇数的元素，当为even时，选择集合中的偶数下标元素。当参数为an+b时，表示从b开始，每隔a个元素选择一个。2)eq(index)只匹配一个元素，小标从0开始；而nth-child()用于匹配1—n个符合条件的元素，小标从1开始。
表单对象属性过滤选择器是指通过表单对象的属性特征进行筛选的选择器，如下表所示：
选择器 |
描述 |
返回 |
：enable |
选取表单中属性为可用的元素 |
jQuery对象数组 |
：disable |
选取表单中属性为不可用的元素 |
jQuery对象数组 |
：checked |
选取表单中被选中的元素 |
jQuery对象数组 |
：selected |
选取表单中被选中的选项元素（下列列表） |
jQuery对象数组 |
2.4 表单选择器
在jQuery中引入的表单选择器能够让用户更加方便地处理表单数据。
选择器 |
描述 |
返回 |
：input |
选取所有的<input><textarea><select><button>元素 |
jQuery对象数组 |
：text |
选取所有的单行文本框 |
jQuery对象数组 |
：password |
选取所有的密码框 |
jQuery对象数组 |
：radio |
选取所有的单选框 |
jQuery对象数组 |
：checkbox |
选取所有的多选框 |
jQuery对象数组 |
：submit |
选取所有的提交按钮 |
jQuery对象数组 |
：image |
选取所有的图片按钮 |
jQuery对象数组 |
：button |
选取所有的按钮 |
jQuery对象数组 |
：file |
选取所有的文件域 |
jQuery对象数组 |
：hidden |
选取所有的不可见元素 |
jQuery对象数组 |
3. jQuery基本操作
通过jQuery提供的选择器快速定位到页面的每个元素中，可以对元素进行各种操作，例如属性操作、样式操作和内容操作等。
3.1属性操作
在jQuery中提供了一系列用于操作对象的属性，
方法 |
描述 |
Attr(name|pro|key,val|fn) |
获取或设置元素的属性 |
RemoveAttr（name） |
删除元素的某个属性 |
Prop（name|Pro|key，val|fn） |
获取或设置元素的一个或多个属性 |
RemoveProp(name) |
删除由prop()方法设置的属性集 |
（1）attr()方法
Attr()方法用于获取所匹配元素的集合中第1个元素的属性，或设置所匹配元素的一个或多个属性。属性的语法格式如下：
Attr(name); attr(peoperties); attr(key,value); attr(key,function(index,oldAttr))
（2）removeAttr()方法
RemoveAttr()方法用于删除匹配元素的指定属性
（3）Prop()方法
Prop()方法用于获取所匹配元素的集合中第一个元素的属性，或设置所匹配元素的一个或多个属性。Prop()方法多用于boolean类型属性操作。
示例：prop()方法的使用
$(“input[type=’checked’]”).prop(“checked”); //返回第一个复选框的属性
$(“input[type=’checked’]”).prop(“checked”,ture); //将所有复选框选中
//通过properties（名、值对）的方式，将所有复选框设为禁用、选中状态
$(“input[type=’checked’]”).prop({disable:true,checked:true});
//使用函数的返回值作为属性值，对所有复选框进行反选
$(“input[type=’checked’]”).prop(“checked”,function(index,oldValue){return!oldValue;}
);
（4）removeProp()方法
removeProp()方法用于删除由prop()方法设置的属性值
3.2 样式操作
在jQuery中，可以使用attr()方法操作元素的class属性，以获取或改变元素的样式。除此之外，jQuery还提供了addClass()、removeClass()和toggleClass()方法，实现对页面元素的追加、移除和替换等操作。
1、addClass()方法
addClass()方法用于对一个或多个匹配元素追加样式。
示例：
//追加baseClass样式
$(“p[title=’desc’]”).addClass(‘baseClass’);
//追加baseClass和fontColor样式
$(“p[title=’desc’]”).addClass(‘baseClass fontColor’);
2、removeClass()方法
removeClass()方法用于移除匹配元素的一个或多个样式，也可以一次性移除元素的所有样式。语法如下：
removeClass()
removeClass(className)
removeClass(className1,className2,className3....)
无参方法用于移除匹配元素的所有样式；
参数className表示需要移除的样式名；
参数className1，className2，className3，....表示可以同时移除多个样式，样式名之间使用空格隔开。
3、toggleClass()方法
toggleClass()方法用于元素样式之间的重复切换，当元素的指定样式存在时，该样式移除，否则添加该样式。toggleClass()方法语法格式如下：
toggleClass(className)
toggleClass(className,switch)
其中，className表示需要切换的样式名；参数switch表示切换样式开关，默认为true，当switch为true时允许样式切换，否则不切换。
示例：
//ID为userName的元素添加样式，如果存在focusClass样式则移除，没有则添加该样式。
$(“#userName”).toggleClass(“focusClass”);
//第二个参数为真，样式切换为inverseColor
$(“#saleDept”).toggleClass(“inverseColor”,”true”);
4、css()方法
Css()方法用于返回第一个匹配元素的CSS样式，或设置所有匹配的样式，css()方法的语法如下：
Css(attrName)
Css(key,value)
Css(properties)
Css(attrName,function(index,oldValue))
其中，参数attrName表示要访问的属性名称；
参数key、value用于设置元素的某一样式，Key表示属性名，
示例：
//一个参数时，用于返回第一个匹配元素的样式；例如：返回第一幅图片的宽度
$(“img”).css(“width”);
//多个参数时，用于设置匹配元素的样式；例如：设置图片的宽度为200px
$(“img”).css(“width”,”200px”);
//使用properties（键值对）的方式一次设置多个样式
$(“img”).css({background-color:”#ccc”,borderColor:”#999”});
//使用函数的返回值作为CSS()方法的value值
$(“img”).css({width:function(index,value){return parsetFloat(value)*0.9;
}
});
3.3 内容操作
在jQuery中，提供了html()和text()方法用于操作页面元素的内容，val()方法用于操作表单元素的值。以上方法的使用方式基本相同，当方法没有提供参数时，表示获取匹配元素的内容和值；当方法携带参数时，表示对匹配元素的内容或值进行修改。
1）html()方法
用于获取第一个匹配元素的html内容或修改匹配内容的html内容，该方法仅对XHTML文档有效，不能用于XML文档。
2）Text()方法
用于读取或设置匹配元素的文本内容。与html()方法区别在于，text()方法返回纯文本内容，适用于XHTML文档和XML文档。
Text()方法的使用
//返回#mainContentDiv标签的文本内容，即使该标签内容中包含HTML标签，返回的内容也仅仅是纯文本内容
$(“#mainContentDiv”).text();
//将InputDiscuss输入内容作为newsDiscuss的文本内容
$(“#newsDiscuss”).text(“<hr/>评论如下：”+$(“#inputDiscuss”).val()+”<hr/>”);
上述代码中，使用text()方法获得文本内容时，如果元素内容中包含html标签，则对标签进行清理后返回纯文本内容；使用text()方法设置的文本内容时，如果设置内容中包含了HTML标签，将不会被页面所解析，而是直接在页面中原样显示。
3）Val()方法
Val()方法用于设置或获取表单元素的值，包括文本框、下拉列表、单选框和复选框等元素。当元素允许多选时，返回一个包含被选项的数组。
Val()
Val(newValue)
Val(arrayValue)
Val(function(index,oldValue))
其中，无参方法用于返回所匹配的表单元素的value值；有参方法用于设定所匹配的表单元素的value值；参数newValue表示将匹配的表单元素的value值设置为newValue；参数arrayValue用于设置多选表单元素（如check和select等）的选择状态；参数function（index，oldValue）表示将函数的返回值赋给当前匹配的表单元素，index表示当前元素在匹配集中的索引位置，oldValue表示当前元素在修改之前的value值。
function submitNewsDiscuss(){
var inputDiscuss=$("#inputDiscuss").val();
//链式操作方式
$("#newsDiscuss").html("<hr/>评论如下："+inputDiscuss).css("color",$("#discussColor").val())
.css("font-size",$("[name=discussSize]:checked").val());
所谓链式操作，是指再用一个jQuery对象上的一系列动作么，通过直接连写形式，无须重复获取该对象。采用链式操作时，jQuery会自动缓存每一步操作的结果，比非链式操作方式更快。
4. jQuery事件处理
当页面或某些元素发生变化或被操作时，浏览器会自动触发一个事件，例如：文档加载完毕和单击按钮等情况下都会触发事件。事件处理是指在某一时刻页面元素对某种操作的相应处理。jQuery中的事件是在JavaScript事件处理机制基础上的进一步扩展与增强，极大地增强了事件处理能力。
4.1 页面加载事件
当访问一个包含有大量图片的网站时，使用windows.onload方式需要等待所有副图片加载完毕后才能进行操作；而使用$(document).ready()方式处理时，当DOM元素就绪时便会进行事件处理，无须等到所有的图片下载完毕。使用windows.onload方式多次绑定事件处理函数时，只保留最后一个，执行结果也只有一个；而$(document).ready()允许多次设置处理事件，事件执行结果会相继输出。
$(document).ready()的简写形式
//第一种简写形式
$(function(){
//jQuery处理代码
})；
//第二种简写形式
$().ready(function(){
//jQuery处理代码
})；
4.2事件绑定
所谓绑定事件，是指将页面元素的事件类型与事件处理函数关联到一起，当事件触发时调用事先绑定的事件处理函数。在jQuery中，提供了强大的API来执行事件的绑定操作，如bind()、none()、toggle()、live()、delegate()、on()和hover()等。
1）bind()方法
用于对匹配元素的特定事件绑定的时间处理函数，其语法格式如下：
Bind(types,[data],fn())
其中，参数types表示事件类型，是一个或多个事件类型构成的字符串，类型之间由空格隔开，事件类型包括鼠标时间或键盘事件。参数data（可选）表示传递给函数的额外数据，在事件处理函数中通过event.data来获得所传入的额外数据。参数fn是指所绑定的事件处理函数。
Bind()方法绑定事件
//绑定click事件
$(“p”).bind(“click”,function(){Alert($(this).text())});
//为一个对象同时绑定mouseenter和mouseover事件
$(“p”).bind(“mouseenter mouseover”,function(){$(this).toggleClass(“entered”);});
//为一个对象同时绑定多个事件，且每个事件具有单独的处理函数
$(“button”).bind({click:function(){$(“p”).slideToggle();},
Mouseover:function(){$(“body”).css(“background-color”,”red”);},
Mouseout:function(){$(“body”).css(“background-color”,”#ffffff”);}});
//事件处理之前传递一些附加的数据
Function handler(event){
Alert(event.data.foo);}
$(“p”).bind(“click”,{foo:”bar”},handler);
注意：事件绑定简写方法：$(“input[type=button]”),click(function(){$(this).toggleClass
(”entered”)});this是执行上下文的一个重要对象，用于指明触发事件的对象本身；$(this)是jQuery对this对象的封装，用于在事件处理中收集事件触发者的信息。
2）One()方法
用于对匹配元素的特点事件绑定一个一次性的事件处理函数，时间处理只会被执行一次。
示例：one()方法绑定事件
//绑定click事件
$(“p”).one(“click”,function(){alter(($this).text());});
上述代码中，对所有的<p>标签绑定click事件，当第1次单击时会有事件响应，再次单击不会响应。
3）Toggle()方法
Toggle()方法用于模拟鼠标连续单击事件，其语法格式如下：
Toggle（([speed],[easing],[fn1,fn2,fn3,...,fnN])）
其中，参数speed用于设置元素的隐蔽速度，默认是0ms，取值范围是slow、normal、fast或毫秒数。
参数easing用于指定动画的切换效果，取值是swing和linear；其中，linear是指一个稳定的动画，动画的动作比较均匀；而swing则更加动态一些，随着动画的开始逐渐加快，然后在逐步慢下来。
参数fn1、fn2、...、fnN表示1-n个事件处理函数。Fn1表示第一次单击时所执行的事件处理函数；fn2表示第二次单击时所执行的事件处理函数。当有更多函数时依次进行触发，直到最后一个，然后再从开始位置循环调用。
slideToggle()方法能够更精确、简单地实现事件的绑定。slideToggle()方法用于高度变化来实现元素的显示与隐藏
4）Live()方法
使用bind()方法只能针对页面上已经存在的元素进行绑定，而bind()绑定后新增的元素上没有事件响应。使用live()方法能够对页面中所有匹配元素进行绑定，包含存在的和将来新增的元素。
5）Delegate()方法
Delegate()方法可以在匹配元素的基础上，对其内部符合条件的元素绑定事件处理函数，语法如下：
Delegate(childSelector,[types],[date],fn)
示例：delegate()方法绑定事件
$(“div”).delegate(“button”,”click”,function(){
$(“p”).slideToggle();
});
$(“div”).delegate(“#DataBindBtn”,”click”,{msg:”传递额外数据”},function(e){
Alert(e.data.msg);
});
上述代码中，第一部分将<div>标签中的所有button按钮添加一个click事件；第二部分将<div >标签中id为DataBindBtn的元素绑定click事件，并在事件触发时，传入额外的数据。
注意：delegate()事件处理程序适用于当前存在的元素或未来新增的元素，可在更精确的小范围内使用事件代理，性能更优于live()方法。
6）On()方法
用于绑定事件所需要的处理函数，实现从低版本到高版本的转换，代替之前版本的bind() live()和delegate()等方法。其语法格式如下：
On(types,[childSelector],[data],fn)
其中，参数childSelecor是一个选择器字符串，用于筛选触发事件的元素；
Data（可选）表示传递给函数的额外数据，在事件处理函数中通过event.data来获得所传入的额外数据。
示例：使用on()方法替代live()和delegate()方法
//使用live()方法来绑定事件
$(“div[!id=leftDiv]”).live(“click”,function(){
//事件处理代码})；
//使用 on()方法替代live()方法
$(doument).on(“click”,”div[id!=leftDiv]”,function(){
//事件处理代码})；
//使用delegate()方法绑定事件
$(“div”).delegate(“#DataBindBtn”,”click”,{msg:”传递额外数据”},function(e){
Alert(e.data.msg);
});
//使用on()方法代替delegate()方法绑定事件
$(“div”).on(“click”,”#DataBindBtn”),{msg:”传递额外数据”},function(e){
Alert(e.data.msg);})
7）Hover()方法
Hover()方法用于模拟鼠标悬停事件。当鼠标悬停在某元素上时触发第一个函数，鼠标移出时触发第二个函数，其语法格式如下：
Hover（overFn,[outFn]）
示例：hover()方法的使用
//使用hover()方法设置单元格悬停特效
$(“td”).hover{
Function(){
$(this).addClass(“hover”);
},function(){
$(this).removeClass(“hover”);
}};
4.3 解除绑定事件
在元素绑定事件之后，当在某个时刻不再需要该事件处理时，可以解除所绑定的时间。在jQuery中提供了unbind()和undelegate()方法，分别解除由bind()和delegate()方法所绑定的事件，通过参数指明需要解绑的绑定事件即可。当方法没有提供参数时，表示解除该元素所有的事件绑定。使用off()方法解除由bind()、delegate()和on()方法所绑定的事件。
4.4 事件对象
jQuery对象的常见属性如下表所示：
属性 |
描述 |
pageX |
鼠标指针相对于文档的左边缘的位置 |
pageY |
鼠标指针相对于文档的上边缘的位置 |
target |
返回触发事件的元素 |
type |
返回事件的类型 |
white |
返回在鼠标或键盘事件中被按下的键 |
data |
用于传递事件之外的额外数据 |
方法 |
描述 |
preventDefault() |
组织元素发生默认的行为（例如，当单击提交按钮时阻止对表单的提交） |
stopPropagation() |
阻止事件的冒泡 |
isDefaultPrevent() |
根据事件对象中是否掉用过preventDefault()方法返回一个布尔值 |
isPropagationStopped() |
根据事件对象中是否掉用过stopPropagation()方法来返回一个布尔值 |
jQuery事件对象的常见方法如下表所示：
方法 |
描述 |
preventDefault() |
组织元素发生默认的行为（例如，当单击提交按钮时阻止对表单的提交） |
stopPropagation() |
阻止事件的冒泡 |
isDefaultPrevent() |
根据事件对象中是否掉用过preventDefault()方法返回一个布尔值 |
isPropagationStopped() |
根据事件对象中是否掉用过stopPropagation()方法来返回一个布尔值 |