jQuery html

亦世發表於2018-06-21
jQueryHTML

jQuery - 獲得內容和屬性

DOM = Document Object Model（文件物件模型）

DOM 定義訪問 HTML 和 XML 文件的標準：

獲得內容 - text()、html() 以及 val()

三個簡單實用的用於 DOM 操作的 jQuery 方法：

  • text() - 設定或返回所選元素的文字內容
  • html() - 設定或返回所選元素的內容（包括 HTML 標記）
  • val() - 設定或返回表單欄位的值

$(document).ready(function(){

 $("#btn1").click(function(){

 alert("Text: " + $("#test").text());

 });

 $("#btn2").click(function(){

 alert("HTML: " + $("#test").html()); 

 });

 });


獲取屬性 - attr()

jQuery attr() 方法用於獲取屬性值。

下面的例子演示如何獲得連結中 href 屬性的值：

例項

$("button").click(function(){
  alert($("#w3s").attr("href"));
});複製程式碼

jQuery - 設定內容和屬性

例項

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});複製程式碼

jQuery - 新增元素

新增新的 HTML 內容

我們將學習用於新增新內容的四個 jQuery 方法：

  • append() - 在被選元素的結尾插入內容  （元素裡）
  • prepend() - 在被選元素的開頭插入內容   （元素裡）
  • after() - 在被選元素之後插入內容（元素外）
  • before() - 在被選元素之前插入內容（元素外）

jQuery - 刪除元素

刪除元素/內容

如需刪除元素和內容，一般可使用以下兩個 jQuery 方法：

  • remove() - 刪除被選元素（及其子元素）
  • empty() - 從被選元素中刪除子元素

過濾被刪除的元素

jQuery remove() 方法也可接受一個引數，允許您對被刪元素進行過濾。

該引數可以是任何 jQuery 選擇器的語法。

下面的例子刪除 class="italic" 的所有 <p> 元素：

例項

$("p").remove(".italic");
複製程式碼

jQuery - 獲取並設定 CSS 類

jQuery 操作 CSS

jQuery 擁有若干進行 CSS 操作的方法。我們將學習下面這些：

  • addClass() - 向被選元素新增一個或多個類
  • removeClass() - 從被選元素刪除一個或多個類
  • toggleClass() - 對被選元素進行新增/刪除類的切換操作
  • css() - 設定或返回樣式屬性

jQuery css() 方法

css() 方法設定或返回被選元素的一個或多個樣式屬性。

例項

$("p").css("background-color");   //返回background-color的值複製程式碼

設定 CSS 屬性

如需設定指定的 CSS 屬性，請使用如下語法：

css("propertyname","value");複製程式碼

下面的例子將為所有匹配元素設定 background-color 值：

例項

$("p").css("background-color","yellow");複製程式碼

設定多個 CSS 屬性

css({"propertyname":"value","propertyname":"value",...});複製程式碼

jQuery - 尺寸

jQuery 提供多個處理尺寸的重要方法：

  • width() 方法設定或返回元素的寬度（不包括內邊距、邊框或外邊距）。

    height() 方法設定或返回元素的高度（不包括內邊距、邊框或外邊距）。

  • innerWidth() 方法返回元素的寬度（包括內邊距）。

    innerHeight() 方法返回元素的高度（包括內邊距）。

  • outerWidth() 方法返回元素的寬度（包括內邊距和邊框）。

    outerHeight() 方法返回元素的高度（包括內邊距和邊框）。

  • outerWidth(true) 方法返回元素的寬度（包括內邊距、邊框和外邊距）。

    outerHeight(true) 方法返回元素的高度（包括內邊距、邊框和外邊距）。


相關文章