轉載地址: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對象,如:
- $(“div”).eq(1).hide(); // 隱藏當前頁面中第2個div元素
若不獲取具體的元素項就調用相關的方法,則會對該集合中的所有元素都執行該方法,如:
- $(“#demo”).hide(); // 隱藏當前頁面中所有id=”demo”的元素
3. jQuery對象與DOM對象
需要注意的是eq方法獲得的是jQuery對象,不是DOM對象,它只能執行jQuery的方法而不能調用DOM的方法。
普通的DOM對象可以通過$()轉化爲jQuery對象,最常見的如:$(document)。轉化後的jQuery對象爲只有一個元素的集合。
jQuery對象要轉化成DOM對象則需要用相關的方法從集合中取出特定的DOM對象,常見的方法有get(index)和[index]兩種,如:
- //獲取當前頁面中的第1個div元素的DOM對象
- $(“div”).get(0);
- $(“div”)[0];
- $(“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代碼都必須寫到
- $(document).ready(function() {
- // here
- });
或
- $(function() {
- ...
- });
的函數體中,否則操作可能無效。
6. jQuery方法
只有jQuery對象才能調用jQuery方法。有關jQuery的具體方法請參見下面的鏈接:
以上參考資料均出自w3school,版權與本人無關。
7. 命名衝突
爲了避免其它地方的命名衝突,如其它一些JS庫中也定義了$,jQuery提供了.noConflict()方法來將jQuery中$的職權讓渡給另一個標識符,如:
- jq.noConflict(); // 將$的職權讓渡給jq
- 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作爲一個網頁效果工具的良好表現。大多數前臺頁面實際上也不需要大動干戈地做特效,簡單實用的效果或許對開發者和用戶都是最好的。
在後續的博文中筆者將奉上學習中做的若干實例。