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