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

相关文章

来自专栏前端儿

JS设置CSS样式的几种方式

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

1072
来自专栏Modeng的专栏

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

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

861
来自专栏偏前端工程师的驿站

CSS魔法堂:选择器及其优先级

一、前言                               首先看看一道阿里这期网申的题目吧! 1.找出下面优先级相同的选择器   A. im...

2116
来自专栏老秦求学

百练 石头剪刀布

总时间限制: 1000ms内存限制: 65536kB描述 石头剪刀布是常见的猜拳游戏。石头胜剪刀,剪刀胜布,布胜石头。如果两个人出拳一样,则不分胜负。 一天,小...

3367
来自专栏三木的博客

React 概要

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

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

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

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

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

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

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

812
来自专栏一枝花算不算浪漫

[Java面试九]脚本语言知识总结.

34313
来自专栏web前端教室

html5-canvas刮刮卡实例-圆形刮痕

知识点 1、globalCompositeOperation属性,该属性表示的是图形的组合方式 2、使用到的是destination-out,它表示只绘制原图形...

1968
来自专栏Golang语言社区

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

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

1.8K7

扫码关注云+社区