Jquery之DOM操作
一、DOM操作分类
二、操作示例
1，属性操作
演示div：
|
1
| |
<div id="img_src"><img src="logo.png" alt=""/></div>
|
操作按钮：
|
1
2
3
4
5
| |
<label for="">属性操作：</label>
<span id="attr_get">获取属性：</span>
<span id="attr_set">修改属性:</span>
<span id="attr_remove">删除属性</span>
|
script代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| |
<script>
$(function () {
// 属性操作 获取
$("#attr_get").click(function(){
alert($("#img_src img").attr("src"));
});
//设置
$("#attr_set").click(function(){
$("#img_src img").attr("src",'shixue.png');
});
//删除
$("#attr_remove").click(function(){
$("#img_src img").removeAttr("src");
});
});
</script>
|
2，节点内容获取
操作区域：
|
1
2
3
4
5
| |
<div id="node_get">
<div id="get_html"><h6>这里是带有h6的文本</h6></div>
<div id="get_text"><h6>这里是带有h6的文本</h6></div>
<input type="text" id="get_val" value="帅哥，约吗？"/>
</div>
|
操作按钮：
|
1
2
| |
<label for="">节点内容的获取：</label>
<span id="node_html">html:</span><span id="node_text">text:</span><span id="node_val">val</span>
|
script代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| |
<script>
$(function () {
//get html text val
$("#node_html").click(function(){
alert($("#get_html").html());
});
$("#node_text").click(function(){
alert($("#get_text").text());
});
$("#node_val").click(function(){
alert($("#get_val").val());
});
});
</script>
|
3，设置节点内容
操作区域：
|
1
2
3
4
5
| |
<div id="node_get">
<div id="get_html"><h6>这里是带有h6的文本</h6></div>
<div id="get_text"><h6>这里是带有h6的文本</h6></div>
<input type="text" id="get_val" value="帅哥，约吗？"/>
</div>
|
操作按钮：
|
1
| |
<span id="node_shtml">set html:</span><span id="node_stext">set text:</span><span id="node_sval">set val</span>
|
script代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| |
<script>
$(function () {
// 设置 html text val
$("#node_shtml").click(function(){
$("#get_html").html('<strong>man</strong>')
});
$("#node_stext").click(function(){
$("#get_text").text('man')
});
$("#node_sval").click(function(){
$("#get_val").val('不约！')
});
});
</script>
|
4，文档处理之append相关
操作区域：
|
1
2
3
4
5
6
7
8
| |
<div id="fabao">
<ul>
<li>追妹子的三大法宝：</li>
<li>坚持</li>
<li>不要脸</li>
<li>坚持不要脸</li>
</ul>
</div>
|
操作按钮：
|
1
2
3
| |
<label for="">文档操作展示：</label>
<span id="dom_add">追加[append][后面追加]</span><span id="dom_pre_add">追加[prepend][前面追加]</span>
<span id="dom_to_add">追加到[appendTo][后面追加]</span><span id="dom_preto_add">追加到[prependTo][前面追加]</span>
|
script代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| |
<script>
$(function () {
// 文档处理
$("#dom_add").click(function(){
$("#fabao ul").append('<li>老师，有没有第四条？</li>');
});
$("#dom_pre_add").click(function(){
$("#fabao ul").prepend('<li>老师，弱弱的问一下？</li>');
});
$("#dom_to_add").click(function(){
//$("#fabao ul").append('<li>老师，有没有第四条？</li>');
$('<li>老师，有没有第四条？</li>').appendTo("#fabao ul");
});
$("#dom_preto_add").click(function(){
$('<li>老师，弱弱的问一下？</li>').prependTo("#fabao ul");
});
});
</script>
|
5，文档处理之after before相关
操作区域：
|
1
2
3
4
5
6
| |
<div id="gongzi">
<ul>
<li>老板？</li>
<li>涨工资吗？</li>
</ul>
</div>
|
操作按钮：
|
1
2
| |
<span id="dom_after">追加[after][后面追加]</span><span id="dom_before">追加[before][前面追加]</span>
<span id="dom_insert_after">追加到[insert after][后面追加]</span><span id="dom_insert_before">追加到[insert_before][前面追加]</span>
|
script代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| |
<script>
$(function () {
// after before
$("#dom_after").click(function(){
$("#gongzi ul").after('<li>这个可以有！</li>');
});
$("#dom_before").click(function(){
$("#gongzi ul").before('<li>嘿嘿</li>');
});
$("#dom_insert_after").click(function(){
$('<li>这个可以有！</li>').insertAfter("#gongzi ul");
});
$("#dom_insert_before").click(function(){
$('<li>嘿嘿</li>').insertBefore("#gongzi ul");
});
});
</script>
|
6、wrap与unwrap操作
操作区域：
|
1
2
3
4
5
| |
<div id="baoguo">
<p>hello</p>
<p>girls</p>
<p>!</p>
</div>
|
操作按钮：
|
1
| |
<span id="dom_wrap">包裹[wrap] 操作</span><span id="dom_unwrap">去掉包裹[unwrap] 操作</span>
|
scrip代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
| |
<script>
$(function () {
// wrap unwrap
$("#dom_wrap").click(function(){
$("#baoguo p").wrap('<div style="color: #a52a2a;"></div>');
});
$("#dom_unwrap").click(function(){
$("#baoguo p").unwrap('<div style="color: #a52a2a;"></div>');
});
});
</script>
|
7、文档处理 empty remove clone
操作区域：
|
1
2
3
4
5
| |
<div id="shan">
<li id="node_empty">这个是 empty</li>
<li id="node_remove">这个是 remove</li>
<li id="node_clone">这个是 clone</li>
</div>
|
操作按钮：
|
1
| |
<span id="dom_empty">清空[empty]操作</span><span id="dom_remove">删除[remove]操作</span><span id="dom_clone">复制[clone]操作</span>
|
scrip代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| |
<script>
$(function () {
// 文档处理 empty remove clone
$("#dom_empty").click(function(){
$("#node_empty").empty();
});
$("#dom_remove").click(function(){
$("#node_remove").remove();
});
$("#dom_clone").click(function(){
alert($("#node_clone").clone().html());
});
});
</script>
|
8、css 类的操作
操作区域：
|
1
2
3
| |
<div id="dom_class">
这个是个展示区域
</div
|
操作按钮：
|
1
2
3
4
| |
<style>
.XXX{color: red;}
</style>
<span id="dom_addClass">新增 .class</span><span id="dom_removeClass">删除 .class</span><span id="dom_toggleClass">反复 .class</span>
|
scrip代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| |
<script>
$(function () {
//css 类的操作
$("#dom_addClass").click(function(){
$("#dom_class").addClass('XXX');
});
$("#dom_removeClass").click(function(){
$("#dom_class").removeClass('XXX');
});
$("#dom_toggleClass").click(function(){
$("#dom_class").toggleClass('XXX');
});
});
</script>
|
9、css 基础操作
操作区域：
|
1
| |
<div id="dom_css_set">这里是CSS的基础操作</div>
|
操作按钮：
|
1
2
| |
<label for="">css 普通操作</label>
<span id="dom_css">普通的css编辑[color]</span><span id="dom_height">普通的css编辑[height]</span>
|
scrip代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
| |
<script>
$(function () {
// css 基础操作
$("#dom_css").click(function(){
$("#dom_css_set").css('color','red');
$("#dom_css_set").css({border:"red solid 1px",height:"800px"});
});
$("#dom_height").click(function(){
$("#dom_css_set").height('200px');
});
});
</script>
|
本文详细介绍使用JQuery进行DOM操作的方法，包括属性操作、节点内容获取与设置、文档处理等，通过具体示例帮助读者掌握JQuery在网页动态交互中的应用。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
