再探jQuery
前言：在使用jQuery的时候发现一些知识点记得并不牢固，因此希望通过总结知识点加深对jQuery的应用，也希望和各位博友共同分享。
jQuery是一个JavaScript库，它极大的简化了JavaScript编程，虽然目前网络上有大量开源的JS框架，但是jQuery是目前最流行的JS框架，而且提供了大量的扩展。包括Google、Microsoft、IBM等大公司都在使用jQuery框架，值得注意的是，jQuery团体知道JS在不同浏览器中存在这大量的兼容性问题，所以jQuery兼容所有主流浏览器，包括Internet Explorer 6！
第一部分：使用方法
那么如何使用jQuery呢？很简单，只需要在jQuery.com下载jQuery并引入置于</body>的上面即可，如下所示：
<script src="jquery-1.10.2.min.js"></script>
如果你不希望下载并存放jQuery，也可以通过CDN（内容分发网络）引用它。其中，百度、新浪、谷歌、微软的服务器都存有jQuery。
比如百度CDN：
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
不推荐google的CDN,因为google产品在中国很不稳定。
使用这些大公司的CDN有什么好处呢？
许多用户在访问其他站点时，已经从百度、又拍云、新浪、谷歌或微软加载过 jQuery。所有结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。
补充CDN概念：CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快更稳定。使得用户可以就近取得所需内容，解决Internet网络拥挤的状况，从而提高用户访问网站的响应速度。
第二部分：jQuery语法
1. jQuery语法是通过选取HTML元素，并对选取的元素执行某些操作。基础语法如下：
$(selector).action()
- 美元符号$定义jQuery
- 选择符（selector）"查询"和“查找”HTML元素
- jQuery的action()执行对元素的操作
实例如下：
- $(this).hide()-隐藏当前元素
- $("p").hide()-隐藏所有<p>元素
- $("p.test").hide()-隐藏所有class="test"的p元素
2.文档就绪事件
$(document).ready(function(){
//此处开始写jQuery代码
});
这句代码的意思是再文档完全加载之后再运行jQuery代码。
文档就绪事件可以简写为：
$(function(){
//开始写jQuery代码
});
注意到结尾处都有一个分号作为结束。
第三部分：jQuery选择器
jQuery选择器基于元素的id、类、类型、属性、属性值等查找（或选择)HTML元素.这些都是基于存在的css选择器，除此之外，它还有一些自定义的选择器。值得注意的是：jQuery中所有的选择器都以美元符号开头。下面作简单的介绍。
1.元素选择器
jQuery元素选择器基于元素名选取元素。 如$("p")为在页面中选区所有的<p>元素，注意到p是由双引号括起来的。
2.#id选择器
jQuery中#id选择器通过HMTL中的id属性选取指定的元素。如$("#text"),由于元素的id是唯一的，所以获得的元素也只有一个。
3. .class选择器
jQuery中.class选择器通过HTML中的class属性选取指定的元素。如$(".test"),由于元素的class不是唯一的，所以获取的元素可能不止一个。
4. $("*")，选取所有的元素。
5. $(this),选取当前的HTML元素,注意：$(this)中的this不需要双引号括起来。
6.$("p:first"),选取第一个p元素。
7.$("p.intro"),选取类名为class的p元素。
8.$("ul li:first"),选取第一个ul下的第一个li元素。
9.$("ul li:first-child"),选取每个ul下的第一个li元素。 注意和8的区别。
10.$("[href]"),选取含有属性href的元素。
11.$("a[href!='_blank']"),选取href属性的属性值不为_blank的a元素。注意：用单引号将属性值括起来。
12.$("a[href='_blank']"),选取href属性的属性值为_blank的a元素。
13.$(":button")，选取所有type=button的input元素和button元素。
14.$("tr:even"),选取偶数行的tr元素。
15.$("tr:odd"),选取奇数行的tr元素。
第四部分：jQuery事件
1.什么是事件呢? 事件就是页面对不同访问者的响应。 而事件处理程序是指当HMTL中发生某些事件时所调用的方法。即事件处理程序是一个方法，或者说事件处理程序一个函数。常见的DOM事件有：
- 鼠标事件： click、dbclick、mouseenter、mouseleave等等。
- 键盘事件：keypress、keydown、keyup等。
- 表单事件：submit、change、focus、blur等等。
- 文档/窗口事件：load、resize、scroll、unload等等。
而在jQuery中，大多数的DOM事件都有一个等效的jQuery方法。如：
$("p").click(function(){
//动作触发后执行的代码。
});
2.常用的jQuery事件方法
- $(document).ready()。即在文档完全加载完之后执行函数。
- click()。即当按钮点击事件被触发是会调用的一个函数。
- dbclick()。即双击元素会发生dbclick实践。
- mouseenter()。即当鼠标指针穿过元素时，会发生mouseenter事件。
- mouseleave()。即当鼠标指针离开元素时，会发生mouseleave事件。
- mousedown()。即当鼠标指针移动到元素上方，并按下鼠标按键时，会触发mousedown事件。
- mouseup()。即当在元素上松开鼠标按钮时，会发生mouseup事件。
- hover()。该方法哦那个鱼模拟光标悬停事件。注：当鼠标移动到元素上时，会触发指定的第一个函数（mouseenter）；当鼠标移出这个元素时，会触发指定的第二个函数（mouseleave）。
- focus()。当元素获得焦点时，发生focus事件。如用鼠标选中或者用tab键定位到元素上时。
- blur()。当元素失去焦点时，会触发blur事件 。
第五部分：jQuery效果
1.隐藏和显示
通过jQuery，您可以使用hide()、show()方法来隐藏和显示HMTL元素。
语法：
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
即hide和show方法都可以接收两个参数，第一个是speed（可选的），即显示的速度，可以取值“slow”、“fast”或毫秒。第二个是callback（可数的），它是隐藏或显示完成后所执行的函数名称。
通过jQuery，您可以使用toggle()方法来切换hide()、show()方法。即显示被隐藏的元素，而隐藏的元素会被显示。语法如下：
$(selector).toggle(speed,callback);
toggle()方法同样可以接收两个参数与hide()和show()方法。
2.淡入淡出
通过jQuery，可以通过fadeIn()、fadeOut()、fadeOut()、fadeTo()。
语法如下：
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);
其中fadeIn使得隐藏的元素淡入、fadeOut使得出现的元素淡出，而fadeToggle和toggle方法类似，如果元素隐藏，则淡入，如果元素出现，则淡出。这三种方法都接收两个参数（都是可选的），其中第一个参数是淡入淡出的时间，可以是"fast"、"slow"或毫秒数。第二个参数时一个回调函数，即淡入（淡出）效果执行完之后执行的函数。
补充内容：回调函数，又简称回调（callback即call then back，被主函数调用运算后会返回主函数），是指通过函数参数传递到其他代码的，某一块可执行代码的引用。
如下所示：
而fadeTo()方法允许渐变为给定的不透明度(值介于0与1之间)。第二个参数即为不透明度。
3.滑动
通过jQuery的slideDown()、slideUp()和slideToggle()方法可以完成元素的上下滑动效果。语法如下：
$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);
其中，slideDown()方法用于对隐藏的元素向下滑动出现。slideUp()方法用于对显示的元素向上滑动隐藏。显然，slideToggle()方法即切换slideDown()和slideUp()方法。滑动的效果非常不错，值得推荐。
4.动画 animate()方法
jQuery方法可以用于创建自定义的动画。语法如下：
$(selector).animate({params},speed,callback);
该方法接收三个参数，必需的params参数定义形成动画的css属性。可选的speed参数规定效果的时长，它可以去以下值：“slow”、“fast”或毫秒。可选的callback参数是动画完成之后所执行的函数名称。
看下面的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
</script>
</head> <body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div> </body>
</html>
值得注意的是：默认的情况下，所有的HTML元素都有一个静态的位置，且是不可移动的。因此，如果我们想要改变其位置，必须将元素的position属性设置为relative，fixed或absolute，因为animate方法也知识改变css！
既然animate()方法是一个控制动画的方法，那么它是可以控制多个属性的，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style>
#focus{width: 100px;height: 100px;background: red;}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" ></script>
</head>
<body>
<button>淡入淡出</button>
<div id="focus"></div>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#focus").animate({width:"200px",height:"300px",opacity:0.2},"2000",function(){alert("success!");});
});
});
</script>
</body>
</html>
通过这个animate（）方法会将div的宽度变为200px，高度为300px，0.2的不透明度，且执行时间为2000ms，执行完成之后弹出窗口显示“success!”。
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
5.停止动画-stop()方法
该方法用于停止所有jQuery效果函数，包括滑动、淡入淡出和自定义动画。
6.链（chaining）
通过jQuery，可以把动作/法连接在一起，即在一条语句上运行同一个元素的多个jQuery方法。这样的话，浏览器就不用多次的查找相同的元素。如下所示：
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
这样，p1元素会首先变成红色，然后向上滑动，再然后向下滑动。
提示：当进行连接时，代码行会变得很差。不过，jQuery语法不是很严格；我们可以按照自己希望的格式来写，包括换行和缩进，这样也可以提高可读性。如：
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
第六部分：jQuery HMTL
jQuery拥有可操作HMTL元素和属性的强大方法，这一部分将要着重介绍。
一：jQuery获取和设置内容与属性
因为jQuery中提供了一系列与DOM相关的方法，这就使得访问和操作元素和属性变得很容易。
1.获得内容可以通过
- text()方法--获取所选元素的文本内容。如果我们在括号内传入参数就可以设置元素的文本内容。
- html()方法--获取所选元素的内容（注意：如果内容中含有html标记，也会显示出来）。如果我们在括号内传入参数（“字符串”）就可以设置元素的文本内容。
- val()方法--获取表单字段的值。如果我们在括号内传入参数，就可以设置表单字段的值。
2.而jQuery attr()方法用于获取属性值。如$("#test").attr("href");即可获得id为test的href属性值。同样地，对于attr()方法，我们通过设置第二个参数即可设置属性值。如：$("#test")。attr（“href”,"https://www.baidu.com"）。
除此之外，我们也可使用attr()方法同时设置多个属性（注意:设置多个属性要使用大括号,之前我们也见过这种形式），如$("#test").attr({"href":"https://www.baidu.com","title":"百度一下"});
注意：１．上面所说的四种方法都有最后一个参数作为回调函数。且回调函数都有两个参数，第一个是被选元素列表中当前元素的下标，第二个是原始（旧的）值。
２． 通过上面几个方法，我们可以发现一个有趣的现象：不传入参数，方法用于获取；传入参数，方法用于设置。这也是ｊＱｅｒｙ的迷人之处吧！
二．jQuery添加元素
jQuery添加元素由四个方法：
- append()-在被选元素内部的结尾插入内容，如$("p").append("追加文本");
- prepend()-在被选元素内部的开头插入内容，如$("p").prepend("追加文本");
- after()-在被选元素之后（外部）插入内容，如$("p").after("在后面添加文本");
- before()-在被选元素之前（外部）插入内容,如$("p").before(“在前面添加文本”)；
为了更好的理解内部和外部，下面我将举例说明。
源代码如下所示：
未点击之前浏览器如下显示：
点击之后，浏览器如下显示：
四.jQuery删除元素
删除元素有两种方法：
- remove()方法--该方法会删除（整个）被选元素（包括子元素）
- empty()方法--该方法删除被选元素中的子元素（不删除被选元素），即清空之意
注意：remove方法可以接受一个参数，即过滤参数，允许对被删除元素进行过滤，它可以是任何jQuery选择器的语法。
五.获取并设置css类
jQuery拥有若干进行css操作的方法，包括：
- addClass()-向被选元素添加一个或多个类。比如添加一个类：$("p").addClass("blue");也可以添加多个类，中间用空格隔开即可，如：$("p").addClass("blue big another");
- removeClass()-从被选元素删除一个或多个类。用法与addClass类似。
- toggleClass()-对被选元素进行添加/删除类的切换操作。这个方法非常有意思，即如果一个元素有某个类（传入该方法参数中的类）则删除这个类，如果没有这个类则添加这个类。
- css()-设置或返回样式属性。1.语法为：css("propertyname");即返回指定的css属性的值，比如$("p").css(“background-color”)即返回p的背景颜色值（注意：这与JavaScript的获取css属性值方法不同，js获取css属性值时属性若有连字符，连字符后面的首字母要大写）。 2.设置指定的css属性，语法为：css("propertyname","value");3.该方法也可以同时设置多个css属性，语法为：css({"propertyname":"value","propertyname":"value"},...);注意大括号的使用（jQuery中常常会出现设置多个属性使用大括号的情况,实际上，这里大括号中所包含的是一个对象，说是对象也不完全正确，因为其属性名也有引号，所以它实际上是JSON数据格式，其实这些键值对儿中的键也可以没有引号，这时键就要写成小驼峰的形式了（也可以不用！！）。那么我们实际上就可以将之看作一个对象穿进去）。
举例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<style>
div{
width: 100px;
height: 100px;
background: green;
color:white;
}
</style>
</head>
<body>
<div>这是一个div。</div>
</body>
<script src="jquery-3.1.1.js"></script>
<script>
$(document).ready(function(){
var $obj={
color:"green",
background:"pink",
width:"200px",
height:"500px"
};
$("div").css($obj);
});
</script>
</html>
结果如下所示：
当然，我们也可以传入下面这种形式：
$(document).ready(function(){
var $obj={
"color":"green",
"background-color":"pink",
"width":"200px",
"height":"500px"
};
$("div").css($obj);
});
六、jQuery中的尺寸获取
jQuery提供了多个处理尺寸的重要方法，但是应当注意，它与css中的尺寸定义是不同的，不可一概而论。
- width() -设置或返回元素的宽度（不包括内边距、边框、外边距）
- height()-设置或返回元素的高度（不包括内边距、边框、外边距）
- innerWidth()-返回元素的宽度（包括内边距）
- innerHeight()-返回元素的高度（包括内边距）
- outerWidth()-返回元素的宽度（包括内边距和边框）
- outerHeight()-返回元素的高度（包括内边距和边框）
- outerWidth（true）-返回元素的宽度（包括内边距和边框和外边距）
- outerHeight（ture）-返回元素的高度（包括内边距和边框和外边距）
下面我将以一张图来表示之。
第七部分：jQuery遍历
首先，什么使遍历呢？ 实际上，遍历即为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HMTL元素。以某项选择开始，并沿着这个选择移动，一直到抵达您期望的元素为止。 重要：通过jQuery遍历，我们可以从被选元素开始，轻松地在家族数中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动叫做DOM遍历。
下图是标准的DOM树：
为通过举例引出概念，部分DOM树如下图：
通过上面的DOM树我们来介绍几个基本概念：
1.父元素：即父亲元素，比如div是ul的父元素，ul是li的父元素。
2.子元素：即儿子元素，比如ul是div的子元素，b是li的子元素。
3.同胞：即拥有同一个父元素的几个元素。如两个li互为同胞元素，两个span互为同胞元素。
4.祖先：即父亲，祖父，曾祖父......如div是下面所有元素的祖先。注意：父元素也是祖先，如我们说div是ul的父元素，实际上div也是ul的祖先。
5.后代：即儿子，孙子，曾孙子......如b是div的后代。注意：子元素也是后代，如我们说b是li的子元素，实际上b也是li的后代。
下面开始介绍具体的遍历方法：
一：jQuery遍历-祖先
即通过jQuery，在某个被选元素的基础上向上遍历DOM树，以查找元素的祖先。
向上遍历DOM树的方法有以下几种：
- parent()方法--返回被选元素直接父元素，即该方法只会向上一级对DOM树进行遍历，注意：html根元素是没有父元素的。标准DOM树中的文档包含了DOM树，它不是一个元素，正因为此，hmtl才被成为根元素。
- parents()方法---返回被选元素的所有祖先元素，它一路向上直到文档的根元素（<hmtl>）.
- parentsUntil()方法---该方法返回介于两个给定元素之间的所有祖先元素。
前面两种方法较容易理解，下面我举例说明第三个方法：
看下面的代码：
即我设定所有边框为蓝色，然后在js中向上遍历，被选中的元素的边框变成了红色。效果图如下：
二.jQuery遍历-后代
即通过jQuery，我们可以向下遍历，以查找元素的后代。
向下遍历DOM树的方法有以下两种：
- children()--该方法返回被选元素所有直接子元素，也就是说该方法只会向下一级对DOM树进行遍历，亦即返回所有儿子元素，不返回孙子元素，不返回曾孙子元素....注意：
- find()--该方法返回被选元素的后代元素，一路向下直到找到需要为止。也就是说该方法必须传入一个参数。该参数可以是任何选择器。如果参数时*，那么会返回被选元素的所有后代。
三.jQuery遍历-同胞
同胞就是拥有相同的父元素。通过jquery的下列方法，可以在DOM树中遍历元素的同胞元素。
- siblings()--该方法返回所选元素的所有同胞元素。还可以通过可选参数来过滤对同胞元素的搜索。如$("p").siblings("h1");即返回标签名为h1的p的同胞元素，可能是一个，也可能有多个。
- next()--该方法只返回被选元素的下一个同胞元素，没有可选参数。如：$("p").next();返回p元素的下一个同胞元素。
- nextAll()--顾名思义，该方法返回被选元素的后面所有的同胞元素。
- nextUntil()--和前面介绍的parentsUtil方法类似，返回被选元素和传入的参数所在元素之间的所有同胞元素。
- prev()--和next()相反，此方法返回被选元素的上一个同胞元素，无其他可选参数。
- pervAll()--和nextAll()相反，此方法返回被选元素之前的所有同胞元素。
- preUntil()--此方法返回被选元素到传入参数所在元素之间的所有同胞元素。
四.jQuery遍历-过滤（重点）
遍历中使用过滤是非常有效的一种方式，下面将会列出五种过滤方法，前面三种是使用的最为频繁的方法，允许我们基于某元素在一组元素中的位置来选择一个特定的元素。后面两种方法允许我们选取匹配或不匹配某项制定标准元素。
1.first()--该方法返回一组被选元素中的首个元素。
2.last()--该方法返回一组被选元素中的最后一个元素。
3.eq()--该方法返回一组被选元素中的带有指定索引号的元素（注意：索引号从0开始而非从1开始）。
4.filter()--该方法接受一个必选的参数，返回一组被选元素中的符合参数要求的元素。
5.not()--该方法接受一个必选的参数，返回一组被选元素中的不符合参数要求的元素。注意：not()里只能接受一个条件。
为说明清楚，举例的代码如下：
得到的结果如下，大家可以对比参考：
第八部分：jQuery Ajax
关于Ajax，我在博文《JavaScript Ajax之美~》中做了较为详尽的介绍，大家可以看一看。
简答回顾以下，Ajax实际上就是与服务器交换数据的技术。它可以实现在不重载全部页面的情况下，通过后台加载数据，并在网页上进行显示。使用AJAX的引用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。
不使用jQuery也是可以的，但是会有些难度，因为不同的浏览器对AJAX的实现并不相同，这意味着我们必须编写额外的代码来对浏览器进行测试。不过，jQuery团队为我们解决了这个难题，我们只需使用jQuery提供的与AJAX有关的方法来轻松实现Ajax功能。
1.jQuery load()方法
这个方法是简单但又很强大的一个AJAX方法。load()方法从服务器加载数据，并把返回的数据放入被选元素中。
语法如下：
$(selector).load(URL,data,callback);
- URL参数必选，它规定我们想要加载的URL。比如：$("div").load("example.php/example.txt");除此之外，我们还可以把example.txt文件中的id="p1"的元素的内容，加载到指定的div中，如：$("div").load("example.php/example.txt #p1");
- data参数可选，它规定与请求一同发送的查询字符串/值对集合。
- callback参数规定当load()方法完成之后所允许的回调函数，回调函数可以设置不同的参数：
- responseTxt-包含调用成功时的结果内容,即上面的例子里example.txt内部的内容
- statusTxt-包含调用成功时的结果内容，即“success”或者是"error"。
- xhr-包含XMLHttpRequest对象
2.jQuery中Ajax的get()和post()方法
这两种方法用于客户端和服务器端进行请求和响应。
- GET-从指定的资源请求数据，多用于从服务器取回数据，且GET方法可能返回缓存数据。
- POST-向指定的资源提交要处理的数据，POST方法不会缓存数据，常用于连同请求一起发送数据。
$.get()方法的语法如下：
$.get(URL,callback); $.get()方法通过从HTTP GET请求从服务器上请求数据。
其中URL参数时必需的。callback参数是可选的，用于在请求成功之后执行的函数名。
如$.get("example.php",function(data,status){
alert("数据："+data+"\n状态："+status);
});
$.post()方法的语法如下：
$.post(URL,data,callback);
其中URL参数时必需的。data参数规定连同请求发送的数据。callback函数可选，是请求发送成功之后所执行的函数名。
3.noConflict()方法
noConflict中文即为不冲突，显然，这个方法是为了解决冲突问题的，那么又是解决什么冲突问题呢？
我们知道JavaScript框架不只jQuery一种，还有Backbone、Ext JS等一系列框架。在jQuery中我们使用$作为jQuery的简写，那么如果其他JavaScript框架也是用了$符号该怎么办呢，这会不会引起冲突呢？没错，会的。而noConflict()方法就是jQuery团队在考虑了这个问题之后提出并实现的。
我们可以用该方法的三种形式来解决这个问题：
先写出HTML代码
<div>
<p class="firstP">我是一个段落</p>
</div>
第一种：
$.noConflict();//释放对$符号的控制权，默认使用jQuery来控制
jQuery(document).ready(function(){
jQuery(".firstP").click(function(){
jQuery(this).html("jQuery仍然可以正常使用！");
});
});
第二种：
var jq=$.noConflict();//赋值给任意一个变量，代替jQuery使用
jq(document).ready(function(){
jq(".firstP").click(function(){
jq(this).html("jQuery仍然可以正常使用！");
});
});
第三种：
$.noConflict();//把$作为参数传递到ready内部的函数中，后面就可以正常使用$符号而不冲突。
jQuery(document).ready(function($){
$(".firstP").click(function(){
$(this).html("jQuery仍然可以正常使用！");
});
});
当然jQuery还有很多的只是这里没有涉及到。查看更多...