编程 Javascript

jQuery DOM操作小结与实例

Posted in Javascript onJanuary 07, 2010

DOM操作的分类：DOM CORE（核心）、HTML-DOM和CSS-DOM
1. DOM Core
DOM Core并不专属于javascript，任何一种支持DOM的程序设计语言都可以使用它。

它的用途并非仅限于处理网页，也可以用来处理任何一种使用标记语言编写出来的文档，如XML.

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

2. HTML_DOM

使用HTML_DOM来获取表单对象的方法
Document.forms
使用HTML_DOM来获取某元素的src属性的方法
Element.src
3. CSS_DOM

CSS_DOM是针对CSS的操作。在javascript中，CSS-DOM技术的主要作用是获取和设置style对象的各个属性。通过改变style对象的各种属性，可以使网页呈现出各种不同的效果。
Element.style.color = “red”;
jQuery作为javascript库，继承并发扬了javascript对DOM对象的操作的特性，使开发人员能方便的操作DOM对象。

jQuery 的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 id="Head1"> 
<title></title> 
<script src="http://img.3water.com/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"> 
//为每个p元素添加属性 
$(document).ready(function() { 
$('p').each(function(index) { 
var currentClass = $(this).attr('class'); 
$(this).attr('class', currentClass + ' inhabitants'); 
}); 
}); //动态为元素添加属性 
$(document).ready(function() { 
$('div.chapter a[href*=cnblogs]').each(function(index) { //each好似for循环，他会循环集合中所有的对象，参数一的方法是对每一个对象都执行的操作，index是对象的索引 
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>'); 
//下行等价上面的哪行代码 gt代表从第几个元素后面的p开始 
//$('<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) 
//为每一个footnote在前面动态添加数字连接（1，2） 
.before('<a href="#foot-note-' + (index + 1) + '" id="context-' + (index + 1) + '" class="context"><sup>' + (index + 1) + '</sup></a>') 
//将footnote插入到ol标签中（不带上面的连接，仅span），就是移动标签，带有appendTo代表将自己追加到其他元素中 
.appendTo('#notes') 
// 向指定元素内容的后面追加标签 
.append(' (<a href="#context-' + (index + 1) + '">内容</a>)') 
//将this包含在wrap的第一个参数中表示的标记中 
.wrap('<li id="foot-note-' + (index + 1) + '"></li>'); 
}); 
}); 
$(document).ready(function() { 
$('span.pull-quote').each(function(index) { 
//获得父元素p 
var $parentParagraph = $(this).parent('p'); 
//设置p标签为相对定位，否则无法对其位置进行操作 
$parentParagraph.css('position', 'relative'); 
//复制一份拷贝，span.pull-quote clone(false);代表仅复制标记本身不复制其内容 
var $clonedCopy = $(this).clone(); 
$clonedCopy 
.addClass('pulled') //添加样式，拥有下面的背景 
.find('span.drop') //找到其中的span.drop，此时对象已经是span.drop了 
.html('…') //为span.drop 设置html文档 
.end() //返回没有被改变前的那个jQuery对象状态 
.prependTo($parentParagraph) //将这个span追加到指定的元素中去 
.wrap('<div class="pulled-wrapper"></div>'); //再其本身包含在div内容中<div><span> 
var clonedText = $clonedCopy.text(); //获得文本,去掉了html 
$clonedCopy.html(clonedText); //将文本以Html的形式插入到内容中，相当于替换html内容 
}); 
}); 

</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 href="http://terryfeng.cnblogs.com">jQuery</a>动态为链接添加属性。</p> 
<p> 
2. <a href="http://terryfeng.cnblogs.com">CSLA.Net</a>业务层最强框架。<span class="pull-quote">CSLA注释<span class="drop">省略部分</span></span></p> 
<p> 
3. <a href="http://terryfeng.cnblogs.com">DNN</a>免费开源的CMS系统。<span class="pull-quote">DNN注释<span class="drop">省略部分</span></span></p> 
</div> 
<div id="footer"> 
冯瑞涛的博客</div> 
</form> 
</body> 
</html>

jQuery DOM操作小结与实例

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS类库Bindows1.3中的内存释放方式分析

Mar 08 Javascript

javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象

Jan 15 Javascript

JQuery入门——用bind方法绑定事件处理函数应用介绍

Feb 05 Javascript

js实现随屏幕滚动的带缓冲效果的右下角广告代码

Sep 04 Javascript

jQuery实现的简单在线计算器功能

May 11 jQuery

clipboard.js在移动端复制失败的解决方法

Jun 13 Javascript

Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)

Aug 16 Javascript

vue打包使用Nginx代理解决跨域问题

Aug 27 Javascript

React实现全局组件的Toast轻提示效果

Sep 21 Javascript

vue 父组件中调用子组件函数的方法

Jun 06 Javascript

React+Redux实现简单的待办事项列表ToDoList

Sep 29 Javascript

three.js 如何制作魔方

Jul 31 Javascript

javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element

Jan 05 #Javascript

jQuery 数据缓存data(name, value)详解及实现

Jan 04 #Javascript

用AJAX返回HTML片段中的JavaScript脚本

Jan 04 #Javascript

Javascript解决常见浏览器兼容问题的12种方法

Jan 04 #Javascript

javascript 模拟点击广告

Jan 02 #Javascript

javascript 多种搜索引擎集成的页面实现代码

Jan 02 #Javascript

让firefox支持IE的一些方法的javascript扩展函数代码

Jan 02 #Javascript