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. day01.1-计算机体系与数据描述

    一.   指令执行过程                                 二.   计算机体系架构                                其中,ROM所存数据较为 ...

  2. [hdu 2089] 不要62 数位dp|dfs 入门

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2089 题意:求[n, m]区间内不含4和62的数字个数. 这题有两种思路,直接数位dp和dfs 数位d ...

  3. Kafka学习文档

    本教程假定您是一只小白,没有Kafka 或ZooKeeper 方面的经验. Kafka脚本在Unix和Windows平台有所不同,在Windows平台,请使用 bin\windows\ 而不是bin/ ...

  4. Scrapy 中 Request 对象和 Response 对象的各参数及属性介绍

    Request 对象 Request构造器方法的参数列表: Request(url [, callback=None, method='GET', headers=None, body=None,co ...

  5. Knights0.

    Knights t数轴上有n个骑士位于1,2,3,...n,移动速度相同,初始移动方向已知,当两个骑士相遇时,各有50%的概率赢,输了就死了,并且移动到0和n+1的位置时移动方向会翻转,问最右的骑士存 ...

  6. beijing(数学题)

    beijing(数学题) 甲和乙随机进行2n+1场n胜球赛,赌球必须对每场球赛单独押注.由于小明是甲队的铁杆球迷,现在小明希望如果甲最终获胜,那么他获得\(2^{2n-1}\)元,否则乙队获胜,他失去 ...

  7. CI框架源码学习笔记2——Common.php

    上一节我们最后说到了CodeIgniter.php,可是这一节的标题是Common.php,有的朋友可能会觉得很奇怪.事实上,CodeIgniter.php其实包含了ci框架启动的整个流程. 里面引入 ...

  8. Linux更改文件或目录的所有者和所有组

    上节我们说了所有者和所有组的概念, 一个文件它的所有者是谁,属于哪个组的,不同的角色对其的操作权限是不一样的,详细信息请看上节Linux权限管理 这里我们主要说的是怎么去改变这个文件或目录的所有者和所 ...

  9. P4013 数字梯形问题

    \(\color{#0066ff}{题目描述}\) 给定一个由 \(n\) 行数字组成的数字梯形如下图所示. 梯形的第一行有 \(m\) 个数字.从梯形的顶部的 \(m\) 个数字开始,在每个数字处可 ...

  10. Leetcode 520. Detect Capital 发现大写词 (字符串)

    Leetcode 520. Detect Capital 发现大写词 (字符串) 题目描述 已知一个单词,你需要给出它是否为"大写词" 我们定义的"大写词"有下 ...