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

阿新 • • 發佈：2019-01-15

一、元素的建立新增和刪除

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() 方法。

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

語法：

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

3、元素的刪除

3.1、清除父元素中所有的子元素

語法1：

父元素.html("");

語法2：

父元素.empty();

3.2、清除單個子元素

語法：

子元素.remove();

二、元素 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

1、使用 val() 進行設定之後，在原始碼中 value 的值沒有改變，但是打印出來的值改變了。

2、使用 text() 行設定之後，在原始碼中 value 的值也改變了。

3、成對的標籤可以使用 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());

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

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

三、自定義屬性

1、attr

語法：

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

示例：

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

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

1、attr 方法主要操作元素的自定義屬性的，但是也可以操作元素的自帶屬性。但是操作元素是否選中的 checked 屬性時不合適。

2、操作元素的選中 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 那麼簡單，並且反覆操作多次易失效），幾乎不用。

2、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; 細線表格。

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

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

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

一、元素的建立新增和刪除 1、方式一：以物件的方式建立元素 append，appendTo ：在被選元素所有子元素的結尾插入內容（增加子元素）。 prepend，prependTo：在被選元素所有子元素的開頭插入元素（增加子元素）。 before：在當前被選元素之後插入內容（相當於增加兄弟元素）。 af

從零開始學 Web 之 jQuery（三）元素操作，鏈式程式設計，動畫方法

一、使用css操作元素樣式 1、常規寫法 $("#dv").css("width", "200px"); $("#dv").css("height", "100px"); $("#dv").css("background", "red"); 2、鏈式寫法 $("#dv").css("width", "20

從零開始學 Web 之 jQuery（二）獲取和操作元素的屬性

eight images idt 隱藏 lis 屬性 ner master lin 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔

從零開始學 Web 之 jQuery（六）為元素綁定多個相同事件，解綁事件

png 好用添加方式執行存在區別也會地址大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔博客園：http://ww

從零開始學 Web 之 jQuery（七）事件冒泡，事件參數對象，鏈式編程原理

eval uri turn 定位 return 也會否則 ont sele 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔博客

從零開始學 Web 之 jQuery（八）each，多庫共存，包裝集，外掛

一、each 方法 each 方法用來遍歷 jQuery 物件的，它的引數是一個事件處理函式，這個事件處理函式有兩個引數，第一個引數是索引，第二個引數時索引對應的 DOM 物件，使用的時候注意轉成 jQuery 物件。語法： // 引數1：元素集合索引 // 引數2：索引對應的DOM元素元素集合.ea

從零開始學 Web 之 jQuery（五）操作元素其他屬性，為元素繫結事件

一、操作元素的寬和高 1、方法一元素.css("width"); 元素.css("height"); 最後得到的是字串型別的，比如 200px。如果我們在設定為原來寬高2倍的時候，就要先把獲取的寬高轉換成數字型別，再乘以2，這樣操作比較麻煩，有沒有簡單的方法呢？ 2、方法二元素.width(屬性

從零開始學 Web 之 jQuery（七）事件冒泡，事件引數物件，鏈式程式設計原理

一、事件冒泡與阻止事件冒泡事件冒泡：當一個元素觸發某個事件的時候，會把這個事件傳播到其父元素，一直到頂層元素。阻止事件冒泡：在被觸發事件的子元素中新增 return false; 即可。二、事件的觸發之前講的繫結事件是事件觸發後的事件處理過程，並且上面的事件觸發是被動的事件觸發，怎麼可以主動觸發事

從零開始學 Web 之 jQuery（六）為元素繫結多個相同事件，解綁事件

一、為元素繫結多個相同事件 1、方式一 $("#btn").click(function () { console.log("click1"); }).click(function () { console.log("click2"); }).cli

從零開始學 Web 之 jQuery（一）jQuery的概念，頁面載入事件

一、jQuery的概念 1、什麼是 JavaScript 庫？ JavaScript 開發的過程中，處理瀏覽器的相容很複雜而且很耗時，於是一些封裝了這些操作的庫應運而生。這些庫還會把一些常用的程式碼進行封裝。把一些常用到的方法寫到一個單獨的 js 檔案，使用的時候直接去引用這js檔案就可以了，這個 js

從零開始學 Web 之 DOM（四）節點

def clas scrip while p標簽設置 ner 操作 text 大家好，這裏是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關註。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相

從零開始學 Web 之 BOM（四）client系列

一、client 系列 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style

從零開始學 Web 之 ES6（四）ES6基礎語法二

一、Promise Promise是一個物件，代表了未來某個將要發生的事件(，這個事件通常是一個非同步操作) 有了Promise物件, 可以將非同步操作以同步的流程表達出來, 避免了層層巢狀的回撥函式(俗稱'回撥地獄')。 ES6的Promise是一個建構函式, 用來生成promise例項。 1、prom

從零開始學 Web 之 JavaScript（四）陣列

大家好，這裡是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！一、陣列 1、陣列

從零開始學 Web 之 DOM（五）元素的建立

大家好，這裡是「從零開始學 Web 系列教程」，並在下列地址同步更新...... +------------------------------------------------------------ github：https://github.com/Daotin/Web 微信公眾號：Web前端之

從零開始學 Web 之 Ajax（四）介面文件，驗證使用者名稱唯一性案例

>大家好，這裡是「從零開始學 Web 系列教程」，並在下列地址同步更新...... > > - github：https://github.com/Daotin/Web > - 微信公眾號：[Web前端之巔](https://github.com/Daotin/pi

從零開始學 Web 之 HTML5（四）拖拽介面，Web儲存，自定義播放器

從零開始學 Web 之 CSS（四）CSS初始化、定位、overflow、標籤規範

大家好，這裡是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！一、CSS初始化

從零開始學 Web 之 CSS3（四）邊框圖片，過渡

一、邊框圖片邊框圖片：就是給邊框加圖片背景。我們之前加的邊框都是純顏色的邊框，那麼我們怎麼給邊框加圖片呢？原理：把一張圖片分成九宮格的形式，然後一一對應到需要新增邊框的元素上。並且，新增邊框圖片是以背景的方式新增的，所以會有可能文字覆蓋在邊框的情況，後面也會介紹處理方法。語法： /* bord

從零開始學 Web 之 Ajax（六）jQuery中的Ajax

var 技術分享 else parse cnblogs 我會 clas alt jquer 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web

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

一、元素的建立新增和刪除

1、方式一：以物件的方式建立元素

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

3、元素的刪除

二、元素 value 屬性的操作

三、自定義屬性

1、attr

2、prop

相關推薦