快捷導(dǎo)航

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

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

DOM對象和jQuery對象的操作時很重要的，是jquery與頁面元素互動的基礎(chǔ)。

什么是DOM對象？

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

 
<!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對象 
var $jQueryObj = $(domObj); //jQuery對象 
alert("DOM對象："+domObj.innerHTML); 
alert("jQuery對象："+$jQueryObj.html()); 
}); 
</script> 
</head> 
<body> 
<h3>例子</h3> 
<p title="選擇你最喜歡的水果." >你最喜歡的水果是?</p> 
<ul> 
<li>蘋果</li> 
<li>橘子</li> 
<li>菠蘿</li> 
</ul> 
</body> 
</html> 

上面的HTML文件的DOM樹如下：

什么是jQuery對象？

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

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

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

1.獲取對象：

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

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

您可能感興趣的文章:

相關(guān)文章

滾動圖片效果 jquery實(shí)現(xiàn)回旋滾動效果
jquery滾動圖片效果,有些新手朋友可能不是很清楚，今天在網(wǎng)上找到一款回旋滾動效果，拿出來和大家一起分享，感興趣的朋友可以了解下哦
2013-01-01
jQuery學(xué)習(xí)筆記之入門
本文主要對jQuery的基礎(chǔ)知識進(jìn)行介紹，非常適合剛開始接觸JQuery學(xué)習(xí)的朋友們，下面就跟小編一起來看下吧
2016-12-12
jQuery鼠標(biāo)經(jīng)過方形圖片切換成圓邊效果代碼分享
這篇文章主要介紹了jQuery鼠標(biāo)經(jīng)過方形圖片切換成圓邊特效，圖片可以自行替換，推薦給大家，有需要的小伙伴可以參考下。
2015-08-08
jQuery實(shí)現(xiàn)寬屏圖片輪播實(shí)例教程
這篇文章為大家分享了一個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通過Ajax返回JSON數(shù)據(jù)
最近在使用JQuery的ajax方法時，要求返回的數(shù)據(jù)為json數(shù)據(jù)，在處理的過程中遇到下面的幾個問題，那就是采用不同的方式來生成json數(shù)據(jù)的時候，在$.ajax方法中應(yīng)該是如何來處理的，下面依次來進(jìn)行說明。
2015-04-04
jQuery實(shí)現(xiàn)轉(zhuǎn)動隨機(jī)數(shù)抽獎效果的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)轉(zhuǎn)動隨機(jī)數(shù)抽獎效果的方法,涉及jQuery操作隨機(jī)數(shù)及頁面元素的相關(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)按下回車鍵時綁定點(diǎn)擊事件
當(dāng)按下回車鍵時，綁定按鈕點(diǎn)擊事件，本文為大家介紹下jQuery回車鍵綁定點(diǎn)擊事件的具體實(shí)現(xiàn)
2014-01-01