細(xì)說(shuō) jQuery DOM操作篇（一） - 屬性操作

ideaa 發(fā)布于2019-08-19 14:52 / 3184人閱讀

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

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

非類(lèi)屬性

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

segmentfault

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

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

除了簡(jiǎn)單的賦值，我們還可以使用值回調(diào)的方法來(lái)修改屬性值，例如我希望把上例中的 href 值從 segmentfault 主頁(yè)修改為我的個(gè)人主頁(yè)：

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

結(jié)果為：

DOM 元素屬性

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

A
B

我們可以使用 prop 方法來(lái)獲得 DOM 元素屬性：

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

prop 方法的使用與 attr 方法一樣，也可以對(duì)多個(gè)屬性進(jìn)行操作，接收值回調(diào)函數(shù)等。
大多數(shù)情況，DOM 元素屬性和 HTML 屬性都是對(duì)應(yīng)的，可能在名稱(chēng)上有些差異，例如 class 和 className，文本框的 value 和 defaultValue 等。但也存在不對(duì)應(yīng)的情況，例如 DOM 元素屬性 nodeName，在 HTML 屬性中就沒(méi)有跟它對(duì)應(yīng)的屬性。

參考

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

GPU云服務(wù)器云服務(wù)器 Dom操作 dom對(duì)象操作 DOM交互操作 PHP操作DOM

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/78155.html

相關(guān)文章

細(xì)說(shuō) jQuery 元素篇（二） - 選擇符

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

104828720 2019-08-19 14:51 評(píng)論0 收藏0
細(xì)說(shuō) jQuery 元素篇（一） - 理解 DOM

摘要：最強(qiáng)大的特性之一就是簡(jiǎn)化了對(duì)元素的操作。從圖中，我們可以看出元素中父元素子元素之間的關(guān)系。被封裝到對(duì)象中的元素會(huì)被自動(dòng)地，隱式地循環(huán)遍歷。訪(fǎng)問(wèn)從上可知，返回的是對(duì)象，但是我們有時(shí)也希望直接對(duì)元素進(jìn)行操作。 DOM - Document Object Model，即文檔對(duì)象模型，它通過(guò)對(duì)象樹(shù)來(lái)展示 HTML 代碼。jQuery 最強(qiáng)大的特性之一就是簡(jiǎn)化了對(duì) DOM 元素的操作。 DOM...

everfight 2019-08-19 14:52 評(píng)論0 收藏0
細(xì)說(shuō) jQuery DOM操作篇（二） - DOM 樹(shù)操作

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

Anchorer 2019-08-21 12:20 評(píng)論0 收藏0
細(xì)說(shuō) jQuery 事件篇（一） - 代碼執(zhí)行時(shí)機(jī)

摘要：在元素一篇介紹過(guò)，可以使用來(lái)使得代碼在加載完畢后自動(dòng)執(zhí)行代碼，接下來(lái)具體介紹下這個(gè)機(jī)制。這樣看上去貌似沒(méi)什么問(wèn)題，但是如果有兩個(gè)函數(shù)需要指定時(shí)就會(huì)遇到麻煩，因?yàn)閷傩灾荒鼙４鎸?duì)一個(gè)函數(shù)的引用，如果我們寫(xiě)成以下形式最后代碼執(zhí)行后的效果是會(huì)覆蓋。在元素一篇介紹過(guò)，jQuery 可以使用 $(document).ready() 來(lái)使得代碼在 DOM 加載完畢后自動(dòng)執(zhí)行代碼，接下來(lái)具體介紹下這...

dunizb 2019-08-19 14:51 評(píng)論0 收藏0
細(xì)說(shuō) jQuery 事件篇（二） - 處理簡(jiǎn)單事件

摘要：我們可以利用可以對(duì)用戶(hù)發(fā)起的事件進(jìn)行處理，這里以樣式轉(zhuǎn)換為例來(lái)說(shuō)明。其他類(lèi)似的操作事件都可以通過(guò)這個(gè)方法，將處理事件的程序綁定到同名事件上面。我們可以利用 jQuery 可以對(duì)用戶(hù)發(fā)起的事件進(jìn)行處理，這里以樣式轉(zhuǎn)換為例來(lái)說(shuō)明。增添樣式基于用戶(hù)的事件，對(duì)特定的 DOM 元素樣式進(jìn)行轉(zhuǎn)換是 jQuery 處理事件中比較常見(jiàn)的情形，舉例說(shuō)明，當(dāng)用戶(hù)點(diǎn)擊輸入框后，會(huì)增添 highli...

ckllj 2019-08-19 14:51 評(píng)論0 收藏0