第一章：jQuery 简介
为什么要学习jQuery?
什么是jQuery？
jquery的官网：http://jquery.com/
说白了：jQuery就是一个js库，使用jQuery，会比使用JavaScript更简单。
js库：把一些常用到的方法写到一个单独的js文件，使用的时候直接去引用这js文件就可以了。（animate.js）
学习jQuery，主要是学什么呢？
API：application programming interface：应用程序编程接口，换句话说，API就是方法。
注意：方法调用的时候，都带小括号(),使用jQuery的方法的时候，不要忘了小括号。
怎样使用jQuery？
下载
- 可以去官网直接下载
- 通过通过Bower工具安装，
bower install jquery - 可以通过 CDN（内容分发网络） 引用它。
eg:从谷歌或微软引用 jQuery，请使用以下代码之一：
2)入口函数$(document).ready(function () { });3)功能实现
$("#btnShowDiv").click(function () { $("div").show(1000); });div动态展示案例中JavaScript与jquery的对比
js与jQuery对比图第二章：jQuery详细解释
版本介绍
- 大版本分类
分为 1.x和2.x以及3.x
区别：2.x版本不再支持IE6/7/8 - 同一版本分类
有两个版本的 jQuery 可供下载：
jquery.min.js：压缩版本，去除了注释、换行、空格、并且将一些变量替换成了a,b,c之类的简单字符，基本没有可读性，推荐在项目生产环境使用，因为文件较小，减少网络压力。
jquery.js：未压缩版本（开发版本），代码可读性高，推荐在开发和学习阶段使用，方便查看源代码。
引包的注意点
-
忘记引包或者引包在入口函数的后面。
jQuery忘记引包 -
引包路径错误(404)
jQuery路径引包路径错误
入口函数
jQuery入口函数的两种写法
//第一种写法 $(document).ready(function() {} //第二种写法 $(function() {});对比JavaScript的入口函数jQuery的入口函数,执行时机
- JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
- jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。
jQuery对象与DOM对象之间的转换
什么是DOM对象？
使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。比如使用document.getElement*系列的方法返回的就是dom对象。
var btn = document.getElementById(“btnShowDiv”); var divs = document.getElementsByTagName(“div”);dom对象只可以使用dom对象的方法和属性
domObject.innerHTML = “dom对象设置文本”; domObject.style.display= “block”;//dom对象显示对象 domObject.onclick = function() {}//dom对象绑定事件什么是jquery对象？
jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。比如使用$()方法返回对象都是jquery对象。
$(“div”);//标签选择器返回的jquery对象。 $(“#btnShowDiv”);//id选择器返回的jquery对象。jquery对象只能使用jquery对象的方法
var $obj = $(“div”); $obj.html(“jquery对象设置文本的方法”); $obj.show();//jquery对象显示文本 $obj.click(function() {});//jquery对象绑定事件错误的用法
$(“div”).innerHTML;//jquery对象不能调用dom方法 document.getElementById(“btnShowDiv”).show();//dom对象不能调用jquery方法。jQuery对象和DOM对象的相互转换
- jquery对象转DOM对象
var $li = $(“li”); //第一种方法（推荐使用） $li[0] //第二种方法 $li.get(0) //其实jQuery对象转DOM对象的实质就是取出jQuery对象中封装的DOM对象。- DOM对象转jquery对象
var $obj = $(domObj); // $(document).ready(function(){});就是典型的DOM对象转jQuery对象区分jQuery和JavaScript
JavaScript是一门编程语言，jquery是用JavaScript实现的一个JavaScript库，目的是简化我们的开发。
第三章：jQuery 选择器
基本选择器
基本选择器
总结：跟css的选择器用法一模一样。
层级选择器
层级选择器过滤选择器
这类选择器都带冒号：
过滤选择器筛选选择器
筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。
筛选选择器
第四章：jQuery操作样式
1、css操作
功能：设置或者修改样式，操作的是style属性
设置单个样式
//name：需要设置的样式名称 //value：对应的样式值 css(name, value); //使用案例 $("#one").css("background","gray");//将背景色修改为灰色设置多个样式
//参数是一个对象，对象中包含了需要设置的样式名和样式值 css(obj); //使用案例 $("#one").css({ "background":"gray", "width":"400px", "height":"200px" });获取样式
//name:需要获取的样式名称 css(name); //案例 $("div").css("background-color");注意：获取样式操作只会返回第一个元素对应的样式值。
2、class操作
添加样式类
//name：需要添加的样式类名，注意参数不要带点. addClass(name); //例子,给所有的div添加one的样式。 $(“div”).addClass(“one”);移除所有样式类
//不带参数，移除所有的样式类 removeClass() //例子，移除div所有的样式类 $(“div”).removeClass();移除单个样式类
//name:需要移除的样式类名 removeClass(“name”); //例子，移除div中one的样式类名 $(“div”).removeClass(“one”);判断是否有样式类
//name:用于判断的样式类名，返回值为true false hasClass(name) //例子，判断第一个div是否有one的样式类 $(“div”).hasClass(“one”);切换样式类
//name:需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。 toggleClass(name); //例子 $(“div”).toggleClass(“one”);经验总结：
1.如果操作到的样式非常少，可以考虑css方法
2.如果操作到的样式非常多，那么可以通过class方法来操作，将样式写到一个class类里面。
3.如果考虑到后期维护方便，将css从js中分离出来，那么推荐使用class的方式来操作。第五章：jquery动画
显示与隐藏
显示(show)与隐藏(hide)是一组动画：
show方法详解：
show([speed], [callback]); //speed(可选)：动画的执行时间 1.如果不传，就没有动画效果。 2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐) 3.固定字符串，slow(200)、normal(400)、fast(600)，如果传其他字符串，则默认为normal。 //callback(可选):执行完动画后执行的回调函数hide方法详解：
与show方法的用法完全一致。
show/hide：修改的是元素的width、height、opacity。滑入与滑出
滑入(slideUp)与滑出(slideDown)是一组动画，效果与卷帘门类似
slideUp/slideDown,使用方法与show/hide基本一致。slideUp(speed, callback); //speed(可选)：动画的执行时间 1.如果不传，默认为normal，注意区分show/hide。 2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐) 3.固定字符串，slow(200)、normal(400)、fast(600) //callback(可选):执行完动画后执行的回调函数淡入与淡出
fadeIn/fadeOut使用方法与show/hide、slideDown/slideUp一致。
fadeIn(speed, callback); //speed(可选)：动画的执行时间 1.如果不传，默认是normal。 2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐) 3.固定字符串，slow(200)、normal(400)、fast(600) //callback(可选):执行完动画后执行的回调函数淡入淡出切换：
fadeToggle(speed, callback); //如果当前元素处于隐藏状态，那么执行fadeIn操作，如果处于显示状态，那么执行fadeOut操作。淡入淡出到某个值
与淡入淡出的区别：淡入淡出只能控制元素的不透明度从 完全不透明 到完全透明；而fadeTo可以指定元素不透明度的具体值。并且时间参数是必需的！fadeTo(speed, value, callback)//可以设置具体的透明度 //speed（必须） //value 0-1之间的数值(比如0.4)，表示淡到某一个值。 //callback(可选) 回调函数fade系列方法：修改的是元素的opacity
动画小结
1.jQuery给我们提供了三组动画，show/hide、slideUp/slideDown、fadeIn/fadeOut
2.动画切换方法：slideToggle、fadeToggle，注意：show和hide没有切换的方法。
3.淡入淡出到某个值：fadeTo方法。
4.show/slideDown/fadeIn三个是显示效果、hide/slideUp/fadeOut三个是隐藏效果。
5.show/hide修改的是元素的height,width,opacity。slide系列方法修改的是元素的height。fade系列方法修改的是元素的opacity。这三种方法修改的这些值，都是带数字的，因为带了数字才能做渐变。
第六章：jquery操作DOM(节点)
创建元素
//$(htmlStr) //htmlStr：html格式的字符串 $(“这是一个span元素”);添加元素
- 添加新建的元素：
//方法一：将jQuery对象添加到调用者内部的最后面。 var $span = $(“这是一个span元素”); $(“div”).append($span); //方法二：参数传字符串，会自动创建成jquery对象 $(“div”).append(“这是一个span元素”);- 添加已经存在的元素
var $p = $(“p”); $(“div”).append($p); //注意：如果添加的是已经存在的元素，那么会把之前的元素给干掉。（类似于剪切的功能）。 //类似的用法：append prepend after before- 使用html方法创建元素
//设置内容 $(“div”).html(“这是一段内容”); //获取内容 $(“div”).html()清空元素
- empty：清空指定节点的所有元素，自身保留(清理门户)
$(“div”).empty();//清空div的所有内容（推荐使用，会清除子元素上绑定的内容，源码）- 清空元素的第二种方法
$(“div”).html(“”);//使用html方法来清空元素，不推荐使用，会造成内存泄漏，绑定的事件不会被清除。删除元素
remove：相比于empty，自身也删除（自杀）
$(“div”).remove();克隆元素
作用：复制匹配的元素
// 复制$(selector)所匹配到的元素（深度复制） //cloneNode(true) // 返回值为复制的新元素，和原来的元素没有任何关系了。即修改新元素，不会影响到原来的元素。 $(selector).clone();第七章：jquery操作DOM
jQuery操作属性
- 设置单个属性
//第一个参数：需要设置的属性名 //第二个参数：对应的属性值 attr(name, value); //用法举例 $(“img”).attr(“title”,”哎哟，不错哦”); $(“img”).attr(“alt”,“哎哟，不错哦”);- 设置多个属性
//参数是一个对象，包含了需要设置的属性名和属性值 attr(obj) //用法举例 $("img").attr({ title:"哎哟，不错哦", alt:"哎哟，不错哦", style:"opacity:.5"});- 获取属性
//传需要获取的属性名称，返回对应的属性值 attr(name) //用法举例 var oTitle = $("img").attr("title"); alert(oTitle);注意：
1.获取属性时，只会获取到第一个元素对应的属性，与css方法一样
2.获取属性时，如果该属性不存在，那么会返回undefinedjQuery操作值与内容
- val方法
val方法用于设置和获取表单元素的值，例如input、select、textarea的值
//设置值 $(“#name”).val(“张三”); //获取值 $(“#name”).val();- html方法
//设置内容 $(“div”).html(“这是一段内容”); //获取内容 $(“div”).html()- text方法
//设置内容 $(“div”).text(“这是一段内容”); //获取内容 $(“div”).text()html方法与text方法的区别：
html方法会识别html标签，text方法会把内容直接当成字符串，并不会识别html标签。jQuery操作尺寸
- height
设置或者获取高度
//带参数表示设置高度 $(“img”).height(200); //不带参数获取高度 $(“img”).height(); //返回值是number类型（比如200），而使用$(“img”).css(“width”)返回的是字符串（比如200px）- width
设置获取获取宽度，与高度操作功能一样
//带参数表示设置宽度 $(“img”).width(200); //不带参数获取宽度 $(“img”).width();
第八章：jQuery事件机制
jQuery事件的发展历程
简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)
简单事件绑定
click(handler) 单击事件 mouseenter(handler) 鼠标进入事件 mouseleave(handler) 鼠标离开事件 scroll(handler) 滚动事件 //缺点：一次只能绑定一个事件bind事件绑定
不推荐使用，jQuery1.7版本后被on取代
//绑定多个事件 //第一个参数：事件类型 //第二个参数：事件处理程序 $("p").bind("click mouseenter", function(){ //事件响应方法 });缺点：不支持动态创建出来的元素绑定事件。
delegate事件绑定
支持动态绑定事件
// 第一个参数：selector，要绑定事件的元素 // 第二个参数：事件类型 // 第三个参数：事件处理函数 $(".parentBox").delegate("p", "click", function(){ //为 .parentBox下面的所有的p标签绑定事件 });理解：为什么delegate支持动态绑定事件？原因是事件冒泡机制。因为事件时绑定到父元素上的，由子元素触发。
on事件绑定
jQuery1.7之后，jQuery用on统一了所有事件的处理方法
on事件绑定
优势：最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用
// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件） // 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。 // 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用） // 第四个参数：handler，事件处理函数 $(selector).on(events[,selector][,data],handler); 例子： // 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定 $(selector).on( "click",“span”, function() {}); // 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定（不使用代理）。 $(selector).on( "click", function() {});事件解绑
unbind() 方式（不用）
作用：解绑事件
$(selector).unbind(); //解绑所有的事件 $(selector).unbind(“click”); //解绑指定的事件undelegate() 方式（不用）
作用：解绑事件
$( selector ).undelegate(); //解绑所有的delegate事件 $( selector).undelegate( “click” ); //解绑所有的click事件off方式（重点）
作用：解绑事件
// 解绑匹配元素的所有事件 $(selector).off(); // 解绑匹配元素的所有click事件 $(selector).off(“click”); // 解绑所有代理的click事件，元素本身的事件不会被解绑 $(selector).off( “click”, “**” );事件触发
简单事件触发
$(selector).click(); //触发 click事件trigger方法触发事件
$(selector).trigger(“click”);补充
each方法
作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数
// 参数一表示当前元素在所有匹配元素中的索引号 // 参数二表示当前元素（DOM对象） $(selector).each(function(index,element){}); - 大版本分类