In this short post I will explain the difference between attributes and properties in HTML. The .prop() function introduced in jQuery 1.6 raised a lot of questions about the difference and I hope this post will help you to understand it.

What is an attribute?

Attributes carry additional information about an HTML element and come in name=”value” pairs.
Example:
<div class=”my-class”></div>. Here we have a div tag and it has a class attribute with a value of my-class.

What is a property?

Property is a representation of an attribute in the HTML DOM tree. So the attribute in the example above would have a property named className with a value of my-class.

Our DIV node
|- nodeName = "DIV"
|- className = "my-class"
|- style
 |- ...
|- ...

What is the difference between attribute and property?

Attributes are in your HTML text document/file, whereas properties are in HTML DOM tree. This means that attributes do not change and always carry initial (default) values. However, HTML properties can change, for example when user checks a checkbox, inputs text to textarea or uses JavaScript to change the property value.

Here is a visual representation:

Assume user inputs his name "Joe" into the inputbox. Here are what attribute and property values of an element will be.

As you can see, only element’s property is changed, because it is in the DOM and dynamic. But element’s attribute is in HTML text and can not be changed!

I hope this helps to understand the difference between attributes and properties. If you have any questions please leave them on jQueryHowto Facebook page.

Also, stay tuned for the next post about the difference between jQuery.attr() and jQuery.prop() and when to use one over another.

简而言之:attribute是相对于html 代码而言,你可以在浏览器对象检查器中看到;
而property,是对Dom而言,还会包含对样式方面的信息,更多是用在数据编辑时使用

jQuery: 刨根问底 attr and prop两个函数的区别的更多相关文章

  1. jQuery中attr()、prop()、data()用法及区别

    .attr(),此方法从jq1.0开始一直存在,官方文档写的作用是读/写DOM的attribute值,其实1.6之前有时候是attribute,有时候又是property..prop(),此方法jq1 ...

  2. jquery中attr()与prop()函数用法实例详解(附用法区别)

    本文实例讲述了jQuery中attr()与prop()函数用法.分享给大家供大家参考,具体如下: 一.jQuery的attr()方法 jquery中用attr()方法来获取和设置元素属性,attr是a ...

  3. jQuery属性选择器.attr()和.prop()两种方法

    在判断表单单选框是否被选中时,通常会想到使用$('#checkbox').attr('checked')来判断,但在一些情况下,你会发现这种方法并不管用,得到的是undefined. 原来jQuery ...

  4. 【转】jQuery的attr与prop

    原文:<jQuery的attr与prop> jQuery1.6中新添加了一个prop方法,看起来和用起来都和attr方法一样,这两个方法有什么区别呢?这要从HTMl 的attribute与 ...

  5. jquery中attr和prop的区别、 什么时候用 attr 什么时候用 prop (转自 芈老头 )

    jquery中attr和prop的区别. 什么时候用 attr 什么时候用 prop   在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这 ...

  6. jQuery中.attr()和.prop()的区别

    之前学习jQuery的时候,学习到了两种取得标签的属性值的方法:一种是elemJobj.attr(),另一种是elemJobj.prop().而在学习JS的时候,只有一种方法elemObj.getAt ...

  7. jquery中attr和prop的区别(转)

    在网络上看到这样一篇关于jquery中attr和prop的区别文章,觉得不错,所以转载了. 在jQuery 1.6中,.attr()方法查询那些没有设置的属性,则会返回一个undefined.如果你要 ...

  8. jquery中attr和prop的区别分析

    这篇文章主要介绍了jquery中attr和prop的区别分析的相关资料,需要的朋友可以参考下 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别 ...

  9. tips:Jquery的attr和prop的区别

    Jquery的attr和prop的区别 描述:想做一个复选框checkbox全选的功能,当勾选全选后,将子项的复选框状态设置成一致的, 但遇到了一个问题,就是attr函数并不能改变子项的checkbo ...

随机推荐

  1. spring cloud连载第三篇之Spring Cloud Netflix

    1. Service Discovery: Eureka Server(服务发现:eureka服务器) 1.1 依赖 <dependency> <groupId>org.spr ...

  2. HDU 2682 Tree(Kruskal算法求解MST)

    题目: There are N (2<=N<=600) cities,each has a value of happiness,we consider two cities A and ...

  3. hadoop学习笔记(七):Java HDFS API

    一.使用HDFS FileSystem详解 HDFS依赖的第三方包: hadoop 1.x版本: commons-configuration-1.6.jar commons-lang-2.4.jar ...

  4. 扫描网站服务器真实IP的小脚本

    #!/usr/bin/env python # -*- coding: gbk -*- # -*- coding: utf_8 -*- # Date: 2015年9月11日 # Author:蔚蓝行 ...

  5. 合天misc100

    打开txt文件是一串RGB颜色值 用len(file.readlines()),发现颜色值有61366个,能分解成122*503 from PIL import Image length = 122 ...

  6. python单链表

    #!/usr/bin/env python3 # -*- coding:utf-8 -*- class LNode: """ 结点类 """ ...

  7. 【转】SQL SERVER 日期格式化

    0   或   100   (*)     默认值   mon   dd   yyyy   hh:miAM(或   PM)       1   101   美国   mm/dd/yyyy       ...

  8. C# 之String以及浅拷贝与深拷贝

     一.String到底是值类型还是引用类型 MSDN 中明确指出 String 是引用类型而不是值类型,但 String 表面上用起来却像是值类型,这又是什么原因呢? 首先从下面这个例子入手: //值 ...

  9. JSTL fn:split()函数

    jstl fn:split()函数代码和用法 -使用fn:split() 函数将一个字符串到一个数组根据分隔符字符串的子字符串. 使用fn:split() 函数将一个字符串到一个数组根据分隔符字符串的 ...

  10. PHP module 安装

    Part1:不重新安装php,安装zlib模块--------20171229 先安装zlib源码包 指定到目录 一台服务器,编译PHP时未设置参数,导致缺少zlib扩展,无法执行解压缩,错误信息是: ...