jQuery DOM操作

對節點的操作

查找節點

查找節點可以直接利用jQuery選擇器來完成，非常便利。

插入節點

jQuery提供了8種插入節點的方法。

序号	方法	描述	執行個體
1	append()	向每個比對的元素内部追加内容。	HTML Code: <p>我想說：</p> jQuery Code: $("p").append("<b>你好</b>"); result: <p>我想說："<b>你好</b></p>
2	appendTo()	将所有比對的元素追加到指定的元素中。	HTML Code: $("<b>你好</b>").appendTo("p");
3	prepend()	向每個比對的元素内部前置内容。	$("p").prepend("<b>你好</b>"); <p><b>你好</b>我想說：</p>
4	prependTo()	将所有比對的元素前置到指定的元素中。	$("<b>你好</b>").prependTo("p");
5	after()	在每個比對的元素之後插入内容。	$("p").after("<b>你好</b>"); <p>我想說：</p><b>你好</b>
6	insertAfter()	将所有比對的元素插入到指定元素前面。	$("<b>你好</b>").insertAfter("p");
7	before()	在每個比對的元素之前插入内容。	$("p").before("<b>你好</b>"); <b>你好</b><p>我想說：</p>
8	insertBefore()		$("<b>你好</b>").insertBefore("p");

删除節點

jQuery提供了三種删除節點的方法，即remove()、detach()、empty()。

（1）remove()

删除DOM中所有比對的元素，可以傳入參數來篩選要删除的元素。

var $li = $("ul li:eq(1)").remove(); // 擷取第2個<li>元素節點後，将它删除
$li.appendTo("ul");                  // 将剛才删除的節點重新添加到<ul>元素中

$("ul li").remove("li[title!=鳳梨]");  //将<li>元素中title屬性不等于“鳳梨”的<li>元素删除

（2）detach()

detach()也是從DOM中去掉所有比對的元素。

需要注意的是，這個方法不會将比對的元素從jQuery對象中删除，其所有綁定的事件和附加資料可以保留下來。

如果将來再使用這個元素，相關事件和資料依然存在。

var $li = $("ul li:eq(1)").detach(); // 擷取第2個<li>元素節點後，将它删除
$li.appendTo("ul");                  // 重新追加此元素，發現它之前綁定的事件還在。
                                     // 如果使用remove()方法删除元素，那麼之前綁定的事件将會失效。

（3）empty()

清空元素中的所有後代節點。

$("ul").empty();

複制節點

可以使用clone()方法來複制節點。如果在clone方法中傳人參數true，表示複制元素的同時也複制元素中綁定的事件。

$(this).clone(true).appendTo("body");

替換節點

jQuery提供了replaceWith()和replaceAll()兩種方法來替換節點。

replaceWith()方法的作用是将所有比對的元素都替換成指定的HTML或DOM元素。

而replaceAll()和replaceWith()作用相同，隻是颠倒了操作。

$("p").replaceWith("<strong>你最不喜歡的水果是？</strong>");
("<strong>你最不喜歡的水果是？</strong>").replaceAll("p");

包裹節點

有時候需要把某個節點用其他标簽包裹起來，jQuery有三種方法：wrap()、wrapAll()、wrapInner()。

<strong title="你好">你好</strong>
<strong title="你好">你好</strong>

jQuery Code:

$("strong").wrap("<b></b>");  //用<b>标簽把<strong>元素包裹起來
/* 結果是：
<b><strong title="你好">你好</strong></b>
<b><strong title="你好">你好</strong></b>
*/

// wrapAll
$("strong").wrapAll("<b></b>");  //用<b>标簽把<strong>元素包裹起來
/* 結果是：
<b>
<strong title="你好">你好</strong>
<strong title="你好">你好</strong>
</b>
*/

// wrapInner
$("strong").wrapInner("<b></b>");  //用<b>标簽把<strong>元素包裹起來
/* 結果是：
<strong title="你好"><b>你好</b></strong>
*/

以上操作的範例代碼

jQuery DOM操作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
 <!--   引入jQuery -->
 <script src="../scripts/jquery.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
    $(function(){
        
        $("#findNode").click(function(){
            var content = $("#content").val();
            if ("" === $("#content").val()) {
                alert("請輸入内容");
                return;
            }
            
            var $ul = $("ul").children();
            for (var i = 0; i < $ul.length; i++) {
                var value = $ul[i].innerHTML;
                if (value === content) {
                    alert("是ul中第" + (i+1) + "個元素");
                    return;
                }
            }
            
            alert("不存在");
            $("#content").val("");
        });
        
        $("#insertNode").click(function(){
            var content = $("#content").val();
            if ("" === content) {
                alert("請輸入内容");
                return;
            }
            
            var $li = $("<li>" + content + "</li>");
            var $parent = $("ul");
            $parent.append($li);
            // $parent.prepend($li);
            
            $("#content").val("");
        });
        
        $("#removeNode").click(function(){
            var content = $("#content").val();
            if ("" === content) {
                alert("請輸入内容");
                return;
            }
            
            var $ul = $("ul").children();
            for (var i = 0; i < $ul.length; i++) {
                var value = $ul[i].innerHTML;
                if (value === content) {
                    //三種删除方式
                    $("ul li:eq(" + i + ")").remove();
                    //$("ul li:eq(" + i + ")").detach();
                    //$("ul li:eq(" + i + ")").empty();
                    $("#content").val("");
                    return;
                }
            }
            
            alert("不存在");
            $("#content").val("");
        });
        
        $("#copyNode").click(function(){
            var content = $("#content").val();
            if ("" === content) {
                alert("請輸入内容");
                return;
            }
            
            var $ul = $("ul").children();
            for (var i = 0; i < $ul.length; i++) {
                var value = $ul[i].innerHTML;
                if (value === content) {
                    //三種删除方式
                    $("ul li:eq(" + i + ")").clone(true).appendTo("ul");
                    $("#content").val("");
                    return;
                }
            }
            
            alert("不存在");
            $("#content").val("");
        });
        
        $("#replaceNode").click(function(){
            var content = $("#content").val();
            if ("" === content) {
                alert("請輸入内容");
                return;
            }
            
            var $new_li = $("<li>" + content + "</li>");
            
           $new_li.replaceAll("li");
           //$("li").replaceWith($new_li);
           $("#content").val("");
        });
    });
  //]]>
  </script>
</head>
<body>
    <p title="選擇你最喜歡的水果." >你最喜歡的水果是?</p>
    <ul>
      <li title='蘋果'>蘋果</li>
      <li title='橘子'>橘子</li>
      <li title='鳳梨'>鳳梨</li>
    </ul>
    <div>
        <label for="content" style="font: bold;">請先輸入内容，再點選想操作的按鈕</label>
        <input type='text' id='content' />
        <p></p>
        <input type="button" value="查找節點" id="findNode"/>
        <input type="button" value="插入節點" id="insertNode"/>
        <input type="button" value="删除節點" id="removeNode"/>
        <input type="button" value="複制節點" id="copyNode"/>
        <input type="button" value="替換節點" id="replaceNode"/>
    </div>
    
    
</body>
</html>

View Code

屬性操作

在jQuery中，用attr()方法來擷取和設定元素屬性，removeAttr()方法來删除元素屬性。

var title = $("p").attr("title"); //擷取p節點的title屬性值

$("p").removeAttr("title"); //删除p節點的title屬性值

$("p").attr("title", "New Content"); //設定p節點的title屬性值為New Content

$("p").attr({"title" : "New Content", "name" : "New Name",}); // 一次性設定p節點的多個屬性值

樣式操作


attr	擷取樣式和設定樣式	$("p").attr("class"); // 擷取p元素的class $("p").attr("class","high"); // 設定p元素的class為high
addClass	追加樣式	$("p").addClass("another"); //給p元素追加“another”類
removeClass	移除樣式	$("p").removeClass(); //移除p元素的所有class
toggleClass	切換樣式	$("p").toggleClass("another"); //重置切換類名"another"
hasClass	判斷是否有某個樣式	$("p").hasClass("another"); //判斷p元素是否有"another"類

範例代碼

jQuery DOM操作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-9-1</title>
<style type="text/css">
.high{
 font-weight:bold;   /* 粗體字 */
 color : red;        /* 字型顔色設定紅色*/
}
.another{
 font-style:italic;
 color:blue;
}
</style>
 <!--   引入jQuery -->
 <script src="../../scripts/jquery.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
  $(function(){
      //擷取樣式
      $("input:eq(0)").click(function(){
            alert( $("p").attr("class") );
      });
      //設定樣式
      $("input:eq(1)").click(function(){
            $("p").attr("class","high");
      });
      //追加樣式
      $("input:eq(2)").click(function(){
            $("p").addClass("another");
      });    
      //删除全部樣式
      $("input:eq(3)").click(function(){
            $("p").removeClass();
      });  
       //删除指定樣式
      $("input:eq(4)").click(function(){
            $("p").removeClass("high");
      });   
      //重複切換樣式
      $("input:eq(5)").click(function(){
            $("p").toggleClass("another");
      });  
      //判斷元素是否含有某樣式
      $("input:eq(6)").click(function(){
            alert( $("p").hasClass("another") )
            alert( $("p").is(".another") )
      });  
  });
  //]]>
  </script>
</head>
<body>
    <input type="button" value="輸出class類"/>
    <input type="button" value="設定class類"/>
    <input type="button" value="追加class類"/>
    <input type="button" value="删除全部class類"/>
    <input type="button" value="删除指定class類"/>
    <input type="button" value="重複切換class類"/>
    <input type="button" value="判斷元素是否含有某個class類"/>

    <p class="myClass" title="選擇你最喜歡的水果." >你最喜歡的水果是?</p>
    <ul>
      <li title='蘋果'>蘋果</li>
      <li title='橘子'>橘子</li>
      <li title='鳳梨'>鳳梨</li>
    </ul>
</body>
</html>

設定和擷取HTML、文本和值


html()	擷取和設定某個元素中的HTML内容	var p_html = $("p").html(); //擷取p元素的HTML代碼 $("p").html("<strong>Hello</strong>"); //設定p元素的HTML代碼
text()	擷取和設定某個元素中的文本内容	var p_txt = $("p").text(); //擷取p元素的文本内容 $("p").text("Hello"); //設定p元素的文本内容
val()	擷取和設定某個元素中的值	var txt_value = $(this).val(); //擷取this元素的值 $(this).text("Hello"); //設定this元素的值為Hello

jQuery DOM操作

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條