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