前端架构师之01_JQuery

1 jQuery快速入门

1.1 什么是jQuery

它是一个开源的JavaScript类库 。

常见的JavaScript类库：jQuery、Prototype、ExtJS、Mootools和YUI等。

jQuery的核心理念：write less，do more（写的更少，做的更多）。

jQuery的特点：

• jQuery是一个轻量级的脚本，其代码非常小巧。
• 语法简洁易懂，学习速度快，文档丰富。
• 支持CSS1~CSS3定义的属性和选择器。
• 跨浏览器，支持的浏览器包括IE6~IE11和Chrome等。
• 实现了JavaScript脚本和HTML代码的分离，便于后期编辑和维护。
• 插件丰富，可以通过插件扩展更多功能。

1.2 下载jQuery

jQuery下载链接

• jQuery 1.x系列：已经停止更新，保持了对早期浏览器的支持，最终版本是jQuery 1.12.4。
• jQuery 2.x系列：已经停止更新，不再支持IE6~8浏览器，从而更加轻量级，最终版本是jQuery2.2.4 。
• jQuery 3.x系列：只支持最新的浏览器，因此除非特殊要求，一般不会使用此版本。

• minified 压缩后的生产版、
• uncompressed 未压缩的开发版

打开链接 -> 右键，网页另存为（或者 Ctrl + S）-> 选择保存目录

1.3 使用jQuery

<!-- 方式1：引入本地下载的jQuery -->
<script src="jquery-1.12.4.min.js"></script>
<!-- 方式2：通过CDN(内容分发网络)引入jQuery -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

• 方式1引入了当前目录下的jquery-1.12.4.min.js文件。
• 方式2则通过公共的CDN的优势加快了jQuery文件的加载速度。

在HTML页面中创建含有文本“测试”和属性（align=“center”）的<h2>元素。

// 原生JavaScript的实现方式
var h2 = document.createElement('h2'); 	// 创建h2元素节点
var text = document.createTextNode('测试'); // 创建文本节点
var attr = document.createAttribute('align');	// 创建属性节点
attr.value = 'center'; 			// 为属性节点赋值
h2.setAttributeNode(attr);  	// 为h2元素添加属性节点
h2.appendChild(text); 		// 为h2元素添加文本节点
// 将h2节点追加为body元素的子节点
document.querySelector('body').appendChild(h2);

// jQuery的实现方式
$('<h2 align="center">测试</h2>').appendTo('body');

• 美元符号“$”表示jQuery类。
• “$()”等价于“jQuery()”，即jQuery的构造函数，为该构造函数传递一个元素，就可以创建出一个元素对象。

2 元素操作

2.1 jQuery对象

jQuery对象：是对DOM对象的一层包装。

作用：是通过自身提供的一系列快捷功能来简化DOM操作的复杂度，提高程序的开发效率。

解决的问题：不同浏览器的兼容问题。

// 创建一个jQuery对象，该对象包装了document对象
var $doc = $(document);
// 在控制台中输出jQuery对象
console.log($doc);       

• $(document)表示将document对象转换为jQuery对象。
• 通过console.log()可以查看其内部结构。
• jQuery对象内部有3个元素。
• 下标为0的元素表示其内部的DOM对象，即document对象。
• length表示其内部DOM对象的个数，一个jQuery对象中可以包装多个DOM对象。
• 通过 __proto__ 可以查看该对象的的原型（即jQuery本身）所具有的属性和方法。

2.2 jQuery选择器

jQuery选择器类似CSS选择器的机制的一种操作HTML元素的方式。

好处：可以轻松的获取DOM元素。

jQuery选择器的基本语法：$(选择器)。

根据选择器获取方式的不同大致可以将其分为以下几类。

• 基本选择器
• 层级选择器
• 基本过滤选择器
• 内容选择器
• 可见性选择器
• 属性选择器
• 子元素选择器
• 表单选择器

2.2.1 基本选择器

jQuery中基本的选择器，常用的分别为：标签选择器、类选择器和ID选择器。

选择器	功能描述	示例
element	根据指定元素名匹配所有元素	$("li")选取所有的<li>元素
.class	根据指定类名匹配所有元素	$(".bar")选取所有class为bar的元素
#id	根据指定id匹配一个元素	$("#btn")选取id为btn的元素
selector1,selector2,…	同时获取多个元素	$("li,p,div")同时获取所有<li>、<p>和<div>元素

2.2.2 层级选择器

层级选择器，通过一些指定符号，如空格、>、+和~完成多层级元素之间的获取。

选择器	功能描述	示例
selector selector1	选取祖先元素下的所有后代元素	$("div .test") 选取<div>下所有class名为test的元素（多级）
parent > child	获取父元素下的所有子元素	$(".box >.con") 选取class名为box下的所有class名为con的子元素（一级）
prev + next	获取当前元素紧邻的一下同级元素	$("div + .title")获取紧邻<div>的下一个class名为title的兄弟节点
prev~siblings	获取当前元素后的所有同级元素	$(".bar ~ li")获取class名为bar的元素后的所有同级元素节点<li>

2.2.3 基本过滤选择器

基本过滤选择器，表示对获取到的元素进行筛选，如偶数行中的元素等。

选择器	功能描述	示例
:first	获取指定选择器中的第一个元素	$("li :first")获取第1个<li>元素
:last	获取指定选择器中的最后一个元素	$("li :last")获取最后1个<li>元素
:even	获取索引为偶数的指定选择器中的奇数行数据，索引默认从0开始	$("li :even")获取所有li元素中，索引为偶数的奇数行数据，如索引为0,2,4的第1个、第3个和第5个<li>元素
:odd	获取索引为奇数的指定选择器中的偶数行数据，索引默认从0开始	$("li :odd")获取所有<li>元素中，索引为奇数的偶数行数据，如索引为1,3,5的第2个、第4个和第6个<li>元素
:eq(index)	获取索引等于index的元素，默认从0开始	$("li:eq(3)")获取索引为3的<li>元素
:gt(index)	获取索引大于index的元素	$("li:gt(3)")获取索引大于3的所有<li>元素
:lt(index)	获取索引小于index的元素	$("li:lt(3)")获取索引小于3的所有<li>元素
:not(seletor)	获取除指定的选择器外的其他元素	$("li:not(li:eq(3))")获取除索引为3外的所有<li>元素
:focus	匹配当前获取焦点的元素	$("input:focus")匹配当前获取焦点的<input>元素
:animated	匹配所有正在执行动画效果的元素	$("div:not(:animated)")匹配当前没有执行动画的<div>元素
:target	选择由文档URI的格式化识别码表示的目标元素	若URI为http://example.com/#foo，则$("div:target")将获取<div id="foo">元素

2.2.4 内容选择器

根据元素的内容完成指定元素的获取。例如，获取所有元素内容不为空的<li>等。

选择器	功能描述	示例
:contains(text)	获取内容包含text文本的元素	$("li:contains('js')")获取内容中含“js”的<li>元素
:empty	获取内容为空的元素	$("li:empty")获取内容为空的<li>元素
:has(selector)	获取内容包含指定选择器的元素	$("li:has('a')")获取内容中含<a>元素的所有<li>元素
:parent	获取内容不为空的元素（特殊）	$("li:parent")获取内容不为空的<li>元素

2.2.5 可见性选择器

为了方便开发，jQuery中还提供了可见或隐藏元素的获取。

选择器	功能描述	示例
:hidden	获取所有隐藏元素	$("li:hidden")获取所有隐藏的<li>元素
:visible	获取所有可见元素	$("li:visible")获取所有可见的<li>元素

• 当指定元素的display设置为none时，可以通过“:hidden”获取隐藏的元素。
• 当指定元素的display设置为block时，可以通过“:visible”获取可见的元素。

2.2.6 属性选择器

根据元素的属性获取指定元素的方式。如获取class值为current的<div>元素等。

选择器	功能描述	示例
[attr]	获取具有指定属性的元素	$("div[class]")获取含有class属性的所有<div>元素
[attr=value]	获取属性值等于value的元素	$("div[class=current]")获取class等于current的所有<div>元素
[attr!=value]	获取属性值不等于value的元素	$("div[class!=current]")获取class不等于current的所有<div>元素
[attr^=value]	获取属性值以value开始的元素	$("div[class^=box]")获取class属性值以box开始的所有<div>元素
[attr$=value]	获取属性值以value结尾的元素	$("div[class$=er]")获取class属性值以er结尾的所有<div>元素
[attr*=value]	获取属性值包含value的元素	$("div[class*='-']")获取class属性值中含有“-”符号的所有<div>元素
[attr~=value]	获取元素的属性值包含一个value，以空格分隔	$("div[class~='box']")获取class属性值等于“box”或通过空格分隔并含有box的<div>元素，如“t box”
[attr1][attr2]...[attrN]	获取同时拥有多个属性的元素	$("input[id][name$='usr']")获取同时含有id属性和属性值以usr结尾的name属性的<input>元素

2.2.7 子元素选择器

选择器	功能描述
:nth-child(index/even/odd/公式)	索引index默认从1开始，匹配指定index索引、偶数、奇数、或符合指定公式（如2n，n默认从0开始）的子元素
:first-child	获取第一个子元素
:last-child	获取最后一个子元素
:only-child	如果当前元素是唯一的子元素，则匹配
:nth-last-child(index/even/odd/公式)	选择所有它们父元素的第n个子元素。计数从最后一个元素开始到第一个
:nth-of-type(index/even/odd/公式))	选择同属于一个父元素之下，并且标签名相同的子元素中的第n个子元素
:first-of-type	选择所有相同的元素名称的第一个子元素
:last-of-type	选择所有相同的元素名称的最后一个子元素
:only-of-type	选择所有没有兄弟元素，且具有相同的元素名称的元素
:nth-last-of-type(index/even/odd/公式)	选择所有它们的父级元素的第n个子元素，计数从最后一个元素到第一个

带有“of-type” 与未带有“of-type”项的选择器有一定的区别。

2.2.8 表单选择器

选择器	功能描述
:input	获取页面中的所有表单元素，包含<select>以及<textarea>元素
:text	选取页面中的所有文本框
:password	选取所有的密码框
:radio	选取所有的单选按钮
:checkbox	选取所有的复选框
:submit	获取submit提交按钮
:reset	获取reset重置按钮
:image	获取type="image"的图像域
:button	获取button按钮，包括<button></button>和type="button"
:file	获取type="file"的文件域
:hidden	获取隐藏表单项
:enabled	获取所有可用表单元素
:disabled	获取所有不可用表单元素
:checked	获取所有选中的表单元素，主要针对radio和checkbox
:selected	获取所有选中的表单元素，主要针对select

选择器$("input")与$(":input")虽然都可以获取表单项，但是它们表达的含义有一定的区别，前者仅能获取表单标签是<input>的控件，后者则可以同时获取页面中所有的表单控件，包括表单标签是<select>以及<textarea>的控件。

2.3 元素遍历

在操作HTML文档中的DOM元素时，经常需要进行元素遍历。

jQuery提供的方法：each()。

<ul>
    <li>PHP</li><li>iOS</li>
    <li>Java</li><li>UI</li>
</ul>
<script src="jquery-1.12.4.min.js"></script>
<script>
    $('li').each(function(index, element) {
        console.log('第' + (index + 1) + '个:' + $(element).text());
    });
</script>

提示：在回调函数内部还可以直接使用$(this)来表示当前元素。

2.4 元素内容

元素内容的操作有两种：获取和设置。

语法	说明
html()	获取第一个匹配元素的HTML内容
html(content)	设置第一个匹配元素的HTML内容
text()	获取所有匹配元素包含的文本内容组合起来的文本
text(content)	设置所有匹配元素的文本内容
val()	获取表单元素的value值
val(value)	设置表单元素的value值

<div class="desc">
    <font color="red"><b>Smiles to the rocky</b></font>
    <ul>
        <li>天生我材必有用，千金散尽还复来。</li>
        <li>行到水穷处，坐看云起时。</li>
    </ul>
</div>
<script src="jquery-1.12.4.min.js"></script>
<script>
    var desc = $('.desc');     // 获取class为desc的元素
    var html = desc.html();    // 获取desc的HTML内容（含有标签）
    var text = desc.text();    // 获取desc的文本内容
    console.log(html);
    console.log(text);
</script>

val()方法还可以操作表单（select、radio和checkbox）的选中情况，当要获取的元素是<select>元素时，返回结果是一个包含所选值的数组；当要为表单元素设置选中情况时，可以传递数组参数。

2.5 元素样式

元素样式操作是指获取或设置元素的style属性。

在jQuery中，可以很方便的设置元素的样式、位置、尺寸等属性。

例如，通过css()方法可以设置背景色。

语法	说明
css(name)	获取第一个匹配元素的样式
css(properties)	将一个键值对形式的对象设置为所有匹配元素的样式
css(name, value)	为所有匹配的元素设置样式
width()	获取第一个匹配元素的当前宽度值（返回数值型结果）
width(value)	为所有匹配的元素设置宽度样式（可以是字符串或数字）
height()	获取第一个匹配元素的当前高度值（返回数值型结果）
height(value)	为所有匹配的元素设置高度样式（可以是字符串或数字）
offset()	获取元素的位置，返回的是一个对象，包含left和top属性
offset(properties)	利用对象设置元素的位置，必须包含left和top属性

css()方法中传递的参数若是对象，则需要去掉CSS属性中的“-”，将第2个单词的首字母变为大写。

<div style="width:100px; height:100px; background-color: red"></div>
<script src="jquery-1.12.4.min.js"></script>
<script>
    var ele = $('div');
    var w = ele.css('width');
    var h = ele.css('height');
    ele.css({border: '2px solid black', backgroundColor: '#ccc'});
    console.log('div元素的宽：' + w + '，高：' + h);
</script>

2.6 元素筛选

jQuery提供的元素过滤和查找方法可提供元素个性化的处理，增强对文档的控制能力。

查找方法：

语法	说明
find(expr)	搜索所有与指定表达式匹配的元素
parents([expr])	取得一个包含所有匹配元素的祖先元素的元素集合（不包含根元素）
parent([expr])	取得一个包含所有匹配元素的唯一父元素的元素集合
siblings([expr])	获取所有同级元素（不分上下）
next([expr])	匹配紧邻的同级的下一个元素
prev([expr])	匹配紧邻的同级的上一个元素

过滤方法：

语法	说明
eq(index)	获取第N个元素
filter(expr|obj|ele|fn)	使用选择器、对象、元素或函数完成指定元素的筛选
hasClass(class)	检查当前的元素是否含有某个特定的类，如果有，则返回true
is(expr)	用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true
has(expr)	保留包含特定后代的元素，去掉那些不含有指定后代的元素

<div>
    <ul><li>Spring</li><li>summer</li></ul>
    <ul><li>autumn</li><li>winter</li></ul>
</div>
<script src="jquery-1.12.4.min.js"></script>
<script>
    // 获取div下的所有ul
    $uls = $('div').find('ul');
    // 为下标为1的ul设置背景色
    $uls.eq(1).css('background-color', '#ccc');
</script>	

2.7 元素属性

基本属性的操作有三种：获取、设置和删除。

语法	说明
attr(name)	取得第一个匹配元素的属性值，否则返回undefined
attr(properties)	将一个键值对形式的对象设置为所有匹配元素的属性
attr(name, value)	为所有匹配的元素设置一个属性值
attr(name, function)	将函数的返回值作为所有匹配的元素的name属性值
prop(name)	取得第一个匹配元素的属性值，否则返回undefined
prop(properties)	将一个键值对形式的对象设置为所有匹配元素的属性
prop(name, value)	为所有匹配的元素设置一个属性值
prop(name, function)	将函数的返回值作为所有匹配的元素的name属性值
removeAttr(name)	从每一个匹配的元素中删除一个属性

• attr()和prop()方法只能获取第一个匹配元素的属性值。

• 要获取所有匹配元素的属性值，则需要配合jQuery提供的each()方法进行元素遍历。

在获取或设置属性时，建议操作元素的状态，如checked、selected或disabled时使用prop()方法，其他的情况使用attr()方法。

虽然attr()方法可完成基本的属性操作，但是对于class属性的操作却不够灵活。

因此，为了方便操作，jQuery专门提供了针对class属性操作的方法。

语法	作用	说明
addClass(class)	追加样式	为每个匹配的元素追加指定的类名
removeClass(class)	移除样式	从所有匹配的元素中删除全部或者指定的类
toggleClass(class)	切换样式	判断指定类是否存在，存在则删除，不存在则添加
hasClass(class)	判断样式	判断元素是否具有class样式

• addClass()和removeClass()方法经常一起使用来切换元素的样式。
• 若要为匹配到的元素添加和移除多个样式类名，则样式类名之间可使用空格进行分隔。

2.8 练习作业

• 折叠菜单

  • 编写网页，设置CSS完成折叠菜单的结构和样式设置。
  • 通过层级选择器、基本过滤选择器以及查找的方法获取指定的元素对象。
  • 通过css()方法设置需要折叠以及需要展开的菜单的display值。

3 DOM节点操作

3.1 节点追加

节点追加指的是在现有的节点树中，进行父子或兄弟节点的追加。

语法	作用	说明
父子节点	append(content)	把content内容追加到匹配的元素内容尾部
父子节点	prepend(content)	把content内容追加到匹配的元素内容头部
父子节点	appendTo(content)	把匹配到的内容插入到content内容的尾部
父子节点	prependTo(content)	把匹配到的内容插入到content内容的头部
兄弟节点	after(content)	把content内容插入到元素的尾部
兄弟节点	before(content)	把content内容插入到元素的头部
兄弟节点	insertAfter(content)	把所有匹配的内容插入到content元素的尾部
兄弟节点	insertBefore(content)	把所有匹配的内容插入到content元素的头部

• 父子节点添加指的是在匹配到的元素内部添加指定的content内容。
• 兄弟节点指的是在匹配到的元素外部添加指定的content内容。

3.2 节点替换

节点替换是指将选中的节点替换为指定的节点。

语法	说明
replaceWith(content)	将所有匹配的元素替换成指定的HTML或DOM元素
replaceAll(selector)	用匹配的元素替换掉所有selector匹配到的元素

replaceWith()方法的参数是一个函数时，它的返回值类型必须是字符串类型，用于完成指定元素的替换操作。

3.3 节点删除

语法	说明
empty()	清空元素的内容，但不删除元素本身
remove([expr])	清空元素的内容，并删除元素本身（可选参数expr用于筛选元素）
detach([expr])	从DOM中删除所有匹配的元素（保留所有绑定的事件、附加的数据等）

• empty()方法仅能删除匹配元素的文本内容，而元素节点依然存在。
• remove()方法则可以同时删除匹配元素本身和文本内容。

3.4 节点复制

语法	说明
clone([false])	复制匹配的元素并且选中这些复制的副本，默认参数为false
clone(true)	参数设置为true时，复制元素的所有事件处理

开发中若在复制元素节点时，想要同时复制该节点的所有事件的处理，则可以将clone()方法的操作设置为true，否则节点复制时使用默认操作false即可。

3.5 练习作业

• 左移与右移

  • 编写网页，设置CSS完成左移右移的结构和样式设置。
  • 通过层级选择器和表单选择器获取选中的操作项。
  • 通过append()方法将匹配到的内容追加到指定元素的尾部。

4 事件操作

4.1 常用事件

标签中通过属性设置事件，每个属性都由一个on和事件名组成。例如，点击事件对应的属性为onclick。

在jQuery中则可直接使用其提供的与事件类型同名的方法。例如，点击事件对应的方法为click()。

这些事件方法允许重复绑定处理程序，按照绑定顺序依次执行。

若省略参数，则表示触发事件。

分类	方法	说明
表单事件	blur([[data],function])	当元素失去焦点时触发
表单事件	focus([[data],function])	当元素获得焦点时触发
表单事件	change([[data],function])	当元素的值发生改变时触发
表单事件	focusin([data],function)	在父元素上检测子元素获取焦点的情况
表单事件	focusout([data],function)	在父元素上检测子元素失去焦点的情况
表单事件	select([[data],function])	当文本框（包括<input>和<textarea>）中的文本被选中时触发
表单事件	submit([[data],function])	当表单提交时触发
键盘事件	keydown([[data],function])	键盘按键被按下时触发
键盘事件	keypress([[data],function])	键盘按键（Shift等非字符键除外）被按下时触发
键盘事件	keyup( [[data],function ])	键盘按键被松开时触发
鼠标事件	mouseover([[data],function])	当鼠标移入对象时触发
鼠标事件	mouseout([[data],function])	在鼠标从元素上离开时触发
鼠标事件	click([[data],function])	当单击元素时触发
鼠标事件	dblclick([[data],function])	当双击元素时触发
鼠标事件	mousedown([[data], function])	当鼠标指针移动到元素上方，并按下鼠标按键时触发
鼠标事件	mouseup([[data], function])	当在元素上放松鼠标按钮时，会被触发
浏览器事件	scroll([[data],function])	当滚动条发生变化时触发
浏览器事件	resize([[data], function])	当调整浏览器窗口的大小时会被触发

• 参数function表示触发事件时执行的处理程序（函数）。

• 参数data用于为事件处理函数传递数据。（可在事件处理函数中使用“事件对象.data”获取）

$('input[type=text]').focus(function() { // 文本框获取焦点
    var tips = $('<span></span>');
    tips.html('请按要求输入');
    $('input:focus').after(tips);
});
$('input[type=text]').blur(function() {  // 文本框失去焦点
    $(this).next().remove();
});

// div块的移动
// 事件对象.which：获取当前按下键盘的对应码值keyCode
// 通过offset()获取当前按下键盘时div元素的位置（left和top值）
// 根据码值修改div元素位置（ left和top值）
// 提示：37（左）、38（上）、39（右）、40（下）
$(document).keydown(function(event) {
    var opt = event.which;            // 获取当前按下键盘的对应码值keyCode
    var item = $('.boxes');           // 获取操作的元素
    var left = item.offset().left;    // 获取元素距离文档左侧的位置，单位像素
    var top = item.offset().top;      // 获取元素距离文档上面的位置，单位像素
    switch(opt) {
        case 37: item.offset({left: left - 1, top: top}); break;    // 左
        case 38: item.offset({left: left, top: top - 1}); break;    // 上
        case 39: item.offset({left: left + 1, top: top}); break;    // 右
        case 40: item.offset({left: left, top: top + 1}); break;    // 下
    }
});

// 鼠标移入
$('.hit').mouseover(function() {
    $(this).css('background-color', 'green');
});
// 鼠标移出
$('.hit').mouseout(function() {
    $(this).css('background-color', '');
});

4.2 页面加载事件

类比选项	window.onload	$(document).ready()
执行时机	必须等待网页中的所有内容加载完成后（包括外部元素，如图片）才能执行	网页中的所有DOM结构绘制完成后就执行（可能关联内容并未加载完成）
编写个数	不能同时编写多个	能够同时编写多个
简化写法	无	$()

jQuery中的ready与JavaScript中的onload相比，不仅可以在页面加载后立即执行，还允许注册多个事件处理程序。

// jQuery中的页面加载事件方法有3种语法形式，具体如下。
$(document).ready(function() {  });  // 语法方式1
$().ready(function() {  });		     // 语法方式2
$(function() {  });			         // 语法方式3

4.3 事件绑定与切换

事件处理机制，即事件绑定和事件切换，统一了事件处理的各种方法。

语法	说明
on(events,[selector],[data],function)	在匹配元素上绑定一个或多个事件处理函数
off(events,[selector],[function])	在匹配元素上移除一个或多个事件处理函数
one(events,[data],function)	为每个匹配元素的事件绑定一次性的处理函数
trigger(type,[data])	在每个匹配元素上触发某类事件
triggerHandler(type,[data])	同trigger()，但浏览器默认动作将不会被触发
hover([over,]out)	元素鼠标移入与移出事件切换

• 参数events表示事件名（多个用空格分隔）。
• 参数selector表示选择器。
• 参数data表示将要传递给事件处理函数function的数据。
• 参数type表示为元素添加的事件类型（多个用空格分隔）。
• 参数over和out分别表示鼠标移入移出时的事件处理函数。

// 事件的绑定
$('div').on('click', function() {
    console.log('已完成单点击');
});
// 事件的取消
$('div').off('click');
// 绑定单次事件
$('div').one('click', function() {
    console.log('已完成1次单点击');
});
// 多个事件绑定同一个函数
$('div').on('mouseover mouseout', function() {
    console.log('鼠标移入或移出');
});
// 多个事件绑定不同的函数
$('div').on({
    mouseover: function() {
        console.log('鼠标移入');
    },
    mouseout: function() {
        console.log('鼠标移出');
    }
});
// 为以后创建的元素委派事件
$('body').on('click', 'div', function() {
    console.log('收到');
});
//测试：创建<div>元素
$('body').append('<div>测试</div>');
// 鼠标移入移出事件切换
$('div').hover(function() {
    console.log('鼠标移入')
}, function() {
    console.log('鼠标移出');
});

on()方法与off()方法是jQuery从1.7版本开始新增的方法。jQuery官方推荐使用on()方法进行事件绑定，在新版本中已经取代了bind()、delegate()和live()方法。

4.4 练习作业

• 手风琴效果
  • 编写网页，设置CSS完成手风琴的结构和样式设置。
  • 为所有图片添加鼠标移入与移出事件。
  • 鼠标移入时，将当前元素的width设为图片的原宽，其他图片的width= (<div>的宽度 - 图片的原宽) / 剩余图片元素个数。
  • 鼠标移出时，所有图片的width=<div>的宽度 / 所有图片的个数。

5 动画特效

5.1 常用动画

分类	方法	说明
基本特效	show([speed,[easing],[fn]])	显示隐藏的匹配元素
基本特效	hide([speed,[easing],[fn]])	隐藏显示的匹配元素
基本特效	toggle([speed],[easing],[ fn])	元素显示与隐藏切换
滑动特效	slideDown([speed],[easing],[ fn])	垂直滑动显示匹配元素（向下增大）
滑动特效	slideUp([speed,[easing],[ fn]])	垂直滑动显示匹配元素（向上减小）
滑动特效	slideToggle([speed],[easing],[ fn])	在slideUp()和slideDown()两种效果间的切换
淡入淡出	fadeIn([speed],[easing],[ fn])	淡入显示匹配元素
淡入淡出	fadeOut([speed],[easing],[ fn])	淡出隐藏匹配元素
淡入淡出	fadeTo([[speed],opacity,[easing],[ fn]])	以淡入淡出方式将匹配元素调整到指定的透明度
淡入淡出	fadeToggle([speed,[easing],[ fn]])	在fadeIn()和fadeOut()两种效果间的切换

• 参数speed表示动画的速度，可设置为动画时长的毫秒值（如1000），或预定的3种速度（slow、fast和normal）。
• 参数easing表示切换效果，默认效果为swing，还可以使用linear效果。
• 参数fn表示在动画完成时执行的函数。
• 参数opacity表示透明度数值（范围在0~1之间，0代表完全透明，0.5表示50%透明，1代表完全不透明）。

5.2 自定义动画

方法	说明
animate(params [,speed] [,easing] [,fn])	用于创建自定义动画的函数
$.speed([speed] [,settings])	创建一个包含一组属性的对象用来定义自定义动画
queue([queueName])	显示被选元素上要执行的函数队列
delay(speed [,queueName])	设置一个延时来推迟执行队列中之后的项目
clearQueue([queueName])	从尚未运行的队列中移除所有项目
dequeue([queueName])	从队列移除下一个函数，然后执行函数
finish([queueName])	停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画
stop([clearQueue] [, jumpToEnd])	停止所有在指定元素上正在运行的动画

• 参数params表示一组包含动画最终属性值的集合。
• 参数settings是easing与fn组成的一个对象集合。
• 参数queueName表示队列名称，默认值为fx（标准效果队列）。
• 参数clearQueue与jumpToEnd都是布尔类型，默认值为false，前者规定是否停止被选元素所有加入队列的动画，后者规定是否立即完成当前的动画。

<input id="btn" type="submit" value="开始动画"><div></div>
<script>	
    $('#btn').click(function () {
        $('div').css({background: 'red', width: 0, height: 0});
        var params = {width: '100px', height: '100px'};
        var settings = $.speed(2000, 'linear');
        $('div').animate(params, settings);
    });
</script>

// 动画队列
$('div').show('slow')
    .animate({left: '+=200'}, 2000)
    .animate({left: '-=200'}, 1500)
    .slideUp('normal', runQue);
// 队列长度
$('div').queue('fx').length;

div.show('slow')
    .animate({left: '+=200'}, 2000)
    .queue(function() {
    // 为队列添加额外操作
    $(this).css('background', 'green').dequeue();
})
    .animate({left: '-=200'}, 1500)
    .slideUp('normal', runQue)
    .queue(function() {
    // 为队列添加额外操作
    $(this).css('background', 'red').dequeue();
});

5.3 练习作业

• 无缝轮播图
  • 焦点图的各个图片（即需要轮播的图片）依次横向排列。
  • 设置焦点图的外边框的宽度以及超出隐藏，限定其只能显示一张图片。
  • 切换到下一张时，只需要修改焦点图外层样式中的left值，就可以将焦点图整体向左移动，从而显示第2张图片。
  • 当焦点图显示到最后一张图片时，再向左切换就会回到第一张图片，这就是无缝切换效果。
  • 为了实现这种效果，将第一张图片连接到最后一张图片的后面，然后等这张图片向左移动直到完全显示之后，立即将焦点图的left值设为0，就切换到第1张图片了。

6 jQuery操作Ajax

传统的Ajax是通过XMLHttpRequest实现的，不仅代码复杂，而且浏览器兼容问题也比较多。

jQuery中通过对Ajax操作的封装，极大地简化了Ajax操作的开发过程。

分类	方法	说明
高级应用	$.get(url[,data][,fn][,type])	通过远程HTTP GET请求载入信息
高级应用	$.post(url[,data][,fn][, type])	通过远程HTTP POST请求载入信息
高级应用	$.getJSON(url[,data][,fn])	通过HTTP GET请求载入JSON数据
高级应用	$.getScript(url[,fn])	通过HTTP GET请求载入并执行一个JavaScript文件
高级应用	元素对象.load(url[,data] [,fn])	载入远程HTML文件代码并插入至DOM中
底层应用	$.ajax(url[,options])	通过HTTP请求加载远程数据
底层应用	$.ajaxSetup(options)	设置全局Ajax默认选项

• 参数url表示待请求页面的URL地址。
• data表示传递的参数。
• 参数fn表示请求成功时，执行的回调函数。
• 参数type用于设置服务器返回的数据类型，如XML、JSON、HTML、TEXT等。
• 参数options用于设置Ajax请求的相关选项。

选项名称	说明
url	处理Ajax请求的服务器地址
data	发送Ajax请求时传递的参数，字符串类型
success	Ajax请求成功时所触发的回调函数
type	发送的HTTP请求方式，如get、post
datatype	期待的返回值类型，如xml、json、script或html数据类型
async	是否异步，true表示异步，false表示同步，默认值为true
cache	是否缓存，true表示缓存，false表示不缓存，默认值为true
contentType	请求头，默认值为application/x-www-form-urlencoded; charset=UTF-8
complete	当服务器URL接收完Ajax请求传送的数据后触发的回调函数
jsonp	在一个jsonp请求中重写回调函数的名称

$.post('index.php', {'id': 2, 'name': 'JS'}, function(msg) {
    console.log(msg.id + '-' + msg.name);    // 输出结果：2-JS
}, 'json');

上述代码表示处理当前Ajax请求的地址是同级目录下的index.php，在Ajax请求成功后，接收index.php返回的JSON格式的数据并在控制台进行输出。

• 在jQuery中对Ajax的操作方法中，$.ajax(url,[options])是底层方法。

• 通过该方法的options参数，可以实现$.get()、$.post()、$‘.getJSON()‘和‘$.getScript()`方法同样的功能。

• 下面列举$.ajax()方法的3种常用方式。

  • 只发送GET请求

    $.ajax('index.php');
    

  • 只配置setting参数，同样实现Ajax操作

    $.ajax('index.php',{
        data: {'book': 'PHP', 'sales': 2000},  // 要发送的数据
        success:function(msg){// 请求成功后执行的函数
            alert(msg);
        }
    });
    

  • 发送GET请求并传递数据，接收返回结果

    $.ajax({
        type: 'GET
        url: 'index.php',
        data: {'id': 2, 'name': 'JS'},
        success: function(msg) {
            console.log(msg);
        }
    });
    
    $.ajaxSetup({
        type: 'GET',
        url: 'index.php',
        data:{'id': 2, 'name': 'JS'},
        success: function(msg) {
            alert(msg);
        }
    });
    $.ajax();
    

除此之外，在jQuery中还为操作Ajax额外的提供了一些辅助的函数以及相关的Ajax事件处理方法，方便开发。

分类	方法/函数	说明
辅助函数	$.param(obj)	创建数组或对象的序列化表示
辅助函数	serialize()	通过序列化表单值，创建URL编码文本字符串
辅助函数	serializeArray()	通过序列化表单值，创建对象数组（名称和值）
Ajax事件	ajaxComplete(fn)	Ajax请求完成时触发的事件执行函数
Ajax事件	ajaxError(fn)	Ajax请求发生错误时触发的事件执行函数
Ajax事件	ajaxSend(fn)	Ajax请求发送前触发的事件执行函数
Ajax事件	ajaxStart(fn)	Ajax请求开始时触发的事件执行函数
Ajax事件	ajaxStop(fn)	Ajax请求结束时触发的事件执行函数
Ajax事件	ajaxSuccess(fn)	Ajax请求成功时触发的事件执行函数

// 序列化对象
var data = {'id': 2, 'name': 'Lucy', skill: ['PHP', 'JS']};
var seri_data = $.param(data);
var deseri_data = decodeURIComponent(seri_data);
// 输出结果：id=2&name=Lucy&skill%5B%5D=PHP&skill%5B%5D=JS
console.log(seri_data); 
// 输出结果：id=2&name=Lucy&skill[]=PHP&skill[]=JS
console.log(deseri_data);

上述代码表示处理当前Ajax请求的地址是同级目录下的index.php，在Ajax请求成功后，接收index.php返回的JSON格式的数据并在控制台进行输出。

// 序列化表单数据
$('input[type=button]').on('click', function () {
    console.log($('form').serialize());
    console.log($('form').serializeArray());
});

Ajax各个事件处理的先后顺序为ajaxStart() > ajaxSend() > ajaxSuccess()、ajaxError() > ajaxComplete() > ajaxStop()。

根据Ajax请求是否发生错误在Ajax发送后执行ajaxSuccess()还是ajaxError()方法进行相关的处理。

$(document).ajaxError(function() {
    console.log('ajaxError');
});
$.post('index.php', {'id': 2, 'name': 'JS'}, function(msg) {
    console.log(msg.id + '-' + msg.name);
}, 'xml');

7 插件机制

7.1 自定义插件

• 封装jQuery对象方法

  // 在插件中封装1个方法
  (function($){
      $.fn.方法名 = function() {
          // 实现插件的代码
          ……
      };
  })(jQuery);
  

  • $.fn是jQuery的原型对象（相当于$.prototype）。
  • 通过“$.fn.方法名”的方式将封装的功能方法对每一个jQuery实例都有效，成为jQuery的插件。
  • jQuery的简写“$”是可以被修改的，为了避免影响到插件中的代码，建议将插件方法放在“‘(function($){……})(jQuery);`”这个包装函数中，该函数的参数$就表示jQuery全局对象。

  // 在插件中封装多个方法
  jQuery.fn.extend({
      方法名1:function(参数列表) {
          // 实现插件的代码
          ……
      },
      方法名2:function(参数列表) {
          // 实现插件的代码
          ……
      }
  });
  

  • 若要在一个插件中封装多个方法，则可以借助extend()方法，为该方法传递对象类型的参数。
  • 参数的设置按照JavaScript对象语法的编写方式即可实现多个方法的封装。
  • 插件文件的名称建议遵循“jquery.插件名.js”的命名规则，防止与其他JavaScript库插件混淆。

• 定义全局函数

  // 定义全局函数的插件
  jQuery.extend({
      方法名1: function(参数列表){
          // 实现插件的代码
          ……
      },
      方法2: function(参数列表){
          // 实现插件的代码
          ……
      }
  });
  

  • 将自定义函数附加到jQuery命名空间下，从而作为一个公共的全局函数使用。
  • 例如，jQuery的ajax()方法就是利用这种途径内部定义的全局函数。

• 自定义选择器

  $.expr[":"].方法名称 = function(obj) {
      // 自定义选择器代码
      return 匹配HTML元素的条件;
  };
  

  • 用户可以利用jquery.expr实现选择器的自定义。
  • obj表示进行匹配的HTML元素对应的jQuery对象。
  • 根据需要对jQuery对象的属性进行判断，并使用return返回匹配结果。

7.2 jQuery插件库

随着jQuery的发展，诞生了许多优秀的插件。

网站地址为：http://plugins.jquery.com/。

通过在搜索框中输入插件名即可搜索需要的插件。

7.3 jQuery UI

• jQuery UI是在jQuery基础上新增的一个库。
• 特点： 拥有强大的可扩展功能，具有吸引人的漂亮页面，能够更轻松地在网页中添加专业级的UI元素。
• 举例：日历、菜单、拖拽、调整大小等交互效果。
• 下载地址

<!-- 引入所需文件 -->
<script src="jQuery-1.12.4.min.js"></script>
<script src="jquery-ui/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jquery-ui/jquery-ui.css">

<div id="datepicker"></div>

<!-- 实例化datepicker -->
<script>
    $('#datepicker').datepicker();
    
    // 自定义日历显示样式
    $('#datepicker').datepicker({
        changeMonth: true,      	// 下拉列表方式选择月份
        changeYear: true,       	// 下拉列表方式选择年
        firstDay: 1,            	// 星期显示顺序为：“Mo Tu We Th Fr Sa Su”
        showOtherMonths: true, // 当前月中空白的日期利用相邻月日期填充
    });
    
    // 自定义中文显示
    var m = ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'];
    var d = ['日', '一', '二', '三', '四', '五', '六'];
    $('#datepicker').datepicker({
        ……
        monthNamesShort: m,
        dayNamesMin: d,
    });
</script>

在实际项目中若只做中文开发，则每次使用时都配置这些属性会比较麻烦，建议将中文相关的配置保存到一个JavaScript文件中，每次使用时直接引用即可。

7.4 练习作业

• 自定义全选与反选插件
  • 编写表格展示数据，为其提供“全选”、“反选”和“全不选”操作按钮。
  • 引入jQuery文件以及自定义的插件文件（待编写）。
  • 编写自定义插件文件，利用封装jQuery对象方法的方式实现插件。
  • 在HTML中，调用插件封装的方法，实现全选、反选以及全不选的功能。

ery-ui.min.js">

> 在实际项目中若只做中文开发，则每次使用时都配置这些属性会比较麻烦，建议将中文相关的配置保存到一个JavaScript文件中，每次使用时直接引用即可。



### 7.4 练习作业

- 自定义全选与反选插件
  - 编写表格展示数据，为其提供“全选”、“反选”和“全不选”操作按钮。
  - 引入jQuery文件以及自定义的插件文件（待编写）。
  - 编写自定义插件文件，利用封装jQuery对象方法的方式实现插件。
  - 在HTML中，调用插件封装的方法，实现全选、反选以及全不选的功能。