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

相关文章
|
JavaScript 前端开发
jQuery分别获取选中的复选框值
原文:jQuery分别获取选中的复选框值 function jqchk(){  //jquery获取复选框值   var s='';   $('input[name="aihao"]:checked').each(function(){     s+=$(this).val()+',';   }); 点击“提交”后,可以得到正确的选择值了,但是后面多一个,(英文逗号),这个可以检测一下再用substring去除,或者获取到复选框选择值后一般都要转成数组再使用的,所以也可以在转成数组后,去除最后一个数组元素。
1182 0
|
6月前
|
JavaScript
Jquery插件知识之Jquery.cookie实现页面传值
Jquery插件知识之Jquery.cookie实现页面传值
36 0
|
7月前
|
JavaScript
jQuery 插件自用列表
jQuery 插件自用列表
29 0
|
3月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
3月前
|
JavaScript 数据可视化 前端开发
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
19 0
|
3月前
|
JavaScript 前端开发
开发jQuery插件这些就够了
开发jQuery插件这些就够了
28 0
|
8月前
|
JavaScript
jQuery编写插件的两种方法
jQuery编写插件的两种方法
57 0
|
4月前
|
JavaScript 前端开发 安全
jQuery 第十一章(表单验证插件推荐)
jQuery 第十一章(表单验证插件推荐)
56 1
|
5月前
|
JavaScript
jQuery年月日(年龄)选择插件
jQuery年月日(年龄)选择插件
28 0
|
5月前
|
前端开发 JavaScript
Jquery前端分页插件pagination同步加载和异步加载
Jquery前端分页插件pagination同步加载和异步加载
43 0