快捷導(dǎo)航

jQuery DOM操作小結(jié)與實(shí)例

更新時(shí)間：2010年01月07日 13:06:24 作者：

jQuery 的DOM操作方法元素的創(chuàng)建、復(fù)制、重組、修飾，學(xué)習(xí)jquery dom操作的朋友有福了。

DOM操作的分類：DOM CORE（核心）、HTML-DOM和CSS-DOM
1. DOM Core
DOM Core并不專屬于javascript，任何一種支持DOM的程序設(shè)計(jì)語(yǔ)言都可以使用它。

它的用途并非僅限于處理網(wǎng)頁(yè)，也可以用來(lái)處理任何一種使用標(biāo)記語(yǔ)言編寫(xiě)出來(lái)的文檔，如XML.

Javascript中的getElementById(),getElementByTagName(),getAttribute()和setAttribute()方法，都是dom core的組成部分。

2. HTML_DOM

使用HTML_DOM來(lái)獲取表單對(duì)象的方法
Document.forms
使用HTML_DOM來(lái)獲取某元素的src屬性的方法
Element.src
3. CSS_DOM

CSS_DOM是針對(duì)CSS的操作。在javascript中，CSS-DOM技術(shù)的主要作用是獲取和設(shè)置style對(duì)象的各個(gè)屬性。通過(guò)改變style對(duì)象的各種屬性，可以使網(wǎng)頁(yè)呈現(xiàn)出各種不同的效果。
Element.style.color = “red”;
jQuery作為javascript庫(kù)，繼承并發(fā)揚(yáng)了javascript對(duì)DOM對(duì)象的操作的特性，使開(kāi)發(fā)人員能方便的操作DOM對(duì)象。

jQuery 的DOM操作方法元素的創(chuàng)建、復(fù)制、重組、修飾。下面的例子完全可用，每一行都寫(xiě)有注釋，請(qǐng)復(fù)制代碼運(yùn)行。

復(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 id="Head1"> 
<title></title> 
<script src="http://img.jb51.net/jslib/jquery/jquery.js" type="text/javascript"></script> 
<style type="text/css"> 
.chapter 
{ 
width: 42em; 
} 
a.link 
{ 
text-decoration: none; 
} 
span.footnote 
{ 
font-style: italic; 
font-family: "Times New Roman" , Times, serif; 
display: block; /*使其變成一塊一塊的*/ 
margin: 1em 0; 
} 
.text-reference 
{ 
font-weight: bold; 
} 
#notes li 
{ 
margin: 1em 0; 
} 
#notes 
{ 
margin-top: 1em; 
border-top: 1px solid #00ff00; 
} 
#footer 
{ 
margin-top: 1em; 
border-top: 1px solid #dedede; /*上邊線*/ 
} 
.inhabitants 
{ 
border-bottom: 1px solid #dedede; 
} 
.pulled-wrapper 
{ 
background: url(pq-top.jpg) no-repeat left top; 
position: absolute; 
width: 160px; 
right: -180px; /* 定位注釋框的橫向位置*/ 
padding-top: 18px; 
} 
.pulled 
{ 
background: url(pq-bottom.jpg) no-repeat left bottom; 
position: relative; 
display: block; 
width: 140px; 
padding: 0 10px 24px 10px; 
font: italic 1.4em "Times New Roman" , Times, serif; 
} 
</style> 
<script type="text/javascript"> 
//為每個(gè)p元素添加屬性 
$(document).ready(function() { 
$('p').each(function(index) { 
var currentClass = $(this).attr('class'); 
$(this).attr('class', currentClass + ' inhabitants'); 
}); 
}); 

//動(dòng)態(tài)為元素添加屬性 
$(document).ready(function() { 
$('div.chapter a[href*=cnblogs]').each(function(index) { //each好似for循環(huán)，他會(huì)循環(huán)集合中所有的對(duì)象，參數(shù)一的方法是對(duì)每一個(gè)對(duì)象都執(zhí)行的操作，index是對(duì)象的索引 
var $thisLink = $(this); 
$(this).attr({ 
'rel': 'subsection ', 
'id': 'blogslink-' + index, 
'title': '更多' + $thisLink.text() + '的資料在馮瑞濤的博客', 
'class': 'link' 
}); 
}); 
}); 
//插入返回到上面連接 
$(document).ready(function() { 
$('<a id="top" name="top">新年好</a>').prependTo('body'); //初始化到body 
$('div.chapter p:gt(0)').after('<a href="#top">返回到上面</a>'); 
//下行等價(jià)上面的哪行代碼 gt代表從第幾個(gè)元素后面的p開(kāi)始 
//$('<a href="#top">返回到上面</a>').insertAfter('div.chapter p:gt(0)'); 
}); 
// 
$(document).ready(function() { 
$('<ol id="notes"></ol>').insertAfter('div.chapter'); 
$('span.footnote').each(function(index) { 
$(this) 
//為每一個(gè)footnote在前面動(dòng)態(tài)添加數(shù)字連接（1，2） 
.before('<a href="#foot-note-' + (index + 1) + '" id="context-' + (index + 1) + '" class="context"><sup>' + (index + 1) + '</sup></a>') 
//將footnote插入到ol標(biāo)簽中（不帶上面的連接，僅span），就是移動(dòng)標(biāo)簽，帶有appendTo代表將自己追加到其他元素中 
.appendTo('#notes') 
// 向指定元素內(nèi)容的后面追加標(biāo)簽 
.append(' (<a href="#context-' + (index + 1) + '">內(nèi)容</a>)') 
//將this包含在wrap的第一個(gè)參數(shù)中表示的標(biāo)記中 
.wrap('<li id="foot-note-' + (index + 1) + '"></li>'); 
}); 
}); 
$(document).ready(function() { 
$('span.pull-quote').each(function(index) { 
//獲得父元素p 
var $parentParagraph = $(this).parent('p'); 
//設(shè)置p標(biāo)簽為相對(duì)定位，否則無(wú)法對(duì)其位置進(jìn)行操作 
$parentParagraph.css('position', 'relative'); 
//復(fù)制一份拷貝，span.pull-quote clone(false);代表僅復(fù)制標(biāo)記本身不復(fù)制其內(nèi)容 
var $clonedCopy = $(this).clone(); 
$clonedCopy 
.addClass('pulled') //添加樣式，擁有下面的背景 
.find('span.drop') //找到其中的span.drop，此時(shí)對(duì)象已經(jīng)是span.drop了 
.html('…') //為span.drop 設(shè)置html文檔 
.end() //返回沒(méi)有被改變前的那個(gè)jQuery對(duì)象狀態(tài) 
.prependTo($parentParagraph) //將這個(gè)span追加到指定的元素中去 
.wrap('<div class="pulled-wrapper"></div>'); //再其本身包含在div內(nèi)容中<div><span> 
var clonedText = $clonedCopy.text(); //獲得文本,去掉了html 
$clonedCopy.html(clonedText); //將文本以Html的形式插入到內(nèi)容中，相當(dāng)于替換html內(nèi)容 
}); 
}); 


</script> 
</head> 
<body> 
<form id="form1"> 
<span class="footnote">佳月</span> <span class="footnote">Terry.Feng.C</span> <span 
class="footnote">馮瑞濤</span> 
<div class="chapter"> 
<p> 
1. <a >jQuery</a>動(dòng)態(tài)為鏈接添加屬性。</p> 
<p> 
2. <a >CSLA.Net</a>業(yè)務(wù)層最強(qiáng)框架。<span class="pull-quote">CSLA注釋<span class="drop">省略部分</span></span></p> 
<p> 
3. <a >DNN</a>免費(fèi)開(kāi)源的CMS系統(tǒng)。<span class="pull-quote">DNN注釋<span class="drop">省略部分</span></span></p> 
</div> 
<div id="footer"> 
馮瑞濤的博客</div> 
</form> 
</body> 
</html>