一.什么是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');//同级所有上面的元素
