专栏首页HTML5学堂jQuery中prop和attr的区别

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),作者:HTML5学堂

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 2017 JavaScript高考全国卷 参考答案与解析

    HTML5学堂-码匠:高考结束了~做程序的你,不知道在“前端的高考”中是否发挥良好,答案已出,快来对答案吧!看看解析吧~~~ 2017 JS高考卷答案公示 全国...

    HTML5学堂
  • JavaScript | 获取数组中的单词并统计出现次数

    HTML5学堂(码匠):如何通过JavaScrip实现数组元素的查找?在一个数组当中,找到所有的单词,并统计每个单词出现的次数。 功能需求 在一个自定义数组...

    HTML5学堂
  • JQuery选择器(中)

    HTML5学堂:在学习JQuery开发的时候,选择器有多种,而我们将接着介绍选择器的其他类型,希望对大家有帮助! 5.临近选择器: $("mix+mix"),选...

    HTML5学堂
  • DeepMind发布强化学习库 RLax

    强化学习主要用于研究学习系统(智能体)的问题,该学习系统必须学习与环境进行交互的信息。智能体和环境在不连续的步骤上进行交互。在每个步骤中,智能体都会选择一个动作...

    J.Q.Wang@2048
  • 面向对象的本质是什么?

      什么是面向对象的本质呢?   万物皆对象?No   抽象?No   复用?No   那到底是什么呢? 万物皆对象。问了几位网友,这是答复之一。看到了某个...

    用户1174620
  • EdgeX foundry树莓派搭建与MQTT通讯

    使用容器方法管理和搭建EdgeX:https://docs.edgexfoundry.org/1.2/getting-started/quick-start/

    嘘、小点声
  • AI与深度学习重点回顾:Denny Britz眼中的2017

    【导读】近日,博客WILDML的作者Denny Britz把他眼中的2017年AI和深度学习的大事进行了一番梳理和总结:从AlphaGo的自主学习到AlphaG...

    WZEARW
  • 如何用sosreport在Linux上创建诊断报告

    Sosreport是RHEL / CentOS上的一个命令,它会收集系统配置和你linux机器上的诊断信息,如正在运行的内核版本、加载的模块和系统和服务配置文...

    小小科
  • Shell基础知识

    1.变量首个字符必须为字母或者下划线,变量赋值等号前后不能有空格 2.可以用${hello}来表示取出变量hello的值 3.let “var+23″可以执...

    苦咖啡
  • 基于Python的开源量化交易平台及组件汇总

    vnpy [1] 基于python的开源交易平台开发框架。项目的用户包括:私募基金,证券自营、资管,期货公司,高校的金融研究院系,个人投资者等,机构用户加起来...

    Python中文社区

扫码关注云+社区

领取腾讯云代金券