jQuery的attr和prop区别

最新推荐文章于 2022-01-18 13:33:21 发布
最新推荐文章于 2022-01-18 13:33:21 发布
阅读量206 收藏
点赞数 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的区别
m0_47720236的博客
03-12 3298
一，获取属性的区别 ● attr() 操作标签上的属性 ● prop() 操作Boolean类型的属性和有特性(class id name)的属性 attr可以操作HTML标签中的属性，不管是固有属性，还是添加的自定义属性。都可以通过attr来设置。 prop同样可以操作HTML中的固有属性，但对于自定义属性便无能为力了 下图可见 对于标签的固有属性，建议用prop方法。 如 id,class,width; 获取标签属性。 对于标签的自定义属性，建议使用attr方法。 二，获取属性值为boolean类型
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中prop()方法和attr()方法的区别浅析
10-26
在jQuery中，`attr()`和`prop()`方法都是用来处理元素的属性（attributes）和特性（properties），但它们之间存在一些关键的区别。了解这些差异对于编写高效、无误的JavaScript代码至关重要。 首先，属性...
Jquery中attr与prop的区别详解
10-19
在高版本的jquery引入prop方法后，什么时候该用prop？什么时候用attr？它们两个之间有什么区别？...下面这篇文章主要给大家介绍了Jquery中attr与prop区别的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
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 7487
完整需求是这样的：生成一个二维码，然后提供复制和下载按钮。如果你是页面上已有一个图片，可以直接跳过前面的部分。 生成二维码，可以用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 3362
以下例子是根据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 2651
前端和后端，都是通过XHRHttpRequest对象来进行数据传输，并通过setRequestHeader()来改变Content-Type。 Request Payload 如果希望看到 Request Payload，需要设置请求头部 Content-Type: application/json，再将数据经过 JSON.stringify 序列化后发送。 后端接到 http 请求后，就是截取空行后的这个请求体解析，因为我们传了 Content-Type: application/json，所以后端知道请
let到底会不会造成变量提升
amyleeYMY的博客
01-18 2011
let到底会不会造成变量提升呢？ 关于这个问题，大家可以先在心中想想现在自己的答案，我们继续往下看： 今天有个群里有人提了这个问题，大部分人都说不会，但是在我的印象里是觉得会的，但是太多不同的声音，让我也开始怀疑自己，到底会不会提升呢？ 于是我又翻起了红宝书，在红宝书（第四版）第26页，有这么一句话： let 与 var 的另一个重要的区别，就是 let 声明的变量不会在作用域中被提升。 但是在往后翻翻，在第92页又写了这么一句话： 严格来讲，let 在 JavaScript 运行时中也会被提升，但由
【JS】new一个对象发生了什么
amyleeYMY的博客
08-07 1432
  1、创建一个新对象 var obj = {} 2、让构造函数classA的this指向obj，并执行构造函数中的代码（为新对象添加属性） classA.call(obj) 3、设置新对象的_proto_属性指向构造函数classA的prototype对象 obj._proto_ = classA.prototype 4、返回该对象（对于一个构造函数即使它最后没有return...
【JS时间操作】 js获取n天之后的日期、n月之后的日期、某月最后一天的日期、某周周一和周日的日期
amyleeYMY的博客
07-10 1253
首先写一个函数将日期转成你想要的格式function timeToStr (date) { const Y = date.getFullYear() + '-' const M = (date.getMonth() + 1 &lt; 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-' const D = (date...
【JS】正则表达式 匹配索引导致匹配失败问题
amyleeYMY的博客
08-16 1122
先看下面这个例子： var re = /cat/g for (var i = 0; i &lt; 10; i++) { console.log(re.test('catfgfdjkgh')) } 我们会发现得到的结果是true false true false……，可能和我们预想的不一样。这是因为第一次调用test()找到了‘cat’，但第二次调用是从索引为3的字符（上一次匹配的...
localStorage、sessionStorage、cookie的区别、用法及使用场景
amyleeYMY的博客
09-21 1107
参考文章：https://segmentfault.com/a/1190000004556040                   https://segmentfault.com/a/1190000012057010#articleHeader0 webStorage是本地存储，存储在客户端，包括localStorage和sessionStorage。 localStorage lo...
【JS】JS引用类型指针
amyleeYMY的博客
03-01 827
先看下下面这个例子：var test = 111; var obj = { a:test, b:function () { test=222; return test; } }; console.log(obj.a); //111 console.log(obj.b()); //222 console.log(test); //2...
【JS】《JavaScript设计模式》 之 JS继承
amyleeYMY的博客
11-12 520
以前在准备面试的时候经常会看到面试题里有js实现继承的相关题，总觉得很少用的到，也没有太理解为什么要那么写，只是硬记下来了。最近在看《JavaScript设计模式》，里面有一节很详细的讲到了js继承，后面的模式里也经常用到，在这里记录下。 1.子类的原型对象——类式继承 // 声明父类 function SuperClass() { this.superValue = true } ...
自调用匿名函数
amyleeYMY的博客
05-16 415
开发中有时候需要我们自己封装api，这时候就会用到自调用匿名函数。那么自调用匿名函数是什么呢？ (function(){ // code })() 包围函数（function(){}) 的第一对括号向脚本返回未命名的函数，随后一对空括号立即执行返回的未命名函数，括号内为匿名函数的参数。 通过定义一个匿名函数，创建了一个“私有”的命名空间，该命名空间的变量和方法，不会破坏全局的命名空间。 例如：...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值