学成在线页面制作 学成在线页面制作页面展示：学成在线，是典型的企业级网站。学习学成网的目的，是为了整体感知企业级网站布局流程，带着大家复习以前的知识。1.1. 前期准备素材学成在线PSD源文件开发工具 = PS（切图） + sublime（代码） + chrome（测试）1.2. 前期准备工作先把我们的前期准备工作做好， 我们本次采取结构与样式相分离思想。创建 study 目录文件夹 (用于存放我们这个页面的相关内容)。用vscode打开study目录文件夹.study 目录内新建 images 文件夹，用于保存图片。新建首页文件 index.html（以后我们的网站首页统一命名规定为 index.html )。新建 style.css 样式文件。我们本次采用外链样式表。将样式引入到我们的 HTML 页面文件中。样式表写入清除内外边距的样式，来检测样式表是否引入成功。1.3. 页面布局整体思路为了提高网页制作的效率，布局时通常有以下的整体思路，具体如下：​ 1.必须确定页面的版心（可视区），我们测量可得知。​ 2.分析页面中的行模块，以及每个行模块中的列模块。其实页面布局第一准则.​ 3.一行中的列模块经常浮动布局, 先确定每个列的大小,之后确定列的位置. 页面布局第二准则​ 4.制作 HTML 结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要.​ 5.所以, 先理清楚布局结构,再写代码尤为重要. 这需要我们多写多积累.1.4. 页面制作确定版心：​ 这个页面的版心是 1200像素 ，每个版心都要水平居中对齐，所以，我们可以定义版心为公共类：.w { width: 1200px; margin: auto; }1.4.1. header头部制作结构图如下：1号是版心盒子 header 1200 * 42 的盒子水平居中对齐, 上下给一个margin值就好了。版心盒子 里面包含 2号盒子 logo 图标版心盒子 里面包含 3号盒子 nav 导航栏版心盒子 里面包含 4号盒子 search 搜索框版心盒子 里面包含 5号盒子 user 个人信息注意，要求里面的 4个子盒子 必须都浮动导航栏注意点:实际开发中，重要的导航栏，我们不会直接用链接a ，而是用 li 包含链接(li+a)的做法​ 1.li+a 语义更清晰，一看这就是有条理的列表型内容。​ 2.如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名注意: ​ 1.让导航栏一行显示, 给 li 加浮动, 因为 li 是块级元素, 需要一行显示.​ 2.这个nav导航栏可以不给宽度,将来可以继续添加其余文字​ 3.因为导航栏里面文字不一样多,所以最好给链接 a 左右padding 撑开盒子,而不是指定宽度 4号盒子search的细节：​ search 搜索框的意思: 一个 search 大盒子里面包含 2个 表单​ 技巧：input和button都，属于行内块元素，会有缝隙，使用浮动，可以去缝隙。1.4.2. banner制作结构图如下：1号盒子是通栏的大盒子banner， 不给宽度，给高度，给一个蓝色背景。2号盒子是版心 w， 要水平居中对齐。3号盒子版心内，左对齐 subnav 侧导航栏。4号盒子版心内，右对齐 course 课程。1.4.2.1 subnav 侧导航栏 (左侧的)subnav 盒子 背景色 黑色半透明重要的导航栏，li 包 a ，行高45pxa里面包含文字和span，span右浮动当鼠标经过a ，a里面的内容（文字和span）变蓝色1.4.2.2 course课程表模块 (右侧的)结构图如下：1号盒子 是 228 * 300 的盒子 右浮动 注意 浮动的元素 不会有外边距塌陷的问题1号盒子内 分为 上下 两个 子盒子2号子盒子是 上部分 我们命名为 course-hd (hd 是 head 的简写 头部的意思，我们经常用)3号子盒子是 下部分 我们命名为 course-bd (bd 是 body 的简写 主体的意思，我们经常用)1.4.3. 精品推荐小模块结构图如下：复习点： 因为里面三个盒子都要垂直居中，我们利用 继承性，给 最大的盒子 一个垂直居中的代码就好了，还记得 那些 样式可以继承吗？？？ font- line- text- color大盒子水平居中 goods 精品 ，注意此处有个盒子阴影1号盒子是标题 H3 左侧浮动2号盒子 里面放链接 左侧浮动 goods-item 距离可以控制链接的 左右外边距（注意行内元素只给左右内外边距）3号盒子 右浮动 mod 修改1.4.4. 精品推荐大模块结构图如下：1号盒子为最大的盒子 box 版心水平居中对齐2号盒子为上面部分 box-hd -- 里面 左侧标题H3 左浮动 右侧 链接 a 右浮动3号盒子为底下部分 box-bd --- 里面是无序列表 有 10个 小li 组成小li 外边距的问题， 这里有个小技巧。 给box-hd 宽度为 1215 就可以一行装开5个 li了复习点：我们用到清除浮动，因为 box-hd 里面的盒子个数不一定是多少，所以我们就不给高度了，但是里面的盒子浮动会影响下面的布局，因此需要清除浮动。1.4.5. 底部模块制作结构图如下：1号盒子通栏大盒子 底部 footer 给高度 底色是白色2号盒子版心水平居中3号盒子版权 copyright 左对齐4号盒子 链接组 links 右对齐

PS 切图 PS 切图1、PS 基本操作因为网页美工大部分效果图都是利用 PS（Photoshop）来做的，所以以后我们大部分切图工作都是在 PS 里面完成。部分操作：文件→打开 ：可以打开我们要测量的图片Ctrl+R：可以打开标尺，或者 视图→标尺右击标尺，把里面的单位改为像素Ctrl+ 加号(+)可以放大视图， Ctrl+ 减号(-)可以缩小视图按住空格键，鼠标可以变成小手，拖动 PS 视图用选区拖动 可以测量大小Ctrl+ D 可以取消选区，或者在旁边空白处点击一下也可以取消选区2、图层切图最简单的切图方式：右击图层 → 导出 → 切片。3、切片切图2.1、利用切片选中图片利用切片工具手动划出2.2、导出选中的图片文件菜单 → 存储为 web 设备所用格式 → 选择我们要的图片格式 → 存储 。4、PS插件切图​ Cutterman 是一款运行在 Photoshop 中的插件，能够自动将你需要的图层进行输出，以替代传统的手工 "导出 web 所用格式" 以及使用切片工具进行挨个切图的繁琐流程。官网：http://www.cutterman.cn/zh/cutterman注意：Cutterman 插件要求你的 PS 必须是完整版，不能是绿色版，所以大家需要安装完整版本。5. PS 切图5.1. 常见的图片格式序号格式特点和常用的用途1jpgJPEG（.JPG）对色彩的信息保留较好，高清，颜色较多，我们产品类的图片 经常用jpg格式的2gifGIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果, 实际 经常用于一些图片小动画效果3pngpng图像格式，是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景. 如果想要切成 背景透明的图片 ,请选择png格式.4psdPSD图像格式，Photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计稿. 对我们前端人员来说,最大的优点,我们可以直接从上面复制文字,获得图片,还可以测量大小和距离.PS 有很多的切图方式：图层切图、切片切图、PS 插件切图等。5.2. 图层切图简单版步骤：​ ① 使用移动工具，点击需要的图片​ ② 查看右侧，找到图片对应的图层，右击图层 → 快速导出为 PNG但是很多情况下,我们需要合并图层再导出:步骤：​ ① 选中需要的若干个图层：选择一个图层，再按住shift键，继续选第二个图层: ​ ② 图层菜单 → 合并图层(ctrl+e) ​ ③ 查看右侧生成的新图层，在合并后的图层上，右击 → 快速导出为 PNG5.3. 切片切图步骤：​ ① 利用切片选中图片 ：利用切片工具手动划出​ ② 导出选中的图片：文件菜单 → 导出 → 存储为 web 设备所用格式 → 选择我们要的图片格式 → 存储 。​ 注意：保存的时候，要选“选中的切片”：5.4. 插件切图5.4.1. 介绍Cutterman是一款运行在photoshop中的插件，能够自动将你需要的图层进行输出， 以替代传统的手工 "导出web所用格式" 以及使用切片工具进行挨个切图的繁琐流程。 它支持各种各样的图片尺寸、格式、形态输出，方便你在pc、ios、Android等端上使用。 它不需要你记住一堆的语法、规则，纯点击操作，方便、快捷，易于上手。5.4.2. 安装注意： cutterman插件要求你的ps 必须是完整版，不能是绿色版，所以大家需要从新安装完整版本。查看 “窗口菜单”里面的“扩展功能”：​ ① 如果是扩展功能的是灰色的，表示就是绿色版的，需要重新安装PS​ ② 如果是扩展功能右侧是可以使用的，表示就是完整版的，可以安装cutterman插件快速切图官网: http://www.cutterman.cn/zh/cutterman当cutterman 安装完成后，重启PS，会发现扩展功能里面多了一个cutterman工具：5.4.3 使用步骤​ ① 选择需要的图层​ ② 选择web端，点击web下面的下拉三角​ ③ 选择需要的图片格式​ ④ 设置好存储路径​ ⑤ 点击 “导出选中图层” 按钮示意图：

jQuery jQuery 的入口函数$(function () { ... // 此处是页面 DOM 加载完成的入口 }) ; $(document).ready(function(){ ... // 此处是页面DOM加载完成的入口 }); 1.等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。 2.相当于原生 js 中的 DOMContentLoaded。 3.不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。更推荐使用第一种方式。jQuery 的顶级对象 $1.$ 是 jQuery 的别称，在代码中可以使用 jQuery 代替 $，但一般为了方便，通常都直接使用 $ 。 2.$ 是jQuery 的顶级对象， 相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用 jQuery 的方法。jQuery 对象和 DOM 对象用原生 JS 获取来的对象就是 DOM 对象jQuery 方法获取的元素就是 jQuery 对象。jQuery 对象本质是： 利用$对DOM 对象包装后产生的对象（伪数组形式存储）。 注意： 只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。DOM对象与jQuery对象相互转换DOM 对象与 jQuery 对象之间是可以相互转换的。 因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把 jQuery对象转换为DOM对象才能使用。DOM 对象转换为 jQuery 对象： $(DOM对象) $('div') jQuery 对象转换为 DOM 对象（两种方式）$('div') [index] index 是索引号 $('div') .get(index) index 是索引号 jQuery 基础选择器原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。$(“选择器”) // 里面选择器直接写 CSS 选择器即可，但是要加引号 名称用法描述ID选择器$("#id")获取指定ID的元素全选选择器$('*')匹配所有元素类选择器$(" .cass")获取同一类class的元素标签选择器$("div")获取同一类标签的所有元素并集选择器$("div,p,li")选取多个元素交集选择器$("li.current")交集元素子代选择器$("ul>li")使用>号，获取亲儿子层级的元素; 注意，并不会获取孙子层级的元素后代选择器$("ul li")使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等jQuery 设置样式$('div').css('属性', '值') 隐式迭代（重要）遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。 简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作， 方便我们调用。jQuery 筛选选择器语法用法描述:first$('li:first')获取第一个li元素:last$('li:last')获取最后一个li元素:eq(index)$("li:eq(2)")获取到的li元素中，选择索引号为2的元素，索引号index从0开始。:odd$("li:odd")获取到的li元素中，选择索引号为奇数的元素:even$("Ii:even")获取到的li元素中，选择索引号为偶数的元素jQuery 筛选方法（重点）语法用法说明parent()$("li").parent();查找父级children(selector)$("ul").children("li")相当于$("ul>li")，最近一级（亲儿子)find(selector)$("u1").find("li");相当于$("ul li"),后代选择器siblings(selector)$(".first").siblings("li");查找兄弟节点，不包括自己本身nextAll([expr])$(".first").nextAll()查找当前元素之后所有的同辈元素prevtAll([expr])$(".last").prevAll()查找当前元素之前所有的同辈元素hasClass(class)$( 'div'). hasClass("protected")检查当前的元素是否含有某个特定的类，如果有，则返回trueeq(index)$("li").eq(2);相当于$("li:eq(2)") , index 从0开始重点记住： parent() children() find() siblings() eq() jQuery 里面的排他思想想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。$(this).css(“color ”,” red ”); $(this).siblings(). css(“ color ”,””); 链式编程链式编程是为了节省代码量，看起来更优雅。$(this).css('color', 'red').sibling().css('color', ''); 操作 css 方法jQuery 可以使用 css 方法来修改简单元素样式； 也可以操作类，修改多个样式。参数只写属性名，则是返回属性值$(this).css(''color''); 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号$(this).css(''color'', ''red''); 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号，$(this).css({ "color":"white","font-size":"20px"}); 设置类样式方法作用等同于以前的 classList，可以操作类样式， 注意操作类里面的参数不要加点。添加类 $(“div”).addClass('current'); 移除类 $(“div”).removeClass('current'); 切换类 $(“div”).toggleClass('current'); 类操作与className区别原生 JS 中 className 会覆盖元素原先里面的类名。 jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。显示隐藏效果 显示语法规范 show([speed,[easing],[fn]]) 显示参数 （1）参数都可以省略， 无动画直接显示。 （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。 （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。 （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。隐藏语法规范 hide([speed,[easing],[fn]]) 隐藏参数 （1）参数都可以省略， 无动画直接显示。 （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。 （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。 （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。切换语法规范 toggle([speed,[easing],[fn]]) 切换参数 （1）参数都可以省略， 无动画直接显示。 （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。 （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。 （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。 建议：平时一般不带参数，直接显示隐藏即可。滑动效果下滑效果语法规范 slideDown([speed,[easing],[fn]]) 下滑效果参数 （1）参数都可以省略。 （2）speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。 （3）easing:(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。 （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。上滑效果语法规范 slideUp([speed,[easing],[fn]]) 上滑效果参数 （1）参数都可以省略。 （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。 （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。 （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。滑动切换效果语法规范 slideToggle([speed,[easing],[fn]]) 滑动切换效果参数 （1）参数都可以省略。 （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。 （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。 （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。事件切换hover([over,]out) （1）over:鼠标移到元素上要触发的函数（相当于mouseenter） （2）out:鼠标移出元素要触发的函数（相当于mouseleave） （3）如果只写一个函数，则鼠标经过和离开都会触发它动画队列及其停止排队方法动画或效果队列 动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。停止排队 stop() (1）stop() 方法用于停止动画或效果。 (2) 注意： stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。淡入淡出效果淡入效果语法规范 fadeIn([speed,[easing],[fn]]) 淡入效果参数 （1）参数都可以省略。 （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。 （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。 （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。淡出效果语法规范 fadeOut([speed,[easing],[fn]]) 淡出效果参数 （1）参数都可以省略。 （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。 （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。 （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。淡入淡出切换效果语法规范 fadeToggle([speed,[easing],[fn]]) 淡入淡出切换效果参数 （1）参数都可以省略。 （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。 （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。 （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。渐进方式调整到指定的不透明度 fadeTo([[speed],opacity,[easing],[fn]]) 效果参数 （1）opacity 透明度必须写，取值 0~1 之间。 （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。必须写 （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。 （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。自定义动画 animate语法 animate(params,[speed],[easing],[fn]) 参数 （1）params: 想要更改的样式属性，以对象形式传递，必须写。 属性名可以不用带引号， 如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。 （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。 （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。 （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。设置或获取元素固有属性值 prop()所谓元素固有属性就是元素本身自带的属性，比如 <a> 元素里面的 href ，比如 元素里面的 type。 获取属性语法 prop('属性') 设置属性语法 prop('属性', '属性值') 设置或获取元素自定义属性值 attr()用户自己给元素添加的属性，我们称为自定义属性。 比如给 div 添加 index =“1”。获取属性语法 attr('属性') // 类似原生 getAttribute() 设置属性语法 attr('属性', '属性值') // 类似原生 setAttribute() 改方法也可以获取 H5 自定义属性数据缓存 data()data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。 附加数据语法 data('name','value') // 向被选元素附加数据 获取数据语法 date('name') // 向被选元素获取数据 同时，还可以读取 HTML5 自定义属性 data-index ，得到的是数字型jQuery 内容文本值主要针对元素的内容还有表单的值操作。普通元素内容 html()（ 相当于原生inner HTML) html() // 获取元素的内容 html('内容') // 设置元素的内容 普通元素文本内容 text() (相当与原生 innerText) text() // 获取元素的文本内容 text('文本内容') // 设置元素的文本内容 表单的值 val()（ 相当于原生value) val() // 获取表单的值 val('内容') // 设置表单的值 jQuery 元素操作遍历元素jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用到遍历。 语法1： $("div").each(function (index, domEle) { xxx; })each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个里面的回调函数有2个参数： index 是每个元素的索引号; demEle 是每个DOM元素对象，不是jquery对象所以要想使用jquery方法，需要给这个dom元素转换为jquery对象 $(domEle) 语法2： $.each(object，function (index, element) { xxx; }） $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象里面的函数有2个参数： index 是每个元素的索引号; element 遍历内容创建元素语法：$(''<li></li>''); 动态的创建了一个 添加元素内部添加 element.append(''内容'') 把内容放入匹配元素内部最后面，类似原生 appendChild。element.prepend(''内容'') 把内容放入匹配元素内部最前面。外部添加 element.after(''内容'') // 把内容放入目标元素后面 element.before(''内容'') // 把内容放入目标元素前面 ①内部添加元素，生成之后，它们是父子关系。 ②外部添加元素，生成之后，他们是兄弟关系。删除元素element.remove() // 删除匹配的元素（本身） element.empty() // 删除匹配的元素集合中所有的子节点 element.html('''') // 清空匹配的元素内容 ①remove 删除元素本身。 ②empt() 和 html('''') 作用等价，都可以删除元素里面的内容，只不过 html 还可以设置内容。jQuery 尺寸以上参数为空，则是获取相应值，返回的是数字型。如果参数为数字，则是修改相应值。 参数可以不必写单位。 jQuery 位置 位置主要有三个： offset()、position()、scrollTop()/scrollLeft()offset() 设置或获取元素偏移①offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。 ②该方法有2个属性 left、top 。offset().top 用于获取距离文档顶部的距离，offset().left 用于获取距离文档左侧的距离。 ③可以设置元素的偏移：offset({ top: 10, left: 30 }); 位置主要有三个： offset()、position()、scrollTop()/scrollLeft()position() 获取元素偏移①position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。 ②该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离，position().left 用于获取距离定 位父级左侧的距离。 ③该方法只能获取。 位置主要有三个： offset()、position()、scrollTop()/scrollLeft()scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧①scrollTop() 方法设置或返回被选元素被卷去的头部。 ②不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。 单个事件注册 语法： element.事件(function(){}) $(“div”).click(function(){ 事件处理程序 }) 其他事件和原生基本一致。 比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等 事件处理 on() 绑定事件 on() 方法在匹配元素上绑定一个或多个事件的事件处理函数 语法： element.on(events,[selector],fn)events:一个或多个用空格分隔的事件类型，如"click"或"keydown" 。selector: 元素的子元素选择器 。fn:回调函数 即绑定在元素身上的侦听函数。 on() 方法优势1： 可以绑定多个事件，多个处理事件处理程序。 $(“div”).on({ mouseover: function(){}, mouseout: function(){}, click: function(){} });如果事件处理程序相同 $(“div”).on(“mouseover mouseout”, function(){$(this).toggleClass(“current”); });on() 方法优势2： 可以事件委派操作 。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。 $('ul').on('click', 'li', function() { alert('hello world!'); }); 在此之前有bind(), live() delegate()等方法来处理事件绑定或者事件委派，最新版本的请用on替代他们。 on() 方法优势3： 动态创建的元素，click() 没有办法绑定事件， on() 可以给动态生成的元素绑定事件 $(“div").on("click",”p”, function(){ alert("俺可以给动态生成的元素绑定事件") }); $("div").append($("我是动态创建的p"));事件处理 off() 解绑事件 off() 方法可以移除通过 on() 方法添加的事件处理程序。 $("p").off() // 解绑p元素所有事件处理程序 $("p").off( "click") // 解绑p元素上面的点击事件 后面的 foo 是侦听函数名 $("ul").off("click", "li"); // 解绑事件委托 如果有的事件只想触发一次， 可以使用 one() 来绑定事件。自动触发事件 trigger() 有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标 点击触发。 element.click() // 第一种简写形式 element.trigger("type") // 第二种自动触发模式 $("p").on("click", function () { alert("hi~"); }); $("p").trigger("click"); // 此时自动触发点击事件，不需要鼠标点击 有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标 点击触发。 element.triggerHandler(type) // 第三种自动触发模式 triggerHandler模式不会触发元素的默认行为，这是和前面两种的区别。jQuery 事件对象 事件被触发，就会有事件对象的产生。 element.on(events,[selector],function(event) {}) 阻止默认行为：event.preventDefault() 或者 return false 阻止冒泡： event.stopPropagation() jQuery 对象拷贝 如果想要把某个对象拷贝（合并） 给另外一个对象使用，此时可以使用 $.extend() 方法 语法： $.extend([deep], target, object1, [objectN])deep: 如果设为true 为深拷贝， 默认为false 浅拷贝target: 要拷贝的目标对象object1:待拷贝到第一个对象的对象。objectN:待拷贝到第N个对象的对象。浅拷贝目标对象引用的被拷贝的对象地址，修改目标对象会影响被拷贝对象。深拷贝，前面加true， 完全克隆，修改目标对象不会影响被拷贝对象。jQuery 多库共存问题概述： jQuery使用$作为标示符，随着jQuery的流行,其他 js 库也会用这$作为标识符， 这样一起使用会引起冲突。 客观需求： 需要一个解决方案，让jQuery 和其他的js库不存在冲突，可以同时存在，这就叫做多库共存。 jQuery 解决方案：把里面的 $ 符号 统一改为 jQuery。 比如 jQuery(''div'')jQuery 变量规定新的名称：$.noConflict() var xx = $.noConflict();jQuery 插件 jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。 注意: 这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为 jQuery 插件。 jQuery 插件常用的网站：jQuery 插件库 http://www.jq22.com/jQuery 之家 http://www.htmleaf.com/ jQuery 插件使用步骤：引入相关文件。（jQuery 文件 和 插件文件）复制相关html、css、js (调用插件)。