JQuery入門學習總結

轉載地址:http://blog.csdn.net/sadfishsc/article/details/7008372


1.      常用的HTML元素選取

$(“xxx”)                              所有<xxx>標籤的元素

$(“p#demo”)                   所有id=”demo”的<p>元素

$(“p.style”)                       所有class=”style”的<p>元素

$(“#demo”)                      所有id=”demo”的元素

$(“.style”)                          所有class=”style”的元素

$(“[href]”)                          所有帶有href屬性的元素

$(“[href=’#’]”)                   所有帶有href屬性且屬性值爲”#”的元素

$(“[href!=’#’]”)                  所有帶有href屬性且屬性值不爲”#”的元素

$(“[href$=’.jpg’]”)             所有帶有href屬性且屬性值以”.jpg”結尾的元素

更多元素選取方法請查閱jQuery選擇器參考手冊

2.      獲取元素集合中的具體項

如上,通過jQuery選取得到的HTML元素都是一組元素的集合,要獲取到其中具體的某一項,可以使用eq(index)方法來獲得集合中索引號爲index的jQuery對象,如:

[javascript] view plaincopy
  1. $(“div”).eq(1).hide(); // 隱藏當前頁面中第2個div元素  

若不獲取具體的元素項就調用相關的方法,則會對該集合中的所有元素都執行該方法,如:

[javascript] view plaincopy
  1. $(“#demo”).hide(); // 隱藏當前頁面中所有id=”demo”的元素  

3.      jQuery對象與DOM對象

需要注意的是eq方法獲得的是jQuery對象,不是DOM對象,它只能執行jQuery的方法而不能調用DOM的方法。

普通的DOM對象可以通過$()轉化爲jQuery對象,最常見的如:$(document)。轉化後的jQuery對象爲只有一個元素的集合。

jQuery對象要轉化成DOM對象則需要用相關的方法從集合中取出特定的DOM對象,常見的方法有get(index)和[index]兩種,如:

[javascript] view plaincopy
  1. //獲取當前頁面中的第1個div元素的DOM對象  
  2. $(“div”).get(0);  
  3. $(“div”)[0];  
  4. $(“div”).eq(0)[0];  

特別需要注意的是,jQuery對象只能使用jQuery方法,DOM對象只能使用DOM方法。

4.      引用jquery.js文件

jQuery只是一個JavaScript庫文件,所以當需要使用jQuery之前首先需要引用這個庫文件。通常可以到jQuery的官網下載一份放到本地。另外,Google和微軟也提供了在線的庫文件供開發者使用。

Google的引用地址:http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js

微軟的引用地址:http://ajax.microsoft.com/ajax/jquery/jquery-1.7.min.js

當jQuery更新的時候,上述兩個在線引用也會做出相應的更新。所以,可以通過修改上述兩個地址中的版本號來引用其它版本的jQuery文件,如:

http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js是Google提供的1.4.0版本的JQuery文件;而前述分別是兩公司提供的1.7版本的jQuery文件。

5.      jQuery執行入口

爲了防止在jQuery文件加載完成之前就開始執行jQuery代碼,所有的jQuery代碼都必須寫到

[javascript] view plaincopy
  1. $(document).ready(function() {  
  2. // here  
  3. });  

[javascript] view plaincopy
  1. $(function() {  
  2. ...  
  3. });  

的函數體中,否則操作可能無效。

6.      jQuery方法

只有jQuery對象才能調用jQuery方法。有關jQuery的具體方法請參見下面的鏈接:

事件處理

動畫效果

頁面元素操作

操作頁面元素的屬性

CSS操作

Ajax

遍歷集合

數據流和函數流的操作

DOM元素操作

以上參考資料均出自w3school,版權與本人無關。

7.      命名衝突

爲了避免其它地方的命名衝突,如其它一些JS庫中也定義了$,jQuery提供了.noConflict()方法來將jQuery中$的職權讓渡給另一個標識符,如:

[javascript] view plaincopy
  1. jq.noConflict(); // 將$的職權讓渡給jq  
  2. jq(“div”).hide(); // jq開始代替$  

之後$將變成普通的符號而不再具備之前它在jQuery中的功能。

8.      個人感覺

在大體看過jQuery的語法和一些方法之後,我就覺得其實jQuery就是對JS和CSS操作DOM的封裝和簡化。把過去JS和CSS需要許多語句才能實現的一些效果簡化,典型的如hide()方法。但根本上,jQuery仍然是面向過程的,甚至很難在面向對象的場合下使用它。原因就是常常需要jQuery對象和DOM對象之間的相互轉化。而事實上,在利用Canvas,甚至進一步的WebGL上來說,個人感覺不太用得上jQuery的效果,而它的事件處理又顯得很死板,實際上跟直接寫DOM的事件處理沒有多大的區別。不過,它的Ajax處理倒是顯示非常的方便,只是常常會出現一些問題。

總的來說,jQuery正如它的初衷一樣,簡化了許多JS和CSS的效果操作,使前臺開發者能夠簡單甚至無腦地做出許多很炫的效果。但是,如果要搞個大工作,比如做個遊戲,只用jQuery就有點捉襟見拙了。不過,這並不影響jQuery作爲一個網頁效果工具的良好表現。大多數前臺頁面實際上也不需要大動干戈地做特效,簡單實用的效果或許對開發者和用戶都是最好的。

在後續的博文中筆者將奉上學習中做的若干實例。

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