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