jQuery对象 jQuery选择器 DOM操作 事件处理 动画效果 jQuery插件

任务一 jQuery快速入门 目录 任务二 个性相册 任务三 焦点图切换 任务四 瀑布流布局

项目描述 jQuery是一个优秀的JavaScript库，它简化 了HTML与JavaScript之间的操作，使得DOM对 象、事件处理、动画效果、Ajax等操作的实现 语法更加简洁，同时显著提高了程序的开发效 率，消除很多跨浏览器的兼容问题。 接下来本项目将结合jQuery完善个人主页 实现个性相册、焦点图特效以及瀑布流布局的 功能开发。

任务 说明 任务一：jQuery快速入门 了解什么是jQuery，并将jQuery引入到个人主页中。 在页面中添加加载事件，确定页面中事件的加载顺序。

引入知识点 任务一：jQuery快速入门 1、什么是jQuery 2、获取jQuery 3、使用jQuery 4、jQuery对象 6、元素内容操作

任务一：jQuery快速入门 什么是jQuery jQuery是一个开源的JavaScript类库，由John Resig在2006年1月的纽约BarCamp国际研讨会上首次发布，吸引了众多来自世界各地的JavaScript高手的加入，目前由Dava Methvin带领团队进行开发。

任务一：jQuery快速入门 什么是jQuery 随着Web技术的不断发展，相继诞生了许多优秀的JavaScript库 常见的有：jQuery、Prototype、ExtJS、Mootools和YUI等。

任务一：jQuery快速入门 什么是jQuery jQuery的核心理念 write less, do more （写的更少，做的更多）

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

引入知识点 任务一：jQuery快速入门 1、什么是jQuery 2、获取jQuery 3、使用jQuery 4、jQuery对象 6、元素内容操作

任务一：jQuery快速入门 获取jQuery 从官方网站http://jquery.com/ 下载最新版本的jQuery文件

任务一：jQuery快速入门 获取jQuery 从官方网站http://jquery.com/ 下载最新版本的jQuery文件

任务一：jQuery快速入门 获取jQuery 在HTML中引入jQuery文件，实现对jQuery的部署 方式一引入了当前目录下的jQuery文件库jquery.min.js 方式二则通过公共的CDN的优势加快了jQuery文件的加载速度。

引入知识点 任务一：jQuery快速入门 1、什么是jQuery 2、获取jQuery 3、使用jQuery 4、jQuery对象 6、元素内容操作

任务一：jQuery快速入门 使用jQuery 通过jQuery去除字符串左右两端的空格

任务一：jQuery快速入门 使用jQuery 运行结果展示

引入知识点 任务一：jQuery快速入门 1、什么是jQuery 2、获取jQuery 3、使用jQuery 4、jQuery对象 6、元素内容操作

任务一：jQuery快速入门 jQuery对象 jQuery对象是对DOM对象的一层包装，它的作用是通过自身提供的一系列快捷功能来简化DOM操作的复杂度，提高程序的开发效率，同时解决了不同浏览器的兼容问题。

任务一：jQuery快速入门 jQuery对象 $(document)表示将document对象转换为jQuery对象 console.log()可以查看其内部结构

任务一：jQuery快速入门 jQuery对象 jQuery对象内部有三个元素。 数组元素0表示其内部的DOM对象，即document对象 length表示其内部数组元素的个数，一个jQuery对象中可以包装多个DOM对象。 通过__proto__可以查看该对象的的原型（即jQuery本身）所具有的属性和方法。

引入知识点 任务一：jQuery快速入门 1、什么是jQuery 2、获取jQuery 3、使用jQuery 4、jQuery对象 6、元素内容操作

任务一：jQuery快速入门 jQuery选择器 在程序开发过程中，经常需要对HTML元素进行操作，在操作前必须先准确地找到对应的DOM元素。为此，jQuery提供了类似CSS选择器的机制，利用jQuery选择器可以很轻松的获取DOM元素。

任务一：jQuery快速入门 jQuery选择器 使用jQuery选择器的基本语法为“$(选择器)”，其中最常用的选择器分别为标签选择器、类选择器和ID选择器。 选择器 功能描述 示例 element 根据指定元素名匹配所有元素 $("div") 选取所有的<div>元素 .class 根据指定类名匹配所有元素 $(".test") 选取所有class为test的元素 #id 根据指定id匹配一个元素 $("#test") 选取id为test的元素

任务一：jQuery快速入门 jQuery选择器

引入知识点 任务一：jQuery快速入门 1、什么是jQuery 2、获取jQuery 3、使用jQuery 4、jQuery对象 6、元素内容操作

任务一：jQuery快速入门 元素内容操作 在jQuery中，操作元素内容的方法主要包括html()和text()方法。 html()方法用于获取或设置元素的HTML内容 text()方法用于获取或设置元素的文本内容

任务一：jQuery快速入门 元素内容操作 语法 说明 html() 获取第一个匹配元素的HTML内容 html(content) text() 获取所有匹配元素包含的文本内容组合起来的文本 text(content) 设置所有匹配元素的文本内容

任务一：jQuery快速入门 元素内容操作

任务一：jQuery快速入门 元素内容操作 使用html()方法获取的元素内容含有文本样式标签<font>和<b> 使用text()方法获取的元素内容是去除文本样式，将该元素包含的文本内容组合起来的文本。

任务一：jQuery快速入门 任务 实现

任务 说明 任务二：个性相册 编写图片上传的HTML页面，实现图片展示相框类型的选择（直角、圆角、圆形）。 使用jQuery对DOM文档的操作，完成图片的创建与展示。 利用jQuery完成上移、下移，删除按钮的创建与功能实现。

任务二：个性相册 1、元素遍历 引入知识点 2、元素查找 3、元素属性操作 4、元素样式操作 5、文档节点操作

任务二：个性相册 元素遍历 在操作HTML文档中的DOM元素时，经常需要进行元素遍历，为此jQuery提供了each()方法更方便地进行元素遍历，并且可以进行指定的操作。

任务二：个性相册 元素遍历 在回调函数中，index表示当前元素的索引位置（从0开始）。 在回调函数中，element表示当前的元素。 在回调函数内部可以直接使用$(this)来表示当前元素。

任务二：个性相册 元素遍历 运行结果 展示

任务二：个性相册 1、元素遍历 引入知识点 2、元素查找 3、元素属性操作 4、元素样式操作 5、文档节点操作

任务二：个性相册 元素查找 使用jQuery选择器可以很方便地匹配满足一定条件的HTML元素，并对其进行操作，但有时需要根据HTML元素的具体情况对其进行个性化的处理，此时可以使用jQuery提供的元素过滤和查找方法来实现此功能，增强对文档的控制能力。

任务二：个性相册 元素查找 分类 语法 说明 查找 find(expr) 搜索所有与指定表达式匹配的元素 parents([expr]) 取得一个包含所有匹配元素的祖先元素的元素集合（不包含根元素） parent([expr]) 取得一个包含所有匹配元素的唯一父元素的元素集合 siblings([expr]) 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈的元素集合 next([expr]) 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合 prev([expr]) 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合 过滤 eq(index) 获取第N个元素 hasClass(class) 检查当前的元素是否含有某个特定的类，如果有，则返回true is(expr) 用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true has(expr) 保留包含特定后代的元素，去掉那些不含有指定后代的元素

任务二：个性相册 元素查找 利用find()方法获取<div>下的所有<ul> 使用eq()方法从获取的<ul>中查找下标为1的ul 为查找到的<ul>设置背景色

任务二：个性相册 元素查找 运行结果 展示

任务二：个性相册 元素查找 css()方法用于为匹配到的元素设置样式，它的第1个参数表示属性名，第2个参数表示属性值。 补充

任务二：个性相册 1、元素遍历 引入知识点 2、元素查找 3、元素属性操作 4、元素样式操作 5、文档节点操作

任务二：个性相册 元素属性操作 （1）基本属性操作 attr()方法用于获取或设置元素属性 removeAttr()方法用于删除元素属性

任务二：个性相册 元素属性操作 （1）基本属性操作 获取所有匹配元素的属性值，则需要attr()与each()方法配合进行元素遍历。 语法 说明 attr(name) 取得第一个匹配元素的属性值，否则返回undefined attr(properties) 将一个键值对形式的JSON对象设置为所有匹配元素的属性 attr(name, value) 为所有匹配的元素设置一个属性值 attr(name, function) 为所有匹配的元素设置一个计算的属性值 removeAttr(name) 从每一个匹配的元素中删除一个属性 获取所有匹配元素的属性值，则需要attr()与each()方法配合进行元素遍历。

任务二：个性相册 元素属性操作 （2）class属性操作 在程序开发中，经常需要操作元素的class属性设置动态的样式，虽然使用attr() 方法可以完成基本的属性操作，但是对于class属性的操作却不够灵活。 因此，为了方便操作，jQuery提供了针对class属性操作的方法。

任务二：个性相册 元素属性操作 （2）class属性操作 若要为匹配到的元素添加和移除多个样式类名，则样式类名之间可使用空格进行分隔。 语法 作用 说明 addClass(class) 追加样式 为每个匹配的元素追加指定的类名 removeClass(class) 移除样式 从所有匹配的元素中删除全部或者指定的类 toggleClass(class) 切换样式 判断指定类是否存在，存在则删除，不存在则添加 若要为匹配到的元素添加和移除多个样式类名，则样式类名之间可使用空格进行分隔。

任务二：个性相册 元素属性操作 （3）value属性操作 jQuery中对于获取表单元素的value属性值，提供了专用的val()方法。 语法 说明 val () 读取指定表单元素的值 val(value) 向指定的表单元素写入值

任务二：个性相册 元素属性操作 （3）value属性操作 val()方法还可以操作表单元素的属性和选中情况，支持表单中的多选元素。 补充

任务二：个性相册 元素属性操作 （3）value属性操作 例如：<select>和<input type="checkbox"> 当要获取的元素是<select>元素时，返回结果是一个包含所选值的数组。 当要为表单元素设置选中情况时，可以传递数组参数。

任务二：个性相册 1、元素遍历 引入知识点 2、元素查找 3、元素属性操作 4、元素样式操作 5、文档节点操作

任务二：个性相册 元素样式操作 元素样式操作是指获取或设置元素的style属性。在jQuery中，可以很方便的设置元素的样式、位置、尺寸等属性。 例如：前面用过的css()方法

任务二：个性相册 元素样式操作 语法 说明 css(name) 获取第一个匹配元素的样式 css(properties) 将一个键值对形式的JSON对象设置为所有匹配元素的样式 css(name, value) 为所有匹配的元素设置样式 width() 获取第一个匹配元素的当前宽度值（返回数值型结果） width(value) 为所有匹配的元素设置宽度样式（可以是字符串或数字） height() 获取第一个匹配元素的当前高度值（返回数值型结果） height(value) 为所有匹配的元素设置高度样式（可以是字符串或数字）

任务二：个性相册 1、元素遍历 引入知识点 2、元素查找 3、元素属性操作 4、元素样式操作 5、文档节点操作

任务二：个性相册 文档节点操作 在程序的开发过程中，除了可以使用jQuery的DOM操作完成元素属性、内容和样式的修改，还可以使用jQuery的文档节点操作完成HTML文档在浏览器中动态的发生变化，达到更好的页面效果。

任务二：个性相册 文档节点操作 （1）节点追加 节点追加是指在现有的文档节点中进行父子或兄弟节点的追加。 关系 语法 说明 父子 节点 append(content) 向每个匹配的元素内部追加内容 prepend(content) 向每个匹配的元素内部前置内容 appendTo(content) 把所有匹配的元素追加到指定元素集合中 prependTo(content) 把所有匹配的元素前置到指定元素集合中 兄弟 after(content) 在每个匹配的元素之后插入内容 before(content) 在每个匹配的元素之前插入内容 insertAfter(content) 把所有匹配的元素插入到指定元素集合的后面 insertBefore(content) 把所有匹配的元素插入到指定元素集合的前面

任务二：个性相册 文档节点操作 （2）节点替换 节点替换是指将选中的节点替换为指定的节点。 语法 说明 replaceWith(content) 将所有匹配的元素替换成指定的HTML或DOM元素 replaceAll(selector) 用匹配的元素替换掉所有selector匹配到的元素

任务二：个性相册 文档节点操作 （3）节点删除 jQuery可以轻松实现节点追加，相对的，也可以轻松实现节点删除。 语法 说明 empty() 删除匹配的元素集合中所有的子节点 remove([expr]) 删除所有匹配的元素及子节点（可选参数expr用于筛选元素） detach([expr]) 删除所有匹配的元素及子节点（保留所有绑定的事件、附加的数据等）

任务二：个性相册 文档节点操作 （4）节点复制 jQuery提供了节点复制方法，用于复制匹配的元素。 语法 说明 clone([false]) 复制匹配的元素并且选中这些复制的副本，默认参数为false clone(true) 参数设置为true时，复制元素的所有事件处理

任务二：个性相册 任务 实现

任务 说明 任务三：焦点图切换 准备焦点图特效的HTML页面。 使用定时器和jQuery提供的animate()动画方法完成图片的自动切换。 当图片移动到最后1张图片时，无缝切换到第1张图片。 设计底部的小圆点，单击小圆点可以直接切换到对应图片。

任务三：焦点图切换 1、常用事件 引入知识点 2、页面加载事件 3、事件绑定与切换 4、动画效果

任务三：焦点图切换 常用事件 在网页中要给DOM对象指定事件处理程序，可在标签中设置事件处理程序属 性的值。对于元素支持的每种事件，都有一个on和事件名组成的属性。 例如，click事件对应的属性为onclick。而在jQuery中则可直接使用其提供的 与事件类型同名的处理函数，使代码更加清晰明了。

任务三：焦点图切换 常用事件 方法 说明 blur([[data],function]) 当元素失去焦点时触发 change([[data],function]) 当元素的值发生改变时触发 click([[data],function]) 当单击元素时触发 dblclick([[data],function]) 当双击元素时触发 focus([[data],function]) 当元素获得焦点时触发 focusin([data],function) 在父元素上检测子元素获取焦点的情况 focusout([data],function) 在父元素上检测子元素失去焦点的情况 mouseover([[data],function]) 当鼠标移入对象时触发 mouseout([[data],function]) 在鼠标从元素上离开时触发 scroll([[data],function]) 当滚动条发生变化时触发 select([[data],function]) 当文本框（包括input和textarea）中的文本被选中时触发 submit([[data],function]) 当表单提交时触发

任务三：焦点图切换 常用事件 在上述代码中当鼠标划过“点我啊”时，执行mouseover()方法，将class名为hit的<div>背景色设置为绿色。 当鼠标移出“点我啊”时，执行mouseout()方法，去掉class名为hit的<div>的背景色。

任务三：焦点图切换 1、常用事件 引入知识点 2、页面加载事件 3、事件绑定与切换 4、动画效果

任务三：焦点图切换 页面加载事件 jQuery与JavaScript中都有页面加载事件表示页面初始化行为，但是两者在使用时有一定的区别。   window.onload $(document).ready() 执行时机 必须等待网页中的所有内容加载完成后（包括图片）才能执行 网页中的所有DOM结构绘制完成后就执行（可能关联内容并未加载完成） 编写个数 不能同时编写多个 能够同时编写多个 简化写法 无 $() jQuery中的ready与JavaScript中的onload相比，不仅可以在页面加载后立即执行，还允许注册多个事件处理程序。

任务三：焦点图切换 页面加载事件 jQuery中的页面加载事件方法有三种语法形式 ① $(document).ready(function(){ }) ② $().ready(function(){ }) ③ $(function(){ }) 第一种是完整写法，即调用document元素的ready()事件方法 第二种语法省略了document 第三种语法省略了ready() 但是三种语法的功能完全相同

任务三：焦点图切换 1、常用事件 引入知识点 2、页面加载事件 3、事件绑定与切换 4、动画效果

任务三：焦点图切换 事件绑定与切换 jQuery中不仅提供了事件添加，还提供了更加灵活的事件处理机制，即事件绑定和事件切换，统一了事件处理的各种方法。

任务三：焦点图切换 事件绑定与切换 events参数表示事件名（多个用空格分隔） data表示将要传递给事件处理函数的数据 selector表示选择器 语法 说明 on(events,[selector],[data],function) 在匹配元素上绑定一个或多个事件处理函数 off(events,[selector],[function]) 在匹配元素上移除一个或多个事件处理函数 one(type,[data],function) 为每个匹配元素的事件绑定一次性的处理函数 trigger(type,[data]) 在每个匹配元素上触发某类事件 triggerHandler(type,[data]) 同trigger()，但浏览器默认动作将不会被触发 hover([over,]out) 元素鼠标移入与移出事件切换 toggle() 元素显示与隐藏事件切换 function表示事件处理函数 type表示添加到元素的事件（多个用空格分隔） over和out分别表示鼠标移入移出时的事件处理函数

任务三：焦点图切换 事件绑定与切换 （1）事件的绑定与取消绑定 以<div>标签为例，演示绑定点击事件和取消点击事件的写法

任务三：焦点图切换 事件绑定与切换 （2）绑定单次事件 为<div>标签绑定点击事件，让该事件在执行一次后就失效。

任务三：焦点图切换 事件绑定与切换 （3）多个事件绑定同一个函数 为<div>标签的鼠标移入、移出事件绑定同一个处理函数。

任务三：焦点图切换 事件绑定与切换 （4）多个事件绑定不同的函数 利用on()方法为<div>标签的鼠标移入和移除事件分别绑定不同的处理函数，并在控制台输出提示信息。 事件名称与其处理函数之间使用冒号（:）分隔 多个事件之间使用逗号（,）分隔

任务三：焦点图切换 事件绑定与切换 （5）为以后创建的元素委派事件 为<body>中不存在的<div>元素委派点击事件，并在控制台输出提示信息。 当on()方法设置3个参数时 第1个参数表示事件名称 第2个参数表示待设置事件的HTML元素（已存在或不存在的元素） 第3个参数表示事件处理函数

任务三：焦点图切换 事件绑定与切换 （6）鼠标移入移出事件切换 使用hover()方法为<div>元素分别对鼠标移入和移出设置不同的处理函数。 hover()方法的第1个参数是用于处理鼠标移入的函数 hover()方法的第2个参数是用于处理鼠标移出的函数

任务三：焦点图切换 事件绑定与切换 （7）隐藏与显示事件切换 如果<div>元素的状态设置为可见，在调用toggle()方法后则会隐藏<div>。 如果<div>元素的状态设置为隐藏，在调用toggle()方法后则会显示<div>。

任务三：焦点图切换 事件绑定与切换 on()方法与off()方法是jQuery从1.7版本开始新增的方法。jQuery官方推荐使用on()方法进行事件绑定，在新版本中已经取代了bind()、delegate()和live()方法。 补充

任务三：焦点图切换 1、常用事件 引入知识点 2、页面加载事件 3、事件绑定与切换 4、动画效果

任务三：焦点图切换 动画效果 在Web开发中，动画效果的添加，不仅可以增加页面的美感，更能增强用户的 体验。 jQuery中提供了两种增加动画效果的方法一种是内容的动画方法，另一种就是 通过animate()方法进行自定义动画效果。

任务三：焦点图切换 动画效果 （1）内置动画方法 jQuery提供了许多动画效果，例如一个元素渐渐淡出效果等。 语法 说明 show([speed,[easing],[function]]) 显示隐藏的匹配元素 hide([speed,[easing],[function]]) 隐藏显示的匹配元素 toggle([speed],[easing],[function]) 元素显示与隐藏切换 slideDown([speed],[easing],[function]) 垂直滑动显示匹配元素（向下增大） slideUp([speed,[easing],[function]]) 垂直滑动显示匹配元素（向上减小） slideToggle([speed],[easing],[function]) 在slideUp()和slideDown()两种效果间的切换 fadeIn([speed],[easing],[function]) 淡入显示匹配元素 fadeOut([speed],[easing],[function]) 淡出隐藏匹配元素 fadeTo([[speed],opacity,[easing],[function]]) 以淡入淡出方式将匹配元素调整到指定的透明度 fadeToggle([speed,[easing],[function]]) 在fadeIn()和fadeOut()两种效果间的切换

任务三：焦点图切换 动画效果 （2）自定义动画 jQuery支持自定义动画，用户只需要指定一个最终样式，就可以使指定元素以动画效果变为最终样式。使用animate()方法可以完成自定义动画的创建 animate(params,[speed],[easing],[function]) 参数params表示一组包含动画最终属性值的集合 参数speed表示动画速度 参数easing表示动画效果 function表示动画完成后执行的函数

任务三：焦点图切换 动画效果 （2）自定义动画 ① 为元素添加自定义动画时

任务三：焦点图切换 动画效果 （2）自定义动画 ② 通过连贯操作，可以实现连续的动画效果

任务三：焦点图切换 任务 实现

任务 说明 任务四：瀑布流布局 编写瀑布流布局的HTML页面。 根据传入的图片数据在网页中动态添加图片。 当滚动条滚动到页面底部时，自动加载新的图片。

任务四：瀑布流布局 1、jQuery插件机制 引入知识点 2、jQuery插件库 3、jQuery UI

任务四：瀑布流布局 jQuery插件机制 相较于JavaScript来说，jQuery虽然非常便捷且功能强大，但还是不可能满 足用户的所有需求。 因此，基于jQuery的插件机制，很多人将自己日常工作中积累的功能通过 插件的方式进行共享，供其他人使用，大大增强了jQuery的可扩展性，扩 充了jQuery的功能。

任务四：瀑布流布局 jQuery插件机制 jQuery插件的开发有3种方式 分为封装jQuery对象方法、定义全局函数和自定义选择器

任务四：瀑布流布局 jQuery插件机制 （1）封装jQuery对象方法的插件

任务四：瀑布流布局 jQuery插件机制 （1）封装jQuery对象方法的插件 ① 在插件中封装1个方法 (function($){ ① 在插件中封装1个方法 (function($){ $.fn.方法名 = function(){ //实现插件的代码 …… }; })(jQuery); $.fn是jQuery的命名空间，通过$.fn.方法名的方式将封装的功能方法对每一个jQuery实例都有效，成为jQuery的插件。

任务四：瀑布流布局 补充 jQuery插件机制 （1）封装jQuery对象方法的插件 ① 在插件中封装1个方法 ① 在插件中封装1个方法 在插件代码中，建议总是使用jQuery对象。因此为了编写方便使用$，则需要将封装的插件方法放在(function($){……})(jQuery);这个包装函数中，该函数的参数$就表示jQuery全局对象。 补充

任务四：瀑布流布局 jQuery插件机制 （1）封装jQuery对象方法的插件 ② 在插件中封装多个方法 ② 在插件中封装多个方法 jQuery.fn.extend({ 方法名1:function(参数列表){ //实现插件的代码 …… }, 方法名2:function(参数列表){ } }); 若要在一个插件中封装多个方法则需要借助extend()方法，在该方法体中利用JavaScript对象语法的编写方式实现多个方法的封装。

任务四：瀑布流布局 补充 jQuery插件机制 （1）封装jQuery对象方法的插件 ② 在插件中封装多个方法 ② 在插件中封装多个方法 插件文件的名称建议遵循jquery.插件名.js的命名规则，防止与其他JavaScript库插件混淆。 补充

任务四：瀑布流布局 jQuery插件机制 （2）定义全局函数的插件 例如jQuery的ajax()方法就是利用这种途径内部定义的全局函数。 jQuery.extend({ 方法名1:function(参数列表){ //实现插件的代码 …… }, 方法2:function(参数列表){ } });

任务四：瀑布流布局 jQuery插件机制 （3）自定义选择器的插件 为了更方便地选择满足条件的HTML元素，jQuery提供了更强大的选择器功能。用户可以利用jquery.expr实现选择器的自定义。 $.expr[":"].方法名称 = function(obj){ //自定义选择器代码 return 匹配HTML元素的条件; }; obj表示进行匹配的HTML元素对应的jQuery对象。 根据需要对jQuery对象的属性进行判断，并使用return返回匹配结果。

任务四：瀑布流布局 1、jQuery插件机制 引入知识点 2、jQuery插件库 3、jQuery UI

任务四：瀑布流布局 jQuery插件库 随着jQuery的发展，诞生了许多优秀的插件。 通过在搜索框中输入插件名即可搜索需要的插件。

任务四：瀑布流布局 1、jQuery插件机制 引入知识点 2、jQuery插件库 3、jQuery UI

任务四：瀑布流布局 jQuery UI jQuery UI是在jQuery基础上新增的一个库，不过它相较于jQuery来说，不仅拥有强大的可扩展功能，更具有吸引人的漂亮页面，能够更轻松地在网页中添加专业级的UI元素，实现诸如日历、菜单、拖拽、调整大小等交互效果。

任务四：瀑布流布局 jQuery UI 下面以实现日历功能为例，简单演示jQuery UI插件的使用。 打开官方网址：http://jqueryui.com/download/ 下载“jQuery UI datepicker”

任务四：瀑布流布局 jQuery UI 下面以实现日历功能为例，简单演示jQuery UI插件的使用。 jQuery UI 是以jQuery为基础的网页用户界面代码库，日历插件datepicker是jQuery UI中的控件之一。 通过jQuery UI 网站 http://jqueryui.com/ 可以在线定制需要的UI部件。

任务四：瀑布流布局 jQuery UI 下面以实现日历功能为例，简单演示jQuery UI插件的使用。 打开jQuery UI下载包中的示例文件index.html，演示了jQuery UI的基本用法

任务四：瀑布流布局 jQuery UI 下面以实现日历功能为例，简单演示jQuery UI插件的使用。 实现日历功能

任务四：瀑布流布局 jQuery UI 载入jquery-ui.css样式文件，用于载入jQuery UI的样式。 载入jquery-ui.min.js文件，用于载入jQuery UI插件。 实例化jQuery UI中的datepicker控件，并显示到<div>元素中。

任务四：瀑布流布局 jQuery UI 运行结果 展示

任务四：瀑布流布局 任务 实现