1. 程式人生 > >jQuery---JQuery remove(),removeAttr()和removeClass()示例區別

jQuery---JQuery remove(),removeAttr()和removeClass()示例區別

JQuery remove()方法
remove()方法與detach()方法相同,它從DOM中刪除所選元素,包括所有文字和子節點。但是,它不會將與DOM中匹配的元素集合中的已刪除元素相關聯的所有資料和事件完全保留。它恢復元素資料,而不是其事件處理程式。與元素關聯的所有事件和資料都將被刪除。

JQuery Remove()語法
$(selector).remove();
它不包含任何引數。

JQuery Remove()示例

<!doctype html>
<head>
<title>JQuery Remove Method</title
>
<script src="/引入/jquery-1.11.0.min.js"></script> </head> <h2>JQuery Remove Method Example</h2> <script type="text/javascript">` $(document).ready(function(){ $("button").click(function(){ $("h3,h4").remove(); }); }); </script> <body>
<button>Click to remove the elements</button> <h3>Hello world!!!</h3> <h4>Welcome to JQuery!!!</h4> </body> </html>
  • 如上面的程式所示,我們使用$(document).ready中的程式碼,它是一個在文件準備就緒時觸發的事件。一旦頁面文件物件模型準備好執行
  • JavaScript程式碼,它將執行。 $(“button”)。click(function())行定義點選按鈕時發生的點選事件。
  • $(“H3,H4”)刪除()。行定義了從DOM中刪除所選元素的remove()方法。
  • 當我們執行上述指令碼時,瀏覽器上將出現一個按鈕。如果我們點選按鈕,所有元素都將從DOM中刪除。

當您執行上述示例時,您將獲得以下輸出:
執行前

執行後
這裡寫圖片描述

JQuery removeAttr()方法

它用於從匹配元素集合中的所選元素中刪除屬性。它使用可以直接在jQuery物件上呼叫的removeAttribute()函式。它將刪除在removeAttr()方法的引數中指定的屬性。

JQuery removeAttr()語法

$(selector).removeAttr(attribute);
它包含稱為attribute的引數是必需引數,它指定要刪除的一個或多個屬性。

JQuery removeAttr()示例

<!doctype html>
<head>
<title>JQuery Remove Attribute</title>
<script src="/引入/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Remove Attribute Example</h2>
<script type="text/javascript">
   $(document).ready(function(){
      $("#myattribute").click(function(){
        $("h4").removeAttr("style");
      });
   });
</script>
<body>
       <button id="myattribute">Remove the attribute</button>
        <h4 style="background:orange;">Welcome to JQuery!!!!</h4>
</body>
</html>
  • 如上面的程式所示,我們使用$(document).ready中的程式碼,它是一個在文件準備就緒時觸發的事件。一旦頁面文件物件模型準備好執行JavaScript程式碼,它將執行。
  • $(“#myattribute”)。click(function())語句定義單擊按鈕時發生的點選事件。
  • $(“H4”)removeAttr(“風格”)。行定義了removeAttr()方法從所選元素中刪除屬性。在這裡,它將刪除在h4標籤中指定的樣式屬性。
  • 執行上述指令碼後,一個按鈕將在瀏覽器上顯示。當您點選按鈕時,它將從所選元素中刪除該屬性。點選按鈕之前,該行的背景顏色將為橙色。當您點選按鈕時,背景顏色將被刪除。

當您執行上述示例時,您將獲得以下輸出:
執行前:
這裡寫圖片描述
執行後:
這裡寫圖片描述

JQuery removeClass()方法

JQuery提供了一個名為removeClass()的方法來從匹配元素集中的選定元素中刪除CSS類。在引數中定義的類名稱將從所選元素中刪除。假設沒有定義類名,那麼它將從DOM中刪除所有的類。

JQuery removeClass()語法

$(selector).removeClass(classname);
它具有稱為classname的引數是必需引數,它從每個匹配元素中刪除一個或多個css類。

JQuery removeClass()示例

<!doctype html>
<head>
<title>JQuery Remove Class</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Remove Class Example</h2>
<style type="text/css">
   .highlight
   {
      background:green;
   }
</style>
<script type="text/javascript">
   $(document).ready(function(){
      $("#myremoveclass").click(function(){
        $("h4").removeClass("highlight");
      });
   });
</script>
<body>
       <button id="myremoveclass">Remove Class</button>
        <h4 class="highlight">Welcome to JQuery!!!!</h4>
</body>
</html>
  • 如上面的程式所示,我們使用$(document).ready中的程式碼,它是一個在文件準備就緒時觸發的事件。一旦頁面文件物件模型準備好執行JavaScript程式碼,它將執行。
  • $(“#myremoveclass”)。click(function())語句定義單擊按鈕時發生的點選事件。
  • $(“H4”)removeClass(“高亮”)。行定義了從所選元素中刪除CSS類的removeClass()方法。在這裡,它將從DOM中刪除名為highlight的類。
  • 該亮點類包含的背景顏色為綠色行歡迎JQuery的!!!!
    當您執行上述指令碼時,瀏覽器上將顯示一個按鈕。當您點選按鈕時,它將從所選元素中刪除該類。

當您執行上述示例時,您將獲得以下輸出:
執行前:
這裡寫圖片描述
執行後:
這裡寫圖片描述