jquery中attr和prop的区别分析
在高版本的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值。
再举一个例子:
<input id="chk1" type="checkbox" />是否可见 <input id="chk2" type="checkbox" checked="checked" />是否可见
像checkbox,radio和select这样的元素,选中属性对应“checked”和“selected”,这些也属于固有属性,因此需要使用prop方法去操作才能获得正确的结果。
$("#chk1").prop("checked") == false $("#chk2").prop("checked") == true
如果上面使用attr方法,则会出现:
$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"
全文完。
以上就是本文的全部内容了,希望大家能够喜欢。
相关推荐
-
jQuery中attr()与prop()函数用法实例详解(附用法区别)
本文实例讲述了jQuery中attr()与prop()函数用法.分享给大家供大家参考,具体如下: 一.jQuery的attr()方法 jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到attr(),attr()有4个表达式. 1. attr(属性名) //获取属性的值(取得第一个匹配元素的属性值.通过这个方法可以方便地从第一个匹配元素中获取一个属性的值.如果元素没有相应属性,则返回 undefined ) 2.
-
jQuery获取attr()与prop()属性值的方法及区别介绍
今天在项目中使用<select></select>下拉菜单时,使用juery操作,使页面加载完菜单默认选中的值为2,我一开始的操作如下: <!--html部分--> <select> <option value="1">1</option> <option value="2">2</option> <option value="3">3&l
-
jQuery学习之prop和attr的区别示例介绍
1..prop( propertyName ) 获取匹配集合中第一个元素的Property的值 2. .prop( propertyName, value ) .prop( map ) .prop( propertyName, function(index, oldPropertyValue) ) 给匹配元素集合设定一个或多个属性 .prop()和 .attr()区别 下面是关于jQuery1.6和1.6.1中Attributes模块变化的描述,以及.attr()方法和.prop()方法的首选使
-
jQuery中attr()和prop()在修改checked属性时的区别
在做复选框全选按钮的时候,出现了一个问题,使用语句$.attr('checked',true),将复选框的属性改为被选中,在chrome浏览器中第一次点击有效后面就不行了,IE8倒是没有问题. 百度了很久找到原因是HTML的属性分为attribute和property,暂且将后者称为特性. checked属性即分为attribute->checked,和property->true,false. 对于一个checkbox,若未定义checked="checked",aler
-
jquery prop的使用介绍及与attr的区别
Prop和attr的作用类似 相同点:两者都可以获取属性值和设置属性值 不同点:在处理checkbox上,建议使用prop,原因在于IE浏览器不兼容,因为是相似的所有个人建议使用prop 删除属性的时候使用:removeProp("xxx") 例子: 获取属性值 复制代码 代码如下: var currentChecked=$(".my-checked").prop("checked"); 值为true/false 设置属性值 复制代码 代码如下:
-
Jquery中attr与prop的区别详解
实践过程 在前一段时间,同事做了一个页面,效果是这样的 页面 当点击左上方那个checkBox时,要将下面的checkBox全部选中,我们的代码是这样的 $("input[name='checkbox']").attr("checked",true); 然并卵,一点效果都没有,后来换成这样,好了 $(function(){ $("#all").click(function(){ if($("#all").prop("
-
jquery中prop()方法和attr()方法的区别浅析
jquery1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. 大家都知道有的浏览器只要写disabled,checked就可以了,而有的要写成disabled = "disabled",checked="checked",比如用attr("checked")获取checkbox的checked属性时选中的时候可以取到值,值为"checked"但没选中获取值就是un
-
jquery中attr和prop的区别分析
在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: • 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. • 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. 上面的描述也许有点模糊,举几个例子就知道了. 复制代码 代码如下: <a href="http://www.baidu.com" ta
-
jQuery中.attr()和.data()的区别分析
$.attr()和$.data()本质上属于 DOM属性 和 Jquery对象属性 的区别. Jquery对象属性和DOM属性 一个简单的例子 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jquery中.attr和.data的区别</title> </head> <body> <p id="app&q
-
jquery中attr、prop、data区别与用法分析
本文实例讲述了jquery中attr.prop.data区别与用法.分享给大家供大家参考,具体如下: 在高版本的jquery中获取标签的属性,可以使用attr().prop().data(),那么这些方法有什么区别呢? 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. .data()看作是存取data-xxx这样DOM附加信息的方法 上面的描述也许有点模糊,举几个例子就知道了. <a href="h
-
Jquery中offset()和position()的区别分析
本文实例分析了Jquery中offset()和position()的区别.分享给大家供大家参考.具体分析如下: 一.Jquery中offset() 获取匹配元素在当前视口的相对偏移. 总是计算相对于文档的位置,无论元素的父元素或祖先元素的position属性是什么. 返回的对象包含两个整形属性:top 和 left.此方法只对可见元素有效. 例如: <!DOCTYPE html> <html> <head> <style> p { margin-left
-
jQuery中parents()和parent()的区别分析
本文实例分析了jQuery中parents()和parent()的区别,分享给大家供大家参考.具体分析如下: 其实在jQuery中,函数或者选择器的概念都是很容易理解的,只要对API手册有足够的熟练就能够很容易分辨,标题中的函数其实也是如此,不过咱们这里还是做一些简单的介绍,毕竟这样可能更为方便一些. 一.parents()函数: 此函数能够获取匹配元素的所有父元素,代码示例: 复制代码 代码如下: $(".mayi").parents().css("color",
-
关于jQuery中.attr()和.prop()的问题探讨
话说写了几句代码在ie8上能正常运行,chrome和ff却不行,朋友说这就是RP啊,郁闷! 其实功能需求是这样的,两个radio:男和女,一个button:重置.启动页面默认选中男,在用户选择女之后又点击重置按钮,需要恢复到默认状态. 复制代码 代码如下: <input type="radio" id="hRdMale" checked="checked" name="sex" value="male"
-
关于jquery中attr()和prop()方法的区别
最近项目回归使用jquery,页面渲染全是使用jquery做的,所以做的时候也遇到了许多以前没有见过的问题,如这次操作[radio]控件的"checked"属性时有遇到问题, $("...").attr("checked",false);无法起到作用,上网查了下使用prop()完美的解决了该问题,特此记录一下. 官方定义:attr(): attr() 方法设置或返回被选元素的属性和值. 当该方法用于返回属性值,则返回第一个匹配元素的值. 当该方法
-
jQuery中closest和parents的区别分析
jQuery中closest和parents从表现上来看都是说查找上线元素的一些内容了,但如果说仔细可能各位不懂,下面我们一起来看看closest和parents区别. 1.父级 parent()--唯一父级元素,可能是0个或1个元素. 2.祖先 parents(selected)--所有selected祖先(不包含根元素),可能是0个.1个或多个元素. closest(selected)--唯一selected祖先,可能是0个或1个元素. closest和parents的主要区别是: 前者从当
随机推荐
- 深入浅析AjaxFileUpload实现单个文件的 Ajax 文件上传库
- json 入门学习笔记 示例代码
- 基于jquery实现鼠标滚轮驱动的图片切换效果
- VS2005打开VS2008项目的2种方法(vs2005怎么打开2008)
- Tomcat启动成功访问主页失败的原因解决方案
- 非常实用的C#字符串操作处理类StringHelper.cs
- Android 判断是否有外网连接
- PHP通过引用传递参数用法分析
- php语言流程控制中的主动与被动
- JS取数字小数点后两位或n位的简单方法
- JS中IP地址与整数相互转换的实现代码
- JQuery实现简单的图片滑动切换特效
- 恢复 SQL 被注入后的数据代码
- linux压缩常用命令小结
- 简单的jquery左侧导航栏和页面选中效果
- jquery插件jTimer(jquery定时器)使用方法
- java基础之标签、按钮和按钮事件简介
- 基于Servlet实现技术问答网站系统
- ESC键不太为人知的几个妙用
- 主题越小,网站用户粘度越高