开发者社区> 航空母舰> 正文

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
20736 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
30138 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
14049 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
23023 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
17287 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
21219 0
腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
在tomcat中新建一个可以启动的 .sh 脚本文件 /usr/local/tomcat7/bin/ export JAVA_HOME=/usr/local/java/jdk7 export PATH=$JAVA_HOME/bin/:$PATH export CLASSPATH=.
14926 0
+关注
514
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载