在高版本的jQuery引入prop方法后，什么時候該用prop？什么時候用attr？它們兩個之間有什么區別？這些問題就出現了。

關于它們兩個的區別，網上的答案很多。這里談談我的心得，我的心得很簡單：

• 對于HTML元素本身就帶有的固有屬性，在處理時，使用prop方法。
• 對于HTML元素我們自己自定義的DOM屬性，在處理時，使用attr方法。

上面的描述也許有點模糊，舉幾個例子就知道了。

Java代碼??

<a?href="http://www.baidu.com"?target="_self"?class="btn">百度</a>??

這個例子里<a>元素的DOM屬性有“href、target和class"，這些屬性就是<a>元素本身就帶有的屬性，也是 W3C標準里就包含有這幾個屬性，或者說在IDE里能夠智能提示出的屬性，這些就叫做固有屬性。處理這些屬性時，建議使用prop方法。 Java代碼??

<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方法，則會出現： Java代碼??

$("#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為管理組的項選中

Java代碼??

$(".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值以','分隔 返回一個數組

Java代碼??

<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);

總結

以上是生活随笔為你收集整理的jquery选中的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。