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>
|
