jquery中關於attr和prop的區別！

昨天這兩個方法搞混了,被公司大佬說了下，雖然沒說什麼，但還是挺尷尬的。重點是大佬說你可以用attr方法，我特麼第一句話就是怎麼用呢。原諒我使用vue之後太依賴框架的東西了，以至於以前jquery玩的也挺溜的我，慢慢淡忘了 jquery。罪過罪過呢！jquery還是一款很優秀的函數庫，哎 不說了 繼續碼代碼了。
$().attr() 允許我們往元素上加上自定義屬性

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div>
	hello world
</div>
$('div').attr('num',20);

我們也可以用attr 獲取提前定義好的在上面的 自定義屬性值

<p hel="nihao">hello world</p>

console.log($('p').attr('hel'));

當然 也可以獲取到 元素 自帶的一些屬性

<a href="http://www.zhaoyunchong.com/page.html">跳轉</a>
console.log($('a').attr('href'));

那麼 attr 是獲取和設置 屬性的 prop 是幹什麼的 其實他也是獲取屬性的
不放我們試試用prop 獲取下

<p hel="nihao">hello world</p>
<script type="text/javascript">
	console.log($('p').prop('hel'));
</script>

看到下面的輸出 驚呆我了 不可以嗎 怎麼給我輸出一個undefined

別急 我們再試試看

<a href="http://www.zhaoyunchong.com/page.html">跳轉</a>
<script type="text/javascript">
	console.log($('a').prop('href'));
</script>

看下下面 不是獲取到了麼

根據上面的 童鞋們 應該可以總結出來什麼的
prop 可以獲取 元素自帶的屬性 但是不可以獲取到 自定義的屬性
那這樣 他能不能給元素加上 自定義屬性了 別急 我們再試試看

<a href="http://www.zhaoyunchong.com/page.html">跳轉</a>
<script type="text/javascript">
	$('a').prop('num',30)
	console.log($('a').prop('num'));
</script>

我們嘗試着加上 之後看見了 並沒有 顯示在 dom 元素上 這個和 attr 不一樣
但打印確實有這個東西
這下可以總結出來，prop 可以給 元素加上一個自定義屬性 但是 不回顯示到 dom樹上，但卻可以獲取到


除了這點 區別 還有其他的呢 當然有了
在dom元素中有一些 表單元素 表單元素 有一些表示 狀態的屬性
如 select checkbox radio 這些元素
我們再試試看 attr和prop 的區別

<input type="radio" checked="checked">單選
<button class="attr">attr</button>
<button class="prop">prop</button>
<script type="text/javascript">
	$('.attr').on('click',function(){
		console.log($('input').attr('checked'))
		if($('input').attr('checked')){
			$('input').attr('checked',false);
		}else{
			$('input').attr('checked',true);
		}
		
	})
	$('.prop').on('click',function(){
		if($('input').is(":checked")){
			$('input').prop('checked',false);
		}else{
			$('input').prop('checked',true);
		}
	})
</script>

測試1

這樣看起來 好像沒啥問題 對吧
我們來回切換 再試試看
測試2

來回切換 就出來問題 了 prop 可以 切換 但是 attr 就出問題了
我們在打印下 數據 看看情況
測試3

這個時候看出來 問題 attr 打印 出來的情況是
checked undefined
而prop 打印出來 是 true 和 false

由此 總結 可得 哈 設計和獲取 狀態 切換的 要用 prop， attr會出錯的

小知識 學習
在html5 建議 自定義屬性 前面 最好加上 data-自定義屬性 這種方式
其實工作中用的也比較多 賦值到元素上面 我們在 獲取到 然後傳送給 後臺接口中
好吧 我們來實驗下 哈

<p data-hel="hello" id="hel"></p>
<script type="text/javascript">
	// 使用jquery的方式
	console.log($('p').attr('data-hel'));
	// 使用html5的方式
	var d1=document.querySelector("#hel");
	console.log(d1.dataset['hel']);
</script>

看吧確實可以獲取到 原生的兩個方式 是 setAttribute 和 getAttribute