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>
Javascript 相关文章推荐
javascript 写类方式之四
Jul 05 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
Dec 12 Javascript
JavaScript的strict模式与with关键字介绍
Feb 08 Javascript
JQuery select(下拉框)操作方法汇总
Apr 15 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
Jul 27 Javascript
js实现常用排序算法
Aug 09 Javascript
node+vue实现用户注册和头像上传的实例代码
Jul 20 Javascript
Angularjs cookie 操作实例详解
Sep 27 Javascript
JS实现websocket长轮询实时消息提示的效果
Oct 10 Javascript
vue计算属性无法监听到数组内部变化的解决方案
Nov 06 Javascript
vue路由守卫,限制前端页面访问权限的例子
Nov 11 Javascript
前端开发之便利店收银系统代码
Dec 27 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
You might like
微盾PHP脚本加密专家php解密算法
2020/09/13 PHP
php将字符串随机分割成不同长度数组的方法
2015/06/01 PHP
PHP实现简单搜歌的方法
2015/07/28 PHP
JavaScript 创建对象和构造类实现代码
2009/07/30 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
JavaScript中的迭代器和生成器详解
2014/10/29 Javascript
关于JS中的apply,call,bind的深入解析
2016/04/05 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
AngularJS内建服务$location及其功能详解
2016/07/01 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
axios发送post请求,提交图片类型表单数据方法
2018/03/16 Javascript
vue的diff算法知识点总结
2018/03/29 Javascript
微信小程序的部署方法步骤
2018/09/04 Javascript
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
Webpack中loader打包各种文件的方法实例
2019/09/03 Javascript
微信小程序 自定义弹窗实现过程(附代码)
2019/12/05 Javascript
在Python中测试访问同一数据的竞争条件的方法
2015/04/23 Python
python在不同层级目录import模块的方法
2016/01/31 Python
Request的中断和ErrorHandler实例解析
2018/02/12 Python
Python 打印中文字符的三种方法
2018/08/14 Python
使用numba对Python运算加速的方法
2018/10/15 Python
对Python w和w+权限的区别详解
2019/01/23 Python
Python字符串中添加、插入特定字符的方法
2019/09/10 Python
Python3常见函数range()用法详解
2019/12/30 Python
如何使用PyCharm将代码上传到GitHub上(图文详解)
2020/04/27 Python
python模块如何查看
2020/06/16 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
北京振戎融通Java面试题
2015/09/03 面试题
委托书的格式
2014/08/01 职场文书
法定代表人身份证明书(含说明)
2014/10/02 职场文书
青年教师听课心得体会
2016/01/15 职场文书
初三英语教学反思
2016/02/15 职场文书
jquery插件实现代码雨特效
2021/04/24 jQuery
python实现简单的井字棋
2021/05/26 Python
springboot+zookeeper实现分布式锁
2022/03/21 Java/Android