細說 jQuery DOM操作篇（一） - 屬性操作

ideaa 發布于2019-08-19 14:52 / 3112人閱讀

摘要：之前已經知道可以使用和等方法來修改類屬性，今天來具體討論下各種屬性的操作。非類屬性有時候，我們還需要對一些其他的屬性進行操作，例如，，等等。例如單選按鈕的屬性。

之前已經知道可以使用 addClass 和 removeClass 等方法來修改類屬性，今天來具體討論下各種屬性的操作。

非類屬性

有時候，我們還需要對一些其他的屬性進行操作，例如 href，title，id 等等。這里，我們可以使用 jQuery 的 attr 和 removeAttr 方法。舉例如下：

segmentfault

使用 attr 方法同時修改 href 和 title 屬性如下：

  $("a").attr({href: "http://baidu.com/", title: "baidu"})

除了簡單的賦值，我們還可以使用值回調的方法來修改屬性值，例如我希望把上例中的 href 值從 segmentfault 主頁修改為我的個人主頁：

  $("a").attr({
    href: function(index, content) {
      return content + "stephenlee";
    }
  })

結果為：

DOM 元素屬性

DOM 元素屬性指的是通過 Javascript 存取的值，而 HTML 屬性指的是放在引號內的值，大部分情況下，兩者的名字和值都是相同的，但在有些情況下也存在區別。例如單選按鈕的 checked 屬性。

A
B

我們可以使用 prop 方法來獲得 DOM 元素屬性：

$("#b").attr("checked"); // 值為 checked
$("#b").prop("checked"); // 值為 true

prop 方法的使用與 attr 方法一樣，也可以對多個屬性進行操作，接收值回調函數等。
大多數情況，DOM 元素屬性和 HTML 屬性都是對應的，可能在名稱上有些差異，例如 class 和 className，文本框的 value 和 defaultValue 等。但也存在不對應的情況，例如 DOM 元素屬性 nodeName，在 HTML 屬性中就沒有跟它對應的屬性。

參考

http://book.douban.com/subject/24669823/

云服務器 GPU云服務器 Dom操作 dom對象操作 DOM交互操作 PHP操作DOM

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78155.html

細說 jQuery 元素篇（二） - 選擇符

摘要：為了更方便對元素操作，提供了完整的選擇符體系，可以分為選擇符屬性選擇符以及自定選擇符。選擇符幾乎支持到規范中的所有選擇符。介紹個比較有用的自定義選擇符選擇符。為了更方便對 DOM 元素操作，jQuery 提供了完整的選擇符體系，可以分為 CSS 選擇符、屬性選擇符以及自定選擇符。 CSS 選擇符 jQuery 幾乎支持 CSS1 到 CSS3 規范中的所有選擇符。舉例如下： ...

104828720 2019-08-19 14:51 評論0 收藏0
細說 jQuery 元素篇（一） - 理解 DOM

摘要：最強大的特性之一就是簡化了對元素的操作。從圖中，我們可以看出元素中父元素子元素之間的關系。被封裝到對象中的元素會被自動地，隱式地循環遍歷。訪問從上可知，返回的是對象，但是我們有時也希望直接對元素進行操作。 DOM - Document Object Model，即文檔對象模型，它通過對象樹來展示 HTML 代碼。jQuery 最強大的特性之一就是簡化了對 DOM 元素的操作。 DOM...

everfight 2019-08-19 14:52 評論0 收藏0
細說 jQuery DOM操作篇（二） - DOM 樹操作

摘要：此時，點擊新建的將會觸發。設置元素內容的方法則使用上述兩種方法，將新內容作為參數傳遞即可，例如修改上例中的文本內容方法同理。我們知道通過 $() 函數可以訪問文檔中的元素，并返回一個 jQuery 對象，并且通過一系列方法，我們可以修改元素的樣式和內容，實際上，我們還可以通過該函數做更多的事情，例如添加、刪除、復制等操作來改變 DOM 樹的結構。創建元素我們可以通過 $() ...

Anchorer 2019-08-21 12:20 評論0 收藏0
細說 jQuery 事件篇（一） - 代碼執行時機

摘要：在元素一篇介紹過，可以使用來使得代碼在加載完畢后自動執行代碼，接下來具體介紹下這個機制。這樣看上去貌似沒什么問題，但是如果有兩個函數需要指定時就會遇到麻煩，因為屬性只能保存對一個函數的引用，如果我們寫成以下形式最后代碼執行后的效果是會覆蓋。在元素一篇介紹過，jQuery 可以使用 $(document).ready() 來使得代碼在 DOM 加載完畢后自動執行代碼，接下來具體介紹下這...

dunizb 2019-08-19 14:51 評論0 收藏0
細說 jQuery 事件篇（二） - 處理簡單事件

摘要：我們可以利用可以對用戶發起的事件進行處理，這里以樣式轉換為例來說明。其他類似的操作事件都可以通過這個方法，將處理事件的程序綁定到同名事件上面。我們可以利用 jQuery 可以對用戶發起的事件進行處理，這里以樣式轉換為例來說明。增添樣式基于用戶的事件，對特定的 DOM 元素樣式進行轉換是 jQuery 處理事件中比較常見的情形，舉例說明，當用戶點擊輸入框后，會增添 highli...

ckllj 2019-08-19 14:51 評論0 收藏0