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

相关文章

来自专栏前端知识分享

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

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

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

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

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

992
来自专栏Modeng的专栏

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

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

1621
来自专栏js编程在工科课程中的简单应用

2.2.2 HTML标签简介

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

1382
来自专栏三木的博客

React 概要

React 简介 React 是一个开源的javascript库,用来构建用户接口(UI)。下图是React的一些基本信息: ? React 的特点 单向数据流...

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

silverlight中的几个冷门标记 {x:Null},d:DesignWidth,d:DesignHeight

{x:Null}:用于设置某属性值为Null,比如<Rectangle Fill="{x:Null}" />,其实就相当于<Rectangle />,个人感觉这...

2036
来自专栏landv

用C语言实现窗口抖动

1816
来自专栏阮一峰的网络日志

jQuery设计思想

jQuery是目前使用最广泛的javascript函数库。 据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQue...

5496
来自专栏angularejs学习篇

JQuery中的动画

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

843
来自专栏Golang语言社区

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

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

3.2K7

扫码关注云+社区

领取腾讯云代金券