碼上快樂

相關內容    簡體    繁體

jQuery-對標簽元素 文本操作-屬性操作-文檔的操作

本文轉載自   查看原文   2018-04-20 17:41   2217    JavaScript/ jQuery-對標簽元素 文本操作 屬性操作 文檔的操作

一、對標簽元素文本操作

1.1 對標簽中內容的操作

// js
var div1 = document.getElementById("div1");
div1.innerText
div1.innerHTML


//jQuery
var $div1 = $("#div1");
$div1.text()
$div1.html()
<!DOCTYPE html>
<html>
<head>
    <title>文本操作</title>
</head>
<body>
    <div id="div1">
        <p>
            我是div1下的p段落
        </p>
    </div>

    <script src="../jquery-3.3.1.js"></script>
    <script type="text/javascript">
        // 1.文本的獲取
        var div1 = document.getElementById("div1");
        console.log(div1.innerText);
        console.log(div1.innerHTML);

        var $div1 = $("#div1");
        console.log($div1.text());
        console.log($div1.html());
        // 2.給元素賦值一個文本   會覆蓋原來的標簽和內容
        div1.innerText = "哈哈";
        console.log(div1.innerText);
        div1.innerHTML="<span>哈哈</span>"
        console.log(div1.innerHTML);

        $div1.text("呵呵")
        console.log(div1.innerText);
        $div1.html("<span>呵呵</span>")
        console.log(div1.innerHTML);

    </script>
</body>
</html>
操作文本的demo

1.2 對表單文本值的操作

val()// 取得第一個匹配元素的當前值
val(val)// 設置所有匹配元素的值
val([val1, val2])// 設置checkbox、select的值
<!DOCTYPE html>
<html>
<head>
    <title>表單文本值的操作</title>
</head>
<body>
    <form>
        用戶名:<input type="text" name="" id="i1" value="hah ">
        密碼:<input type="password" name="">
        <input type="radio" name="gender" value="male" checked="checked">男
        <input type="radio" name="gender" value="female">女
        <input type="checkbox" name="hobby" value="basket" checked="checked">籃球
        <input type="checkbox" name="hobby" value="foot" checked="checked">足球
        <input type="checkbox" name="hobby" value="doublecolorball">雙色球
        <select multiple id="#s1">
            <option>1</option>
            <option selected="selected">2</option>
            <option selected="selected">3</option>
            <option>4</option>
        </select>

    </form>

    <script src="../jquery-3.3.1.js"></script>
    <script type="text/javascript">
        console.log($("input[name='gender']"));
        console.log($("input[name='gender']").val());
        console.log($("#i1").val());

        // 獲取多選的值    只會返回第一個選中的元素
        console.log($("input[name='hobby']:checked").val());


        // 獲取多個select值
        console.log($("#s1").val());
    </script>
</body>
</html>
對表單值的操作

二、對標簽元素屬性操作

用於id和自定義屬性:

attr(attrName)// 返回第一個匹配元素的屬性值
attr(attrName, attrValue)// 為所有匹配元素設置一個屬性值
attr({k1: v1, k2:v2})// 為所有匹配元素設置多個屬性值
removeAttr()// 從每一個匹配的元素中刪除一個屬性

代碼示例：

<!DOCTYPE html>
<html>
<head>
    <title>標簽屬性的操作</title>
    <style type="text/css">
        
    </style>
</head>
<body>
    <div class="div1">
        
    </div>
    <script src="../jquery-3.3.1.js"></script>
    <script type="text/javascript">
        // 1.獲取元素的屬性值
        console.log($(".div1").attr("class"));  //div1
        // 2.為元素設置一個屬性值
        $(".div1").attr("name","div1Style")
        console.log($(".div1").attr("name"));  // div1Style
        // 3.設置多個屬性值
        $(".div1").attr({"k1":"v1","k2":"v2"})
        console.log($(".div1").attr("k1"));
        console.log($(".div1").attr("k2"));
        // 4.刪除一個屬性
        $(".div1").removeAttr("k2");
        console.log($(".div1").attr("k2")); // undefined

    </script>
</body>
</html>
用於id等屬性的操作

用於radio和checkbox:

prop() // 獲取屬性
removeProp() // 移除屬性

示例：

<!DOCTYPE html>
<html>
<head>
    <title>標簽屬性的操作</title>
    <style type="text/css">
        
    </style>
</head>
<body>
    <div class="div1">
        
    </div>

    <form>
        <input type="radio" name="gender" value="male">男
        <input type="radio" name="gender" value="female">女
        <input type="checkbox" name="hobby" value="basket">籃球
        <input type="checkbox" name="hobby" value="foot">足球
        
    </form>

    <script src="../jquery-3.3.1.js"></script>
    <script type="text/javascript">
        // 1.獲取元素的屬性值
        console.log($(".div1").attr("class"));  //div1
        // 2.為元素設置一個屬性值
        $(".div1").attr("name","div1Style")
        console.log($(".div1").attr("name"));  // div1Style
        // 3.設置多個屬性值
        $(".div1").attr({"k1":"v1","k2":"v2"})
        console.log($(".div1").attr("k1"));
        console.log($(".div1").attr("k2"));
        // 4.刪除一個屬性
        $(".div1").removeAttr("k2");
        console.log($(".div1").attr("k2")); // undefined


        // 對於radio 和 checkbox
        //1.獲取一個屬性
        console.log($("input[name='gender']").prop("value"));
        console.log($("input[name='hobby']").prop("value"));
        console.log($("input[name='gender']").prop("k1","v1"));
        console.log($("input[name='hobby']").prop("k2","v2"));

        console.log($("input[name='gender']").prop("k1"));
        console.log($("input[name='hobby']").prop("k2"));

        $("input[name='gender']").removeProp("k1")
        $("input[name='hobby']").removeProp("k2")

        console.log($("input[name='gender']").prop("k1"));// undefined
        console.log($("input[name='hobby']").prop("k2"));// undefined
    </script>
</body>
</html>
radio和checkbox的屬性操作demo

 

三、對文檔的操作

由於jQuery沒有創建標簽的方式，只能通過DOM對象進行創建

var div = document.createElement("div")
// $(div) 的方式，將DOM對象轉化為jQuery對象

添加到指定元素內部的后面

$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B

添加到指定元素內部的前面

$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B

添加到指定元素外部的后面

$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面

添加到指定元素外部的前面

$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

 移除和清空節點

remove()// 從DOM中刪除所有匹配的元素。
empty()// 刪除匹配的元素集合中所有的子節點。
<!DOCTYPE html>
<html>
<head>
    <title>文檔的操作</title>
</head>
<body>

    <div class="div1">
        <ul class="ul1">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>


    <script src="../jquery-3.3.1.js"></script>
    <script type="text/javascript">
        // 1.添加到指定元素內部的后面
            // 1.首先創建一個元素，jQuery沒有創建元素的方法，只能通過DOM對象
            var p = document.createElement("p");
            p.innerText="我是一個段落，要添加到div1的內部所有元素的后面";// $(p).text("xxxx");
            $(".div1").append(p);
            $(".div1").append($(p));
        // 2.添加到指定元素的內部的前面

            var span = document.createElement("span");
            $(span).text("我是一個span，要添加到div1的內部所有元素的前面");
            $(".div1").prepend($(span));

        // 3.添加到指定元素外部的后面
            var div2 = document.createElement("div");
            $(div2).text("我是div2，我放在div1的后面");
            $(div2).attr("class","div2");
            $(".div1").after($(div2));  // div.after 是 div2
            $(div2).insertAfter($(".div1")) // 把div2 插入到 div1的后面
        // 4.添加到指定元素的外部的前面
            var div3 = document.createElement("div");
            $(div3).text("我是div3，我放在div1的前面");
            $(div3).insertBefore($(".div1")); // div3 插入到 div1 的前面
            $(".div1").before($(div3));// div1的前面是div3
        // 5.移除和清空元素
            $(".div2").remove();  // 從DOM中刪除所有匹配的元素。  刪除div2

             $(".div1").empty($(".ul1")); // 移除div1中的ul  
        // 替換
        // replaceWith() 
            var a = document.createElement("a");
            a.innerText="百度一下";
            $(".ul1").replaceWith($(a))  // 所有的 類名為 ul1的標簽都會被a替換
        //replaceAll()
            $(a).replaceAll($(".ul1"));  // 使用a 替換所有的 類名為ul1 的標簽



    </script>
</body>
</html>
文檔操作demo

克隆(clone)

<!DOCTYPE html>
<html>
<head>
    <title>克隆</title>
</head>
<body>

    <input type="button" name="" id="btn" value="克隆"/>
    <script src="../jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $("#btn").on("click",function() {
            // body...
            $(this).clone(true).insertAfter(this);
        })

    </script>
</body>
</html>

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 jquery-包裹元素 jquery對標簽屬性操作 jQuery-替換和刪除元素 用JQuery操作元素的style屬性 jquery-創建元素和添加子元素 JQuery：表單篩選器、篩選器方法、樣式操作、位置操作、尺寸相關、文本操作、屬性操作、文檔處理、克隆、事件等 jquery如何獲取標簽本生的文本內容，不獲取本身子級元素及子級元素的內容 jquery 移除標簽的某個屬性 JQuery 中this和$(this)獲取對象、操作DOM對象的元素屬性 jquery移除元素某個屬性
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM