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 条评论
登录 后参与评论

相关文章

来自专栏deepcc

css实现强制不换行/自动换行/强制换行

4168
来自专栏新工科课程建设探讨——以能源与动力工程专业为例

2.2.2 HTML标签简介

HTML(HyperText Mark-up Language)是由HTML标签嵌套和组合的描述性文本,HTML标签可以描述文本(p,div等)、表格(tabl...

1142
来自专栏前端知识分享

第27天:js-表单获取焦点和数组声明遍历

1、this指事件的调用者 2、input.value 表单更换内容 3、innerHTML更换盒子里的内容,文字、标签都能换。 4、isNaN("12")如果...

1342
来自专栏个人随笔

初识CSS3

1.CSS规则由两部分构成,即选择器和声明器    声明必须放在{}中并且声明可以是一条或者多条    每条声明由一个属性和值构成,属性和值用冒号分开,每条语句...

3358
来自专栏C/C++基础

web前端开发初学者十问集锦(3)

我们经常使用元素的width:100%和height:100%将元素的宽度和高度扩充至父元素的宽度和高度。但是前提是需要对其父元素显示设置宽度和高度,否则无效。

902
来自专栏前端儿

JS设置CSS样式的几种方式

如果属性有'-'号,就写成驼峰的形式(如textAlign)  如果想保留 - 号,就中括号的形式  element.style['text-align'] =...

1612
来自专栏Modeng的专栏

Vue2.5笔记:Class与Style几种绑定用法

在我们的项目开发中给元素添加/删除 class 是非常常见的行为之一, 例如我们的网站导航都会给选中项添加一个 active 类用来区别选与未选中的样式,除了...

1221
来自专栏landv

用C语言实现窗口抖动

1626
来自专栏Golang语言社区

go语言实现文件分割的方法

import ( // "bufio" "flag" "fmt" "io" "os" ) import "strconv" var infile *s...

2K7
来自专栏angularejs学习篇

JQuery中的动画

  这两种方法是jQuery动画的最基本方法。当为元素调用show方法时相当于将该元素的display样式改为block或者inline,同理,如果当元素调用h...

723

扫码关注云+社区