Jquery之DOM操作 怼烎@ 2022-05-19 13:13 229阅读 0赞 # Jquery之DOM操作 # ### 一、DOM操作分类 ### ![70][] ### 二、操作示例 ### 1,属性操作 演示div: <table> <tbody> <tr> <td style="width:9px;"> <p>1</p> </td> <td style="width:1px;"> </td> <td> <p><div id="img_src"><img src="logo.png" alt=""/></div></p> </td> </tr> </tbody> </table> 操作按钮: <table> <tbody> <tr> <td style="width:3px;"> <p>1<br> 2<br> 3<br> 4<br> 5</p> </td> <td style="width:1px;"> </td> <td> <p><label for="">属性操作:</label><br> <span id="attr_get">获取属性:</span><br> <span id="attr_set">修改属性:</span><br> <span id="attr_remove">删除属性</span></p> </td> </tr> </tbody> </table> script代码: <table> <tbody> <tr> <td style="width:16px;"> <p>1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br> 10<br> 11<br> 12<br> 13<br> 14<br> 15<br> 16<br> 17</p> </td> <td style="width:7px;"> </td> <td> <p><script><br> $(function () { <br> // 属性操作 获取 <br> $("#attr_get").click(function(){ <br> alert($("#img_src img").attr("src"));<br> });<br> //设置<br> $("#attr_set").click(function(){ <br> $("#img_src img").attr("src",'shixue.png');<br> });<br> //删除<br> $("#attr_remove").click(function(){ <br> $("#img_src img").removeAttr("src");<br> });<br> <br> });<br> </script></p> </td> </tr> </tbody> </table> 2,节点内容获取 操作区域: <table> <tbody> <tr> <td> <p>1<br> 2<br> 3<br> 4<br> 5</p> </td> <td> </td> <td> <p><div id="node_get"><br> <div id="get_html"><h6>这里是带有h6的文本</h6></div><br> <div id="get_text"><h6>这里是带有h6的文本</h6></div><br> <input type="text" id="get_val" value="帅哥,约吗?"/><br> </div></p> </td> </tr> </tbody> </table> 操作按钮: <table> <tbody> <tr> <td> <p>1<br> 2</p> </td> <td> </td> <td> <p><label for="">节点内容的获取:</label><br> <span id="node_html">html:</span><span id="node_text">text:</span><span id="node_val">val</span></p> </td> </tr> </tbody> </table> script代码: <table> <tbody> <tr> <td style="width:9px;"> <p>1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br> 10<br> 11<br> 12<br> 13<br> 14<br> 15</p> </td> <td style="width:1.64px;"> </td> <td> <p><script><br> $(function () { <br> //get html text val<br> $("#node_html").click(function(){ <br> alert($("#get_html").html());<br> });<br> $("#node_text").click(function(){ <br> alert($("#get_text").text());<br> });<br> $("#node_val").click(function(){ <br> alert($("#get_val").val());<br> });<br> <br> });<br> </script></p> </td> </tr> </tbody> </table> 3,设置节点内容 操作区域: <table> <tbody> <tr> <td> <p>1<br> 2<br> 3<br> 4<br> 5</p> </td> <td> </td> <td> <p><div id="node_get"><br> <div id="get_html"><h6>这里是带有h6的文本</h6></div><br> <div id="get_text"><h6>这里是带有h6的文本</h6></div><br> <input type="text" id="get_val" value="帅哥,约吗?"/><br> </div></p> </td> </tr> </tbody> </table> 操作按钮: <table> <tbody> <tr> <td> <p>1</p> </td> <td> </td> <td> <p><span id="node_shtml">set html:</span><span id="node_stext">set text:</span><span id="node_sval">set val</span></p> </td> </tr> </tbody> </table> script代码: <table> <tbody> <tr> <td> <p>1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br> 10<br> 11<br> 12<br> 13<br> 14<br> 15</p> </td> <td> </td> <td> <p><script><br> $(function () { <br> // 设置 html text val<br> $("#node_shtml").click(function(){ <br> $("#get_html").html('<strong>man</strong>')<br> });<br> $("#node_stext").click(function(){ <br> $("#get_text").text('man')<br> });<br> $("#node_sval").click(function(){ <br> $("#get_val").val('不约!')<br> });<br> <br> });<br> </script></p> </td> </tr> </tbody> </table> 4,文档处理之append相关 操作区域: <table> <tbody> <tr> <td style="width:19px;"> <p>1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8</p> </td> <td style="width:11px;"> </td> <td> <p><div id="fabao"><br> <ul><br> <li>追妹子的三大法宝:</li><br> <li>坚持</li><br> <li>不要脸</li><br> <li>坚持不要脸</li><br> </ul><br> </div></p> </td> </tr> </tbody> </table> 操作按钮: <table> <tbody> <tr> <td> <p>1<br> 2<br> 3</p> </td> <td> </td> <td> <p><label for="">文档操作展示:</label><br> <span id="dom_add">追加[append][后面追加]</span><span id="dom_pre_add">追加[prepend][前面追加]</span><br> <span id="dom_to_add">追加到[appendTo][后面追加]</span><span id="dom_preto_add">追加到[prependTo][前面追加]</span></p> </td> </tr> </tbody> </table> script代码: <table> <tbody> <tr> <td> <p>1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br> 10<br> 11<br> 12<br> 13<br> 14<br> 15<br> 16<br> 17<br> 18<br> 19</p> </td> <td> </td> <td> <p><script><br> $(function () { <br> // 文档处理<br> $("#dom_add").click(function(){ <br> $("#fabao ul").append('<li>老师,有没有第四条?</li>');<br> });<br> $("#dom_pre_add").click(function(){ <br> $("#fabao ul").prepend('<li>老师,弱弱的问一下?</li>');<br> });<br> $("#dom_to_add").click(function(){ <br> //$("#fabao ul").append('<li>老师,有没有第四条?</li>');<br> $('<li>老师,有没有第四条?</li>').appendTo("#fabao ul");<br> });<br> $("#dom_preto_add").click(function(){ <br> $('<li>老师,弱弱的问一下?</li>').prependTo("#fabao ul");<br> });<br><br> });<br> </script></p> </td> </tr> </tbody> </table> 5,文档处理之after before相关 操作区域: <table> <tbody> <tr> <td style="width:6px;"> <p>1<br> 2<br> 3<br> 4<br> 5<br> 6</p> </td> <td style="width:1.96px;"> </td> <td> <p><div id="gongzi"><br> <ul><br> <li>老板?</li><br> <li>涨工资吗?</li><br> </ul><br> </div></p> </td> </tr> </tbody> </table> 操作按钮: <table> <tbody> <tr> <td> <p>1<br> 2</p> </td> <td> </td> <td> <p><span id="dom_after">追加[after][后面追加]</span><span id="dom_before">追加[before][前面追加]</span><br> <span id="dom_insert_after">追加到[insert after][后面追加]</span><span id="dom_insert_before">追加到[insert_before][前面追加]</span></p> </td> </tr> </tbody> </table> script代码: <table> <tbody> <tr> <td> <p>1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br> 10<br> 11<br> 12<br> 13<br> 14<br> 15<br> 16<br> 17<br> 18</p> </td> <td> </td> <td> <p><script><br> $(function () { <br> // after before<br> $("#dom_after").click(function(){ <br> $("#gongzi ul").after('<li>这个可以有!</li>');<br> });<br> $("#dom_before").click(function(){ <br> $("#gongzi ul").before('<li>嘿嘿</li>');<br> });<br> $("#dom_insert_after").click(function(){ <br> $('<li>这个可以有!</li>').insertAfter("#gongzi ul");<br> });<br> $("#dom_insert_before").click(function(){ <br> $('<li>嘿嘿</li>').insertBefore("#gongzi ul");<br> });<br><br> });<br> </script></p> </td> </tr> </tbody> </table> 6、wrap与unwrap操作 操作区域: <table> <tbody> <tr> <td style="width:2px;"> <p>1<br> 2<br> 3<br> 4<br> 5</p> </td> <td style="width:2.96px;"> </td> <td> <p><div id="baoguo"><br> <p>hello</p><br> <p>girls</p><br> <p>!</p><br> </div></p> </td> </tr> </tbody> </table> 操作按钮: <table> <tbody> <tr> <td style="width:1px;"> <p>1</p> </td> <td style="width:1px;"> </td> <td> <p><span id="dom_wrap">包裹[wrap] 操作</span><span id="dom_unwrap">去掉包裹[unwrap] 操作</span></p> </td> </tr> </tbody> </table> scrip代码: <table> <tbody> <tr> <td style="width:15px;"> <p>1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br> 10<br> 11<br> 12</p> </td> <td style="width:1.64px;"> </td> <td> <p><script><br> $(function () { <br> // wrap unwrap<br> $("#dom_wrap").click(function(){ <br> $("#baoguo p").wrap('<div style="color: #a52a2a;"></div>');<br> });<br> $("#dom_unwrap").click(function(){ <br> $("#baoguo p").unwrap('<div style="color: #a52a2a;"></div>');<br> });<br><br> });<br> </script></p> </td> </tr> </tbody> </table> 7、文档处理 empty remove clone 操作区域: <table> <tbody> <tr> <td style="width:26px;"> <p>1<br> 2<br> 3<br> 4<br> 5</p> </td> <td style="width:4px;"> </td> <td> <p><div id="shan"><br> <li id="node_empty">这个是 empty</li><br> <li id="node_remove">这个是 remove</li><br> <li id="node_clone">这个是 clone</li><br> </div></p> </td> </tr> </tbody> </table> 操作按钮: <table> <tbody> <tr> <td> <p>1</p> </td> <td> </td> <td> <p><span id="dom_empty">清空[empty]操作</span><span id="dom_remove">删除[remove]操作</span><span id="dom_clone">复制[clone]操作</span></p> </td> </tr> </tbody> </table> scrip代码: <table> <tbody> <tr> <td style="width:24px;"> <p>1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br> 10<br> 11<br> 12<br> 13<br> 14<br> 15</p> </td> <td style="width:1.64px;"> </td> <td> <p><script><br> $(function () { <br> // 文档处理 empty remove clone<br> $("#dom_empty").click(function(){ <br> $("#node_empty").empty();<br> });<br> $("#dom_remove").click(function(){ <br> $("#node_remove").remove();<br> });<br> $("#dom_clone").click(function(){ <br> alert($("#node_clone").clone().html());<br> });<br><br> });<br> </script></p> </td> </tr> </tbody> </table> 8、css 类的操作 操作区域: <table> <tbody> <tr> <td style="width:23px;"> <p>1<br> 2<br> 3</p> </td> <td style="width:1.96px;"> </td> <td> <p><div id="dom_class"><br> 这个是个展示区域<br> </div</p> </td> </tr> </tbody> </table> 操作按钮: <table> <tbody> <tr> <td> <p>1<br> 2<br> 3<br> 4</p> </td> <td> </td> <td> <p><style><br> .XXX{color: red;}<br> </style><br> <span id="dom_addClass">新增 .class</span><span id="dom_removeClass">删除 .class</span><span id="dom_toggleClass">反复 .class</span></p> </td> </tr> </tbody> </table> scrip代码: <table> <tbody> <tr> <td style="width:33px;"> <p>1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br> 10<br> 11<br> 12<br> 13<br> 14<br> 15</p> </td> <td style="width:3px;"> </td> <td> <p><script><br> $(function () { <br> //css 类的操作<br> $("#dom_addClass").click(function(){ <br> $("#dom_class").addClass('XXX');<br> });<br> $("#dom_removeClass").click(function(){ <br> $("#dom_class").removeClass('XXX');<br> });<br> $("#dom_toggleClass").click(function(){ <br> $("#dom_class").toggleClass('XXX');<br> });<br><br> });<br> </script></p> </td> </tr> </tbody> </table> 9、css 基础操作 操作区域: <table> <tbody> <tr> <td> <p>1</p> </td> <td> </td> <td> <p><div id="dom_css_set">这里是CSS的基础操作</div></p> </td> </tr> </tbody> </table> 操作按钮: <table> <tbody> <tr> <td> <p>1<br> 2</p> </td> <td> </td> <td> <p><label for="">css 普通操作</label><br> <span id="dom_css">普通的css编辑[color]</span><span id="dom_height">普通的css编辑[height]</span></p> </td> </tr> </tbody> </table> scrip代码: <table> <tbody> <tr> <td> <p>1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br> 10<br> 11<br> 12<br> 13</p> </td> <td> </td> <td> <p><script><br> $(function () { <br> // css 基础操作<br> $("#dom_css").click(function(){ <br> $("#dom_css_set").css('color','red');<br> $("#dom_css_set").css({border:"red solid 1px",height:"800px"});<br> });<br> $("#dom_height").click(function(){ <br> $("#dom_css_set").height('200px');<br> });<br> });<br> </script></p> </td> </tr> </tbody> </table> [70]: /images/20220519/67459a70e8f64660841721907ab5f1bf.png
还没有评论,来说两句吧...