關于它們兩個的差別,網上的答案很多。這裡談談我的心得,我的心得很簡單:
對于html元素本身就帶有的固有屬性,在處理時,使用prop方法。
對于html元素我們自己自定義的dom屬性,在處理時,使用attr方法。
上面的描述也許有點模糊,舉幾個例子就知道了。
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLicmbw5ichR3cf52bjl2LcNXZnFWbp9CXt92YuUWelRXauYjM5cmbvlXZkVHavw1LcpDc0RHaiojIsJye.png)
<a href="http://www.baidu.com" target="_self" class="btn">百度</a>
這個例子裡<a>元素的dom屬性有“href、target和class",這些屬性就是<a>元素本身就帶有的屬性,也是 w3c标準裡就包含有這幾個屬性,或者說在ide裡能夠智能提示出的屬性,這些就叫做固有屬性。處理這些屬性時,建議使用prop方法。
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLicmbw5ichR3cf52bjl2LcNXZnFWbp9CXt92YuUWelRXauYjM5cmbvlXZkVHavw1LcpDc0RHaiojIsJye.png)
<a href="#" id="link1" action="delete">删除</a>
這個例子裡<a>元素的dom屬性有“href、id和action”,很明顯,前兩個是固有屬性,而後面一個“action”屬性是我們自 己自定義上去的,<a>元素本身是沒有這個屬性的。這種就是自定義的dom屬性。處理這些屬性時,建議使用attr方法。使用prop方法取值和設定屬性值時,都會傳回undefined值。
像checkbox,radio和select這樣的元素,選中屬性對應“checked”和“selected”,這些也屬于固有屬性,是以需要使用prop方法去操作才能獲得正确的結果。如果上面使用attr方法,則會出現:
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLicmbw5ichR3cf52bjl2LcNXZnFWbp9CXt92YuUWelRXauYjM5cmbvlXZkVHavw1LcpDc0RHaiojIsJye.png)
$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"
select下拉框的第二個元素為目前選中值
$('#select_id')[0].selectedindex = 1;
radio單選組的第二個元素為目前選中值
$('input[@name=items]').get(1).checked = true;
$("#select_id").get(0).defaultvalue //dom 對象
選中的個數$("input[name='goods_id[]']:checked").size();
單選組radio: $("input[@type=radio]").attr("checked",'2');//設定value=2的項目為目前選中項
$("<option value='1'>1111</option><option value='2'>2222</option>").appendto("#sel")//添加下拉框的option $("#sel").empty();//清空下拉框
設定text為管理組的項選中
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLicmbw5ichR3cf52bjl2LcNXZnFWbp9CXt92YuUWelRXauYjM5cmbvlXZkVHavw1LcpDc0RHaiojIsJye.png)
$(".type").find("option[text='管理組']").attr("selected",true);
$("input[name='items']:checked").val();
$("#checkbox_id").prop("checked"); //擷取一個checkbox的狀态(有沒有被選中,傳回true/false)
$("#checkbox_id").prop("checked",true); //設定一個checkbox的狀态為選中(checked=true)
$("#checkbox_id").prop("checked",false); //設定一個checkbox的狀态為不選中(checked=false)
$("#checkbox_id").prop("checked", $(this).is(':checked') ? false : true);
$("#text_id").val().split(","); //将text的value值以','分隔 傳回一個數組
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLicmbw5ichR3cf52bjl2LcNXZnFWbp9CXt92YuUWelRXauYjM5cmbvlXZkVHavw1LcpDc0RHaiojIsJye.png)
<dd>
<a cateid="118" class="open" href="#">個護化妝</a>
<ul class="open_ul">
<li><a href="http://www.test.com/10/1001.html">面部護理</a></li>
<li><a href="http://www.test.com/10/1002.html">身體護理</a></li>
<li><a href="http://www.test.com/10/1003.html">口腔護理</a></li>
<li><a href="http://www.test.com/10/1005.html">女性護理</a></li>
<li><a href="http://www.test.com/10/1006.html">魅力彩妝</a></li>
<li><a href="http://www.test.com/10/e-ae-spa.html">香水spa</a></li>
<li><a href="http://www.test.com/10/c-a-aes-c.html">男士護理</a></li>
</ul>
<div><img src="http://www.test.com/skin/frontend/default/ddl_v3/imgs/mall/mall_menu_line.png"></div>
</dd>
<script type="text/javascript">
$("dd").find('a').attr("class", 'close');
$("dd").find('div').remove(); //删除div标簽
$("dd").find('ul').removeattr().remove(); //删除ul标簽
</script>
1.在父視窗中操作 選中iframe中的所有單選鈕
$(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true");
2.在iframe中操作 選中父視窗中的所有單選鈕
$(window.parent.document).find("input[@type='radio']").attr("checked","true");
取父視窗的元素方法:$(selector, window.parent.document);
那麼你取父視窗的父視窗的元素就可以用:$(selector, window.parent.parent.document);
類似的,取其它視窗的方法大同小異
$(selector, window.top.document);
$(selector, window.opener.document);
$(selector, window.top.frames[0].document);