久久精品国产亚洲高清|精品日韩中文乱码在线|亚洲va中文字幕无码久|伊人久久综合狼伊人久久|亚洲不卡av不卡一区二区|精品久久久久久久蜜臀AV|国产精品19久久久久久不卡|国产男女猛烈视频在线观看麻豆

千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

手機(jī)站
千鋒教育

千鋒學(xué)習(xí)站 | 隨時(shí)隨地免費(fèi)學(xué)

千鋒教育

掃一掃進(jìn)入千鋒手機(jī)站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習(xí)站小程序
隨時(shí)隨地免費(fèi)學(xué)習(xí)課程

當(dāng)前位置:首頁(yè)  >  技術(shù)干貨  > 前端jQuery實(shí)戰(zhàn)之 attr() 和 prop() 的區(qū)別

前端jQuery實(shí)戰(zhàn)之 attr() 和 prop() 的區(qū)別

來(lái)源:千鋒教育
發(fā)布人:小千
時(shí)間: 2020-11-26 10:23:00 1606357380

是不是剛開始學(xué)jQuery的時(shí)候,看到了這兩個(gè)方法:attr()和prop();感覺這不是一個(gè)意思嗎?他們有什么區(qū)別呢?

640.webp

下面簡(jiǎn)單的給大家區(qū)分一下:

  • 對(duì)于HTML元素本身就帶有的固有屬性,在處理的時(shí)候,使用prop()方法。
  • 對(duì)于HTML元素我們自己自定義的DOM屬性,在處理時(shí),使用attr()方法。

舉例說明

  • <a target="_self" class="btn">百度</a>

這個(gè)例子里a元素的DOM屬性有href、target和class,這些屬性就是a元素本身就帶有的屬性,也就是W3C標(biāo)準(zhǔn)里就包含有這幾個(gè)屬性,這些就叫做固有屬性。處理這些屬性時(shí),建議使用prop()方法。

  • <a href="#" id="link1" del="delete">刪除</a>

這個(gè)例子里a元素的DOM屬性有href、id和del,很明顯,前兩個(gè)是固有屬性,而后面一個(gè)del屬性是我們自己自定義上去的,a元素本身是沒有這個(gè)屬性的。這種就是自定義的DOM屬性,處理這些屬性時(shí),建議使用attr()方法。使用prop()方法取值和設(shè)置屬性值時(shí),都會(huì)返回undefined值。

再舉一個(gè)例子

像checkbox,disabled,radio和select這樣的元素,選中屬性對(duì)應(yīng)checked和selected,這些也屬于固有屬性,因此需要使用prop()方法去操作才能獲得正確的結(jié)果。

  • $("#chk1").prop("checked") // false
  • $("#chk2").prop("checked") // true

1

如果上面使用attr()方法,則會(huì)出現(xiàn):

  • $("#chk1").attr("checked") // undefined
  • $("#chk2").attr("checked") // "checked"

2

大家都知道有的瀏覽器只要寫disabled,checked就可以了,而有的要寫成disabled="disabled",checked="checked",比如用attr("checked")獲取checkbox的checked屬性時(shí)選中的時(shí)候可以取到值,值為"checked"但沒選中獲取值就是undefined。

jQuery提供新的方法prop()來(lái)獲取這些屬性,就是來(lái)解決這個(gè)問題的,以前我們使用attr()獲取checked屬性時(shí)返回"checked"和undefined,現(xiàn)在使用prop()方法獲取屬性則統(tǒng)一返回true和false。

tags:
聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
請(qǐng)您保持通訊暢通,專屬學(xué)習(xí)老師24小時(shí)內(nèi)將與您1V1溝通
免費(fèi)領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT
為什么說PHP與Swoole是優(yōu)異組合?

PHP與Swoole在Web開發(fā)和網(wǎng)絡(luò)編程領(lǐng)域中,共同構(gòu)成了一種強(qiáng)大的解決方案。什么是PHPPHP是一種廣泛使用的開源服務(wù)器端腳本語(yǔ)言,特別適用于Web開...詳情>>

2023-10-14 05:08:41
Javaweb開發(fā)為什么需要分前后端?

Javaweb開發(fā)采用前后端分離的設(shè)計(jì)模式是有著諸多理由的,以下分析了這種設(shè)計(jì)模式的主要特點(diǎn)和優(yōu)勢(shì)。什么是前后端分離在Web開發(fā)中,前后端分離是...詳情>>

2023-10-14 05:05:24
瀑布開發(fā)和敏捷開發(fā)的區(qū)別是什么?

一、開發(fā)流程不同瀑布開發(fā)采用線性的開發(fā)流程,按照預(yù)先規(guī)劃的順序依次進(jìn)行需求分析、設(shè)計(jì)、編碼、測(cè)試和維護(hù)等環(huán)節(jié)。每個(gè)環(huán)節(jié)都有明確的交付物...詳情>>

2023-10-14 04:47:33
有哪款比較好用的免費(fèi)的缺陷管理工具?

一、BugzillaBugzilla是一款廣泛使用的免費(fèi)缺陷管理工具,具備完善的缺陷管理功能,并支持多用戶協(xié)同工作。Bugzilla提供了強(qiáng)大的搜索和過濾功能...詳情>>

2023-10-14 04:40:43
USB Type C電纜正反插都可以?

USB Type C電纜正反插都可以USB Type C電纜是一種通用連接標(biāo)準(zhǔn),其最顯著的特點(diǎn)是具備正反插功能。不論插頭的方向如何,用戶都可以輕松插入U(xiǎn)SB ...詳情>>

2023-10-14 04:31:18
快速通道