prop 和 attr 中一些羞羞的事情

simon_chen 發布于2019-08-22 17:05 / 1192人閱讀

摘要：設置的屬性值可以包括數組和對象在內的任意類型有關布爾值的屬性之后返回的也是字符串類型選中或禁用直接返回。當涉及到值時，比如這樣的，有和這樣的布爾值的元素屬性，在頁面加載的時候就被設置，并且一直保持初始值，而則存儲著元素屬性的當前值。

引言

前幾天做一個迷你京東小項目的時候涉及到一個全選的小功能，一開始用的是 attr，但是效果完全不是自己想要的，當商品按鈕點擊過一次后，attr就無法對其狀態進行更改，最后谷歌了一番發現需要用 prop 來代替。雖然效果問題解決了，但是自己還是想弄懂 prop 和 attr 的區別.

版本使用不同

遇到問題我一般先會去查相關的官方文檔，可在 jq 的 api 中文文檔中沒有發現有價值的東西，只是發現適用的版本和概念有所輕微的不同。

attr : 設置或返回被選元素的屬性值.版本：1.0

prop : 獲取在匹配的元素集中的第一個元素的屬性值。版本：1.6+

從概念中發現操作的對象和使用也好像基本相同，然后帶著疑惑去進行了一番實驗并去查閱了一些相關資料

示例代碼

全選單選單選單選單選單選單選

$(".checkAll").click(function() {
  $(".item").attr("checked", this.checked);
});

問題描述

當全選按鈕選中時單選按鈕全部選中，當全選按鈕不選中時單選按鈕全部不選中，只點全選按鈕時，反復幾次都沒問題，但是要是點擊了其中一個單選按鈕，那這個單選按鈕就不會在像其它單選按鈕一樣跟隨全選按鈕的狀態的改變而改變。

attr 和 prop 的本質

attr 是 attribute 的縮寫,prop 是 property 的縮寫，都有屬性的意思，只不過 attr 是操作 html 文檔節點屬性，prop 是操作 js 對象屬性. attr 在 js 中使用的是 setAttribute 和 getAttribute 而 prop 直接使用原生 js 的 element[value] 和 element[value]=key。

attr 和 prop 的區別

attr 設置的屬性值只能是字符串類型,如果不是字符串類型，也會調用其 toString() 方法，將其轉換成字符串類型。

prop 設置的屬性值可以包括數組和對象在內的任意類型

有關布爾值的屬性

1.6 之后, attr 返回的也是字符串類型, 選中或禁用直接返回 checked,selected,disabled。否則返回undefined。解決我問題的關鍵就是下面一句話

jQuery 認為：attribute 的 checked、selected、disabled 就是表示該屬性初始狀態的值，property 的 checked、selected、disabled 才表示該屬性實時狀態的值(值為 true 或 false)。

當涉及到 boolean 值時，比如 checkbox 這樣的，有 true 和 false 這樣的布爾值的元素屬性，attributes 在頁面加載的時候就被設置，并且一直保持初始值，而 properties 則存儲著元素屬性的當前值。

所以當我沒有點擊單選按鈕的時候，它就是沒被用戶點擊過的瀏覽器剛加載出來的初始狀態，此時可以通過 attr 去設置并操控，當有用戶點擊的時候，當前按鈕就不是初始狀態，attr自然也就無法操控。

云服務器 GPU云服務器 vps日常維護中的一些要點總結 prop() props prop

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

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

prop 和 attr 中一些羞羞的事情

摘要：設置的屬性值可以包括數組和對象在內的任意類型有關布爾值的屬性之后返回的也是字符串類型選中或禁用直接返回。當涉及到值時，比如這樣的，有和這樣的布爾值的元素屬性，在頁面加載的時候就被設置，并且一直保持初始值，而則存儲著元素屬性的當前值。引言前幾天做一個迷你京東小項目的時候涉及到一個全選的小功能，一開始用的是 attr，但是效果完全不是自己想要的，當商品按鈕點擊過一次后，attr就無法對...

lmxdawn 2019-08-29 15:21 評論0 收藏0
動手寫個React高階組件

摘要：作用是給組件增減屬性。如果你的高階組件不需要帶參數，這樣寫也是很的。那么需要建立一個引用可以對被裝飾的組件做羞羞的事情了，注意在多個高階組件裝飾同一個組件的情況下，此法并不奏效。你拿到的是上一個高階組件的函數中臨時生成的組件。是什么簡稱HOC，全稱 High Order Component。作用是給react組件增減props屬性。怎么用為什么不先說怎么寫？恩，因為你其實已經用...

xiaokai 2019-08-22 18:14 評論0 收藏0
新手的node爬蟲初體驗

摘要：后來在爬取不到讓我一度懷疑人生的時候巧合下，發現磁力鏈接有小寫字母，有長度的，有長度的。。原文博客：羞羞的node爬蟲前言學了一陣子node，除了用 express 寫東西，就沒怎么做過東西突然就想寫個爬蟲來玩一玩，而且還是爬一些羞羞的東西使用模塊 SuperAgent 是個 http 方面的庫，可以發起 get 或 post 請求。 cheerio 大家可以理解成一個 ...

wemallshop 2019-08-20 16:53 評論0 收藏0