jQuery學習筆記1

1、jQuery簡介

jQuery是一套跨瀏覽器的JavaScript庫,簡化HTML與JavaScript之間的操作。由John Resig在2006年1月的BarCamp NYC上發佈第一個版本。目前是由 Dave Methvin 領導的開發團隊進行開發。全球前10000個訪問最高的網站中,有65%使用了jQuery,是目前最受歡迎的JavaScript庫。jQuery 是開源軟件,使用MIT許可證授權。[4] jQuery的語法設計使得許多操作變得容易,如操作文檔對象(document)、選擇DOM元素、創建動畫效果、處理事件、以及開發Ajax程序。jQuery 也提供了給開發人員在其上創建插件的能力。這使開發人員可以對底層交互與動畫、高級效果和高級主題化的組件進行抽象化。模塊化的方式使 jQuery 函數庫能夠創建功能強大的動態網頁以及網絡應用程序。

2、jquery的優勢

相對於傳統的Javascript和DOM來說了,現在將JQuery的優勢總結如下:
(1)輕量級:JQuery非常小,壓縮包只有18KB左右。
(2)強大的選擇器:JQuery不僅支持CSS裏的所有選擇器,還有JQuery獨有的選擇器。
(3)出色的DOM操作封裝:JQuery封裝了大量常用的DOM操作。
(4)完善的事件和事件對象兼容機制:JQuery能夠在不同瀏覽器中兼容,同時還修復了一些瀏覽器之間的差異。
(5)鏈式編程:即對發生在同一個JQuery對象上的一組動作,可以直接連寫而無需重複獲取對象,使得JQuery的代碼無比優雅。
(6)隱式迭代(一般情況下不需要for循環遍歷dom對象)
(7)行爲與結構分離
(8)完善的文檔(官方文檔相當完備,官方blog每次更新都會有詳細說明)
(9)豐富的插件
(10)完善的ajax

(11)不污染全局變量($可以隨時交出控制權)

下面對第(5)和(6)兩點進行解釋:

關於(5)鏈式編程,對於一個需求:有一個超鏈接,當頁面加載完畢的時候,要讓鏈接裏的文字變成紅色,當我點擊這個鏈接的時候,我需要讓這個鏈接有一個黃色的邊框,如果用Javascript實現,代碼如下:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo1</title>
	<script src="jquery.js"></script>
</head>
<body>	
	<a href="#">我是一個鏈接</a>
	<script>
		alert(1);
		var a = document.getElementsByTagName('a')[0];
		a.style.color="red";
		a.onclick=function(){
			this.style.border="10px solid #f90";
		};	
	</script>
</body>
</html>

這裏要分兩步,第一步是將獲得的元素的樣式設置成紅色,第二部是觸發點擊事件的時候給鏈接加一個邊框。

再看使用jQuery的實現:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo1</title>
	<script src="jquery.js"></script>
</head>
<body>	
	<a href="#">我是一個鏈接</a>
	<script>
		alert(1);
		var a = $('a');
		a.css('color','red').click(function(){
			$(this).css('border','10px solid #38a38a');
		});
	</script>
</body>
</html>

這裏實現需求也是兩步,但這兩步是連續的,即:a.css('color','red').click


關於(6)隱式迭代(一般情況下不需要for循環遍歷dom對象)

對於一個需求:有三個標籤p,每點擊一個標籤p彈出當前標籤裏的內容,Javascript實現如下:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo2</title>
	<script src="jquery.js"></script>
</head>
<body>	
	<p>我是第1個標籤</p>
	<p>我是第2個標籤</p>
	<p>我是第3個標籤</p>
	<script>
		var p = document.getElementsByTagName('p');
		for(var i=0;i<p.length;i++){
			p[i].onclick=function(){
				alert(this.innerHTML);
			};
		}
	</script>
</body>
</html>

這裏需要用到一個for循環,再來看jQuery的實現:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo2</title>
	<script src="jquery.js"></script>
</head>
<body>	
	<p>我是第1個標籤</p>
	<p>我是第2個標籤</p>
	<p>我是第3個標籤</p>
	<script>
		var p = $('p');
		p.click(function(){
			alert($(this).html());
		});
	</script>
</body>
</html>

這裏並不需要for循環,也就是說,一般情況下,jQuery不需要for循環遍歷dom對象。

3、jquery的不足

(1)不能向後兼容
新版本可能不兼容早期版本,如果想要升級jquery版本可能會付出額外的維護成本
(2)插件兼容
和上一點相同
(3)插件之間的衝突
如果在同一張頁面上引用多個插件時,可能會引起衝突現象,特別是用這些插件依賴相同事件或相同選擇器時最容易出錯,雖然這不是jquery本身的錯誤。
(4)在大型框架框架中,特別是在開發後臺UI框架的時候,jquery對於動畫支持相對來說不太給力,需要用引用jquery UI來進行彌補

4、獲取jquery最新版本的途徑

① 官方網站:http://www.jquery.com
② cdn獲取:
a) 谷歌CDN: http://www.google-jquery-cdn.com/
b) 百度CDN:http://developer.baidu.com/wiki/index.php?title=docs/cplat/libs
c) 微軟CDN:http://msdn.microsoft.com/zh-cn/library/ee517318.aspx
d) 新浪CDN:http://sae.sina.com.cn/?m=devcenter&catId=147

5、引入jquery

本地引入
<script src="jquery.js"></script>
引入CDN的jquery(以百度爲例)
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

注意:優先引入CDN上的jquery,如果失效再引入本地的jquery,引入必須在head標籤裏。

什麼是CDN?

CDN的全稱是Content Delivery Network,即內容分發網絡。其基本思路是儘可能避開互聯網上有可能影響數據傳輸速度和穩定性的瓶頸和環節,使內容傳輸的更快、更穩定。通過在網絡各處放置節點服務器所構成的在現有的互聯網基礎之上的一層智能虛擬網絡,CDN系統能夠實時地根據網絡流量和各節點的連接、負載狀況以及到用戶的距離和響應時間等綜合信息將用戶的請求重新導向離用戶最近的服務節點上。其目的是使用戶可就近取得所需內容,解決 Internet網絡擁擠的狀況,提高用戶訪問網站的響應速度。(百度百科)

6、$(document).ready()和window.onload的區別

通常我們想要在頁面內容加載完成後運行 JS 時,都會使用 window.onload 來處理,比如:
<script language="javascript"> 
       window.onload = function () { 
               alert('Hello World!'); 
        } 
</script>
這段代碼將在頁面載入完成後彈出一個 "Hello World!" 的警告框,但是衆所周知,window.onload 的特點是頁面元素全部加載完成後才執行,比如頁面內有大量的圖片之類,當打開網頁時,其實相關的 DOM 已經全部加載完成,此時已經可以執行你想要執行的腳本了,可是圖片的加載速度要很慢於頁面的 HTML,這顯然在大多數情況下不是我們想要的。 jQuery 提供一個 $(document).ready(); 來解決此問題,當頁面 DOM 加載完成後,ready() 裏的函數便會立即執行。
$(document).ready()和window.onload的區別:

7、DOM對象和jQuery對象簡介

(1)DOM(Document Object Model,文檔對象模型),每一份DOM都可以表示成一棵樹。可以通過JavaScript中的getElementsByTagName或者getElementById來獲取元素節點。像這樣得到的DOM元素就是DOM對象。DOM對象不能使用任何jquery中的方法,只能使用DOM對象中的方法。
(2)jQuery對象就是通過jQuery包裝DOM對象後產生的對象。jQuery對象是jQuery獨有的。如果一個對象是jQuery對象,那麼就可以使用jQuery裏的方法。jquery對象不能使用DOM對象中的方法,只能使用jquery中的方法。如果DOM對象中的方法在jquery庫中被改寫過,那麼可以使用DOM對象中的方法。

8、jQurey對象和DOM對象的相互轉換

在討論jQurey對象和DOM對象的相互轉換之前,先約定好定義變量的風格。如果獲取的對象是jQuery對象,那麼在變量前面加上$,例如:
var  $variable   =   jQuery 對象;
如果獲取的是DOM對象,則定義如下:
var  variable    =   DOM對象;
(1)jQuery對象轉成DOM對象
jQuery對象不能使用DOM中的方法,但如果對jQuery對象所提供的方法不熟悉,或者jQuery沒有封裝想要的方法,不得不使用DOM對象的時候,有以下兩種處理方法。
jQuery提供了兩種方法將一個jQuery對象轉換成DOM對象,即[index]和get(index)。
(2)DOM對象轉成jQuery對象
對於一個DOM對象,只需要用$()把DOM對象包裝起來,就可以獲得一個jQuery對象了。方式爲$(DOM對象)。轉換後,可以任意使用jQuery中的方法。通過以上方法,可以任意地相互轉換jQuery對象和DOM對象。最後再次強調,DOM對象才能使用DOM中的方法,jQuery對象不可以使用DOM中的方法。
注意:平時用到的jQuery對象都是通過$()函數製造出來的,$()函數就是一個jQuery對象的製造工廠。





發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章