jQuery节点操作

jQuery 节点操作

1、创建结点

1.1 `html()` 设置或获取内容

html() 方法可用于设置或获取元素的 HTML 内容。

不传参：获取对应元素的所有内容，包括 HTML 标签和文本。

$("#btn01").click(function () {
    var val = $('#box').html();
    console.log(val);
});

传参：设置内容，会覆盖原来的内容。若设置的内容包含标签，会解析标签。

$("#btn01").click(function () {
    $("#box").html("我是 html 设置的内容<h1>百度</h1>");
});

1.2 `$()` 创建元素

使用 $() 能创建元素，但创建的元素仅存在于内存中，若要在页面显示，需进行追加操作。

$("#btn02").click(function () {
    // 创建结点
    var $h1 = $('<h1>标题</h1>');
    // 追加节点
    $("#box").append($h1);
});

案例：添加表格

以下是一个完整的 HTML 文件示例，展示如何使用 html() 和 $() 方法添加表格数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>添加表格</title>
    <style>
        table {
            border-spacing: 0;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="btn01">获取数据</button>
    <br /><br />
    <table border="1px">
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>住址</th>
            </tr>
        </thead>
        <tbody id="tbody">
            <!-- <tr>
                <td>01</td>
                <td>孙悟空</td>
                <td>男</td>
                <td>花果山</td>
            </tr> -->
        </tbody>
    </table>
    <script>
        $(function () {
            var data = [
                {
                    id: 01,
                    name: "孙悟空",
                    sex: "男",
                    address: "花果山"
                },
                {
                    id: 02,
                    name: "猪八戒",
                    sex: "男",
                    address: "高老庄"
                },
                {
                    id: 03,
                    name: "沙悟净",
                    sex: "男",
                    address: "通天河"
                }
            ];

            $("#btn01").click(function () {
                // 第一种 html() 添加方式
                var list = [];
                for (var i = 0; i < data.length; i++) {
                    // 生成 tr
                    list.push("<tr>");
                    // 生成 td
                    for (var key in data[i]) {
                        list.push("<td>");
                        list.push(data[i][key]);
                        list.push("</td>");
                    }
                    list.push("</tr>");
                }
                var listText = list.join('');
                $('#tbody').html(listText);

                // 第二种方式  $() 添加方式
                /*   for (var i = 0; i < data.length; i++) {
                      var $tr = $("<tr><td>" + data[i]["id"] + "</td><td>" + data[i]["name"] + "</td><td>" + data[i]["sex"] + "</td><td>" + data[i]["address"] + "</td></tr>");
                      $("#tbody").append($tr);
                  } */
            });
        });
    </script>
</body>
</html>

2、添加结点

2.1 `父元素.append(子元素)`

在被选元素的结尾插入内容。若子元素已存在，会将其剪切到父元素末尾作为最后一个子元素。

$("#append").click(function () {
    var $h1 = $("<h1>一级标题</h1>");
    $("ul").append($h1);
});

2.2 `父元素.prepend()`

在被选元素的开头插入内容。若子元素已存在，会将其剪切到父元素开头作为第一个子元素。

$("#prepend").click(function () {
    var $h1 = $("<h1>一级标题</h1>");
    $("ul").prepend($h1);
});

2.3 `元素A.before(元素B)`

把元素 A 插入到元素 B 的前面，作为兄弟元素添加。

$("#before").click(function () {
    var $h1 = $("<h1>一级标题</h1>");
    $("#oltwo").before($h1);
});

2.4 `元素A.after(元素B)`

把元素 A 插入到元素 B 的后面，作为兄弟元素添加。

$("#after").click(function () {
    var $h1 = $("<h1>一级标题</h1>");
    $("#oltwo").after($h1);
});

2.5 `子元素.appendTo(父元素)`

把子元素作为父元素的最后一个元素添加。

$("#appendTo").click(function () {
    var $h1 = $("<h1>一级标题</h1>");
    $h1.appendTo("ol");
});

2.6 `子元素.prependTo(父元素)`

把子元素作为父元素的第一个元素添加。

$("#prependTo").click(function () {
    var $h1 = $("<h1>一级标题</h1>");
    $h1.prependTo("ol");
});

案例：城市选择

以下是一个完整的 HTML 文件示例，展示如何使用节点添加方法实现城市选择功能。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>城市选择</title>
    <style>
        select {
            width: 200px;
            background-color: teal;
            height: 200px;
            font-size: 20px;
        }
        .btn-box {
            width: 30px;
            display: inline-block;
            vertical-align: top;
        }
    </style>
</head>
<body>
    <h1>城市选择：</h1>
    <select id="src-city" name="src-city" multiple>
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">深圳</option>
        <option value="4">广州</option>
        <option value="5">西红柿</option>
    </select>
    <div class="btn-box">
        <!-- 实体字符 -->
        <button id="btn-sel-all"> &gt;&gt; </button>
        <button id="btn-sel-none"> &lt;&lt; </button>
        <button id="btn-sel"> &gt;</button>
        <button id="btn-back"> &lt; </button>
    </div>
    <select id="tar-city" name="tar-city" multiple></select>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(function () {
            // 1. 全部到右边
            // 找到左边 select 下拉菜单的所有 option 项，把这些 option 项都添加到右边的 select 下拉菜单中去。
            $('#btn-sel-all').click(function () {
                $('#src-city>option').appendTo($('#tar-city'));
            });

            // 2. 全部到左边
            // 找到右边 select 下拉菜单中的所有 option 项，把这些 option 项都添加到左边的 select 下拉菜单中去。
            $('#btn-sel-none').click(function () {
                $('#tar-city>option').appendTo($('#src-city'));
            });

            // 3. 选中的到右边。
            // 找到左边 select 下拉菜单中，被选中的 option 项， 把这些 option 项添加到右边的 select 下拉菜单中。
            $('#btn-sel').click(function () {
                $('#src-city>option:selected').appendTo($('#tar-city'));
            });

            // 4. 选中的到左边。
            // 找到右边 select 下拉菜单中，被选中的 option 项，把这些 option 项添加到左边的 select 下拉菜单中。
            $('#btn-back').click(function () {
                $('#tar-city>option:selected').appendTo($('#src-city'));
            });
        });
    </script>
</body>
</html>

3、清空结点与删除结点

3.1 `empty()`

清空指定节点的所有子元素，自身保留。推荐使用，会清除子元素上绑定的内容和源码。

$('div').empty();

3.2 `html('')`

使用 html() 方法清空元素，不推荐使用，会造成内存泄漏，绑定的事件不会被清除。

$('div').html('');

3.3 `remove()`

相对于 empty()，remove() 会将元素自身也删除。

$("#l2").remove();

4、克隆结点

clone() 方法用于克隆节点，克隆的节点只存在于内存中，若要在页面显示，需添加到页面。
clone(参数) 参数是布尔值，true 或 false，默认是 false。

true：表示会把事件一起克隆。
false：不会克隆事件。

$("#btn01").click(function () {
    // 克隆 h1
    var $h1 = $("h1").clone(true);
    // 把克隆 h1 放到 body 中
    $("body").append($h1);
});

5、`val()` 获取表单元素内容

val() 方法可用于获取或设置表单元素的内容。

不给参数：获取表单的内容。

$("#inp1").click(function () {
    var text = $("#usename").val();
    console.log(text);
});

给参数：设置表单的内容。

$("#inp1").click(function () {
    $("#usename").val('hello world');
});

jQuery节点操作

jQuery 节点操作

1、创建结点

1.1 html() 设置或获取内容

1.2 $() 创建元素

案例：添加表格

2、添加结点

2.1 父元素.append(子元素)

2.2 父元素.prepend()

2.3 元素A.before(元素B)

2.4 元素A.after(元素B)

2.5 子元素.appendTo(父元素)

2.6 子元素.prependTo(父元素)