天天看點

jquery選中

關于它們兩個的差別,網上的答案很多。這裡談談我的心得,我的心得很簡單:

對于html元素本身就帶有的固有屬性,在處理時,使用prop方法。

對于html元素我們自己自定義的dom屬性,在處理時,使用attr方法。

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

jquery選中

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

這個例子裡<a>元素的dom屬性有“href、target和class",這些屬性就是<a>元素本身就帶有的屬性,也是 w3c标準裡就包含有這幾個屬性,或者說在ide裡能夠智能提示出的屬性,這些就叫做固有屬性。處理這些屬性時,建議使用prop方法。

jquery選中

<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方法,則會出現:

jquery選中

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

jquery選中

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

jquery選中

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