编程 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数组操作常用方法

May 08 Javascript

JavaScript生成SQL查询表单的方法

Aug 13 Javascript

JS/jQ实现免费获取手机验证码倒计时效果

Jun 13 Javascript

利用原生js和jQuery实现单选框的勾选和取消操作的方法

Sep 04 Javascript

ng-options和ng-checked在表单中的高级运用(推荐)

Jan 21 Javascript

vue.js异步上传文件前后端实现代码

Aug 22 Javascript

js用类封装pop弹窗组件

Oct 08 Javascript

vue2.0 下拉框默认标题设置方法

Aug 22 Javascript

在vue项目中使用md5加密的方法

Sep 14 Javascript

layui--js控制switch的切换方法

Sep 03 Javascript

JavaScript中的null和undefined用法解析

Sep 30 Javascript

JavaScript实现随机点名器

Mar 25 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