jQuery DOM

来源：互联网发布：轩辕剑天之痕进阶数据编辑：程序博客网时间：2024/04/28 04:39

方法

创建
格式：$(标签对).(内容)
说明：标签对可以直接写，也可以用document.createElement()生成
插入
1. 内插
  说明：在元素内部插入
  1. 头插
    格式：$(选择器).prepend(元素)
  2. 尾插
    格式：$(选择器).append(元素)
2. 外插
  说明：在元素的外部插入
  1. 前插
    格式：$(选择器).before(元素)
  2. 后插
    格式：$(选择器).after(元素)
删除
1. remove()
  说明：删除被选元素及其子元素
2. empty()
  说明：删除被选元素的子元素
替换
1. replaceAll()
  说明：替换元素
  用法：$(新的元素).replaceAll(被替换的元素);
2. replaceWith()
  说明：替换内容
  用法：$(被替换的元素).replaceWith(内容);
  注：内容若是不加标签，那么标签名相当于未定义，会显示为内联元素；若是加上标签基本等同于replaceAll

实例

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>jQuery DOM</title>        <script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript"></script>        <script type="text/javascript">            var count = 0;            function createNode(){/*创建节点*/                var sign = document.createElement("p");                var txt = $(sign).text(count);                count += 1;                return txt;            }            $(function(){                $("#create_button").click(function(){/*创建*/                    var sign = document.createElement($("#sign").val());                    var content = $("#content").val();                    var txt = $(sign).text(content);                    $("#create_container").append(txt);                });                $("#head_insert").click(function(){/*头插*/                    var txt = createNode();                    $("#boundary").prepend(txt);                });                $("#tail_insert").click(function(){/*尾插*/                    var txt = createNode();                    $("#boundary").append(txt);                });                $("#before_insert").click(function(){/*前插*/                    var txt = createNode();                    $("#boundary").before(txt);                });                $("#after_insert").click(function(){/*后插*/                    var txt = createNode();                    $("#boundary").after(txt);                });                $("#clear").click(function(){/*清空*/                    var txt = createNode();                    $("#boundary").empty();                });                $("#delete_button").click(function(){/*删除*/                    $("#remove_container p").remove();                });                $("#replace_element").click(function(){/*替换a元素*/                    $("<h5>新的元素</h5>").replaceAll("#replace_container a");                });                $("#replace_content1").click(function(){/*替换p1内容*/                    $("#replace_p1").replaceWith("新的内容");/*若是不加标签，那么标签名相当于未定义，会显示为内联元素*/                });                $("#replace_content2").click(function(){/*替换p2内容*/                    $("#replace_p2").replaceWith("<h5>新的内容</h5>");/*加上标签基本等同于replaceAll*/                });            });        </script>    </head>    <body>        <div id="create_container">            <h3>创建节点</h3>            <input id="sign" placeholder="请输入标签名" value=""></input><br/>            <input id="content" placeholder="请输入内容" value=""></input><br/>            <input type="button" value="创建" id="create_button"></input>        </div>        <hr/>        <div id="insert_container">            <h3>插入节点</h3>            <input type="button" value="头插" id="head_insert"></input>            <input type="button" value="尾插" id="tail_insert"></input>            <input type="button" value="指定前插" id="before_insert"></input>            <input type="button" value="指定后插" id="after_insert"></input>            <input type="button" value="清空p" id="clear"></input>            <div id="connect_container">                <div id="boundary" style="background-color:yellow;height:200px;width:200px;">*-分界区域-*</div>            </div>        </div>        <hr/>        <div id="remove_container">            <h3>删除节点</h3>            <p>p1</p>            <a>a</a>            <p>p2</p>            <lable style="display:block">l1</lable><!-- 内联元素转换为块元素 -->            <input type="button" value="删除所有p" id="delete_button"></input>        </div>        <hr/>        <div id="replace_container">            <h3>替换节点</h3>            <p id="replace_p1">p1</p>            <a>a</a>            <p id="replace_p2">p2</p>            <input type="button" value="替换a元素" id="replace_element"></input>            <input type="button" value="替换p1的内容" id="replace_content1"></input>            <input type="button" value="替换p2的内容" id="replace_content2"></input>        </div>    </body></html>

0 0