jQuery學(xué)習(xí)大總結(jié)(一)jQuery對(duì)象與dom對(duì)象轉(zhuǎn)換
這幾天會(huì)將jQuery的一些使用方法總結(jié)一下,希望能對(duì)jQuery初學(xué)者起到一定的幫助作用。
今天主要看看jQuery對(duì)象和dom對(duì)象的相互轉(zhuǎn)換,明白了這個(gè),以后用起jQuery會(huì)方便很多。
1、方法名沖突的解決辦法 在開(kāi)始使用jQuery時(shí),我們首先應(yīng)該避免jQuery與其他類庫(kù)或自定義js的沖突。 先看一段最簡(jiǎn)單的代碼:
- jQuery(document).ready(function() {
- alert("Welcome!");
- });
在這里沒(méi)有使用$(document)這種寫(xiě)法,因?yàn)楹芏鄷r(shí)候我們自己定義了$(id)方法用來(lái)獲得元素,并且在prototype等類庫(kù)中也定義了$()方法。所以,為了避免沖突,建議大家也使用jQuery("#id")這種寫(xiě)法。
2、jQuery對(duì)象與dom對(duì)象的相互轉(zhuǎn)換 jQuery對(duì)象轉(zhuǎn)dom對(duì)象: jQuery("#id")獲得的是一個(gè)jQuery對(duì)象,它和普通的dom對(duì)象是不同的,所以不能直接使用dom對(duì)象定義的方法。由于jQuery對(duì)象 本身就是一個(gè)集合,所以可以通過(guò)索引將jQuery對(duì)象轉(zhuǎn)換成dom對(duì)象,如jQuery("#id")[0]就是一個(gè)dom對(duì)象。 看下邊一個(gè)例子:
- <div id="show">
- <span>要顯示的內(nèi)容1</span>
- <span>要顯示的內(nèi)容2</span>
- <span>要顯示的內(nèi)容3</span>
- </div>
要獲得span中的內(nèi)容,使用以下方法均正確。
- //jQuery方法,獲得第一個(gè)span內(nèi)容
- jQuery("#show span").html();
- //獲得第三個(gè)span內(nèi)容
- jQuery("#show span")[2].innerHTML;
- //eq()返回jQuery對(duì)象,從eq(0)開(kāi)始。獲得第二個(gè)span內(nèi)容
- jQuery("#show span").eq(1)[0].innerHTML;
- //get()直接返回dom對(duì)象,從get(0)開(kāi)始。獲得第三個(gè)span內(nèi)容
- jQuery("#show span").get(2).innerHTML;
dom對(duì)象轉(zhuǎn)jQuery對(duì)象: 使用jQuery()就可將dom對(duì)象轉(zhuǎn)為jQuery對(duì)象。 如:
- jQuery(document.getElementById("show")).html();
輸出結(jié)果為:
- 這樣就實(shí)現(xiàn)了jQuery對(duì)象和dom對(duì)象的相互轉(zhuǎn)換,比如想讓焦點(diǎn)停留在id為focus的文本框。只需:
- <div id="show">
- <span>要顯示的內(nèi)容1</span>
- <span>要顯示的內(nèi)容2</span>
- <span>要顯示的內(nèi)容3</span>
- </div>