jQuery学习之旅 Item4 细说DOM操作
jQuery—–DOM操作(文档处理)
Dom是Document Object Model的缩写,意思是文档对象模型。DOM是一种与浏览器、平台、语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件。DOM操作可以分为三个方面即DOM Core(核心)、HTM-DOM和CSS-DOM。
每一个网页都可以用DOM表示出来,每个DOM都可以看作是一棵DOM树。下面的html页面结构可以构建出一棵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>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"
<title>DOM Demo</title>
</head>
<body>
<p title="选择你最喜欢的水果.">你最喜欢的水果是?</p>
<ul>
<li title="苹果">苹果</li>
<li title="橘子">橘子</li>
<li title="菠萝">菠萝</li>
</ul>
</body>
</html>
构建出的DOM树如下:
JQuery中的DOM操作主要对包括:建【新建】、增【添加】、删【删除】、改【修改】、查【查找】【像数据库操作】。下面的DOM操作将围绕上面的DOM树进行学习JQueryDOM操作。
一、查–查找DOM节点
查找节点非常容易,使用选择器就能轻松完成各种查找工作。
例:查找元素节点p返回p内的文本内容
$("p").text();
例:查找元素节点p的属性返回属性名称对应的属性值
$("p").attr("title"),返回p的属性title的值。
二、建–新建DOM节点
1、创建元素节点
创建元素节点并且把节点作为<ul>
元素的子节点添加到DOM节点树上。先创建元素点,创建元素节点使用Jquery的工厂函数$()
来完成,格式如下:$(html)
,该方法会根据传入的html字符串返回一个DOM对象,并将DOM对象包装成一个JQuery对象后返回。创建一个元素节点JQuery代码如下:
$li1=$("<li></li>")
代码返回$li1
就是一个由DOM对象包装成的JQuery对象。把新建节点添加到DOM树中JQuery代码如下:
$("ul").append($li1);
添加后页面中只能看到<li>
元素默认的”·”,由于没有为节点添加文本所以只显示默认符号,下面创建文本节点。
**PS:**append()方法是添加DOM节点方法详见增–添加DOM节点。
2、创建文本节点
使用JQuery的工厂函数$()
同样能够创建文本节点,创建文本节点的JQuery代码如下:
$li2=$("<li>苹果</li>");
代码返回$li2
就是一个由DOM对象包装成JQuery对象,把新建的文本节点添加到DOM树中JQuery代码如下:
$("ul").append($li2);
添加后页面中能看到”·苹果”,右键查看页面源码发现新加的文本节点没有title属性。下面方法创建带属性的节点。
3、创建属性节点
创建属性节点同元素节点、文本节点一样使用JQuery的工厂函数完成。创建属性节点的JQuery代码如下:
$li3=$("<li title='榴莲'>榴莲</li>");
代码返回$li3
也是一个由DOM对象包装成JQuery对象,把新建的属性节点添加到DOM树中JQuery代码如下:
$("ul").append($li3);
添加后页面中能看到”·榴莲”,右键查看页面源码发现新加的属性节点有title=’榴莲’属性。
三、增–添加DOM节点
1、插入节点
(1). 节点追加-父子关系
$(“ul”).append(“<li>强</li>”); 后置追加
$(“ul”).prepend(“<li>强</li>”); 前置追加
$(“ul”).append(jquery对象); 把指定对象后置追加
(jquery对象如果是页面上已有的元素节点,那么就被挪动位置到ul里边)
$(“ul”).prepend(jquery对象); 把指定对象前置追加
$(“<li>强</li>”).appendTo(“ul”); 被追加(后置)
$(“<li>强</li>”).prependTo(“ul”); 被追加(前置)
<script>
function f1(){
//主动:追加字符串、已有节点对象、新节点对象
$("#one").append("<li>其实</li>");//==>被追加到第一个ul的最后一个li
$("#one").prepend("<li>good</li>");//==>被追加到第一个ul的第一个li
$("#one").append($("#two li:eq(1)"));//==>“家”被移动到第一个ul的最后一个li,原来的li被移除
$("#one").append($("<li>abc</li>")); //documentCreateElement();
//被动 :没有找到的节点直接创建新节点、已有节点则执行移动操作
$("<li>年</li>").appendTo("#one");//==>这里不用$符号$("#one");
$("<li>新</li>").prependTo("#one");
$("#two li:eq(3)").appendTo("#one");
}
</script>
<body>
<ul id="one">
<li>四</li>
<li>大</li>
<li>家</li>
<li>族</li>
</ul>
<ul id="two">
<li>乔</li>
<li>家</li>
<li>大</li>
<li>院</li>
</ul>
<ul>
<li>老大</li>
</ul>
<input type="button" value="触发" onclick="f1()">
</body>
(2). 节点追加—兄弟关系
$(“div”).after(“<span>hello</span>”); 后置追加兄弟节点
$(“div”).after(jquery对象); 把一个jquery对象后置追加为兄弟节点
$(“#one”).insertAfter(‘对象标志’); 已有对象被追加为对象标志的兄弟节点
$(“<span></span>”).insertAfter(“#ul”) 一个新的span对象被追加为ul的兄弟节点
<script>
function f1(){
//主动兄弟追加节点
$("#one").after("<span>tomorrow</span>");//第一个ul之后追加了一个span的兄弟节点
$("#one").after($("p"));//p节点被移动到第一个ul之后
//被动兄弟节点追加
$("<span>hello</span>").insertAfter("#one"); //新节点被追加
$("ul:eq(2)").insertAfter("#one"); //已有节点被追加
}
</script>
<body>
<ul id="one">
<li>四</li>
<li>大</li>
<li>家</li>
<li>族</li>
</ul>
<ul id="two">
<li>乔</li>
<li>家</li>
<li>大</li>
<li>院</li>
</ul>
<ul>
<li>老大</li>
</ul>
<p>road</p>
<input type="button" value="触发" onclick="f1()">
</body>
四、删–删除DOM节点操作
1. 节点删除
empty() 父节点删除子节点
remove() 删除匹配到的节点
<script>
function f1(){
//节点删除
//$("#one").empty();//第一个ul的所有li被删除,ul还在,一个空标签
$("#two li:gt(0)").remove();//删除匹配到的节点
}
</script>
<body>
<ul id="one">
<li>四</li>
<li>大</li>
<li>家</li>
<li>族</li>
</ul>
<ul id="two">
<li>乔</li>
<li>家</li>
<li>大</li>
<li>院</li>
</ul>
<ul>
<li>老大</li>
</ul>
<p>road</p>
<input type="button" value="触发" onclick="f1()">
</body>
五、改–修改DOM节点操作
1. 节点替换
<script>
function f1(){
//节点替换(被动)
//"四"被"乔"替换,利用已有节点进行替换
$("#one li:eq(0)").replaceWith($("#two li:eq(0)"));
//利用新节点替换
$("#one li:eq(0)").replaceWith("<li>五</li>");
$("#one li:eq(0)").replaceWith($("<li>六</li>"));
//主动替换
$("<li>七</li>").replaceAll($("#one li:eq(2)"));
}
</script>
<body>
<ul id="one">
<li>四</li>
<li>大</li>
<li>家</li>
<li>族</li>
</ul>
<ul id="two">
<li>乔</li>
<li>家</li>
<li>大</li>
<li>院</li>
</ul>
<ul>
<li>老大</li>
</ul>
<p>road</p>
<input type="button" value="触发" onclick="f1()">
</body>
2. 节点复制
clone(false) 复制节点本身和子级节点内容
clone(true) 复制节点本身和子级节点内容,同时复制节点的事件
<script>
function f1(){
//clone(true)同时复制节点和对应的事件
var qiao = $("#two li:eq(0)").clone(true);
$("#one").append(qiao);
}
$(function(){
$("#two li").each(function(){
//每个li被点击,就输出对应的文本内容
$(this).click(function(){
alert($(this).html());
});
});
});
</script>
<body>
<ul id="one">
<li>四</li>
<li>大</li>
<li>家</li>
<li>族</li>
</ul>
<ul id="two">
<li>乔</li>
<li>家</li>
<li>大</li>
<li>院</li>
</ul>
<ul>
<li>老大</li>
</ul>
<p>road</p>
<input type="button" value="触发" onclick="f1()">
</body>
3. 节点包裹 —子父关系
<script>
function f1(){
//每个匹配节点都给找一个父级
$("ul").wrap("<div id='pear'></div>");//三个ul每个都被div包裹
$("#one").wrap($("p")); //已有节点被追加(复制)第一个ul被p包裹
//多个节点共用一个父级
$("ul").wrapAll("<div id='pear'></div>");//三个ul共同被一个div包裹
//把子内容包裹起来
//每个元素的子内容都被包裹
$("ul").wrapInner("<div id='pear'></div>");每个ul的所有li元素被div包裹
}
</script>
<body>
<ul id="one">
<li>四</li>
<li>大</li>
<li>家</li>
<li>族</li>
</ul>
<ul id="two">
<li>乔</li>
<li>家</li>
<li>大</li>
<li>院</li>
</ul>
<ul>
<li>老大</li>
</ul>
<p></p>
<input type="button" value="触发" onclick="f1()">
</body>
六. 遍历节点操作children()、next()、prev()、siblings()和closest()
- children()——方法用于取得匹配元素的子元素集合,只匹配子元素不考虑任何后代元素。方法如下:$(selector).children();例:
$("$("body").children().length;\\该示例获得body元素的子元素个数;
- next()方法——用于匹配元素的下一个兄弟节点,方法如下:$(selector).next();例:
$("p").next().html();\\该示例获得p元素的下一个兄弟节点的html内容。
- prev()方法——用于匹配元素的上一个兄弟节点,方法如下:$(selector).prev();例:
$("ul").prev().text();\\该示例获得ul元素的上一个兄弟节点的文本内容。
- siblings方法——-用于匹配目标元素的所有兄弟元素,方法如下:$(selector).siblings();例:
$("p").slibings();\\示例获得p元素的所有兄弟节点元素。
- closest()方法——用来取得最近的匹配元素,首先检查当前元素是否匹配如果匹配则直接返回,否则继续向上查找父元素中符合条件的元素返回,如果没有匹配的元素则返回空JQuery对象。
ps:注意closest()、parent()、parents()方法的区别:
版权声明:本文为小平果原创文章,转载请注明:http://blog.csdn.net/i10630226
jQuery学习之旅 Item4 细说DOM操作的更多相关文章
- 【Java EE 学习 32 下】【JQuery】【JQuey中的DOM操作】
一.JQuery中的DOM操作. 什么是DOM:DOM是一中和浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件.DOM简称文档对象模型,是Document Oject Mode ...
- 读<jquery 权威指南>[1]-选择器及DOM操作
今天是小年了,2013马上要过去了,但是学习不能间断啊.最近正在看<jQuery权威指南>,先温习一下选择器和DOM操作. 一.基本选择器 1.table单双行: $(function ( ...
- JQuery(选择器、事件、DOM操作)
一.jQuery简介 jQuery 是一个 JavaScript 库. jQuery 极大地简化了 JavaScript 编程. jQuery 库位于一个 JavaScript 文件中,其中包含了所有 ...
- jQuery学习之旅 Item6 好用的each()
1.javascript 函数的调用方式 首先来研究一下jquery的each()方法的源码,在这之前,先要回顾一下javascript函数具体调用样式: 普通函数调用 setName(); 可以作为 ...
- jQuery入门基础(事件、DOM操作)
http://www.w3school.com.cn/b.asp 一.事件 1.常规事件——把js事件前面的on去掉 比如:js:onclick——JQuery:click 下面是 jQuery 中事 ...
- jQuery使用(六):DOM操作之元素包裹、克隆DOM与data的综合应用
包裹 wrap() wrapInner() wrapAll() unwrap() clone() 数据缓存机制 data 文档处理(包裹) 1.1.wrap()--将所匹配的元素用其他元素结构化标签包 ...
- 《锋利的JQuery》读书要点笔记2——DOM操作
第三章 jQuery中的DOM操作 3.1 DOM(Document Object Model)操作的分类 1. DOM Core 例如:document.getElementsByTagNam ...
- jQuery学习之------对标签属性的操作
jQuery学习之------标签的属性 <a href=””>链接</a>此处的href就是该a标签带有的属性 在js中对标签的属性的操作方法有 1.1getAttribut ...
- jQuery 源码解析(二十三) DOM操作模块 替换元素 详解
本节说一下DOM操作模块里的替换元素模块,该模块可将当前匹配的元素替换指定的DOM元素,有两个方法,如下: replaceWith(value) ;使用提供的新内容来替换匹配元素集合中的每个元 ...
随机推荐
- How tomcat works 读书笔记十七 启动tomcat 上
一路跋山涉水,这是最后一章了. 关于tomcat的启动,有两个类,一个是Catalina类,一个是Bootstrap类. 理论上,两个类可以和到一起,但是为了支持多种运行模式,又把他们分开了. 为了让 ...
- Gradle 1.12用户指南翻译——第四十三章. 构建公告插件
本文由CSDN博客貌似掉线翻译,其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Githu ...
- mybatis源码之BaseStatementHandler
/** * @author Clinton Begin */ public abstract class BaseStatementHandler implements StatementHandle ...
- AI之微信跳一跳
需要环境:1,Python3.6 2,android手机 3,ADB驱动,下载地址https://adb.clockworkmod.com/ 步骤: 配置Python3,ADB安装目录到环境变量pat ...
- 重写,string创建内存问题
//重写equals方法,因为我们要对比的是date类中的时间而不是对象的引用地址 51 //如果传递的是Object类的话,我们就需要重写hashCode()方法,这样就比较麻烦,而且暂时 ...
- spring的优缺点
它是一个开源的项目,而且目前非常活跃:它基于IoC(Inversion of Control,反向控制)和AOP的构架多层j2ee系统的框架,但它不强迫 你必须在每一层 中必须使用Spring,因为它 ...
- access窗口标签居中
Private Sub Form_Resize() On Error Resume Next Me.Width = Me.InsideWidth Me.Section(acDetail).Height ...
- Django用普通user对象登录的必须准备步骤
zt from http://segmentfault.com/q/1010000000343563 在stackoverflow找到了解答(http://stackoverflow.com/ques ...
- Golang 环境配置建议(Atom)
http://www.philo.top/2015/02/06/golang-%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE%E5%BB%BA%E8%AE%AE/ 开发环境的 ...
- Ocelot中文文档-请求聚合
Ocelot允许您指定聚合多个普通ReRoutes的Aggregate ReRoutes(聚合路由),并将其响应映射到一个对象中.一般用于当您有一个客户端向服务器发出多个请求,而这些请求可以合并成一个 ...