JQuery笔记

jQuery

一、	什么是jQuery：jQuery就是用JS代码封装好的常用功能，它是JavaScript的一个常用框架。简单说jQuery就是用JS写好的常用的方法的集合，学jQuery就是学里面封装好的方法。jQuery的宗旨是write less, do more，即写的更少，做的更多。jQuery的官网：www.jquery.com
二、	为什么要学jQuery：因为JavaScript有如下的弊端
1、	找对象难
2、	如果要查找的元素比较多，那么有时需要对这些元素做遍历
3、	在给元素添加事件时，如果事件名相同，那么后面的事件会把前面的事件覆盖掉（DOM0），如果使用DOM2添加事件，还具有浏览器兼容问题
4、	JavaScript经常有浏览器兼容的问题
三、	jQuery版本：jQuery是2006年诞生，先后经历了多个版本
1、	从版本号分：
1)	1.x：兼容IE6/7/8
2)	2.x：不兼容IE6/7/8,1.x、2.x已经不再更新
3)	3.x：不兼容IE6/7/8，语法更为简明（不适用于国内）
2、	从是否压缩的角度分
1)	开发版本（非压缩版本）：可读型强，里面存储了大量的注释，空格，换行等元素
2)	生产版本（压缩版本）：可读性差，里面的注释，空格、换行等都被删除了，该版本使用于生产环境，即上线时使用
四、	jQuery的使用步骤
1、	第一步：利用script标签将jQuery文件引入到当前的HTML文档中
2、	第二步：在文档中插入一个新的script标签，在该标签中编写jQuery代码
3、	注意事项：编辑jquery代码的script标签的位置可以任意的，但是通常把它放在被操作的元素的后面。如果要将jQuery代码放在被操作元素的前面，此时需要编辑入口函数
1)	方式1：$(document).ready(function() {jQuery代码});
2)	方式2：$(function(){jquery代码});
五、	window.onload事件和$(document).ready()事件的区别
1、	ready事件的执行时间要早于load事件
2、	ready事件时当整个文档的DOM树渲染完毕后立即执行，不需要等待里面的图片完全显示，而load事件需要文档中的所有节点加载完成，且图片完全显示后执行
六、	jQuery对象和DOM对象的区别
1、	DOM对象：由原生JS的方法获取的对象被称为DOM对象
2、	jQuery对象：由jQuery方法获取的对象被称为jQuery对象
3、	DOM对象不可以使用jQuery对象的属性和方法，同样jQuery对象也不可以使用DOM对象的属性和方法
七、	jQuery对象和DOM对象的转化
1、	DOM对象转化为jQuery对象：$(DOM对象)
2、	jQuery对象转化为DOM对象：jQuery对象[下标]
八、	$的作用：$在jQuery中是一个函数，等同于jQuery，该方法的作用如下
1、	可以用该方法获取jQuery对象：$(‘CSS选择器’);
2、	将DOM对象转化为jQuery对象：$(DOM对象);
3、	编写入口函数：$(function() {});
九、	如何获取jQuery对象——选择器
1、	基本选择器
1)	ID选择器：如$(“#box”);
2)	类选择器：如$（”.red”）
3)	标签选择器（元素选择器）：如$（“div”），注意标签选择器不区分大小写
4)	全局选择器（通配符选择器）：如$（“*”）
5)	并集选择器（群组选择器）：如$(“div,p,li”)
6)	交集选择器：如$（“div.red”）
2、	层级选择器
1)	后代选择器：如$（“div   p”）
2)	子选择器：如$（”div>p”）
3)	兄弟选择器
1.	pre+next：如$(“#li4+li”)表示获取id为li4的后面的第一个兄弟元素li
2.	pre~next：如$（“#li4~li”）表示获取id为li4的后面的所有的兄弟元素li
3、	基本筛选器
1)	：first
1.	如$（“li:first”）：从整个文档中获取第一个li
2.	如$（“div  li:first”）：从div下面获取第一个li
3.	如$（“div   ：first”）：获取div下面的第一个元素
2)	:not(选择器)，如$(‘div:not(#box)’)，表示获取所有除了具有id为box的div
3)	：odd，如$（“li:odd”），表示获取下标为奇数的元素
4)	：even，如$（“li:even”），表示获取下标为偶数的元素
5)	：eq（index），如$（“li:eq(2)”），表示获取下标为2的元素
6)	：lt（index），如$（“li:lt(3)”），表示将整个文档中的li进行统一编号，选下标小于3的li
7)	：gt（index），如$（“li:gt(3)”），表示将整个文档中的li进行统一编号，选下标大于3的li
8)	：last，如$(“div   p:last”)，表示div内最后一个p
9)	:header，如$(“:header”)，表示选取所有标题
10)	:root，如$(‘:root’)表示获取根节点
4、	内容选择器
1)	:contains，如$(‘div:contains(文本内容)’)，表示获取包含指定文本的元素
2)	:empty，如$('div:empty')，表示选取空的HTML元素
3)	:has，如$('div:has(span)')，表示选取包含span的div
5、	可见性
1)	:hidden，选取不可见元素，如$('div:hidden')，表示选取不可见的div
2)	:visible，选取可见元素，如$(‘div:visible’)
6、	属性选择器
1)	利用属性名选取元素，格式：$（“[属性名]”）；
2)	利用属性名和属性值选取元素，格式：$（“[属性名=属性值]”）；
3)	选取不存在某个属性值的元素，格式：$（“[属性名！=属性值]”）；如$("div[title!='box']").css('color', 'red')；
4)	选取属性值以指定字符串开始的元素，格式：$（“[属性名^=字符串]”）；如$("div[title^='a']").css('color','red')；
5)	选取属性值中包含某个字符串的元素，格式：$（“[属性名*=字符串]”）
6)	选取属性值以指定字符串结尾的元素，格式：$（“[属性名$=字符串]”）；
7)	选取同时包含多个属性的元素，格式：$(‘[属性名1] [属性名2]…’);
7、	结构选择器
1)	选取第一个元素，格式：$（“：first-child”）;如$("body   :first-child").css('color', 'red');
2)	选取最后一个元素，格式：$（“：last-child”）;如$("body  :last-child").css('color', 'red');
3)	选取正数第n个元素，格式：$（“：nth-child(n)”）；如$("body div:nth-child(2)").css('color','red')
4)	选取倒数第n个元素，格式：$（“：nth-last-child(n)”）;
5)	按类别查找第一个元素，格式：$（“:first-of-type”）；如$("body div:first-of-type").css('color','red')
6)	按类别查找最后一个元素，格式：$（“:last-of-type”）；如$("body div:last-of-type").css('color','red')
7)	按类别查找正数第n个元素，格式：$（“：nth-of-type(n)”）
8)	按类别查找倒数第n个元素，格式：$（“：nth-last-of-type（n）”）
9)	查找容器只包含一个子元素的子元素，格式：$（“：only-child”）；
10)	查找容器中指定类型的元素，该元素在此容器中类型必须是唯一的，格式：$（“：only-of-type”）；
8、	表单
1)	:input，匹配所有 input, textarea, select 和 button 元素
2)	:text 
3)	:password 
4)	:radio 
5)	:checkbox 
6)	:submit 
7)	:image 
8)	:reset 
9)	:button 
10)	:file 
11)	:hidden 
9、	表单对象属性
1)	：enabled，匹配所有可用元素
2)	：disabled，匹配所有不可用元素
3)	：checked，匹配所有选中的被选中元素(复选框、单选框等，select中的option)，对于select元素来说，获取选中推荐使用 :selected
4)	：selected，匹配所有选中的option元素
十、	html方法和text方法
1、	html方法：类似于原生JS中innerHTML属性
1)	作用：该方法的作用是获取或者设置jQuery对象中的内容
2)	获取格式：jQuery对象.html();返回值类型为字符串，支持标签的解析
2、	text方法：类似于原生JS中的innerText属性
1)	作用：该方法的作用是获取或者设置jQuery对象中的文本内容
2)	获取格式：jQuery对象.text();返回值类型为字符串
3)	设置格式：jQuery对象.text(“内容”)，不解析标签
4)	注意事项：如果jQuery对象中包含多个DOM对象，那么在使用text方法时，会有隐式迭代现象
十一、	val方法
1、	作用：获取或者设置表单元素中的value值
2、	获取格式：jQuery对象.val();
3、	设置格式：jQuery对象.val(值);
十二、	jQuery中如何操作元素的HTML属性：attr方法、prop方法
1、	attr方法
1)	作用：该方法的作用就是用来获取或者设置元素的HTML属性值
2)	获取格式：jquery对象.attr(‘html属性名’);注意：如果jquery对象中包含多个DOM对象，那么只能获取第一个对象的属性值
3)	更改的格式：jquery对象.attr(‘html属性名’,’属性值’);
4)	注意事项：如果在设置HTML属性值，设置的属性比较多，我们可以采用如下格式
jquery对象.attr({
	属性名1：属性值，
	属性名2：属性值，
	….
});
2、	prop方法：该方法的作用和attr相同。但是这两个方法的区别是如果要操作checked属性、selected属性，那么必须使用prop
3、	removeAttr方法
1)	作用：该方法的作用是删除jquery对象上的某个HTML属性
2)	格式：jquery对象.removeAttr(‘属性名’);
十三、	jQuery然后操作CSS属性——css方法
1、	作用：该方法的作用是获取或者设置CSS属性值
2、	获取格式：jQuery对象.css(‘CSS属性名’);
3、	设置格式：jquery对象.css（‘css属性名’，‘属性值’），如果要设置多条css属性，可以采用对象的形式，即
jquery对象.css({
	属性名1：属性值，
	属性名2：属性值
});
注：在设置的使用如果有‘-’，需要采用驼峰命名法，如font-size，需要改为fontSize，但是在获取时可以不使用驼峰命名法
十四、	jquery中如何操作元素的类
1、	addClass方法
1)	作用：给元素添加类
2)	格式：jquery对象.addClass(‘类名’);
2、	removeClass方法
1)	作用：删除元素上面指定的类
2)	格式：jquery对象.removeClass(‘类名’);
3、	hasClass方法
1)	作用：判断对象身上是否包含指定的类，如果有返回true，否则返回false
2)	格式：jquery对象.hasClass(‘类名’);
4、	toggleClass方法
1)	作用：判断元素身上是否包含指定的类，如果包含则删除该类，如果不包含则添加该类
2)	格式：jquery对象.toggleClass(‘类名’);



一、	创建并添加元素节点
(一)	创建：
1、	格式1：$(‘<标签名>’);
2、	格式2：$（“<开始标签   属性名=’属性值’>内容</结束标签>”）；
3、	格式2：$（”<标签名>”， {属性名：“属性值”，属性名：“属性值”}）；
4、	返回值：返回值为创建好的jQuery对象
(二)	添加
1、	append方法
1)	格式：元素1.append（元素2）；
2)	作用：在元素1内部追加元素2 
3)	返回值：返回值为元素1
2、	appendTo方法
1)	格式：元素2.appendTo（元素1）；
2)	作用：将元素2添加到元素1的尾部
3)	注意：返回值为元素2，另外appendTo的参数可以是选择器 
3、	prepend方法
1)	格式：元素1.prepend（元素2）；
2)	作用：在元素1内部的前端添加元素2
4、	prependTo方法
1)	格式：元素2.prependTo（元素1）；
2)	作用：将元素2添加到元素1的前端
5、	after方法：在元素1的后面插入元素2,格式：元素1.after（元素2）；
6、	before方法：在元素1的前面插入元素2,格式：元素1.before（元素2）；
7、	insertAfter方法：将元素2插入到元素1后面，格式：元素2.insertAfter（元素1）
8、	insertBefore方法：将元素2插入到元素1前面，格式：元素2.insertBefore（元素1）
9、	wrap方法：在每个元素1外面用元素2包裹起来，格式：元素1.wrap（元素2）
1)	注意事项：元素2可以是jQuery对象，也可以是标签名，即如下元素1.wrap(‘<p>’);
10、	wrapAll方法：在所有元素1外面用元素2包裹起来，格式：元素1.wrap（元素2）；
1)	注意事项：元素2可以是jQuery对象，也可以是标签名，即如下元素1.wrap(‘<p>’);
11、	unwrap方法：去除包裹在元素1外面的父元素，格式：元素1.unwrap()
12、	wrapInner方法：用每个元素1内部包裹元素2，格式：元素1.wrapInner（元素2）；
13、	replaceAll方法：用元素1替换掉所有的元素2，格式：元素1.replaceAll（元素2）；
14、	replaceWith方法：用元素2替换掉所有的元素1，格式：元素1.replaceWith（元素2）；
15、	empty方法：删除元素1的所有子节点，格式：元素1.empty（）
16、	remove方法：删除元素，格式：元素.remove（参数），如果没有参数则表示删除所有匹配的元素，如果有参数则删除对应的参数所在的元素，绑定的数据和事件都会被删除，返回值为被删除的元素。格式：被删除的元素.remove（参数），示例：$(‘div’).remove(‘#box’);
17、	detach方法：删除元素，格式：元素.detach（参数），如果没有参数则表示删除所有匹配的元素，如果有参数则删除对应的参数所在的元素，返回值为被删除的元素，绑定的数据和事件不会被删除
18、	clone方法：复制元素，格式：元素.clone（true/false），如果是true，则复制事件、如果是false（默认值），则不复制事件，默认不复制
二、	操作元素位置
(一)	position方法
1、	作用：返回相对某个元素的偏移量
2、	格式：元素.position（）
3、	注意
1)	返回值为包含top属性和left属性的对象
2)	如果祖先元素中没有定位，参考对象为document
3)	如果祖先元素中有定位，参考对象为离它最近的且具有定位的祖先元素
(二)	offset方法
1、	注意：返回元素相对于窗口的偏移量
2、	格式：元素.offset（）
3、	注意：返回值为对象
(三)	scrollTop方法
1、	作用：获取或设置匹配元素相对滚动条顶部的偏移
2、	获取格式：元素.scrollTop（）
3、	设置格式：元素.scrollTop（值）
(四)	scrollLeft方法
1、	作用：获取或设置匹配元素相对滚动条左侧的偏移
2、	获取格式：元素.scrollLeft（）
3、	设置格式：元素.scrollLeft（值）
三、	操作元素尺寸
(一)	height方法
1、	作用：获取或者设置元素的高度
2、	获取格式：元素.height（）；
3、	设置格式：元素.height（值）；
4、	注意：该高度不受padding、border、滚动条
(二)	innerHeight方法
1、	作用：获取或设置元素内部高度（包含padding，不包含border）
2、	获取格式：元素.innerHeight（）
3、	设置格式：元素.innerHeight（值）
(三)	outerHeight方法
1、	作用：获取或设置元素的外部高度（包含padding，border）
2、	获取格式：元素.outerHeight（）；
3、	设置格式：元素.outerHeight（值）；
(四)	width方法
1、	作用：获取或者设置元素的宽度
2、	获取格式：元素.width（）；
3、	设置格式：元素.width（值）；
(五)	innerWidth、outerWidth类似于高度
四、	jQuery对象的过滤
(一)	eq方法
1、	作用：获取对应下标的jQuery对象
2、	格式：jQuery对象集合.eq（下标）
(二)	first方法
1、	作用：获取匹配元素集合中的第一个元素
2、	格式：jQuery对象集合.first（）
(三)	last方法
1、	作用：获取匹配元素集合中的第后个元素
2、	格式：jQuery对象集合.last（）
(四)	is方法
1、	作用：判断当前匹配元素集合中的元素是否与指定的参数匹配，匹配返回值为true，否则返回值为false
2、	格式：元素.is（参数）
3、	示例：$('li').eq(0).parent().is('div')
4、	返回值：布尔值
(五)	has方法
1、	作用：筛选匹配元素集合中包含特定后代的元素
2、	格式：元素.has（参数）
3、	示例：$('li').has('span').css('background','red')
(六)	not方法
1、	作用：从匹配的元素集合中移除指定的元素
2、	格式：元素.not（参数）
(七)	slice方法
1、	作用：选取匹配元素集的子集
2、	格式：元素.slice（begin，end）
(八)	filter方法
1、	作用：筛选出与指定表达式匹配的元素
2、	格式：元素.filter（’选择器1，选择器2，选择器3…’）
3、	示例：($('p').filter(':first, :last')
(九)	map方法
1、	作用：此方法可以通过它的回调函数处理匹配元素集合中的每一个元素。返回值是一个由jQuery包装的数组，通常利用get()获取jQuery对象封装的整个数组或数组的某个元素。
2、	格式：元素.map（回调函数）
3、	示例：
 
五、	jQuery对象的查找
(一)	children
1、	作用：查找所有子元素，不包括文本节点
2、	格式：元素.children（参数）
(二)	closest
1、	作用：获取离元素1最近的元素2，查找的顺序是先从自身查找，如果自身和条件匹配，那么返回自身，如果自身和条件不匹配，那么向上查找（即到祖先元素中查找），如果和条件匹配则返回对应的元素
2、	格式：元素1.closest（元素2）
(三)	find
1、	作用：在元素1中查找元素2，类似于选择器中的后代选择器
2、	格式：元素1.find（元素2）
(四)	next
1、	作用：返回后面那个紧邻的同辈元素，查找元素1后面紧邻的元素2，类似于选择器中的ele1+ele2
2、	格式：元素1.next（元素2）
(五)	nextAll
1、	作用：返回后面所有同辈元素，查找元素1后面所有的元素2
2、	格式：元素1.next（元素2）
(六)	nextUntil
1、	作用：查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。选取时匹配元素不被包含在内，如$(‘div’).nextUntil(‘span‘)，该语句的作用是选取从div到span之间的所有元素
2、	格式：元素1.nextUntil（元素2）
(七)	offsetParent
1、	作用：返回具有定位的祖先元素
2、	格式：元素.offsetParent（）
3、	注意：如果祖先元素中没有定位，那么返回html，如果祖先元素中有定位，返回离它最近的且具有定位的祖先元素
(八)	parent
1、	作用：返回父元素
2、	格式：元素.parent（）
(九)	parents
1、	作用：返回所有祖先元素
2、	格式：元素.parents（匹配对象）
(十)	parentsUntil
1、	作用：查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。不包含这个元素
2、	格式：元素1.parentsUntil(元素2)
(十一)	prev
1、	作用：获取前一个兄弟元素
2、	格式：元素1.prev（元素2）
(十二)	prevAll
1、	作用：查找当前元素之前所有的同辈元素
2、	格式：元素1.prevAll（元素2）
(十三)	prevUntil
1、	作用：查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。
2、	格式：元素1.prevUntil（元素2）
(十四)	siblings
1、	作用：获取某个元素的所有兄弟元素
2、	格式：元素.siblings（元素2）
六、	串联：
(一)	add方法
1、	作用：把与表达式匹配的元素添加到jQuery对象中
2、	格式：jquery对象.add(表达式)
(二)	contents方法
1、	作用：查找匹配元素内部所有的子节点（包括文本节点）。
2、	格式：元素.contents（）；
(三)	end方法
1、	作用：回到最近的一个"破坏性"操作之前
2、	示例：
 






一、	jQuery中事件的添加方式
1、 简单的事件添加方式（必须会）：
1)	格式：jQuery对象.事件名（事件函数）；
2)	注意：如果事件名相同，那么后面的事件不会覆盖前面的事件
2、 bind方式添加事件：该方式添加事件的缺点是后面添加的元素无法使用事件
1)	格式1：jQuery对象.bind(‘事件名’，事件函数);
2)	格式2：jQuery对象.bind(‘事件名1   事件名2…’，事件函数);该方式适用于不同的事件，但是这些事件被触发时要执行的事件函数相同
3)	格式3：
jQuery对象.bind({
	事件名1：function(){},
	事件名2：function(){}
});
3、 delegate方式添加事件：该方式只支持事件委托
1)	格式：祖先元素.delegate(要拥有事件的后代元素，’事件名’，事件函数);
4、 on方式添加事件（必须会）
1)	给自身绑事件
	格式1：jQuery对象.on(‘事件名’，事件函数);
	格式2：jQuery对象.on(‘事件名1   事件名2…’，事件函数);
	格式：
jQuery对象.on({
	事件名1： 事件函数，
	事件名2：事件函数
});
2)	采用事件委托方式给后代元素添加事件
	格式：祖先元素.on(‘事件名’，‘要具有事件的后代元素’，事件函数);
5、 one方式添加事件
1)	作用：该方式只能添加一次性事件，即事件只能被触发一次
2)	格式：jQuery对象.one(‘事件名’，事件函数);
6、 hover方式添加事件
1)	作用：该方式添加的事件，其实就是鼠标移入和移出两种事件的综合
2)	格式：
jQuery对象.hover(
	function(){}，
	function(){}
);
二、	jQuery中如何删除事件
1、 利用unbind方法删除事件（对应bind）
1)	格式1：jQuery对象.unbind();表示删除对象身上所有的事件
2)	格式2：jQuery对象.unbind(‘事件名1  事件名2….’);
2、 利用undelegate方法删除事件（对应delegate）
1)	格式1：祖先元素.undelegate();表示删除后代元素身上所有的事件
2)	格式2：祖先元素.undelegate(‘事件名1   事件名2’);表示删除后代元素身上指定的事件
3、 利用off方法删除事件（对应on）
1)	格式1：jQuery对象.off();表示删除对象身上所有的事件
2)	格式2：jQuery对象.off(‘事件名1  事件名2….’);
3)	
三、	jQuery中如何触发事件
1、 方式1：通过调用对应的事件函数，格式：jQuery对象.事件名（）；
2、 方式2：利用trigger方法触发，格式：jQuery对象.trigger(‘事件名’);
四、	jQuery中常用的事件
1、 click：单击时触发该事件
2、 dblclick ：双击时触发该事件
3、 blur：失去焦点时触发该事件
4、 focus ：获取焦点时触发该事件
5、 change：域内的值被改变时触发，如select下拉菜单中的选项被改变时触发 
6、 keydown ：键盘上的按键被按下去时触发该事件，支持所有按键
7、 keypress ：键盘上的按键被按下去时触发该事件，不支持功能按键
8、 keyup ：松开键盘上的按键时触发该事件
9、 mousedown ：鼠标被按键被压下去时触发
10、 mouseup：鼠标按键被松开时触发 
11、 mouseenter ：鼠标移入某个元素时触发该事件，注意，不管这个元素中是否有子元素，该事件只触发一次
12、 mouseleave ：鼠标移出某个元素时触发该事件。注意，不管这个元素中是否有子元素，该事件只有在鼠标一开设置了该事件的那个元素时触发
13、 mouseover ：鼠标移入某个元素时触发该事件，注意，如果该元素中有子元素，那么在移入到子元素上时也会触发该事件。
1)	mouseover、mouseout和mouseenter、mouseleave的区别：如果元素中包含其它的元素，如div中包含p，那么在使用mouseove时，进入div时会触发一次，进入到它的子元素p时还会触发一次，mouseout也是一样。但是mouseenter和mouseleave只会被触发一次
14、 mouseout ：鼠标从元素身上移出时触发
15、 mousemove ：鼠标在某个元素上方移动时触发该事件
16、 resize ：更改元素尺寸时触发
17、 scroll ：拉动滚动条时触发
18、 select ：文本框、文本域中的内容被选取时触发
19、 submit：在点击提交按钮时触发 ，给form元素添加该事件
20、 unload ：在页面被卸载时触发或者页面发生跳转时触发，Firefox 与 Chrome 会阻止弹窗，所以没办法看到效果
21、 ready：该事件在DOM树渲染完毕后立即执行，不需要等里面的节点加载完成，如不需要等img完全加载完
五、	jQuery中如何使用事件对象：在jQuery中事件对象是以形参的形式传递给事件函数，常用属性、方法如下
1、 event.type：此属性可以返回事件的类型
2、 event.pageX：此属性能够返回当前鼠标指针相对于文档的左边缘的位置
3、 event.pageY：此属性能够返回当前鼠标指针相对于文档的上边缘的位置。
4、 event.which：针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮，按键盘按键返回keyCode，按鼠标左键返回1，按鼠标右键返回3，按鼠标中间键返回2
5、 event.result：此属性可以返回与当前事件类型相同事件的前一个处理函数的返回值
 
6、 event.data：此属性返回传递给当前事件处理函数的额外数据。返回值可以是任意类型的，如果没有传递额外数据，那么返回值是undefined
7、 event.target：此属性用来返回触发事件的DOM元素（点击的是谁），返回值为DOM对象
8、 event.currentTarget：在事件冒泡阶段中的当前DOM元素（谁身上的事件被触发了）
9、 event.delegateTarget：同上
10、 event. relatedTarget：在事件中涉及的其它任何DOM元素
1)	对于mouseout 事件，它指向被进入的元素，表示去哪
2)	对于mouseover事件，表示从哪来
11、 event.stopPropagation方法：阻止冒泡
12、 event.isPropagationStopped方法：根据事件对象中是否调用过 event.stopPropagation() 方法来返回一个布尔值，如果调用了返回true，否则返回false
13、 preventDefault方法：阻止默认事件行为的触发。
14、 event.isDefaultPrevented方法：根据事件对象中是否调用过 event.preventDefault() 方法来返回一个布尔值
六、	jQuery中如何使用动画
(一)	jQuery自带的动画
1、	show方法
1)	作用：该方法的作用是是显示jQuery对象
2)	格式：jQuery对象.show(参数1，参数2)；
3)	参数说明
	参数1：设置动画所需的时间，单位为毫秒，该参数也可以是字符串，如fast（200毫秒）、normal（默认，400毫秒）、slow（600毫秒），如果是任意的字符串，如‘abc’表示normal
	参数2：该参数为一个回调函数，当动画执行完毕后执行该回调函数
2、	hide方法：该方法的作用就是隐藏元素，使用格式同上
3、	slideDown方法：向下滑入，用法同上，注意如果slideown没有参数，那么默认为normal
4、	slideUp方法：向上滑出，用法同上，注意如果slideUp没有参数，那么默认为normal
5、	slideToggle方法：以滑动的方式显示隐藏元素，用法同上，注意如果sideToggle没有参数，那么默认为normal
(二)	自定义动画
1、	animate方法
1)	作用：自定义动画效果
2)	格式：jQuery对象.animate(参数1，参数2，参数3，参数4);
3)	参数说明
	参数1：该参数通常是一个对象，里面一键值对的形式封装了要达到的CSS样式，注意：animate的修改样式时只对属性值中包含数值的样式敏感
	参数2：动画执行所需时间，单位为毫秒，该参数也可以是字符串，如fast（200毫秒）、normal（默认，400毫秒）、slow（600毫秒），如果是任意的字符串，如‘abc’表示normal
	参数3：动画在执行时的状态（即是匀速的，还是慢-快-慢），只支持两个值linear、swing(默认)
	参数4：回调函数，动画执行完毕后执行该回调函数
4)	注意事项：animate中不可以直接更改颜色的颜色，如果需要更改颜色，需要使用jquery的插件jquery.color.min.js。插件的使用方式是
	第一步：先引入jQuery文档
	第二步：在jQuery文档下面引入jQuery插件
	第三步：正常在jQuery代码中设置颜色即可
2、	delay方法
1)	作用：延迟动画的执行
2)	格式：jQuery对象.delay(延迟时间).动画函数（）；
3、	stop方法
1)	作用：该方法的作用是停止或者清空元素身上的的动画
2)	格式：jQuery对象.stop(参数1，参数2);参数1和参数2的值都是布尔值true、false
4、	finish方法
1)	作用：停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画
2)	格式：jQuery对象.finish();
3)	说明：该方法的作用就是停止当前正在执行的动画，删除后面所有动画，即后面的所有动画都不在执行。元素停留在最后一个动画完成后的效果






一、	jQuery中的对象访问
1、	each方法
1)	作用：遍历jQuery对象中的元素
2)	格式：jQuery对象.each(function(index,ele){});注意：index表示元素的下标，ele表示DOM对象
3)	注意：在jQuery中如果是对jQuery对象中的元素进行样式的设置会有“隐式迭代”现象，隐式迭代时，元素的样式会被设置成相同的样式或属性，如果要对元素采用不同的操作，就需要用each
2、	size方法
1)	作用：获取jQuery对象中包含的元素的个数
2)	个数：jQuery对象.size();
3、	length属性
1)	作用：获取jQuery对象中包含的元素的个数
2)	格式：jQuery对象.length;
4、	selector属性
1)	作用：获取选取当前jQuery对象时的选择器
2)	格式：jQuery对象.selector
5、	get方法
1)	作用：该方法的作用是获取jQuery对象中的某个DOM对象
2)	格式：jQuery对象.get(下标);返回值是DOM对象
3)	注意：也可以采用如下格式获取DOM对象：jQuery对象[下标]
6、	index方法
1)	作用：获取某个jQuery对象在jQuery对象集合中的下标
2)	格式：jQuery对象集合.index(jquery对象);
3)	注意：如果有返回对应下标，如果没有返回-1
二、	jQuery中如何实现ajax通信
1、	$.get方法
1)	作用：以get方式请求数据
2)	格式：$.get(参数1，参数2，参数3，参数4);
	参数1：表示请求的文档所在的地址路径
	参数2：表示向服务器传递的参数，是一个对象
	参数3：是一个回调函数，该函数有三个形参，分别表示：获取的数据、响应状态码（字符串格式）、通信对象
	参数4：请求的文件的类型
2、	$.post方法
1)	作用：以post方式请求数据
2)	格式：$.post(参数1，参数2，参数3，参数4);
	参数1：表示请求的文档所在的地址路径
	参数2：表示向服务器传递的参数，是一个对象
	参数3：是一个回调函数，该函数有三个形参，分别表示：获取的数据、响应状态码（字符串格式）、通信对象
	参数4：请求的文件的类型
3、	$.ajax方法
1)	作用：从服务器请求数据（功能最为强大）
2)	格式1：$.ajax(url, {参数列表});
3)	格式2：$.ajax({参数列表});
4)	参数说明
	url：请求的文件的地址
	type：请求类型，值为get或post
	data：向服务器传递的参数
	dataType：请求的文件的类型
	aysn：设置是同步还是异步，属性值为true（异步）、false（同步）
	success：请求成功是执行的函数，即属性值为函数，该函数有三个形参：请求的数据、响应状态码、通信对象
	error：请求失败时执行的函数，即属性值为函数，有一个形参，这个形参是通信对象
	complete：属性值为一个函数，该函数无论请求成功还是失败都会执行
4、	load方法
1)	作用：将一个网页文件中的代码（head下面和body下面的代码）加载到另一个页面中的指定的元素内部
2)	格式：jQuery对象.load(参数1，参数2，参数3);
	参数1：表示要加载的HTML文件地址
	参数2：传递的参数，属性值为对象
	参数3：回调函数，该函数的形参可以获取被加载文件的内部结构，即文件中的所有内容
5、	$.getJSON方法
1)	作用：通过get方式请求服务器上面的json文件
2)	格式：$.getJSON(参数1，参数2，参数3);
	参数1：表示json文件的地址
	参数2：向服务器传递的参数
	参数3：回调函数，里面包含三个形参：请求到的数据、响应状态码、通信对象
3)	注意：该方法支持JSONP（跨域）
6、	$.getScript方法
1)	作用：通过get格式请求服务器上面的js文件，并让该文件执行
2)	格式：$.getScript(参数1，参数2);
	参数1：js文件的地址
	参数2：回调函数，该回调函数的形参是被请求下来的JS文件中的代码
三、	jQuery插件：所谓jQuery插件是指为了扩展jQuery的功能而提供的代码段或者封装好的js文件。插件的使用方式
1、	第一步：先引入jQuery文档
2、	第二步：引入要使用的jQuery插件
3、	第三步：在自己的HTML文档中补充代码
四、	jQuery常用插件——懒加载插件
五、	自定义jQuery插件
1、	格式1：$.prototype.方法名 = function(){};
2、	格式2：$.fn.方法名 = function(){};