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 (){
alert("Text:"+$(".dom").text());
alert("Html"+$(".dom).html());
})
$('button2').click(function(){
alert("value="+$("#myIpt").val());
})
<body>
<div class="dom">你好啊,<b>世界</b></div>
<input id="myIpt" name="name" type="text" value="jquery學習教程" />
</body>
輸出結果:對比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');