prop和attr都可以用来获取并改变对象的属性,

  • 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
  • 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。

栗子:

<a href="http://www.baidu.com" target="_self" class="btn">百度</a>

这个例子里<a>元素的DOM属性有“href、target和class",这些属性就是<a>元素本身就带有的属性,也是W3C标准里就包含有这几个属性,或者说在IDE里能够智能提示出的属性,这些就叫做固有属性。处理这些属性时,建议使用prop方法。

<a href="#" id="link1" action="delete">删除</a>

这个例子里<a>元素的DOM属性有“href、id和action”,很明显,前两个是固有属性,而后面一个“action”属性是我们自己自定义上去的,<a>元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时,建议使用attr方法。使用prop方法取值和设置属性值时,都会返回undefined值。

再举一个例子:

<input id="chk1" type="checkbox" />是否可见 <input id="chk2" type="checkbox" checked="checked" />是否可见

像checkbox,radio和select这样的元素,选中属性对应“checked”和“selected”,这些也属于固有属性,因此需要使用prop方法去操作才能获得正确的结果。

$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true

如果上面使用attr方法,则会出现:

$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"

JQuery中的prop和attr的更多相关文章

  1. jQuery中的prop和attr区别

    最近在做一个项目用jq时发现一个问题  在谷歌中可以正常出效果  但是在火狐中就是不行 就是这个prop和attr   之前用的是attr方法   但是在火狐中不出效果  于是特意看了两者的区别 主要 ...

  2. jquery中的prop和attr比较区别

    近期和一同事争执prop和attr的区别,也查了很多,同事说它只是特性和固有属性的区别,但是我也查到了一些其他的,故此,来总结一下吧! 1.固有属性和特别属性 对于HTML元素本身就带有的固有属性,在 ...

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

    1.jQuery中的prop()和attr()的区别 prop()是在jQuery1.6版本之后才有的,在之前一直都是使用attr(), prop()修复了attr()的一些小bug. 2.推荐用法: ...

  4. 【Jquery系列】prop和attr区别

    问题描述 由于prop(property的缩写)和attr(attribute的缩写)翻译成汉语,均有“特性.属性”等意思的原因,导致大家容易混淆分不清,本篇文章将试图从英文含义,中文含义和Jquer ...

  5. Jquery学习笔记(5)--jquery1.6中的.prop()和.attr()异同

    jquery1.6中的.prop()和.attr()异同 最近在iteye的新闻中看到jQuery已经更新到了1.6.1.和之前版本的最大变化是增加了.prop方法.但是.prop()方法和.attr ...

  6. 总结Jquery中获取自定义属性使用.attr()和.data()以及.prop()的区别

    一..attr()和.data()的区别: .attr()和.data()本质上属于DOM属性和Jquery对象属性的区别. 看一个例子: <!DOCTYPE html> <html ...

  7. jQuery学习之prop和attr的区别示例介绍

    1..prop( propertyName ) 获取匹配集合中第一个元素的Property的值 2. .prop( propertyName, value ) .prop( map ) .prop( ...

  8. jquery1.6中的.prop()和.attr()异同

    jquery jQueryHTML5JavaScript浏览器ITeye  最近在iteye的新闻中看到jQuery已经更新到了1.6.1.和之前版本的最大变化是增加了.prop方法.但是.prop( ...

  9. jquery中dom元素的attr和prop方法的理解

    一.背景 在编写使用高版本[ jQuery 1.6 开始新增了一个方法 prop()]的jquery插件进行编写js代码的时候,经常不知道dom元素的attr和prop方法到底有什么区别?各自有什么应 ...

随机推荐

  1. laravel安装[转https://laravelacademy.org/post/9528.html]

    Laravel 框架对PHP版本和扩展有一定要求,不过这些要求 Laravel Homestead 都已经满足了,不过如果你没有使用 Homestead 的话(那真是一件很遗憾的事情),有必要了解下这 ...

  2. 正交表生成工具 PICT 成对组合覆盖 收藏

    收藏:https://www.cnblogs.com/wmjperson/p/4557246.html

  3. 2019.2.25考试T1, 矩阵快速幂加速递推+单位根反演(容斥)

    \(\color{#0066ff}{题解}\) 然后a,b,c通过矩阵加速即可 为什么1出现偶数次3没出现的贡献是上面画绿线的部分呢? 考虑暴力统计这部分贡献,答案为\(\begin{aligned} ...

  4. C++基础学习9:构造函数和析构函数

    1.  构造函数用来对类对象进行初始化,它完成对内存空间的申请.赋初值等工作.  2.  析构函数主要是用来做清理工作的. 补充:函数名或变量名前面有"::"但是没有类名,说明这是 ...

  5. Qt 学习之路 2(10):对象模型

    Home / Qt 学习之路 2 / Qt 学习之路 2(10):对象模型 Qt 学习之路 2(10):对象模型  豆子  2012年9月2日  Qt 学习之路 2  45条评论 标准 C++ 对象模 ...

  6. [Groovy] Private fields and methods are not private in groovy

    如题,, 具体介绍请参看: http://refaktor.blogspot.com/2012/07/private-fields-and-methods-are-not.html

  7. complex 类

    //定义一个复数类Complex,使得下面的代码能够工作. //Complex c1(3,5)//用复数3+5i初始化c1 //complex c2=4.5//用实数4.5初始化c1 //comple ...

  8. Codeforces Beta Round #87 (Div. 2 Only)-Party(DFS找树的深度)

    A company has n employees numbered from 1 to n. Each employee either has no immediate manager or exa ...

  9. poj2513连接木棍(字典树+欧拉回路+并查集)

    题目传送门 题目大意:给你一堆木棍,每根木管都有两种颜色,相同颜色的部分可以连接起来,问你这堆木棍可不可以连接成1根. 思路:大致的思路很好想,就是判断欧拉回路的方法(1.联通,2,要么顶点读书全为偶 ...

  10. jenkins出现的问题

    1.增加服务器时 要修改时,,需要设置 2:出现这个问题是 执行了npm install node-sass