從零開始學 Web 之 jQuery（四）元素的建立添加與刪除，自定義屬性

你們好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新......

• github：https://github.com/Daotin/Web
• 微信公衆號：Web前端之巔
• 博客園：http://www.cnblogs.com/lvonve/
• CSDN：https://blog.csdn.net/lvonve/

在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的冒險之旅吧！

1、元素的建立添加和刪除

一、方式一：以對象的方式建立元素

• append，appendTo ：在被選元素全部子元素的結尾插入內容（增長子元素）。
• prepend，prependTo：在被選元素全部子元素的開頭插入元素（增長子元素）。
• before：在當前被選元素以後插入內容（至關於增長兄弟元素）。
• after：在當前被選元素以前插入內容（至關於增長兄弟元素）。

語法：

// 元素的建立
$("html代碼"); 
// $("<a herf='http://fengdaoting.com'>Daontin</a>")

// 元素的添加（被動）
父元素.append(子元素); // $("#dv").append($("<a>...</a>"));

// 元素的添加（主動）
子元素.appendTo(父元素); // $("<a>...</a>").appendTo($("#dv"));

案例：動態建立列表

<script>
    $("#btn1").click(function () {
        var ulObj = $("<ul></ul>");
        // 建立ul添加到div
        $("#dv").append(ulObj);

        // 建立li添加到ul，並設置鼠標進入離開事件
        $("<li>鳴人</li><li>卡卡西</li><li>佐助</li>").appendTo(ulObj).mouseenter(function () {
            $(this).css("backgroundColor","yellow");
        }).mouseleave(function () {
            $(this).css("backgroundColor","");
        });
    });
</script>

注意：獲取的元素經過 append 或者 appendTo 的方式添加到另外一個元素的時候，至關於剪切。若是要保留獲取的元素，能夠在 append 或者 appendTo 以前使用克隆 clone() 方法。

二、方式二：以字符串的方式建立元素

語法：

父元素.html("html代碼");
// $("#dv").html("<a herf='http://fengdaoting.com'>Dao</a>");

三、元素的刪除

3.一、清除父元素中全部的子元素

語法1：

父元素.html("");

語法2：

父元素.empty();

3.二、清除單個子元素

語法：

子元素.remove();

2、元素 value 屬性的操做

通常 val() 是獲取表單的 value 屬性；
val(值); 設置表單的 value 屬性。

示例1：獲取設置文本框value的值

<input type="text" value="text" id="txt">
 //------------------------------------------
<script>
    $("#btn1").click(function () {
        // 獲取文本框的value屬性值
        console.log($("#txt").val());
        // 設置文本框的value屬性值
        $("#txt").val("text2");
    });
</script>

示例2：獲取設置單選框value的值

<input type="radio" value="1" name="sex" id="nan">男
<input type="radio" value="2" name="sex">女
//-----------------------------------------------
console.log($("#nan").val());
$("#nan").val("3");

示例3：獲取設置複選框value的值

<input type="checkbox" value="1">吃飯
<input type="checkbox" value="2" id="c1">睡覺
<input type="checkbox" value="3">大豆豆
//---------------------------------------
console.log($("#c1").val());
$("#c1").val("33");

示例4：獲取設置文本域value的值

<textarea name="text" id="t1" cols="30" rows="10">
    等你下課
</textarea>
//------------------------------------------------
console.log($("#t1").val()); // 等你下課
$("#t1").val("Jay"); 
console.log($("#t1").val()); // Jay

// 成對的標籤可使用 text() 方法來獲取和設置
console.log($("#t1").text());// 等你下課
$("#t1").text("Jay");
console.log($("#t1").text());// Jay

一、使用 val() 進行設置以後，在源碼中 value 的值沒有改變，可是打印出來的值改變了。

二、使用 text() 行設置以後，在源碼中 value 的值也改變了。

三、成對的標籤可使用 text() 方法來獲取和設置，推薦使用 text();

示例5：獲取設置下拉框value的值

<select id="s1">
    <option value="1">op1</option>
    <option value="2">op2</option>
    <option value="3">op3</option>
    <option value="4">op4</option>
    <option value="5">op5</option>
</select>
//-----------------------------------
console.log($("#s1").val());
$("#s1").val("3");
console.log($("#s1").val());

一、獲取下拉框的 value 屬性，就是獲取 option 的 value 的值

二、設置下拉框的 value 屬性，就是選中相應 value 值的 option 標籤。

3、自定義屬性

一、attr

語法：

元素.attr("自定義屬性名"，"自定義屬性值");

示例：

<div id="dv"></div>
//-------------------------------------------
$("#dv").attr("hello","world"); //<div id="dv" hello="world"></div>

$("#dv").attr("id","box"); //<div id="box"></div>

一、attr 方法主要操做元素的自定義屬性的，可是也能夠操做元素的自帶屬性。可是操做元素是否選中的 checked 屬性時不合適。

二、操做元素的選中 checked 屬性，推薦使用 prop 方法。

自定義屬性的選中問題

元素.attr(); // 獲取某個元素是否被選中的狀態
元素.attr("checked",true); //設置某個元素爲選中

<input type="radio" value="1" name="sex"  id="r1">男
<input type="radio" value="2" name="sex">女
//-----------------------------------------------
console.log($("#r1").attr("checked"));
$("#r1").attr("checked", true);

PS：attr 方法針對單選框和複選框的是否選中問題操做複雜（選中返回值爲 checked，未選中返回值爲 undefined，不是直接顯示 true 或者 false 那麼簡單，而且反覆操做屢次易失效），幾乎不用。

二、prop

主要用於獲取元素的選中問題。

語法：

元素.prop("checked"); // 獲取這個元素是否選中
元素.prop("checked",true/false); // 設置這個元素選中或不選中

示例：

<input type="checkbox" value="1">吃飯
<input type="checkbox" value="2" id="c1">睡覺
<input type="checkbox" value="3">大豆豆
//--------------------------------------------
console.log($("#c1").prop("checked")); // false
$("#c1").prop("checked", true); // true

案例：全選與全不選

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        table {
            border-collapse: collapse;
        }

        td {
            width: 100px;
            height: 30px;
            background-color: #f8f8f8;
            border: 1px solid #7b7b7b;
            text-align: center;

        }

        .th td {
            background-color: #e95d71;
            color: #f8f8f8;
        }

        .little-td {
            width: 50px;
        }

    </style>
</head>
<body>
<div id="dv">
    <table class="table">
        <thead class="th">
        <tr>
            <td class="little-td"><input type="checkbox"></td>
            <td>Web技術</td>
        </tr>
        </thead>

        <tbody class="tb">
        <tr>
            <td class="little-td"><input type="checkbox"></td>
            <td>Web技術</td>
        </tr>
        <tr>
            <td class="little-td"><input type="checkbox"></td>
            <td>Web技術</td>
        </tr>
        <tr>
            <td class="little-td"><input type="checkbox"></td>
            <td>Web技術</td>
        </tr>
        <tr>
            <td class="little-td"><input type="checkbox"></td>
            <td>Web技術</td>
        </tr>
        </tbody>
    </table>
</div>


<script src="jquery-1.12.4.js"></script>
<script>
    // 設置總的複選框對子複選框的影響
    $(".th input").click(function () {
        $(".little-td input").prop("checked", $(this).prop("checked"));
    });

    // 設置每個子複選框事件
    $(".little-td input").click(function () {
        var childLength = $(".tb").find("input").length;//總的子複選框的個數
        var actualLength = $(".tb :checked").length;// 已經選中的子複選框的個數
        $(".th input").prop("checked", childLength === actualLength);
    });
</script>
</body>
</html>

0、border-collapse: collapse; 細線表格。

一、子類複選框的集合在 prop 和 click 中會自動遍歷操做。

二、var actualLength = $(".tb :checked").length; 中 .tb 和 :checked 中間有空格，表示的是 類 tb 下面的子元素集合中帶有 checked 的元素，而沒有空格表示，設置了類 tb 的全部元素集合中帶有 checked 的元素。一個是 tb 下面的子元素集合中，一個是 tb 自身元素集合中。