（七）jQuery中的DOM操作
一、jQuery的DOM操作
（1)查找节点:
查找元素节点:
1. 获取指定的标签节点 $(“上级标签 标签:eq(“标签索引”) ; 如：var li = $("ul li:eq(2)");
2. 获取标签节点$(“标签”)
3. 获取标签节点文本text()
查找属性节点:
利用attr()方法来获取它的各种属性的值。Attr()里的参数是一个时：是要查询的属性的名称，也可以是两个。
1. 获取标签节点
2. 获取标签节点属性:方法attr()
(2)创建节点:
创建元素节点： var li = $("<li>创建了一个li标签节点</li>");
注意:(1)动态创建的新元素节点不会被自动添加到文档中，而是需要使用其他方法将其插入文档中(需要append()方法)。
(2)当创建单个元素时，要注意闭合标签和使用标准的XHTML格式。
创建文本节点： var li = $("<li>创建了一个li标签节点</li>");
创建文本节点就是在创建元素节点时直接把文本内容写出来，然后用append()添加到文档中。
创建属性节点： var li = $("<li class='tag' >创建了一个li标签节点</li>");
创建属性节点与创建文本节点类似，也是在创建元素节点时一起创建。
(3)插入节点:
方法如下:
方法 描述
append() 在每个匹配的元素的内部追加内容
如： var li = $("<li>创建了一个li标签节点，且append到ul表面里 </li>"); $("ul).append(li); //将li追加ul里
appendTo() 将所有匹配的元素追加到指定的元素中
如： var li = $("<li>创建了一个li标签节点，且append到ul表面里 </li>"); li.appendTo(ul); //将li追加到ul里
prepend() 向每个匹配的元素内部前置内容
prependTo() 将所有匹配的元素前置到指定的元素中
after() 在每个匹配的元素之后插入内容
insertAfter() 将所有匹配的元素之后插入到指定元素的后面
before() 在每个匹配的元素之前插入内容
insertBefore() 将所有匹配的元素插入到指定的元素的前面
(4)删除节点:
方法1:
remove(); 使用remove()方法删除后,该节点所包含的所有后代节点将同时被删除,该方法的返回值是一个指向已被删除的节点的引用,因此可以在以后再使用这些元素（如下案例）。
如： $("ul li:eq(2)").remove(); //获取第三个<li>元素节点后，将它从网页中删除
<body>
<ul>
<li>1111111</li>
<li>
222222
<span>2-111111</span>
</li>
<li>333333</li>
<li>44444</li>
</ul> <script src="js/jquery/jquery-1.11.3.min.js"></script>
<script type="text/javascript"> setTimeout(function(){
var li=$("ul li:eq(1)").remove(); //获取第二个<li>元素节点后，将它从网页中删除
li.appendTo("ul"); //把刚才删除的节点有重新添加到<ul>元素里
},2000); </script>
</body>
方法2（很重要哦！）：
detach(); 和romove();方法一样，也是从DOM中去掉所有匹配的元素。但需要注意的是，这个方法不会把匹配的元素从jQuery中删除，因而可以在将来再使用这些匹配的元素。与romove();不同的是，所有绑定的事件、附加的数据都会保存下来。
<body>
<ul>
<li>1111111</li>
<li>
222222
<span>2-111111</span>
</li>
<li>333333</li>
<li>44444</li>
</ul>
<script src="js/jquery/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
// $(function(){
// $("ul li:eq(1)").unbind().bind('click',function(){
// console.log("还没执行remove()之前，执行的点击事件");
// alert("还没执行remove()之前，执行的点击事件");
// });
// //延时5000ms后执行remove();之后再把li添加到ul里
// setTimeout(function(){
// var li=$("ul li:eq(1)").remove(); //删除元素
// ul.append("li"); //之前绑定的click事件消失
//
// console.log("执行remove()之后，相应的事件也被移除了！");
// alert("执行remove()之后，相应的事件也被移除了！");
// },5000);
//
// }); $(function(){
$("ul li:eq(1)").unbind().bind('click',function(){
console.log("还没执行detach()之前，执行的点击事件");
alert("还没执行detach()之前，执行的点击事件");
});
//延时5000ms后执行detach();之后再把li添加到ul里
setTimeout(function(){
li=$("ul li:eq(1)").detach(); //删除元素
li.appendTo("ul"); //重新最佳此元素，它之前绑定的事件还在。如果使用remove();方法删除元素的话，那么它之前绑定的事件将消失。
//等价于：$("ul").append(li); console.log("执行detach()之后，相应的事件没有被移除！点击事件还可以执行");
alert("执行detach()之后，相应的事件没有被移除！点击事件还可以执行");
},5000);
});
</script>
</body>
方法3:
empty(); 方法并不是删除节点,而是清空节点,它能清空元素中的所有后代节点。
如： $("ul li:eq(2)").empty(); //获取第三个<li>元素节点后，清除此元素里的内容。注意是元素里。
(5)复制节点:
复制节点也是常用的DOM操作之一,在clone()方法中传播了一个参数true,它的含义是复制元素的同时复制元素中所绑定的事件。
$("ul li").bind('click',function(){
ul= $("ul");
$(this).clone().appendTo(ul); //复制当前点击的节点(只能是原先页面有的li，生成的li不能点击)，并追加到<ul>元素中 --------->被复制的新元素不具备任何行为！
//要想实现点击生成的li也具有点击的功能，那么需要添加参数true。它的含义是复制元素的同时复制元素的中所绑定的事件。如下：
//$(this).clone(true).appendTo(ul); //此时被复制的新元素也具有相应的行为
});
(6)替换节点:
方法1:
replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML 或者 DOM元素.
方法2:
replaceAll()方法与replaceWith()方法的作用相同,只是颠倒了replaceWith()操作。
注意:如果在替换之前,已经为元素绑定事件,替换后原先绑定的事件将会与被替换的元素一起消失,需要在新元素上重新绑定事件。
<body>
<div class="rep">divdivdivdivdiv</div>
<p class="pp1">pppppppppp</p>
<p class="pp2">pppppppppp</p>
<script src="js/jquery/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
$(".pp1").replaceWith("<b class='bb'>bbbbbbbbbbbb</b><br />");
$('<i class="ii">iiiiiiiiiiiiii</i>').replaceAll('.pp2');
});
</script>
</body>
效果：
(7)包裹节点:
包裹节点将某一个节点用其他标记包裹起来.
方法1: wrap()是将所有的元素进行单独的包裹(将匹配的元素逐个进行包裹).
方法2: wrapAll()方法是将所有匹配的元素用一个元素来包裹.
方法3 wrapInner()方法是将每一个匹配的元素的子内容【包括文本节点】用其他结构化的标记包裹起来(是包裹匹配元素的文本).
注释:wrapAll()与wrapInner()两者的区别在于：前者是将所有匹配元素用一个元素来包裹，后者是将每一匹配的子内容用其他元素标记起来.
<body>
<div class="rep">divdivdivdivdiv</div>
<div class="rep">divdivdivdivdiv</div>
<script src="js/jquery/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
//wrap() 将所有的元素进行单独包裹
//$(".rep").wrap("<section class='sec'></section>"); //wrapAll() 将所有匹配的元素用一个元素来包裹
//$(".rep").wrapAll("<section class='sec'></section>"); //warpInner() 将每一个匹配的元素的子内容（包括文本节点）用其他结构化的标记包裹起来。
$(".rep").wrapInner("<section class='sec'></section>"); });
</script>
</body>
执行：$(".rep").wrap("<section class='sec'></section>");后的效果：
执行：$(".rep").wrapAll("<section class='sec'></section>");后的效果：
执行:$(".rep").wrapInner("<section class='sec'></section>");后的效果：
(8)属性操作: 参考之前的文章
1、获取属性和设置属性: （获取元素属性的值和设置元素属性的值。类似的还有html()、text()、height()、width()、val()、css() ）;
attr()获取或设置属性，如果要获取某一元素的某一属性，只需要给attr()方法传递一个属性参数即可。
2、删除属性: ( 例如： $("p").removeAttr(".title"); //删除p标签的title属性 )
removeAtte(),在某些情况下,需要删除文档中的某个元素的特点属性,使用removeAfter()方法。
(9)样式操作:
1、获取样式和设置样式:
attr()方法,用于获取标签元素的属性，也可以用于设置标签元素的属性值,是将原来的属性替换为新的属性，而不是追加。当然你也可以同时设置两个class，如：$("p").attr("class","class1 class2");
2、追加样式:
在jQuary中,使用addClass()方法追加样式,如果给一个元素添加了多个Class值，那么就相当于合并了他们的样式.如果有不同的class设定了同一样式属性,则后者覆盖前者。
3、移除样式:
removeClass()方法与addClass()方法相反，可以从匹配的元素中删除全部或者指定的class.
4、切换样式:
jQuery提供了一个toggleClass()方法控制样式上的重复切换。如果类名存在则删除它，如果类名不存在则添加它。
5、切换样式：
jQuery提供了一个toggle()方法 控制样式上的重复切换。如果原来是显示的则隐藏，如果原来是影藏的则显示。
<body>
<button>点我换背景色</button>
<script src="js/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("button").toggle(function(){
$("body").css("background-color","green");
},function(){
$("body").css("background-color","red");
},function(){
$("body").css("background-color","yellow");
}
);
});
</script>
</body>
6、判断是否含有某个样式:
hasClass(); 用来判断元素是否含有某个class,如果有,则返回true,否则返回false. 可以用来作为判断条件，如果存在某class则执行语句1否则执行语句2；
(10)设置和获取HTML,文本和值 获取HTML:
html()方法获取,此方法类似于Javascript中的innerHTML属性，可以用来读取或者设置某个元素中的HTML内容. 文本值:
text()方法设置文本的值,此方法类似于Javascript中的innerText属性，可以用来读取或者设置某个元素中的文本元素。
获取值: val()方法获取值,此方法类似于JavaScript中的value属性，可以用来设置和获取元素的值，无论元素是文本框、下拉列表还是单选框，它都可以返回元素的值，如果元素为多选，则返回一个包含所有选择的值的数组.
注释:Html()、text()、val()区别:
(1)html:取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档,返回的是一个String 。
(2)设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。返回一个jquery对象.
(3)text：取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。返回的是一个String.
(4)val: 获得第一个匹配元素的当前值.
<body>
<div class="a">aaaaaaaaaa<strong>ssssssssss</strong></div>
<p class="b">bbbbbbbbbbbb<strong>ssssssssss</strong></p>
<input class="e" type="text" name="name" value="mmmmmmmm" />
<script src="js/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
var a = $(".a").html();
console.log(a); var b = $(".b").text();
console.log(b); var e = $(".e").val();
console.log(e);
}); </script>
</body>
效果：
更多相关内容：http://www.cnblogs.com/mcad/p/4357467.html
(11)遍历循环
children()方法 用于取得匹配元素的子元素集合。注释:children()方法只考虑子元素而不考虑任何后代元素。
next()方法 用于取得元素后面紧邻的同辈元素(只有一个).
prev()方法 用于取得元素前面紧邻的同辈元素(只有一个).
siblings()方法 用于取得匹配元素前后所有的同辈元素.
closest()方法 用来取得最近的匹配元素。首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，逐级向上直到找到匹配选择器的元素如果什么都没找到则返回一个空的jQuery对象.
其它遍历循环的方法:
find(),搜索所有与指定表达式匹配的元素.
filter(),筛选出与指定表达式匹配的元素集合.
not(),删除与指定表达式匹配的元素.
add(),把与表达式匹配的元素添加到jQuery对象中.这个函数可以用于连接分别与两个表达式匹配的元素结果集.
Slice(),选取一个与表达式匹配的子集.
nextAll(),选择一个元素后面所有的兄弟节点.
prevAll(),选择一个元素前面所有的兄弟节点.
parent(),取一个包含着所有匹配元素span的唯一父元素的元素集合 .
parents(),取一个包含着所有匹配元素span的祖先元素的元素集合(不包含根元素).
注意:这些遍历DOM方法有一个共同点，都可以使用jQuery表达式作为它们的参数来筛选元素。
二、CSS DOM操作 (样式获取或设置)
(1).CSS()方法,用css()方法获取元素的样式属性.
注意:无论color属性是外部CSS导入，还是直接拼接在HTML元素里(内联)，css()方法都可以获取到属性style里的其他属性的值,也可以直接利用css（）方法设置某个元素的单个样式.
作用:1.获取元素的样式属性
2.属性style里的其他属性的值
3.设置某个元素的单个样式
4.可以同时设置多个样式属性
(2)设置透明度的属性:opacity; $("i").css({"background":"#000", "color":"white", "opacity":"1.0"}); //设置多个属性
(3).获取某个元素的高度的方法height(),还有获取某个元素的height属性。
作用:height()：取得匹配元素当前计算的高度值(px)
$("p").height(); //获取p元素的高
$("p").height(“100px”); //设置p元素的高
(4)css()方法与height()方法的区别:
css():获取的高度值与样式的设置有关，可能会得到"auto",也可能得到"10px"之类的字符串.
height():获取的高度值则是元素在页面中的实际高度，与样式的设置无关，并且不带单位.
与height()方法对应的还有一个width()方法，它也可以取得匹配元素的宽度值（px）用法和height()一样.
(5)offset():获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性（top和left），它只对可见元素有效.
作用:offset()：获取元素在当前视窗的相对偏移.
(6)position():获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移,与offset()一样,它返回的对象也包括两个属性(top和left). 作用:position():
获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移.
(7)scrollTop()方法和scrollLeft()方法:这两个方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离
作用:这两个方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离.
（七）jQuery中的DOM操作的更多相关文章
- jQuery中的DOM操作《思维导图》
首先,是关于jQuery中的DOM操作的<思维导图>,请点击这里:jQuery中的DOM操作 列表框的左右选项移动 <html> <head> <title& ...
- dom core,html dom,css dom,jquery 中的dom操作
前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...
- jQuery中的DOM操作<思维导图>
DOM是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口.使用该接口可以轻松地访问页面中所有的标准组件.简单来说,DOM解决了Netsc ...
- Jquery：jquery中的DOM操作<一>
之前两天学习了Jquery强大的选择器,今天学习了一部分Jquery对DOM的操作,下面我将把自己今天的成果分享给大家,那些菜鸟们,你们是否需要巩固之前所学? 首先需要知道,DOM操作分为3个方面:D ...
- jQuery中的DOM操作总结
jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...
- JavaWeb学习笔记——jquery中的dom操作
jquery中的dom操作 废话不说:直接上例子: 1.添加节点-html页面 Append:向每个匹配的元素内部追加内容. <body> <ul id="city& ...
- 锋利的jQuery ——jQuery中的DOM操作（三）
一.DOM的操作分类 1>DOM Core 2>HTML-DOM 3>CSS-DOM 二.jQuery中的DOM操作 DOM树 ①查找节点 1)查找元素节点 利用jQuery ...
- jQuery 中使用 DOM 操作节点，对页面中的表格实现增、删、查、改操作
查看本章节 查看作业目录 需求说明: 在 jQuery 中使用 DOM 操作节点,对页面中的表格实现增.删.查.改操作 点击"增加"超链接时,将表格中的第一条数据添加到表格的末尾 ...
- JQuery中的DOM操作
JQuery中有很多DOM操作,但是因为之前没有总结过,所以用来用去都是那几个,一写html中的表单交互,尤其是那些复杂的表单交互,就是一大坨的js,我自己看着都费劲. 所以我感觉有必要总结一下 &l ...
- 第三章（jQuery中的DOM操作）
3.1 DOM 操作分类 ①DOM Core 包括(getElementById() , getElementsByTagName() , getAttribute() , setAttribute( ...
随机推荐
- [51nod 1022] 石子归并v2 [dp+四边形不等式优化]
题面: 传送门 思路: 加强版的石子归并,现在朴素的区间dp无法解决问题了 首先我们破环成链,复制一条一样的链并粘贴到原来的链后面,变成一个2n长度的序列,在它上面dp,效率O(8n^3) 显然是过不 ...
- 洛谷 P1362 兔子数
题目描述 设 S(N ) 表示 N 的各位数字之和,如 S(484) = 4+8+4 = 16, S(22) = 2+2 = 4.如果一个正整数满足 S(x*x) = S(x) *S(x),我们称之为 ...
- hdu 2147 kiki's game 组合游戏 找规律
题目链接 题意 两人轮流将硬币从\((n,m)\)移动到\((1,1)\),每次只能向下或向左或向左下移动一格,最后无法移动者输.问先手会赢还是会输. 思路 找规律 -- P N P N P N P ...
- linux下解压zip文件
linux下解压zip文件 linux自带的unzip命令可以解压windows下的zip格式的压缩文件. unzip命令 语法:unzip ［选项］ 压缩文件名.zip 各选项的含义分别为: -x ...
- emacs使用http代理打开
环境:ubuntu 15.10 64bit,emacs 24 ,git http代理搭建方法:http://www.cnblogs.com/liuxuzzz/p/5324749.html 原因: 因为 ...
- hdu 3061 hdu 3996 最大权闭合图 最后一斩
hdu 3061 Battle :一看就是明显的最大权闭合图了,水提......SB题也不说边数多少....因为开始时候数组开小了,WA....后来一气之下,开到100W,A了.. hdu3996. ...
- hdu 2654(欧拉函数)
Become A Hero Time Limit: 15000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)To ...
- go 函数回调
- codevs 1450 xth 的旅行
时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题解 查看运行结果 题目描述 Description 毕业了,Xth很高兴,因为他要和他的 ra ...
- 2016北京集训测试赛（十）Problem A: azelso
Solution 我们把遇到一个旗子或者是遇到一个敌人称为一个事件. 这一题思路的巧妙之处在于我们要用\(f[i]\)表示从\(i\)这个事件一直走到终点这段路程中, \(i\)到\(i + 1\)这 ...