一.什么是jQuery

jQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整套定义好的方

法。它的作者是John Resig,于2006年创建的一个开源项目,随着越来越多开发者的加入,jQuery已经集成了JavaScript、CSS、DOM和Ajax于一体的强大功能。它可以用最少的代码,

二.jQuery的版本

2006年8月发布了jQuery1.0,第一个稳定版本,具有对CSS选择符、事件处理和Ajax交互的支持。

2007年1月发布了jQuery1.1,极大的简化API。合并了许多较少使用的方法。2007年7月发布了jQuery1.1.3,优化了jQuery选择符引擎执行的速度。2007年9月发布了jQuery1.2,去掉了XPath选择器,新增了命名空间事件。2008年5月发布了jQuery1.2.6,引入了Dimensions插件到核心库中。

2009年1月发布了jQuery1.3,使用了全新的选择符引擎Sizzle,性能进一步提升。

2010年1月发布了jQuery1.4,进行了一次大规模更新,提供了DOM操作,增加了很

多新的方法或是增强了原有的方法。

2010年2月发布了jQuery1.4.2,添加了.delegate()和.undelegate()两个新方法,提升

了灵活性和浏览器一致性,对事件系统进行了升级。

2011年1月发布了jQuery1.5,重写了AJAX组件,增强了扩展性和性能。

2011年5月发布了jQuery1.6,重写了Attribute组件,引入了新对象和方法。

2011年11月发布了jQuery1.7,引入了.on()和.off()简介的API解决事件绑定及委托容

易混淆的问题。

2012年3月发布了jQuery1.7.2,进行一些优化和升级。

2012年7月发布了jQuery1.8,8月发布了1.8.1,9月发布了1.8.2,重写了选择符引

擎,修复了一些问题。

2013年1月发布了jQuery1.9,CSS的多属性设置,增强了CSS3。2013年5月发布了jQuery1.10,增加了一些功能。

2013年4月发布了jQuery2.0,5月发布了jQuery2.0.2,一个重大更新版本,不在支

持IE6/7/8,体积更小,速度更快。

jquery是一个库，通过对原生js的函数得到整套完整的封装好的方法！避免了js有些不兼容！简化js繁琐的！

版本的内容升级主要也有三种:

第一种是核心库的升级,比如优化选择符、优化DOM或者AJAX等;这种升级不影响开发者的使用。

第二种是功能性的升级,比如剔除一些过时的方法、新增或增强一些方法等等;这种升级需要了解和学习。第三种就是BUG修复之类的升级,对开发者使用没有影响

其他JavaScript库

目前除了jQuery,还有5个库较为流行,他们分别是YUI、Prototype、Mootools、Dojo和ExtJS。

YUI,是雅虎公司开发的一套完备的、扩展性良好的富交互网页工具集。Prototype,是最早成型的JavaScript库之一,对JavaScript内置对象做了大量的扩展。Dojo,Dojo强大之处在于提供了其他库没有的功能。离线存储、图标组件等等。Mootools,轻量、简洁、模块化和面向对象的JavaScript框架。

ExtJS,简称Ext,原本是对YUI的一个扩展,主要创建前端用户界面。(付费的)

一.代码风格

$(function () {});

$(‘#box’);$(‘#box’).css(‘color’, ‘red’);

//执行一个匿名函数//进行执行的ID元素选择//执行功能函数

二.加载模式

我们在之前的代码一直在使用$(function () {});这段代码进行首尾包裹,那么为什么必须

要包裹这段代码呢?原因是我们jQuery库文件是在body元素之前加载的,我们必须等待所

有的DOM元素加载后,延迟支持DOM操作,否则就无法获取到。

在延迟等待加载,JavaScript提供了一个事件为load,方法如下:window.onload = function () {};//JavaScript等待加载$(document).ready(function () {});//jQuery等待加载

load和ready区别

1.执行时机  window.onload    必须等待网页全部加载完毕(包括图片等),然后再执行包裹代码，只能执行一次,如果第二次,那么第一次的执行会被覆盖

2.$(document).ready()只需要等待网页中的DOM结构加载完毕,就能执行包裹的代码，可以执行多次,第N次都不会被上

在实际应用中,我们都很少直接去使用window.onload,因为他需要等待图片之类的大型元素加载完毕后才能执行JS代码。所以,最头疼的就是网速较慢的情况下,页面已经全面展开,图片还在缓慢加载,这时页面上任何的JS交互功能全部处在假死状态。并且只能执行单次在多次开发和团队开发中会带来困难。

三.对象互换

jQuery对象虽然是jQuery库独有的对象,但它也是通过JavaScript进行封装而来的。我

们可以直接输出来得到它的信息。

alert($);//jQuery对象方法内部

alert($());//jQuery对象返回的对象,还是jQuery

alert($('#box'));//包裹ID元素返回对象,还是jQuery

从上面三组代码我们发现:只要使用了包裹后,最终返回的都是jQuery对象。这样的

好处显而易见,就是可以连缀处理。但有时,我们也需要返回原生的DOM对象,比如:

alert(document.getElementById('box'));//[object HTMLDivElement]

jQuery想要达到获取原生的DOM对象,可以这么处理:

alert($('#box').get(0));//ID元素的第一个原生DOM

四.多个库之间的冲突

当一个项目中引入多个第三方库的时候,由于没有命名空间的约束(命名空间就好比同

一个目录下的文件夹一样,名字相同就会产生冲突),库与库之间发生冲突在所难免。

1.将jQuery库在Base库之前引入,那么“$”的所有权就归Base库所有,而jQuery可

以直接用jQuery对象调用,或者创建一个“$$”符给jQuery使用。

var $$ = jQuery;

$(function () {

alert($('#box').ge(0));

alert($$('#box').width());

});

2.如果将jQuery库在Base库之后引入,那么“$”的所有权就归jQuery库所有,而Base库将会冲突而失去作用。这里,jQuery提供了一个方法:

jQuery.noConflict();

var $$ = jQuery;

$(function () {

alert($('#box').ge(0));

alert($$('#box').width());

});

//将$符所有权剔除

常规选择器

jQuery最核心的组成部分就是:选择器引擎。它继承了CSS的语法,可以对DOM元素的标签名、属性名、状态等进行快速准确的选择,并且不必担心浏览器的兼容性。jQuery选择器实现了CSS1~CSS3的大部分规则之外,还实现了一些自定义的选择器,用于各种特殊状态的选择

一.简单选择器

在使用jQuery选择器时,我们首先必须使用“$()”函数来包装我们的CSS规则。而CSS规则作为参数传递到jQuery对象内部后,再返回包含页面中对应元素的jQuery对象。

随后,我们就可以对这个获取到的DOM节点进行行为操作了。

#box {//使用ID选择器的CSS规则color:red;//将ID为box的元素字体颜色变红}

在jQuery选择器里,我们使用如下的方式获取同样的结果:

$('#box').css('color', 'red');//获取DOM节点对象,并添加行为

那么除了ID选择器之外,还有两种基本的选择器,分别为:元素标签名和类(class):

选择器

CSS模式

jQuery模式

描述

元素名div {}$('div')获取所有div元素的DOM对象

ID#box {}$('#box')获取一个ID为box元素的DOM对象

类(class).box{}$('.box')获取所有class为box的所有DOM对象$('div').css('color', 'red');

$('#box').css('color', 'red');

$('.box').css('color', 'red');

//元素选择器,返回多个元素//ID选择器,返回单个元素//类(class)选择器,返回多个元素

为了证明ID返回的是单个元素,而元素标签名和类(class)返回的是多个,我们可以采

用jQuery核心自带的一个属性length或size()方法来查看返回的元素个数。

alert($('div').size());

alert($('#box').size());alert($('.box').size());

//3个

//1个,后面两个失明了//3个

同理,你也可以直接使用jQuery核心属性来操作:alert($('#box').length);//1个,后面失明了

警告:有个问题特别要注意,ID在页面只允许出现一次,我们一般都是要求开发者要

遵守和保持这个规则。但如果你在页面中出现三次,并且在CSS使用样式,那么这三个元

素还会执行效果。但如果,你想在jQuery这么去做,那么就会遇到失明的问题。所以,开

发者必须养成良好的遵守习惯,在一个页面仅使用一个ID。

$('#box').css('color', 'red');//只有第一个ID变红,后面两个失明

jQuery选择器的写法与CSS选择器十分类似,只不过他们的功能不同。CSS找到元素

后添加的是单一的样式,而jQuery则添加的是动作行为。最重要的一点是:CSS在添加样

式的时候,高级选择器会对部分浏览器不兼容,而jQuery选择器在添加CSS样式的时候却

不必为此烦恼。

#box > p {//CSS子选择器,IE6不支持color:red;

}

$('#box > p').css('color','red');//jQuery子选择器,兼容了IE6

jQuery选择器支持CSS1、CSS2的全部规则,支持CSS3部分实用的规则,同时它还有

少量独有的规则。所以,对于已经掌握CSS的开发人员,学习jQuery选择器几乎是零成本。

而jQuery选择器在获取节点对象的时候不但简单,还内置了容错功能,这样避免像JavaScript那样每次对节点的获取需要进行有效判断。

$('#pox').css('color', 'red');//不存在ID为pox的元素,也不报错document.getElementById('pox').style.color = 'red';//报错了

因为jQuery内部进行了判断,而原生的DOM节点获取方法并没有进行判断,所以导

致了一个错误,原生方法可以这么判断解决这个问题:

if (document.getElementById('pox')) {//先判断是否存在这个对象document.getElementById('pox').style.color = 'red';

}

那么对于缺失不存在的元素,我们使用jQuery调用的话,怎么去判断是否存在呢?因

为本身返回的是jQuery对象,可能会导致不存在元素存在与否,都会返回true。

if ($('#pox').length > 0) {//判断元素包含数量即可$('#pox').css('color', 'red');

}

除了这种方式之外,还可以用转换为DOM对象的方式来判断,例如:

if ($('#pox').get(0)) {}或if ($('#pox')[0]) {}//通过数组下标也可以获取DOM对象

二.进阶选择器

在简单选择器中,我们了解了最基本的三种选择器:元素标签名、ID和类(class)。那么

在基础选择器外,还有一些进阶和高级的选择器方便我们更精准的选择元素。

选择器

CSS模式

jQuery模式

描述

群组选择器span,em,.box {}$('span,em,.box')获取多个选择器的DOM对象

后代选择器ul li a {}$('ul li a')获取追溯到的多个DOM对象

通配选择器* {}$('*')

获取所有元素标签的DOM对象

//群组选择器span, em, .box {color:red;}

$('span, em, .box').css('color', 'red');

//后代选择器ul li a {color:red;}

$('ul li a').css('color', 'red');

//通配选择器* {

color:red;

}

$('*').css('color', 'red');

目前介绍的六种选择器,在实际应用中,我们可以灵活的搭配,使得选择器更加的精准和快速:

$('#box p, ul li *').css('color', 'red');//组合了多种选择器

警告:在实际使用上,通配选择器一般用的并不多,尤其是在大通配上,比如:$('*'),

这种使用方法效率很低,影响性能,建议竟可能少用。

还有一种选择器,可以在ID和类(class)中指明元素前缀,比如:

$('div.box');//限定必须是.box元素获取必须是div$('p#box div.side');//同上

类(class)有一个特殊的模式,就是同一个DOM节点可以声明多个类(class)。那么对于这

种格式,我们有多class选择器可以使用,但要注意和class群组选择器的区别。

.box.pox {//双class选择器,IE6出现异常color:red;

}

$('.box.pox').css('color', 'red');//兼容IE6,解决了异常

多class选择器是必须一个DOM节点同时有多个class,用这多个class进行精确限定。

而群组class选择器,只不过是多个class进行选择而已。

$('.box, .pox').css('color', 'red');//加了逗号,体会区别

警告:在构造选择器时,有一个通用的优化原则:只追求必要的确定性。当选择器筛选

越复杂,jQuery内部的选择器引擎处理字符串的时间就越长。比如:

$('div#box ul li a#link');//让jQuery内部处理了不必要的字符串$('#link');//ID是唯一性的,准确度不变,性能提升

三.高级选择器

在前面我们学习六种最常规的选择器,一般来说通过这六种选择器基本上可以解决所有

DOM节点对象选择的问题。但在很多特殊的元素上,比如父子关系的元素,兄弟关系的元

素,特殊属性的元素等等。在早期CSS的使用上,由于IE6等低版本浏览器不支持,所以

这些高级选择器的使用也不具备普遍性,但随着jQuery兼容,这些选择器的使用频率也越

来越高。

描述

后代选择器ul li a {}$('ul li a')获取追溯到的多个DOM对象

子选择器div > p {}$('div p')只获取子类节点的多个DOM对象

next选择器div + p {}$('div + p')只获取某节点后一个同级DOM对象

nextAll选择器div ~ p {}$('div ~ p')获取某节点后面所有同级DOM对象

在层次选择器中,除了后代选择器之外,其他三种高级选择器是不支持IE6的,而jQuery却是兼容IE6的。

//后代选择器

$('#box p').css('color', 'red');//全兼容

jQuery为后代选择器提供了一个等价find()方法

$('#box').find('p').css('color', 'red');

//子选择器,孙子后失明#box > p {

color:red;

}

$('#box > p').css('color', 'red');

//和后代选择器等价

//IE6不支持

//兼容IE6

jQuery为子选择器提供了一个等价children()方法:$('#box').children('p').css('color', 'red');//和子选择器等价

//next选择器(下一个同级节点)

#box + p {//IE6不支持

color:red;

}

$('#box+p').css('color', 'red');//兼容IE6

jQuery为next选择器提供了一个等价的方法next():

$('#box').next('p').css('color', 'red');

//nextAll选择器(后面所有同级节点)#box ~ p {

color:red;

}

$('#box').nextAll('p').css('color', 'red');//和nextAll选择器等价

层次选择器对节点的层次都是有要求的,比如子选择器,只有子节点才可以被选择到,

孙子节点和重孙子节点都无法选择到。next和nextAll选择器,必须是同一个层次的后一个

和后N个,不在同一个层次就无法选取到了。

在find()、next()、nextAll()和children()这四个方法中,如果不传递参数,就相当于传递

了“*”,即任何节点,我们不建议这么做,不但影响性能,而且由于精准度不佳可能在复杂

的HTML结构时产生怪异的结果。

$('#box').next();//相当于$('#box').next('*');

为了补充高级选择器的这三种模式,jQuery还提供了更加丰富的方法来选择元素:$('#box').prev('p').css('color', 'red');//同级上一个元素$('#box').prevAll('p').css('color', 'red');//同级所有上面的元素