jQuery學(xué)習(xí)筆記之DOM對(duì)象和jQuery對(duì)象

更新時(shí)間：2010年12月22日 14:24:05 作者：

DOM對(duì)象和jQuery對(duì)象的操作時(shí)很重要的，是jquery與頁(yè)面元素互動(dòng)的基礎(chǔ)。

什么是DOM對(duì)象？

HTML是以樹(shù)形結(jié)構(gòu)來(lái)組織文檔的，具體如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>1-4</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<!-- 引入 jQuery --> 
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script> 
<script type="text/javascript"> 
//等待dom元素加載完畢. 
$(document).ready(function(){ 
var domObj = document.getElementsByTagName("h3")[0]; // Dom對(duì)象 
var $jQueryObj = $(domObj); //jQuery對(duì)象 
alert("DOM對(duì)象："+domObj.innerHTML); 
alert("jQuery對(duì)象："+$jQueryObj.html()); 
}); 
</script> 
</head> 
<body> 
<h3>例子</h3> 
<p title="選擇你最喜歡的水果." >你最喜歡的水果是?</p> 
<ul> 
<li>蘋果</li> 
<li>橘子</li> 
<li>菠蘿</li> 
</ul> 
</body> 
</html> 

上面的HTML文件的DOM樹(shù)如下：

什么是jQuery對(duì)象？

jQuery對(duì)象就是經(jīng)過(guò)jQuery包裝過(guò)的DOM對(duì)象，如下：

$(domObj) 相當(dāng)于 document.getElementsByTagName("h3")
$("#ID") 相當(dāng)于 document.getElementsById("ID")

jQuery對(duì)象和DOM對(duì)象的轉(zhuǎn)換？

1.獲取對(duì)象：

獲取jQuery對(duì)象：var $variable=jQuery對(duì)象；
獲取DOM對(duì)象：var variable=DOM對(duì)象；
2.jQuery對(duì)象轉(zhuǎn)DOM對(duì)象：

利用數(shù)組轉(zhuǎn)換 var cr=$("#cr")[0];
利用get(index)方法轉(zhuǎn)換 var cr=$("#cr").get(0);
3.DOM對(duì)象轉(zhuǎn)jQuery對(duì)象：
var cr=document.getElementsById("cr"); //獲取DOM對(duì)象
var $cr=$(cr);//轉(zhuǎn)換為jQuery對(duì)象

您可能感興趣的文章:

相關(guān)文章

滾動(dòng)圖片效果 jquery實(shí)現(xiàn)回旋滾動(dòng)效果
jquery滾動(dòng)圖片效果,有些新手朋友可能不是很清楚，今天在網(wǎng)上找到一款回旋滾動(dòng)效果，拿出來(lái)和大家一起分享，感興趣的朋友可以了解下哦
2013-01-01
jQuery學(xué)習(xí)筆記之入門
本文主要對(duì)jQuery的基礎(chǔ)知識(shí)進(jìn)行介紹，非常適合剛開(kāi)始接觸JQuery學(xué)習(xí)的朋友們，下面就跟小編一起來(lái)看下吧
2016-12-12
jQuery鼠標(biāo)經(jīng)過(guò)方形圖片切換成圓邊效果代碼分享
這篇文章主要介紹了jQuery鼠標(biāo)經(jīng)過(guò)方形圖片切換成圓邊特效，圖片可以自行替換，推薦給大家，有需要的小伙伴可以參考下。
2015-08-08
jQuery實(shí)現(xiàn)寬屏圖片輪播實(shí)例教程
這篇文章為大家分享了一個(gè)jQuery實(shí)現(xiàn)寬屏圖片輪播實(shí)例教程，外觀看上去非常大氣，感興趣的小伙伴們可以參考一下
2015-11-11
jQuery cookie的公共方法封裝和使用示例
這篇文章主要介紹了jQuery cookie的公共方法封裝和使用,結(jié)合實(shí)例形式詳細(xì)分析了jQuery cookie的設(shè)置、獲取、刪除等方法封裝與使用相關(guān)操作技巧,需要的朋友可以參考下
2020-06-06
jquery下異步提交表單異步跨域提交表單
基于jquery的實(shí)現(xiàn)異步跨域提交表單的實(shí)現(xiàn)代碼，需要的朋友可以參考下。
2010-11-11
jQuery通過(guò)Ajax返回JSON數(shù)據(jù)
最近在使用JQuery的ajax方法時(shí)，要求返回的數(shù)據(jù)為json數(shù)據(jù)，在處理的過(guò)程中遇到下面的幾個(gè)問(wèn)題，那就是采用不同的方式來(lái)生成json數(shù)據(jù)的時(shí)候，在$.ajax方法中應(yīng)該是如何來(lái)處理的，下面依次來(lái)進(jìn)行說(shuō)明。
2015-04-04
jQuery實(shí)現(xiàn)轉(zhuǎn)動(dòng)隨機(jī)數(shù)抽獎(jiǎng)效果的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)轉(zhuǎn)動(dòng)隨機(jī)數(shù)抽獎(jiǎng)效果的方法,涉及jQuery操作隨機(jī)數(shù)及頁(yè)面元素的相關(guān)技巧,需要的朋友可以參考下
2015-05-05
用jquery中插件dialog實(shí)現(xiàn)彈框效果實(shí)例代碼
這篇文章介紹了jquery中插件dialog實(shí)現(xiàn)彈框效果實(shí)例代碼，有需要的朋友可以參考一下
2013-11-11
jQuery實(shí)現(xiàn)當(dāng)按下回車鍵時(shí)綁定點(diǎn)擊事件
當(dāng)按下回車鍵時(shí)，綁定按鈕點(diǎn)擊事件，本文為大家介紹下jQuery回車鍵綁定點(diǎn)擊事件的具體實(shí)現(xiàn)
2014-01-01