jquery选中

在高版本的jQuery引入prop方法后，什么时候该用prop？什么时候用attr？它们两个之间有什么区别？这些问题就出现了。

关于它们两个的区别，网上的答案很多。这里谈谈我的心得，我的心得很简单：

• 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
• 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

上面的描述也许有点模糊，举几个例子就知道了。

Java代码  

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

这个例子里<a>元素的DOM属性有“href、target和class"，这些属性就是<a>元素本身就带有的属性，也是 W3C标准里就包含有这几个属性，或者说在IDE里能够智能提示出的属性，这些就叫做固有属性。处理这些属性时，建议使用prop方法。

Java代码  

1. <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代码  

1. $("#chk1").attr("checked") == undefined  
2. $("#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代码  

1. $(".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代码  

1. <dd>  
2.     <a cateid="118" class="open" href="#">个护化妆</a>  
3.     <ul class="open_ul">  
4.         <li><a href="http://www.test.com/10/1001.html">面部护理</a></li>  
5.         <li><a href="http://www.test.com/10/1002.html">身体护理</a></li>  
6.         <li><a href="http://www.test.com/10/1003.html">口腔护理</a></li>  
7.         <li><a href="http://www.test.com/10/1005.html">女性护理</a></li>  
8.         <li><a href="http://www.test.com/10/1006.html">魅力彩妆</a></li>  
9.         <li><a href="http://www.test.com/10/e-ae-spa.html">香水SPA</a></li>  
10.         <li><a href="http://www.test.com/10/c-a-aes-c.html">男士护理</a></li>  
11.     </ul>  
12.     <div><img src="http://www.test.com/skin/frontend/default/ddl_v3/imgs/mall/mall_menu_line.png"></div>  
13. </dd>  
14. <script type="text/javascript">  
15. $("dd").find('a').attr("class", 'close');  
16. $("dd").find('div').remove(); //删除div标签  
17. $("dd").find('ul').removeAttr().remove(); //删除ul标签  
18. </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);