（七）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( ...
随机推荐
- 序列(seq)
序列(seq) 题目描述 给定 N,A,BN,A,B,构造一个长度为 NN 的排列,使得: 排列长度为 N: 最长上升子序列长度为 A: 最长下降子序列长度为 B. 我们有 SPJ,有解任意给出一组, ...
- 【09】node 之 fs流读写
前面我们已经学习了如何使用fs模块中的readFile方法.readFileSync方法读取文件中内容,及如何使用fs模块中的writeFile方法.writeFileSync方法向一个文件写入内容. ...
- linux之eval
1. eval command-line 其中command-line是在终端上键入的一条普通命令行.然而当在它前面放上eval时,其结果是shell在执行命令行之前扫描它两次.如: pipe=&qu ...
- Java下使用Swing来进行图形界面开发
1. GUI从创建window开始,通常会使用JFrame.JFrame frame = new JFrame(); 2. 你可以这样加入按钮,文字字段等组件.frame.getContentPane ...
- [论文]CA-Tree: A Hierarchical Structure for Efficient and Scalable Coassociation-Based Cluster Ensembles
作者:Tsaipei Wang, Member, IEEE 发表:IEEE TRANSACTIONS ON SYSTEMS, MAN, AND CYBERNETICS—PART B: CYBERNET ...
- android中与Adapter相关的控件----ListView
ListView讲解: 一.ListView这个控件是一个使用非常广泛的控件,值得深入的学习和研究.基本使用已经在Adapter中使用过了 二.常用的属性和方法 footerDividersEnabl ...
- Python学习杂记_6_字典常用操作
字典操作 字典是由一对花括号括起来的一组“键值对”,每个键值对就是字典的一个元素,元素在字典中是无序的,常见操作如下: info = { 'name':'xiaoming', 'sex':'nan', ...
- Java NIO中的FileLock（文件锁）
FileLock,文件锁. 文件锁在OS中很常见,如果多个程序同时访问.修改同一个文件,很容易因为文件数据不同步而出现问题.给文件加一个锁,同一时间,只能有一个程序修改此文件,或者程序都只能读此文件, ...
- SecureCRT导出服务器列表或配置文件
说明:SecureCRT没有Xshell那么简单有直接导出的功能,但是可以通过技巧的方式来操作. 1.打开SecureCRT,点击菜单栏的[Opitions]->[Global Opitions ...
- 清理XCode无用的文件（转）
目录如下,直接删除即可: 1.移除对旧设备的支持 影响:可重新生成:再连接旧设备调试时,会重新自动生成.我移除了4.3.2, 5.0, 5.1等版本的设备支持. 路径: [~/Library/Deve ...