jquery中dom設值 及 prop與attr的區別.md
阿新 • • 發佈：2018-11-01
jquery的強大之處在於對dom元素的操作，所謂的dom元素就是document object model（文字物件模型）。在對dom操作中主要包含
- 獲取、設定dom元素的值和屬性
- 動態的新增、刪除dom元素
- 動態的設定dom的css樣式
- 獲取dom的尺寸等
一、獲取設定dom的值
獲取/設定dom值的方法有三種:
- text() – 主要用於對普通文字的設定和獲取
- html() – 主要用於對html標記的設定和獲取
- val() – 主要用於對錶單元素的設定和獲取
使用示例
$('button').click(function 輸出結果:對比text和html的使用區別
Text: 你好啊， 世界
HTML: 你好啊， <b>世界</b>
value:jquery學習教程在設定元素值的時候只需要在函式引數中新增要賦值的內容即可
$('button').click(function(){
$(".dom").text('hello,world');
$(".dom2").html("hello,wolrd");
$(".dom3").val("hello,world");
})
2、獲取/設定dom屬性
設定屬性的方式主要有兩種：
- attr()
- prop()
使用示例
<script>
$('button').click(function() {
$('.nav').attr("class");
$('input').attr('name');
});
</script>
<body>
<div class="demo">
<span class="nav"></span>
<input type="radio" name="ipt" value="hello">
</div>
</body>執行結果
nav
ipt設定屬性
$('button').click(function() {
$(".nav").attr("id","nav_bar");
$("input").prop("checked","checked")
});
// 設定多個屬性的時候，屬性以物件的形式新增
$('button').click(function() {
$(".nav").attr({
'id':"name",
'title':"hello",
......
});
});敲黑板，重點說明：關於prop和attr的區別
- attr()主要用來設定一些我們在開發過程中需要使用的自定義屬性，
在獲取屬性時如果沒有該屬性，返回的值為undefine；- prop()主要用來設定元素本身就帶有的固有屬性
在獲取屬性時如果沒有該屬性，返回的值為“”
//href class 是 a 標籤自帶的固有屬性，在設定此類的屬性的時候建議使用prop <a href="text.html" class="text"></a> //data屬性是我們在開發過程中自主新增上去的，所以設定此類屬性的時候建議使用attr <a href="text.html" class="text" data="object"></a>
關於prop和attr在專案使用中遇到的問題
問題描述：通過js控制checkbox的選中狀態，初次使用attr設定選中，設定無效
$("#transProtocol input:checkbox[value="+param+"]").attr('checked','true'); //設定無效設定prop函式後，設定起效
$("#transProtocol input:checkbox[value="+param+"]").prop('checked','true');