jquery attr()与prop()的区别

最新推荐文章于 2025-09-06 09:26:50 发布

转载最新推荐文章于 2025-09-06 09:26:50 发布 · 50 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/3680343/blog/1592277

文章标签：

#python #javascript #ViewUI

本文通过示例对比了jQuery中attr()与prop()方法在处理checked等布尔属性时的不同表现。并根据官方建议总结了两种方法在不同场景下的适用性。

2019独角兽企业重金招聘Python工程师标准>>>

写个例子比较下attr()与prop()的差异

<body>
   <input type="radio" name="radio1" class="radio-btn">
   <label>男</label>
   <script type="text/javascript">
      $(document).ready(function(){
        // attr()获取的checked
         var checkedAttr=$(".radio-btn").attr("checked");
         console.log("attr()获取的值---------"+checkedAttr);
         // prop()获取的checked
         var checkedProp=$(".radio-btn").prop("checked");
         console.log("prop()获取的值---------"+checkedProp);
      });
   </script>
</body>

效果图：

如果给input添加checked属性

由此可知prop()方法获取属性统一返回true或false,attr()则返回undefined或checked

在做项目中，我遇到了使用attr()方法禁用单选按钮点击事件失效的问题，后来翻看好多资料，显示jquery版本在1.6+以上就用prop()代替了attr(),特别是如checked, selected 或者 disabled这一类的属性(具有true和false两个属性值的属性)，最好使用prop()方法，其他的可以使用attr()方法

以下是官方建议attr(),prop()的使用：

Attribute/Property	`.attr()`	`.prop()`
accesskey	√
align	√
async	√	√
autofocus	√	√
checked	√	√
class	√
contenteditable	√
draggable	√
href	√
id	√
label	√
location ( i.e. window.location )	√	√
multiple	√	√
readOnly	√	√
rel	√
selected	√	√
src	√
tabindex	√
title	√
type	√
width ( if needed over `.width()` )	√

转载于:https://my.oschina.net/u/3680343/blog/1592277

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33836874

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

jQuery中attr与prop

m0_52228992的博客

05-14

954

attr与prop非常相似，均可访问元素的属性值和设置属性值，但prop多用于设置（访问）DOM属性，attr没有限制,HTML、DOM均可语法：获取属性值：元素.attr("属性") 或者元素.prop("属性") 设置属性值：元素.attr("属性","属性值") 或者元素.prop("属性","属性值") 设置获取属性时，需要注意的是，这里的属性必须能够直接在html标签内写出，类似（<img src"XXX" width="100px">），这里的width可以访问并设.

jquery中attr和prop的区别

m0_47720236的博客

03-12

3431

一，获取属性的区别 ● attr() 操作标签上的属性 ● prop() 操作Boolean类型的属性和有特性(class id name)的属性 attr可以操作HTML标签中的属性，不管是固有属性，还是添加的自定义属性。都可以通过attr来设置。 prop同样可以操作HTML中的固有属性，但对于自定义属性便无能为力了下图可见对于标签的固有属性，建议用prop方法。如 id,class,width; 获取标签属性。对于标签的自定义属性，建议使用attr方法。二，获取属性值为boolean类型

参与评论您还未登录，请先登录后发表或查看评论

Jquery attr与prop区别

不是秃头的程序员小李

04-26

417

prop定义和用法 prop() 方法设置或返回被选元素的属性和值。当该方法用于返回属性值时，则返回第一个匹配元素的值。当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。注意：prop() 方法应该用于检索属性值，例如 DOM 属性（如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaul

jquery attr与prop区别。

weixin_30492047的博客

06-29

177

attr返回值是字符串，而prop返回的是jQuery对象。区别一：attr可以查询自定义属性的值，prop则返回undefined 区别二对于input类型为单选框，复选框的checked属性返回值不同，attr为checked或者undefined prop为true或false。选择框select/option的属性selected：attr为selected或者undef...

jquery中关于attr和prop的区别！

Java&Develop的博客

06-13

5833

昨天这两个方法搞混了,被公司大佬说了下，虽然没说什么，但还是挺尴尬的。重点是大佬说你可以用attr方法，我特么第一句话就是怎么用呢。原谅我使用vue之后太依赖框架的东西了，以至于以前jquery玩的也挺溜的我，慢慢淡忘了 jquery。罪过罪过呢！jquery还是一款很优秀的函数库，哎不说了继续码代码了。 $().attr() 允许我们往元素上加上自定义属性我们也可以用attr 获取提前定义好的在上面的自定义属性值当然也可以获取到元素自带的一些属性那么 attr 是获取和设置属性的

jQuery中prop和attr的区别

lxf1276650695的博客

05-17

282

官方定义：attr(): attr() 方法设置或返回被选元素的属性和值。当该方法用于返回属性值，则返回第一个匹配元素的值。当该方法用于设置属性值，则为匹配元素设置一个或多个属性/值对。 prop(): prop() 方法设置或返回被选元素的属性和值。当该方法用于返回属性值时，则返回第一个匹配元素的值。当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。 $(’’).attr()返回的是html对象 (′′).prop()返回的是DOM对象prop()方法操作radio（checkb

attr 与prop 的区别

linjun的博客

05-04

458

特别是当涉及到布尔属性（如 checked、disabled）时，因为它更准确、更可靠。是两个常用的方法，用于操作 HTML 元素的属性和属性值。则更适合于处理自定义属性或 HTML5 中的新属性。它们之间的区别主要在于针对不同类型的属性操作。在大多数情况下，应该优先使用。

jQuery的attr()与prop()的区别

zhuaaaa3944210的博客

04-27

181

jQuery的attr()与prop()的区别

jQuery的attr和prop的区别

weixin_44172800的博客

04-21

226

jQuery的attr和prop的区别 $('').attr()返回的是html对象 $('').prop()返回的是DOM对象 attr(): attr() 方法设置或返回被选元素的属性和值。当该方法用于返回属性值，则返回第一个匹配元素的值。当该方法用于设置属性值，则为匹配元素设置一个或多个属性/值对。方法操作adio（checkbox）之类的控件，让其选中的时候，其控...

在jQuery中，prop()和attr()区别

SUNGUOGUO1的博客

05-27

253

在jQuery中，prop()和attr()区别 prop()方法只能用于获取和设置HTML元素的固有属性（如checked、selected、disabled等），而不能用于自定义属性。而attr()方法既可以用于固有属性，也可以用于自定义属性。 prop()方法返回的是一个布尔值或者一个原始类型值（如数字、字符串等），而attr()方法则返回一个字符串。在某些情况下，prop()方法和attr()方法返回的值可能不同。例如，当用prop()方法获取checkbox的checked属性时，返回的是布尔

Jquery中attr与prop的区别详解

10-19

在jQuery中，`attr`和`prop`是两个用于获取和设置HTML元素属性的方法，但它们之间存在着重要的区别。在高版本的jQuery中，引入`prop`方法是为了更精确地处理元素的特性，特别是那些与JavaScript行为密切相关的属性。...

jquery中attr、prop、data区别与用法分析

10-16

jQuery作为前端开发中非常重要的JavaScript库，其提供的attr、prop和data方法分别用于操作HTML元素的属性，理解它们的区别与用法对于前端开发人员来说非常重要。本文将结合实例详细分析这三个方法的差异、功能、使用...

jquery中attr和prop的区别分析

10-24

总结来说，`attr` 和 `prop` 的主要区别在于： 1. `attr` 用于处理自定义属性和非固有属性，而`prop` 用于处理固有属性。 2. 固有属性（如`checked`、`selected`）使用`prop`可以获取或设置正确的布尔值，而`attr`则...

jquery中prop()方法和attr()方法的区别浅析

10-26

在jQuery中，`attr()`和`prop()`方法都是用来处理元素的属性（attributes）和特性（properties），但它们之间存在一些关键的区别。了解这些差异对于编写高效、无误的JavaScript代码至关重要。首先，属性...

Java 和 Python 的执行方式有很大不同——Android学习

ban102055的博客

09-04

1923

特性PythonJava执行方式(解释执行)->(先编译后执行)是否需要编译否是环境需要 Python 解释器需要JDK(包含javac和java在Android Studio中不适用全自动，点击“Run”即可给你的建议：为了学习 Android 开发：直接使用。不要担心命令行，IDE 会帮你处理一切。专注于编写代码和理解 Android 的概念（如 Activity、生命周期）。为了单纯学习 Java 语法。

【TXT】用 Python 实现超漂亮的 HTML 两栏文本对比工具（支持行内差异高亮）

采菊东篱下，Python满乾坤！

09-05

863

这个小工具虽然只有 300 多行代码，但却融合了文本处理、算法匹配、前端渲染和用户体验设计。它不仅实用，还能作为学习difflib和 HTML/CSS 布局的优秀范例。✅一句话总结：让文本对比不再枯燥，让差异“看得见”！也欢迎在评论区提出你的优化想法 😊。

Java 枚举通用接口设计与实现

sunnyday0426的博客

09-04

555

本文介绍了Java中枚举类型的通用接口设计方法。通过定义BaseEnumInterface接口，可以为枚举添加code和desc属性，并提供统一的静态操作方法，如根据code获取枚举实例、获取所有编码列表、验证编码有效性等。以GenderEnum为例，展示了枚举类如何实现该接口，并演示了通过接口提供的通用方法进行便捷操作。这种设计模式提高了代码复用性，使枚举操作更加规范统一。

AI驱动的软件测试：革命性的自动化、缺陷检测与实验优化