在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了。
关于它们两个的区别,网上的答案很多。这里谈谈我的心得,我的心得很简单:
- 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
- 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
上面的描述也许有点模糊,举几个例子就知道了。
<a href="http://www.baidu.com" target="_self" class="btn">百度</a>
这个例子里<a>元素的DOM属性有“href、target和class",这些属性就是<a>元素本身就带有的属性,也是 W3C标准里就包含有这几个属性,或者说在IDE里能够智能提示出的属性,这些就叫做固有属性。处理这些属性时,建议使用prop方法。
<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方法,则会出现:
$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"
下拉框设置value为pxx的项选中
$(".selector").val("pxx");
设置text为pxx的项选中
$(".selector").find("option[text='pxx']").attr("selected",true);
获取当前选中项的text
$(".selector").find("option:selected").text();
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();//清空下拉框
$("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值以','分隔 返回一个数组
<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实现iframe页面切换功能,轻松简单、灵活方便快速,代码实例,测试通过
两个jquery实现iframe多标签页例子.我现在的asp.net项目正在使用
用jquery实现iframe高度自适应实例代码完美兼容多数浏览器
简单实用的Jquery弹出层,附带样式,redme文档,看了立马就会
打包好了直接下载可用。运行main.html。但代码显示有乱码,自己修改查。
本文实例讲述了jQuery实现iframe父窗体和子窗体的相互调用方法。分享给大家供大家参考,具体如下: 父窗体 <html> <head> <title>usually function</title> </head> <body>...
jquery iframe tab实例 jquery iframe tab实例 jquery iframe tab实例 jquery iframe tab实例 可实现动态添加或删除tab页
jquery 查找iframe父级页面元素的实现代码,学习jquery的朋友可以参考下。
可是 iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行,今天我们就来分享2种使用jquery实现iframe自适应高度的代码
用jQuery在IFRAME里取得父窗口的某个元素的值只好用DOM方法与jquery方法结合的方式实现了 1.在父窗口中操作 选中IFRAME中的所有单选钮$(window.frames[“iframe1”].document).find(”input[@type=’radio’]“)....
$(‘#PopFrame’)[0].contentWindow.document) 从iframe页面中选择父页面中的元素: 代码如下: $(“#PopContainer”,parent.document) 以下内容是别的网友的解决方法:只好用DOM方法与jquery方法结合的方式实现了 1....
对于javascript操作iframe父级页面元素的方法,大家应该都非常清楚了,下面结合当前非常流行的jquery分享一下如何使用jquery查找和操作iframe父级页面元素的实现代码。
获取iframe的document对象进行dom的操作,实现方法很多,下面是jquery的实现过程,喜欢玩iframe的朋友可以参考下
<iframe>也应该是框架的一种形式,它与<frame>不同的是,iframe可以嵌在网页中的任意部分。本文给大家介绍jQuery中iframe的操作(点击按钮新增窗口),需要的朋友参考下吧
本示例主要实现了在主页上嵌iframe,然后在iframe中弹出窗口的功能。 使用了jquery的nyroModal插件和jquery.form.js插件,nyroModal插件的详细使用可参考 http://nyromodal.nyrodev.com/,jquery.form.js插件的详细...
iframe实现左侧菜单右侧页面简单示例。点击左侧菜单,右侧显示不同html内容,并加有css样式,美观实用。很简单的界面,没有多余功能。
手撸简单版前端富文本编辑器。基本原理:由于富文本内容不想收到所在页面或者前端框架的影响,或者说写一个完全单独的纯编辑器,采用原生iframe+js+jquery实现。
用iframe提交表单,主要是将表单提交到iframe中,可实现无刷新提交。 html页面: <iframe name="FORMSUBMIT" width="1" height="1" ></iframe> ...