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 相关文章推荐
js滚动条回到顶部的代码
Dec 06 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
Aug 31 Javascript
BootStrap中的表单大全
Sep 07 Javascript
js中toString()和String()区别详解
Mar 23 Javascript
详解vue2 $watch要注意的问题
Sep 08 Javascript
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
webpack4之SplitChunksPlugin使用指南
Jun 12 Javascript
vue写h5页面的方法总结
Feb 12 Javascript
VUE项目中加载已保存的笔记实例方法
Sep 14 Javascript
js页面加载后执行的几种方式小结
Jan 30 Javascript
微信小程序实现上传照片代码实例解析
Aug 04 Javascript
antd Select下拉菜单动态添加option里的内容操作
Nov 02 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的FTP学习(二)
2006/10/09 PHP
PHP获取中英混合字符串长度的方法
2014/06/07 PHP
php输入流php://input使用浅析
2014/09/02 PHP
php实现webservice实例
2014/11/06 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
JS JavaScript获取Url参数,src属性参数
2021/03/09 Javascript
[原创]静态页面也可以实现预览 列表不同的显示方式
2006/10/14 Javascript
setInterval 和 setTimeout会产生内存溢出
2008/02/15 Javascript
JS控件的生命周期介绍
2012/10/22 Javascript
js实现的标题栏新消息闪烁提示效果
2014/06/06 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
2015/08/18 Javascript
JavaScript实现数据类型的相互转换
2016/03/06 Javascript
jQuery实现的瀑布流加载效果示例
2016/09/13 Javascript
JavaScript中for循环的几种写法与效率总结
2017/02/03 Javascript
基于vuejs实现一个todolist项目
2017/04/11 Javascript
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
2019/12/30 Javascript
python通过exifread模块获得图片exif信息的方法
2015/03/16 Python
简介Django框架中可使用的各类缓存
2015/07/23 Python
python matplotlib折线图样式实现过程
2019/11/04 Python
Python 改变数组类型为uint8的实现
2020/04/09 Python
Python使用re模块验证危险字符
2020/05/21 Python
Html5 实现微信分享及自定义内容的流程
2019/08/20 HTML / CSS
用HTML5制作一个简单的弹力球游戏
2015/05/12 HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
2019/06/20 HTML / CSS
美国网上花店:JustFlowers
2017/02/12 全球购物
英国在线潜水商店:Simply Scuba
2019/03/25 全球购物
物理系毕业生自荐信
2013/11/01 职场文书
服务质量承诺书
2014/03/27 职场文书
新闻工作者先进事迹
2014/05/26 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
永远跟党走演讲稿
2014/09/12 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书
2016新年问候语大全
2015/11/11 职场文书
纯CSS3实现div按照顺序出入效果
2021/07/15 HTML / CSS