jQuery的attr和prop区别

最新推荐文章于 2022-06-13 09:48:50 发布
最新推荐文章于 2022-06-13 09:48:50 发布
阅读量207 收藏
点赞数 1
分类专栏： js 文章标签： js jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/amyleeYMY/article/details/90295902
版权

本文的开始，我们先看一个例子：

<!DOCTYPE html>
<html>
<body>
    <input type="checkbox" />test
    <script src="http://libs.baidu.com/jquery/1.6.1/jquery.min.js"></script>
    <script>
        $("input").click(function () {
            console.log($(this).attr('checked'))
        })
    </script>
</body>
</html>

我们发现结果是checked和undefined。
如果我们把jQuery版本换成1.9.1，结果则都为 undefined。

在jQuery 1.6 以后的版本中，增加了prop这个方法。为什么有了attr方法，还要新增一个类似的方法呢？
因为在 jQuery 1.6 之前，使用attr方法有时候会出现不一致的行为。所以有了prop方法。那么我们什么时候使用attr，什么时候使用prop呢？

具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled
使用prop()，其他的使用 attr()。

也有文章中写道：

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

这两种理解方法都可以。

接下来我们看看为什么不同版本的jQuery中attr行为有差异。
先看1.6.1版本中的attr方法：

attr: function( elem, name, value, pass ) {
		var nType = elem.nodeType;
		
		// don't get/set attributes on text, comment and attribute nodes
		if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {
			return undefined;
		}

		if ( pass && name in jQuery.attrFn ) {
			return jQuery( elem )[ name ]( value );
		}

		// Fallback to prop when attributes are not supported
		if ( !("getAttribute" in elem) ) {
			return jQuery.prop( elem, name, value );
		}

		var ret, hooks,
			notxml = nType !== 1 || !jQuery.isXMLDoc( elem );

		// Normalize the name if needed
		name = notxml && jQuery.attrFix[ name ] || name;

		hooks = jQuery.attrHooks[ name ];

		if ( !hooks ) {
			// Use boolHook for boolean attributes
			if ( rboolean.test( name ) &&
				(typeof value === "boolean" || value === undefined || value.toLowerCase() === name.toLowerCase()) ) {

				hooks = boolHook;

			// Use formHook for forms and if the name contains certain characters
			} else if ( formHook && (jQuery.nodeName( elem, "form" ) || rinvalidChar.test( name )) ) {
				hooks = formHook;
			}
		}

		if ( value !== undefined ) {

			if ( value === null ) {
				jQuery.removeAttr( elem, name );
				return undefined;

			} else if ( hooks && "set" in hooks && notxml && (ret = hooks.set( elem, value, name )) !== undefined ) {
				return ret;

			} else {
				elem.setAttribute( name, "" + value );
				return value;
			}

		} else if ( hooks && "get" in hooks && notxml ) {
			return hooks.get( elem, name );

		} else {

			ret = elem.getAttribute( name );

			// Non-existent attributes return null, we normalize to undefined
			return ret === null ?
				undefined :
				ret;
		}
	}

1.9.1中attr方法：

attr: function( elem, name, value ) {
		var hooks, notxml, ret,
			nType = elem.nodeType;

		// don't get/set attributes on text, comment and attribute nodes
		if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {
			return;
		}

		// Fallback to prop when attributes are not supported
		if ( typeof elem.getAttribute === core_strundefined ) {
			return jQuery.prop( elem, name, value );
		}

		notxml = nType !== 1 || !jQuery.isXMLDoc( elem );

		// All attributes are lowercase
		// Grab necessary hook if one is defined
		if ( notxml ) {
			name = name.toLowerCase();
			hooks = jQuery.attrHooks[ name ] || ( rboolean.test( name ) ? boolHook : nodeHook );
		}

		if ( value !== undefined ) {

			if ( value === null ) {
				jQuery.removeAttr( elem, name );

			} else if ( hooks && notxml && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) {
				return ret;

			} else {
				elem.setAttribute( name, value + "" );
				return value;
			}

		} else if ( hooks && notxml && "get" in hooks && (ret = hooks.get( elem, name )) !== null ) {
			return ret;

		} else {

			// In IE9+, Flash objects don't have .getAttribute (#12945)
			// Support: IE9+
			if ( typeof elem.getAttribute !== core_strundefined ) {
				ret =  elem.getAttribute( name );
			}

			// Non-existent attributes return null, we normalize to undefined
			return ret == null ?
				undefined :
				ret;
		}
	}

我们在看看其中都有用到的boolHook：
1.6.1中：

// Hook for boolean attributes
boolHook = {
	get: function( elem, name ) {
		// Align boolean attributes with corresponding properties
		return elem[ jQuery.propFix[ name ] || name ] ?
			name.toLowerCase() :
			undefined;
	}
};

1.9.1中：

// Hook for boolean attributes
boolHook = {
	get: function( elem, name ) {
		var
			// Use .prop to determine if this attribute is understood as boolean
			prop = jQuery.prop( elem, name ),

			// Fetch it accordingly
			attr = typeof prop === "boolean" && elem.getAttribute( name ),
			detail = typeof prop === "boolean" ?

				getSetInput && getSetAttribute ?
					attr != null :
					// oldIE fabricates an empty string for missing boolean attributes
					// and conflates checked/selected into attroperties
					ruseDefault.test( name ) ?
						elem[ jQuery.camelCase( "default-" + name ) ] :
						!!attr :

				// fetch an attribute node for properties not recognized as boolean
				elem.getAttributeNode( name );

		return detail && detail.value !== false ?
			name.toLowerCase() :
			undefined;
	}
}

我们可以发现，在不同版本jQuery中boolHook的set方法处理不同，在1.6.1版本中相当于：

// 能得到正确的布尔值
document.getElementsByTagName("input")[0]['checked']

而在1.9.1中相当于：

// 结果为null
document.getElementsByTagName("input")[0].getAttribute("checked")

那prop和attr的区别主要在哪呢，我们看看prop的实现（1.6.1和1.9.1 版本prop实现方法无本质区别，这里只列举1.9.1版本）：

prop: function( elem, name, value ) {
		var ret, hooks, notxml,
			nType = elem.nodeType;

		// don't get/set properties on text, comment and attribute nodes
		if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {
			return;
		}

		notxml = nType !== 1 || !jQuery.isXMLDoc( elem );

		if ( notxml ) {
			// Fix name and attach hooks
			name = jQuery.propFix[ name ] || name;
			hooks = jQuery.propHooks[ name ];
		}

		if ( value !== undefined ) {
			if ( hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) {
				return ret;

			} else {
				return ( elem[ name ] = value );
			}

		} else {
			if ( hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ) {
				return ret;

			} else {
				return elem[ name ];
			}
		}
	}

在attr方法中核心代码为：

elem.setAttribute( name, "" + value );
ret = elem.getAttribute( name );

在prop方法中核心代码为：

elem[ name ] = value;
elem[ name ];

这样差异就一目了然了。

所以我们平时用到这两个方法时需要区分下两者的区别。

萌圆圆不萌
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery中attr和prop的区别分析
10-24
在jQuery中，`attr` 和 `prop` 是两个用于获取和设置HTML元素属性的方法，但它们之间存在着重要的差异。理解这两个方法的区别对于高效且准确地操作DOM至关重要。 首先，`attr` 方法主要用于处理HTML元素的自定义...
Jquery中attr与prop的区别详解
10-19
在jQuery中，`attr`和`prop`是两个用于获取和设置HTML元素属性的方法，但它们之间存在着重要的区别。在高版本的jQuery中，引入`prop`方法是为了更精确地处理元素的特性，特别是那些与JavaScript行为密切相关的属性。...
JQ attr prop 区别
weixin_30825199的博客
12-19 69
解决方法：使用prop属性代替attr属性 一、Attr除 checked, selected, 或 disabled状态属性外，其余的属性均可用attr()设置和修改。$("img").attr("src");$("img").attr("src");$("img").attr("src","test.jpg");$("img").attr("src","test.jpg"); 二、P...
jquery中attr和prop的区别
m0_47720236的博客
03-12 3318
一，获取属性的区别 ● attr() 操作标签上的属性 ● prop() 操作Boolean类型的属性和有特性(class id name)的属性 attr可以操作HTML标签中的属性，不管是固有属性，还是添加的自定义属性。都可以通过attr来设置。 prop同样可以操作HTML中的固有属性，但对于自定义属性便无能为力了 下图可见 对于标签的固有属性，建议用prop方法。 如 id,class,width; 获取标签属性。 对于标签的自定义属性，建议使用attr方法。 二，获取属性值为boolean类型
jquery attr和prop区别
wangjun5159的专栏
08-11 832
问题再现使用jquery选中checkbox时，只有鼠标点击后，才起作用，之后就不起作用，$(“#mycheckbox”).attr(“checked”,true) 后来搜到很多说明，说是jquery版本的缘故，要用prop，这个理由很笼统，我还是没懂attr和prop之间的区别。看了很多帖子后，总结出以下原因。代码<div id="mydiv" class="myclass" customatt
jquery中关于attr和prop的区别！
Java&Develop的博客
06-13 4307
昨天这两个方法搞混了,被公司大佬说了下，虽然没说什么，但还是挺尴尬的。重点是大佬说你可以用attr方法，我特么第一句话就是怎么用呢。原谅我使用vue之后太依赖框架的东西了，以至于以前jquery玩的也挺溜的我，慢慢淡忘了 jquery。罪过罪过呢！jquery还是一款很优秀的函数库，哎 不说了 继续码代码了。 $().attr() 允许我们往元素上加上自定义属性 我们也可以用attr 获取提前定义好的在上面的 自定义属性值 当然 也可以获取到 元素 自带的一些属性 那么 attr 是获取和设置 属性的
jQuery中attr与prop
m0_52228992的博客
05-14 848
attr与prop非常相似，均可访问元素的属性值和设置属性值，但prop多用于设置（访问）DOM属性，attr没有限制,HTML、DOM均可 语法： 获取属性值：元素.attr("属性") 或者 元素.prop("属性") 设置属性值：元素.attr("属性","属性值") 或者 元素.prop("属性","属性值") 设置获取属性时，需要注意的是，这里的属性必须能够直接在html标签内写出，类似（<img src"XXX" width="100px">），这里的width可以访问并设.
jQuery的attr和prop的区别
weixin_44172800的博客
04-21 154
jQuery的attr和prop的区别 $('').attr()返回的是html对象 $('').prop()返回的是DOM对象 attr(): attr() 方法设置或返回被选元素的属性和值。 当该方法用于返回属性值，则返回第一个匹配元素的值。 当该方法用于设置属性值，则为匹配元素设置一个或多个属性/值对。 方法操作adio（checkbox）之类的控件，让其选中的时候，其控...
jQuery中prop和attr的区别
lxf1276650695的博客
05-17 216
官方定义：attr(): attr() 方法设置或返回被选元素的属性和值。 当该方法用于返回属性值，则返回第一个匹配元素的值。 当该方法用于设置属性值，则为匹配元素设置一个或多个属性/值对。 prop(): prop() 方法设置或返回被选元素的属性和值。 当该方法用于返回属性值时，则返回第一个匹配元素的值。 当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。 $(’’).attr()返回的是html对象 (′′).prop()返回的是DOM对象prop()方法操作radio（checkb
Jquery中attr和prop的区别
极客神殿
07-17 1786
在高版本的jquery引入prop方法后，什么时候该用prop？什么时候用attr？它们两个之间有什么区别？这些问题就出现了。 关于它们两个的区别，网上的答案很多。这里谈谈我的心得，我的心得很简单： 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。 上面的描述也许有点模糊，举几个例子就知道了。 ...
jquery中prop()方法和attr()方法的区别浅析
10-26
在jQuery中，`attr()`和`prop()`方法都是用来处理元素的属性（attributes）和特性（properties），但它们之间存在一些关键的区别。了解这些差异对于编写高效、无误的JavaScript代码至关重要。 首先，属性...
jquery中attr、prop、data区别与用法分析
10-16
主要介绍了jquery中attr、prop、data区别与用法,结合实例形式分析了jQuery中attr、prop、data的区别、功能、使用方法及相关注意事项,需要的朋友可以参考下
document.execCommand(‘copy‘) 复制不成功 不同浏览器兼容问题
热门推荐
amyleeYMY的博客
09-14 1万+
前几天遇到了一个js复制在不同浏览器下行为不同问题，花了几个小时看问题，最后发现竟然是js在ajax中执行剪切板操作会有问题。 场景是这样的：复制的内容是可配置的，所以进行复制操作前需要进行请求。 具体问题：复制操作在chrome浏览器和360浏览器上是正常的，在QQ浏览器和UC浏览器上复制不成功。 实现复制主要代码： // for ie if (window.clipboardData) { window.clipboardData.clearData(); window.clipboardData.
addEventListener多次触发，removeEventListener不生效问题
amyleeYMY的博客
10-26 1万+
这两天写了个小功能封装成api供别人使用，在开发中遇到了些问题，记录下。 项目情况是有地方触发多次执行这部分代码，所以我想在每次add前先remove掉。 用addEventListener绑定事件，但是addEventListener可以给同一元素多次绑定同一事件，导致多次触发。 然后就想到用removeEventListener来移除之前绑定的事件。但是，一切都没有那么顺利... 第一...
js实现复制图片到剪切板&下载图片
amyleeYMY的博客
08-12 7501
完整需求是这样的：生成一个二维码，然后提供复制和下载按钮。如果你是页面上已有一个图片，可以直接跳过前面的部分。 生成二维码，可以用qrcode。 http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js github地址：https://github.com/davidshimjs/qrcodejs $('#code').qr...
【JS】根据数组对象的属性值把 一维数组转为二维数组
amyleeYMY的博客
09-12 3376
以下例子是根据time属性把一维数组转为二维数组。 先定义一个数组： const array = [ { id: 123, time: '2018-7', name: 'aaa' }, { id: 123, time: '2018-8', name: 'aaa' }...
在 chrome 调试工具中，Form Data 和 Request Payload 有什么区别?
amyleeYMY的博客
06-28 2710
前端和后端，都是通过XHRHttpRequest对象来进行数据传输，并通过setRequestHeader()来改变Content-Type。 Request Payload 如果希望看到 Request Payload，需要设置请求头部 Content-Type: application/json，再将数据经过 JSON.stringify 序列化后发送。 后端接到 http 请求后，就是截取空行后的这个请求体解析，因为我们传了 Content-Type: application/json，所以后端知道请
let到底会不会造成变量提升
amyleeYMY的博客
01-18 2021
let到底会不会造成变量提升呢？ 关于这个问题，大家可以先在心中想想现在自己的答案，我们继续往下看： 今天有个群里有人提了这个问题，大部分人都说不会，但是在我的印象里是觉得会的，但是太多不同的声音，让我也开始怀疑自己，到底会不会提升呢？ 于是我又翻起了红宝书，在红宝书（第四版）第26页，有这么一句话： let 与 var 的另一个重要的区别，就是 let 声明的变量不会在作用域中被提升。 但是在往后翻翻，在第92页又写了这么一句话： 严格来讲，let 在 JavaScript 运行时中也会被提升，但由

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值