jQuery學(xué)習(xí)筆記[1] jQuery中的DOM操作

更新時(shí)間：2010年12月03日 19:09:58 作者：

jQuery中的DOM操作實(shí)現(xiàn)說明，學(xué)習(xí)DOM操作的朋友可以參考下。

DOM分為3個(gè)方面,即DOM Core,HTML-DOM,CSS-DOM.
1,DOM Core并不專屬于JavaScript,任何一種支持DOM的程序設(shè)計(jì)語言都可以使用它.
JavaScript中的getElementById(),getElementsByTagName()...等方法.
例如:使用DOM Core來獲取表單對(duì)象的方法:
document.getElementsByTagName("form");
2,HTML-DOM.
在使用JavaScript和DOM為HTML文件編寫腳本的時(shí)候.有許多專屬于HTML-DOM的屬性.HTML-DOM的出現(xiàn)甚至比DOM Core還要早,它提供了一些更簡(jiǎn)明的記號(hào)來描述各種HTML元素的屬性.
例如:使用HTML-DOM來獲取表單對(duì)象的方法:
document.forms //HTML-DOM提供了一個(gè)forms對(duì)象.
3,CSS-DOM
CSS-DOM是針對(duì)CSS的操作.在JavaScript中CSS-DOM技術(shù)的主要作用是獲取和設(shè)置style對(duì)象的各種屬性.
例如:設(shè)置某元素style對(duì)象字體顏色的方法:element.style.color="red";
下面學(xué)習(xí)的是:jQuery中的DOM操作:
先構(gòu)建出一棵DOM樹:

復(fù)制代碼代碼如下:

 
<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>jQuery中的DOM操作</title> 
</head> 
<body> 
<p title="選擇你最喜歡的水果">你最喜歡的水果是?</p> 
<ul> 
<li title="蘋果">蘋果</li> 
<li title="橘子">橘子</li> 
<li title="菠蘿">菠蘿</li> 
</ul> 
</body> 
</html> 

接下來的操作都是圍繞這個(gè)DOM樹而展開的.

您可能感興趣的文章:

學(xué)習(xí)筆記

相關(guān)文章

jquery實(shí)現(xiàn)百葉窗效果
本文主要分享了jquery實(shí)現(xiàn)百葉窗效果的示例代碼。具有一定的參考價(jià)值，下面跟著小編一起來看下吧
2017-01-01
jQuery 類twitter的文本字?jǐn)?shù)限制帶提示效果插件
基于jquery的仿twitter的文本字?jǐn)?shù)限制帶提示效果插件，這里提示比較好，不是簡(jiǎn)單的限制，給用戶更好的體驗(yàn)。
2010-04-04
jQuery控制Div拖拽效果完整實(shí)例分析
這篇文章主要介紹了jQuery控制Div拖拽效果完整實(shí)例,對(duì)jQuery控制拖拽效果的方法以注釋形式給予了較為詳細(xì)的介紹,便于讀者理解代碼含義,需要的朋友可以參考下
2015-04-04
jquery實(shí)現(xiàn)的藍(lán)色二級(jí)導(dǎo)航條效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)的藍(lán)色二級(jí)導(dǎo)航條效果代碼,涉及jquery鼠標(biāo)事件及頁(yè)面樣式的動(dòng)態(tài)切換效果實(shí)現(xiàn)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2015-08-08
jquery ajax例子返回值詳解
$.ajax()跟($.post(),$.get())最主要的差別就是成功回調(diào)后,執(zhí)行success. . $.post(),$.get()就只能簡(jiǎn)單的做下傳遞 ,返回. .后續(xù)工作沒法繼續(xù).所以看情況調(diào)用
2012-09-09
jQuery實(shí)現(xiàn)的上傳圖片本地預(yù)覽效果簡(jiǎn)單示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的上傳圖片本地預(yù)覽效果,結(jié)合實(shí)例形式分析了jQuery上傳圖片本地預(yù)覽所涉及的相關(guān)頁(yè)面元素屬性動(dòng)態(tài)操作實(shí)現(xiàn)技巧,需要的朋友可以參考下
2018-03-03
jQuery News Ticker 基于jQuery的即時(shí)新聞行情展示插件
今天分享一個(gè)新聞行情的jQUery插件，可以幫助大家使用比較小的頁(yè)面區(qū)域來展示最新最重要的信息。
2011-11-11
jQuery中[attribute=value]選擇器用法實(shí)例
這篇文章主要介紹了jQuery中[attribute=value]選擇器用法,實(shí)例分析了[attribute=value]選擇器的功能、定義及給定屬性及屬性值元素的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2014-12-12
AJAX在JQuery中的應(yīng)用詳解
今天小編就為大家分享一篇關(guān)于AJAX在JQuery中的應(yīng)用詳解，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧
2019-01-01
寫得不錯(cuò)的jquery table鼠標(biāo)經(jīng)過變色代碼
鼠標(biāo)經(jīng)過table變色的效果，想必大家都有遇到過吧，其實(shí)實(shí)現(xiàn)并不難，在本文為大家詳細(xì)介紹下jquery是如何實(shí)現(xiàn)的，感興趣的朋友可以參看下
2013-09-09