jQuery學(xué)習(xí)筆記[1] jQuery中的DOM操作
更新時(shí)間:2010年12月03日 19:09:58 作者:
jQuery中的DOM操作實(shí)現(xiàn)說(shuō)明,學(xué)習(xí)DOM操作的朋友可以參考下。
DOM分為3個(gè)方面,即DOM Core,HTML-DOM,CSS-DOM.
1,DOM Core并不專(zhuān)屬于JavaScript,任何一種支持DOM的程序設(shè)計(jì)語(yǔ)言都可以使用它.
JavaScript中的getElementById(),getElementsByTagName()...等方法.
例如:使用DOM Core來(lái)獲取表單對(duì)象的方法:
document.getElementsByTagName("form");
2,HTML-DOM.
在使用JavaScript和DOM為HTML文件編寫(xiě)腳本的時(shí)候.有許多專(zhuān)屬于HTML-DOM的屬性.HTML-DOM的出現(xiàn)甚至比DOM Core還要早,它提供了一些更簡(jiǎn)明的記號(hào)來(lái)描述各種HTML元素的屬性.
例如:使用HTML-DOM來(lái)獲取表單對(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樹(shù):
<!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="蘋(píng)果">蘋(píng)果</li>
<li title="橘子">橘子</li>
<li title="菠蘿">菠蘿</li>
</ul>
</body>
</html>
接下來(lái)的操作都是圍繞這個(gè)DOM樹(shù)而展開(kāi)的.
1,DOM Core并不專(zhuān)屬于JavaScript,任何一種支持DOM的程序設(shè)計(jì)語(yǔ)言都可以使用它.
JavaScript中的getElementById(),getElementsByTagName()...等方法.
例如:使用DOM Core來(lái)獲取表單對(duì)象的方法:
document.getElementsByTagName("form");
2,HTML-DOM.
在使用JavaScript和DOM為HTML文件編寫(xiě)腳本的時(shí)候.有許多專(zhuān)屬于HTML-DOM的屬性.HTML-DOM的出現(xiàn)甚至比DOM Core還要早,它提供了一些更簡(jiǎn)明的記號(hào)來(lái)描述各種HTML元素的屬性.
例如:使用HTML-DOM來(lái)獲取表單對(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樹(shù):
復(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="蘋(píng)果">蘋(píng)果</li>
<li title="橘子">橘子</li>
<li title="菠蘿">菠蘿</li>
</ul>
</body>
</html>
接下來(lái)的操作都是圍繞這個(gè)DOM樹(shù)而展開(kāi)的.
您可能感興趣的文章:
- jQuery 選擇器、DOM操作、事件、動(dòng)畫(huà)
- jQuery學(xué)習(xí)筆記之jQuery的DOM操作
- jquery 操作DOM案例代碼分享
- jQuery移動(dòng)和復(fù)制dom節(jié)點(diǎn)實(shí)用DOM操作案例
- jQuery自動(dòng)切換/點(diǎn)擊切換選項(xiàng)卡效果的小例子
- jQuery之選項(xiàng)卡的簡(jiǎn)單實(shí)現(xiàn)
- jQuery多項(xiàng)選項(xiàng)卡的實(shí)現(xiàn)思路附樣式及代碼
- jquery.idTabs 選項(xiàng)卡使用示例代碼
- jquery實(shí)現(xiàn)標(biāo)簽支持圖文排列帶上下箭頭按鈕的選項(xiàng)卡
- 原生js和jQuery寫(xiě)的網(wǎng)頁(yè)選項(xiàng)卡特效對(duì)比
- jQuery封裝的tab選項(xiàng)卡插件分享
- 全面解析DOM操作和jQuery實(shí)現(xiàn)選項(xiàng)移動(dòng)操作代碼分享
相關(guān)文章
jQuery提交表單ajax查詢(xún)實(shí)例代碼
用戶(hù)輸入一個(gè)表單,輸入準(zhǔn)考證和驗(yàn)證碼,驗(yàn)證用戶(hù)是否輸入表單,點(diǎn)擊查詢(xún)提交,然后從服務(wù)器得到返回的數(shù)據(jù)并顯示出來(lái)2012-10-10CSS+Jquery實(shí)現(xiàn)頁(yè)面圓角框方法大全
前不久做項(xiàng)目,要用到大量的頁(yè)面圓角的框塊,以前實(shí)現(xiàn)的時(shí)候都是用圖片做背景之類(lèi)的方法,那種方法對(duì)于少數(shù)的還是比較可行的,但是當(dāng)涉及到整個(gè)項(xiàng)目都要用 到這樣的效果時(shí)就顯得不夠優(yōu)化和簡(jiǎn)練了。2009-12-12jquery 獲取自定義屬性(attr和prop)的實(shí)現(xiàn)代碼
jquery中用attr()方法來(lái)獲取和設(shè)置元素屬性,attr是attribute(屬性)的縮寫(xiě),在jQuery DOM操作中會(huì)經(jīng)常用到attr(),attr()有4個(gè)表達(dá)式2012-06-06c#+jquery實(shí)現(xiàn)獲取radio和checkbox的值
這篇文章主要介紹了c#結(jié)合jquery實(shí)現(xiàn)獲取radio和checkbox的value值的方法,將代碼分享給大家,需要的朋友可以參考下2014-12-12jQuery實(shí)現(xiàn)簡(jiǎn)單倒計(jì)時(shí)功能的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單倒計(jì)時(shí)功能的方法,涉及jQuery根據(jù)時(shí)間動(dòng)態(tài)操作頁(yè)面元素的相關(guān)技巧,需要的朋友可以參考下2016-07-07jquery+ajaxform+springboot控件實(shí)現(xiàn)數(shù)據(jù)更新功能
這篇文章主要介紹了jquery+ajaxform+springboot控件實(shí)現(xiàn)數(shù)據(jù)更新操作,使用jquery的ajaxform插件是一個(gè)比較不錯(cuò)的選擇。具體實(shí)現(xiàn)工程大家參考下本文2018-01-01jquery.validate表單驗(yàn)證插件使用方法解析
這篇文章主要為大家詳細(xì)介紹了jquery.validate表單驗(yàn)證插件使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11