jQuery DOM操作小结与实例

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.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">
//为每个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>

赞 (0)

相关推荐

  • jQuery学习笔记之jQuery的DOM操作

    一.节点的操作 1.查找节点: var $var_1=$("htmltype");   //这句话就是获取所有htmltype节点 如:var $ul_1=$("ul"); 2.创建并追加节点: var $var_1=$("<htmltype>");//这句话是创建一个节点 $("htmltype2").append($var_1) ; //这句话是把节点插入所有htmltype2节点中 例子:var $li_1=

  • js/jQuery对象互转(快速操作dom元素)

    复制代码 代码如下: // jquery对象转js对象 $('#search')[0].checked=true; // js对象转jquery对象 var obj = document.getElementById('search'); alert($(obj).checked);

  • jquery 操作DOM的基本用法分享

    例子展示: jquery代码: 复制代码 代码如下: <script language="javascript"> $(document).ready(function(){ alert($("ul li:eq(1)").text()); //选取第二个li的值 alert($("p").attr("title")); //选取p的title属性的值 //追加元素 $('ul').append("<

  • NodeJS使用jQuery选择器操作DOM

    注* 这是一个两年多的"老"项目,可以让你在NodeJS中使用jQuery的选择器,像操作前端DOM一样操作后端的HTML/XML,在去除浏览器兼容相关代码后,比JSDOM的操作快8倍. 之前我们曾经提到JSDOM有严重的性能问题:   Debug调试Node.JS:我们是如何定位内存泄漏和无限循环的 cheerio 快速,灵活,在服务器端使用的jQuery. 简介 测试你的服务器端HTML: 复制代码 代码如下: var cheerio = require('cheerio'), $

  • jQuery的DOM操作之删除节点示例

    jQuery的DOM操作之删除节点示例

    如果文档中某一个元素多余,那么应将其删除.jQuery提供了两种删除节点的方法,remove()方法和empty()方法. 1. remove(): <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <meta http-equiv="Content-Type" content=&quo

  • jQuery移动和复制dom节点实用DOM操作案例

    本文章简单的介绍了关于jQuery移动和复制dom节点程序实现,有需要学习的朋友可参考参考. 在做一个项目时,需要dom节点移动,如以下代码: 复制代码 代码如下: <div></div> <p></p> 需要把p标签移动到div标签里,经过测试发现,在jQuery中移动dom节点非常方便: 复制代码 代码如下: $('div').append($('p')) 这样即可把p标签移动到div标签里,千万不要写成这样: 复制代码 代码如下: $('div').a

  • jQuery常见面试题之DOM操作详析

    jQuery常见面试题之DOM操作详析

    前言 关于JQ的DOM操作面试问题很多,可以从各个点问,所以列举几个常见问题,毕竟面试只是过程,重要的是知识自己掌握了. 面试题一:JQ中html().text()和val()区别? 面试题二:JQ中find().has()和filter()区别? 面试题三: closet()和parents()区别? 答案请在文中查找... DOM操作有三类:DOM-core.HTML-DOM .CSS-DOM 一.插入节点 我们用的最多的就是append和apendTo,其实共有8种方法. 插入节点 二.删

  • jQuery使用手册之二 DOM操作

    jQuery使用手册之二 DOM操作

    属性我们以<img id="a" scr="5.jpg"/>为例,在原始的javascript里面可以用var o=document.getElementById('a')取的id为a的节点对象,在用o.src来取得或修改该节点的scr属性,在jQuery里$("#a")将得到jQuery对象[ <img id="a" scr="5.jpg"/> ],然后可以用jQuery提供的很多

  • jQuery DOM操作小结与实例

    DOM操作的分类:DOM CORE(核心).HTML-DOM和CSS-DOM 1. DOM Core DOM Core并不专属于javascript,任何一种支持DOM的程序设计语言都可以使用它. 它的用途并非仅限于处理网页,也可以用来处理任何一种使用标记语言编写出来的文档,如XML. Javascript中的getElementById(),getElementByTagName(),getAttribute()和setAttribute()方法,都是dom core的组成部分. 2. HTM

  • jQuery DOM操作 基于命令改变页面

    呃,貌似是广告哈?呵呵,不过的确是这样,jQuery为我们提供了丰富的DOM操作方法,使这些复杂的DOM操作变得简单. 继上一回写jQuery的笔记貌似已经过去很长时间了,这一节也确实有必要写一下了,呵呵,Let's Go~ 操作属性: 之前,我们说过.addClass()及.removeClass()方法,更改的其实也是DOM的属性:className. 说到这就得再提一下,为啥元素的类名叫做className而不是直接叫class,因为class是js的保留字.嗯. 那么除了class,DO

  • jQuery DOM操作实例

    都来加深印象吧,大家都知道jQuery很好使用,因为它简化了javascript代码,更重要的是它还兼容基本上所有的浏览器,网页开发最头疼的就是这个了,所以jQuery也因此深受码农的喜爱,不过首先你得要记住它才能更好的使用它不是吗,过久了没用的属性方法也会淡忘的,下面是jQuery的DOM操作方法属性的详解,看看加深下印象. 例子虽丑功能还俱全呢! 复制代码 代码如下: <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xh

  • jQuery级联操作绑定事件实例

    级联操作绑定事件是jQuery非常具有实用价值的一个技巧,本文即以实例形式实现这一功能.分享给大家供大家参考之用.具体方法如下: 本文所述实例主要实现jQuery操作一个列表,根据类别选出学校,点击学校出现院系,点击院系出现专业,然后链接至专业申请页面. 具体功能代码如下: $("li.university").click(function(){ var id = $(this).attr("rel"); $.get("data.aspx?type=u&a

  • jquery常用操作小结

    页面load方法 $().ready(function() { }) div隐藏操作 // div是否隐藏 function isHideMenu(){ return $("#menuContent").is(":hidden") } // 隐藏div mainFrameset.hide(); // 显示div mainFrameset.show(); 获取对象 //通过id获得 $("#menuContent"); //通过class获得 $(

  • DOM操作和jQuery实现选项移动操作的简单实例

    DOM: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM选项移动操作</title> <style> select { width: 100px; height: 85px; } div { display: inline-block; width: 50px } </style

  • jQuery中DOM操作实例分析

    本文实例讲述了jQuery中DOM操作的方法.分享给大家供大家参考.具体分析如下: 这里主要设计的dom操作包括:dom对象的创建(JS方式和jquery方式).属性的修改.样式的修改.动态绑定事件 代码如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="jquery-1.3.

  • jQuery中DOM操作原则实例分析

    本文实例讲述了jQuery中DOM操作原则.分享给大家供大家参考,具体如下: 一丶Get and Set in One(读写一体) 原则 为了更加易于使用,jQuery提供了简洁的DOM操作API,其方法往往是读写一体的.也就是说,某个方法既可用于读取操作,也可用于设置操作.如果没有为其传入表示值的参数,则表示获取操作,将返回获取到的数据:如果为其传入了表示值的参数,则表示设置操作,它将设置DOM元素指定属性的值. 示例代码 // 没有传入value参数,返回第一个匹配元素的value元素 va

  • jQuery DOM节点的遍历方法小结

    本文介绍了jQuery DOM节点的遍历方法小结,分享给大家,也给自己留个笔记 children()方法 jQuery是一个合集对象,如果想快速查找合集里面的第一级子元素,此时可以用children()方法.这里需要注意:.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈,这里可以理解为就是父亲-儿子的关系) 节点查找关系 <div class="div"> <ul class="son"> <

随机推荐