jQuery中prop和attr的区别

HTML5学堂:本文介绍了prop和attr的区别。jQuery中有这么两个东西 —— attr()与prop(),很多开发者在使用时,经常容易混淆,今天HTML5学堂小编-其其就带你一起看看attr和prop方法。

jQuery文档中,attr和prop的参数都是一样的,而这两个东西都被认为是属性,那么他们之间到底有什么区别呢?下面我们一起验证下。

attr与prop的真身

attr全称attribute(属性)

prop全称property(属性)

虽然都是属性,但他们所指的属性并不相同,attr所指的属性是HTML标签属性,而prop所指的是DOM对象属性,可以认为attr是显式的,而prop是隐式的。

到这里可能还有些模糊,下面我们来直接举个例子。

html代码

  1. <input id="box" type="checkbox"/>

js代码

  1. $("#box").attr("checked") // undefined
  2. $("#box").prop("checked") // false

可以看到attr获取一个标签内没有的东西会得到undefined,而prop获取的是这个DOM对象的属性,因此checked为false。

我们继续看,加上checked属性后。

  1. <input id="box" type="checkbox" checked/>
  2. $("#box").attr("checked") // checked
  3. $("#box").prop("checked") // true

这已经可以证明attr的局限性,它的作用范围只限于HTML标签内的属性。id,type等属性也属于对象属性,prop也可以操作,那么问题来了,自定义属性prop能否成功支持呢,我们也试试。

  1. <input id="box" type="checkbox" checked data-new="自定义属性"/>
  2. $("#box").attr("data-new") // 自定义属性
  3. $("#box").prop("data-new") // undefined

可以看出来,prop不支持自定义属性,经过自己的亲手试验,应该已经明白了他们之间的区别了吧。

总结-使用经验

1、对标签内的属性使用attr来读取和设置。

2、对DOM对象固有的一些属性,使用prop获取和设置。

HTML5学堂小编-其其。耗时:1h

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-03-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员互动联盟

【面试宝典】continue、break和return

面试官:continue会用吧。 小白:用来结束当前循环的。 面试官:那break呢? 小白:也是用来结束循环的。 面试官:那么它们的区别呢? 面试解析: 面试...

3308
来自专栏菩提树下的杨过

python:函数的高级特性

1583
来自专栏从零开始学 Web 前端

从零开始学 Web 之 CSS(四)CSS初始化、定位、overflow、标签规范

CSS初始化是指重设浏览器的样式。不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一。如果没对CSS初始化往往会出现浏览器之间的页面...

793
来自专栏编程

python史上最全列表知识

python连载第十五篇~list列表 该篇整体结构如下: 列表定义 列表元素访问 修改,添加 各种删除方法 列表切片读取内容 列表排序 列表插入,复制 列表加...

1705
来自专栏HTML5学堂

操作符与数据类型转换

上一期堡堡给大家讲解了关于JS的基础语法,虽然是一些非常基础的知识,但是它对大家的后期学习奠定了一定的基础。知识像一张网,基础越扎实,网住的鱼就越多,要告诉大家...

2778
来自专栏xx_Cc的学习总结专栏

iOS底层原理总结 - 探寻Runtime本质(二)

1182
来自专栏HTML5学堂

获取对象具体类型的功能函数

HTML5学堂:JavaScript当中,时常会使用到typeof来进行数据类型的检测,但是我们觉得typeof不能够满足我们的需求,对于数组、函数、时间对象等...

3047
来自专栏程序员互动联盟

【编程基础】C语言逻辑运算符

C语言关系运算符和逻辑运算符几乎无所不在,比如在循环语句、分支语句、逻辑判断等语句块中都会出现。学好这部分对学好C语言具有重要作用。 C语言中有一共有如下6中...

3346
来自专栏前端学习心得

异步解决方案----Promise与Await

1394
来自专栏诸葛青云的专栏

C语言入门基础学习函数?来看我就告诉你!

在前面我们已经讲过了一些简单的函数,如程序的主函数main()、标准输出函数printf()。在C语言中,大多数功能都是依靠函数来实现的。But,你知道什么是函...

753

扫描关注云+社区