jQuery组织您钞四----jQuery操作DOM
一、采用jQuery创建节点
节点是DOM基础设施。依据DOM产品规格，Node是一个很宽泛的概念，包含元素、属性、正文、档、。实际开发过程中，要创建动态内容，主要操作的节点包括元素、
属性和文本。
看一个样例 实例4-1：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> jQuery创建元素、文本和属性 </title>
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var $h1=$("<h1 title='一级标题'>jQuery创建元素、文本和属性</h1>");
$("body").append($h1);
//写成一行
$("body").append("<h2 title='二级标题'>二级标题</h2>")
})
</script>
</head>
<body> </body>
</html>
运行效果如图：
非常easy的一行代码就能够完毕创建元素、文本和属性而且把该元素放到body元素下。比JavaScript简化了太多了。
二、使用jQuery插入元素
1、在节点内部插入内容
jQuery提供了4种方法用于在节点内部插入内容
| 方法 | 说明 |
|---|---|
| append() | 向每一个匹配的元素内部追加内容（既然是‘追加’，那旧说明是在匹配元素内部的后面添加） |
| appendTo() | 把全部匹配的元素追加到还有一个指定的元素集合中，实际上。这种方法颠倒了append()方法的应用。比如$(A).append($B)和 $B.appendTo($A)是等价的 |
| prepend() | 与append()相反。它是把元素插到到匹配元素内部的最前面 |
| prependTo() | 与prepend()使用方法颠倒，不多说了 |
这四个方法的參数能够是字符串、DOM元素对象或者是jQuery对象。
以下演示样例演示append()方法分别把DOM元素对象、jQuery对象和字符串加入到ul对象以下。
实例4-2：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> jQuery在节点内部插入内容 </title>
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var $li =$("<li>jQuery对象</li>");
var li=document.createElement("li");
li.innerText="DOM对象";
$("ul").append($li)
$("ul").append(li)
$("ul").append("<li>字符串</li>");
})
</script>
</head> <body>
<ul></ul>
</body>
</html>
运行结果如图：
2、在节点外部插入内容
jQuery相同提供了四个方法
| 方法 | 说明 |
|---|---|
| after() | 在每一个匹配的元素之后插入内容 |
| before() | 在每一个匹配的元素之前插入内容 |
| insertAfter() | 把全部匹配的元素插入到还有一个指定的元素集合的后面 |
| insertBefore() | 把全部匹配的元素插入到还有一个指定的元素集合的前面 |
这四个方法跟前面那四个方法使用方法相似，看个样例
实例4-3：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> jQuery在节点外部插入内容 </title>
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("div").after($("<p>最后一段文本</p>"))
$("div").before($("<p>第一段文本</p>"))
$("div").css("background","red");
})
</script>
</head>
<body>
<div id="" class="" bgcolor="red">
<p >段落文本</p>
</div>
</body>
</html>
运行效果如图：
特别注意：appendTo()、prependTo()、insertAfter()、insertBefore()四个方法具有破坏性操作的特性。
也就是说，假设选择已存在的内容并把他们插入到指定对象中，则原位
置的内容将被删除。
实例4-4：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 插入内容的破坏性 </title>
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("div").css("background","red");
})
</script>
</head>
<body>
<div id="" class="" bgcolor="red">
<p >段落文本</p>
</div>
</body>
</html>
运行效果：
加上一段js：
$("p").insertAfter($("div"))
运行效果例如以下：
三、使用jQuery删除元素
jQuery支持两种删除元素的方法：remove()和empty()。而DOM仅定义了与jQuery的remove()方法相应的removeChild()方法。
| 方法 | 说明 |
|---|---|
| remove() | 从DOM中删除全部的匹配的元素，也就是把本身都删除。 |
| empty() | 这个意义是清空。是清空内部，本身保留。 |
四、使用jQuery复制元素
jQuery定义了clone()方法用来复制节点，与之相应的DOM定义了cloneNote()方法实现同样的操作功能。
这个比較简单。看个样例得了：
实例4-5：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 使用jQuery复制元素 </title>
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var $tr=$("table tr:last").clone();
$tr.find("td").each(function(index,value){
$(this).text("第3行第"+(index+1)+'列')
})
$("table").append($tr)
})
</script>
</head>
<body>
<div id="" >
<table width="100%" border="1" cellpadding="2" cellspacing="0">
<tr>
<td>第1行第1列</td>
<td>第1行第2列</td>
</tr>
<tr>
<td>第2行第1列</td>
<td>第2行第2列</td>
</tr>
</table>
</div>
</body>
</html>
运行结果：
五、使用jQuery替换元素
jQuery定义了replaceWith()方法和replaceAll()方法用来替换节点，与之相应的DOM定义了replaceChild()方法实现同样的操作功能。只是他们的使用方法迥然不同。
replaceWith()方法可以将全部匹配的元素替换成指定的HTML或DOM元素。replaceAll()方法与之功能同样。可是操作相反，比如在下例中将全部的p元素替换为div元素
实例4-6：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> jQuery替换元素 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("p").replaceWith("<div>111</div>") //$("<div>111</div>").replaceAll($("p")) 与上面的效果同样
})
</script>
</head> <body>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
</body>
</html>
看一下它的DOM结构：
六、使用jQuery操作属性
jQuery和DOM都提供了元素属性的基本操作方法
1、设置属性
jQuery通常使用attr()方法来设置属性,而DOM定义了setAttribute()方法来设置元素的属性。
在使用jQuery提供的attr()方法的时候。须要为该方法设置两个參数值，各自是属性名和属性值。还能够用一个函数替换第二个參数（属性值）。用函数的返回结果充当属性值。
使用方法非常easy，比如：$("p").attr("title","段落文本");
2、获取属性
jQuery里还是用attr(),DOM里用getAttribute()。
当为attr()设置了一个參数值时，代表要获取这个属性的属性值，假设没有该属性，那么返回undefined。不用举例了，非常easy。也经经常使用。
3、删除属性
jQuery里定义的方法是removeAttr()方法删除指定的元素属性，DOM里定义的是removeAttribute()。
$("p").removeAttr("title");
七、jQuery操作类样式
在设计动态样式时，常常须要与元素的class属性打交道，该属性能够为元素定义样式。既然作为元素的属性。我们当然能够用上面介绍的attr()方法进行动态改动元素的class。
只是，jQuery为了开发人员方便操作。又单独定义了几个与class操作相关的方法。
1、追加样式 addClass
使用addClass方法前首先的定义好样式类。使用方法也非常easy。看个样例
实例4-7：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>addClass </title>
<style type="text/css">
.red{
color:red;/*红色字体样式*/
}
.bold{
font-weight:bold;/*加粗字体样式*/
}
.italic{
font-style:italic;/*倾斜字体样式*/
}
</style>
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(function(){
$("input").eq(0).click(function(){
$("p").addClass("red");
});
$("input").eq(1).click(function(){
$("p").addClass("bold");
})
$("input").eq(2).click(function(){
$("p").addClass("italic");
})
})
//-->
</script>
</head> <body>
<p>手握日月摘星辰,世间无我这般人</p>
<input type="button" value="红色" onclick="">
<input type="button" value="加粗" onclick="">
<input type="button" value="倾斜" onclick="">
</body>
</html>
运行前的效果和分别点击三个button后的变化如图：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2FvaGFpY2hlbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
2、移除样式removeClass()
用法大同小异。不做介绍了。
3、切换样式toggleClass()
样式切换在鼠标动态操作中很有用。在Web开发中诸如折叠、开关、伸缩、Tab切换等动态效果中都须要用到交互切换。jQuery为此定义了toggleClass()方法。该方法可用来
开/关指定类样式，从而实现切换类样式的目标。
jQuery的toggleClass()方法包括两个參数，第一个參数指定作为开关的类样式名称，第二个參数用来决定是否打开类样式。该參数为可选。
假设没有设置第二个參数，则
toggleClass()方法依据是否存在參数设置的样式，假设存在。就去除，否则追加。
实例4-8：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<style type="text/css">
.hidden{
display:none;
}
</style>
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(function(){
$("input").click(function(){
$("p").toggleClass("hidden")
})
})
//-->
</script>
</head>
<body>
<input type="button" value="切换样式" >
<p>手握日月摘星辰,世间无我这般人</p>
</body>
</html>
4、推断样式hasClass()
在过滤函数里总结过。不反复写了。
八、使用jQuery操作HTML、文本和值
就是经经常使用的html() text() val()
没有參数的时候是读取。有參数的时候是赋值。
版权声明：本文博主原创文章。博客，未经同意不得转载。
jQuery组织您钞四----jQuery操作DOM的更多相关文章
- 第四章 使用jQuery操作DOM
第四章 使用jQuery操作DOM 一.DOM操作 在jQuery中的DOM操作主要可分为样式操作.文本和value属性值操作.节点操作: 节点操作又包含属性操作.节点遍历和CSS-DOM操作. 其中 ...
- jQuery 第四章 实例方法 DOM操作之data方法
jquery 里面 的 data 方法比较重要, 所以成一个模块写: 首先, 得知道 data() 干嘛用的, 看淘宝上 有自定义的属性, 为data - 什么什么, 这是为了dom 跟数据有 ...
- Jquery选择器，操作DOM
刚接触jQuery,她真的是个好东西,操作DOM,修改样式,都很方便,主要获取DOM树的类和子代很方便. 今天用jq做了tab面包屑,不过用的是别人的代码,自己修改的,不错也做出来了,原理也有些明白, ...
- jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法
一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...
- jQuery系列 第七章 jQuery框架DOM操作
第七章 jQuery框架的选择器 jQuery框架继承和优化了JavaScript访问DOM对象的特性,我们使用jQuery框架提供的api可以更加方便的操作DOM对象. 7.1 创建DOM节点 使用 ...
- 原生JS和jQuery操作DOM的区别小结
一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...
- *jquery操作DOM总结 (原创：最全、最系统、实例展示)
jquery操作DOM包括八个方面: 一:jquery对DOM节点的基本操作:二:jquery对DOM节点的CSS样式操作:三:jquery遍历DOM节点:四:jquery创建DOM节点:五:jque ...
- jQuery学习之路（2）-DOM操作
▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看 ...
- jQuery操作DOM元素
作为一个后端程序员,也是要和前端页面打交道的.最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求.实现上述两个功能当然可以使用原生js来完成,但在实际开发过程中很少这样做,通常会使用 ...
随机推荐
- UVA11294-Wedding(2-SAT)
option=com_onlinejudge&Itemid=8&page=show_problem&problem=2269">题目链接 题意:有n对夫妻參加一 ...
- struts 1.x 原理
Struts 当我接触到这个框架的时候.我就在想为什么是struts,而不是什么CraigFramework.结构.支撑,这样来理解也不难怪了. 为什么须要struts? 在struts in act ...
- bitnami redmine 安装插件
https://wiki.bitnami.com/Applications/BitNami_Redmine_Stack#How_to_install_a_plugin_on_Redmine.3f 版权 ...
- A星寻路lua实现
他遇见了自己的主动性的需要找到它的项目的方式,我决定开始学习A明星,为A星我没有深究,它只能说是勉强获得需求.在此和大家分享一下.共同进步. A星有一个公式 f(x) = g(x) + h(x) ,这 ...
- Error opening zip file or JAR manifest missing : D:\play-1.2.5/framework/play-1.2.5.jar
play框架写的项目,在eclipse中导入.build-path中全部jar包都加入.执行程序,出现: Error occurred during initialization of VM agen ...
- nisi 脚本示例
只是简单的copy文件和添加快捷方式,安装和卸载时对程序是否运行进行检测 ;-------------------------------- ;Include Modern UI !include & ...
- ASP.NET MVC常见问题解决方法
1.页面报错: The following errors occurred while attempting to load the app. - No assembly found containi ...
- JavaScript之三：jQuery插件开发(一)
在早期的开发中,正如前面闭包中所提到的那样,人们一开始并没有意识到要开发出插件这么个玩意儿,都是遇到啥写啥.在长期的工作中,人们发现很多代码是重复的,写了一遍又一遍,以登录页面为例,每写一次都需要重新 ...
- R0-R37它是Arm 寄存器，那是，CPU内部。和GPIO注册所有外设。换句话说，要是arm的cpu，它包含了其他芯片公司将有R0-R37，和GPIO寄存器只有一个特定的芯片。
R0-R37它是Arm 寄存器.那是,CPU内部.和GPIO注册所有外设. 换句话说,要是arm的cpu,它包含了其他芯片公司将有R0-R37,和GPIO有. 版权声明:本文博主原创文章.博客,未经同 ...
- 使用Visual Studio 2010写Data Url生成工具C#版本
声明:本文系本人按照真实经历原创.未经许可,谢绝转载. 此文百度经验版本号:怎样用Visual Studio 2010打造Data Url生成工具 源代码下载:用Visual Studio 2010编 ...