JQuery中的prop和attr
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的更多相关文章
- jQuery中的prop和attr区别
最近在做一个项目用jq时发现一个问题 在谷歌中可以正常出效果 但是在火狐中就是不行 就是这个prop和attr 之前用的是attr方法 但是在火狐中不出效果 于是特意看了两者的区别 主要 ...
- jquery中的prop和attr比较区别
近期和一同事争执prop和attr的区别,也查了很多,同事说它只是特性和固有属性的区别,但是我也查到了一些其他的,故此,来总结一下吧! 1.固有属性和特别属性 对于HTML元素本身就带有的固有属性,在 ...
- jQuery中的prop()和attr()的区别
1.jQuery中的prop()和attr()的区别 prop()是在jQuery1.6版本之后才有的,在之前一直都是使用attr(), prop()修复了attr()的一些小bug. 2.推荐用法: ...
- 【Jquery系列】prop和attr区别
问题描述 由于prop(property的缩写)和attr(attribute的缩写)翻译成汉语,均有“特性.属性”等意思的原因,导致大家容易混淆分不清,本篇文章将试图从英文含义,中文含义和Jquer ...
- Jquery学习笔记(5)--jquery1.6中的.prop()和.attr()异同
jquery1.6中的.prop()和.attr()异同 最近在iteye的新闻中看到jQuery已经更新到了1.6.1.和之前版本的最大变化是增加了.prop方法.但是.prop()方法和.attr ...
- 总结Jquery中获取自定义属性使用.attr()和.data()以及.prop()的区别
一..attr()和.data()的区别: .attr()和.data()本质上属于DOM属性和Jquery对象属性的区别. 看一个例子: <!DOCTYPE html> <html ...
- jQuery学习之prop和attr的区别示例介绍
1..prop( propertyName ) 获取匹配集合中第一个元素的Property的值 2. .prop( propertyName, value ) .prop( map ) .prop( ...
- jquery1.6中的.prop()和.attr()异同
jquery jQueryHTML5JavaScript浏览器ITeye 最近在iteye的新闻中看到jQuery已经更新到了1.6.1.和之前版本的最大变化是增加了.prop方法.但是.prop( ...
- jquery中dom元素的attr和prop方法的理解
一.背景 在编写使用高版本[ jQuery 1.6 开始新增了一个方法 prop()]的jquery插件进行编写js代码的时候,经常不知道dom元素的attr和prop方法到底有什么区别?各自有什么应 ...
随机推荐
- SourceTree——MAC OSX下的Git GUI客户端
在MAC下面为Git找一款用得顺手的GUI客户端还真不容易.学习工具使用还是先器而后道的路径比较适合我,当年上手CVS SVN都是如此,先通过tortoise客户端熟练了基本操作,之后在搭建构建平台的 ...
- nginx: [emerg] directive "location" has no opening "{" in /usr/local/nginx//conf/nginx.conf:75
1.报错:[emerg]directive "location" has no opening "{" in ..... 解决方法: 由于对应行或者附近行的“{ ...
- css 选择器;盒模型
一.引入方式:(1)CSS 层叠样式表 作用:修饰网页结构 (2)css的三种引入方式 - 行内样式 注意:行内样式的优先级是最高的 - 内接样式 - 外接样式 二.css选择器 基础选择器 * 通配 ...
- curl抓取网页内容php
1.cURL curl是客户端向服务器请求资源的工具 2.cURL使用场景 网页资源:网页爬虫 webservice数据接口资源:动态获取接口数据 天气 号码归属地 ftp资源:下载ftp服务器里面 ...
- Java NIO看这一篇就够了
原文链接:https://mp.weixin.qq.com/s/c9tkrokcDQR375kiwCeV9w? 现在使用NIO的场景越来越多,很多网上的技术框架或多或少的使用NIO技术,譬如Tomca ...
- 一些优秀的Firefox扩展
AdBlock Plus 拦截广告. 在对付CSDN等垃圾网站时非常有用. Block Site 拦截你不想看的网站 没有知乎的一天真好... XStyle 设置自己喜欢的CSS样式(表示自己并不会用 ...
- 钉钉jsapi免登获取code中,出现对应企业没有某域名微应用
在使用jsapi中.出现 {"errorMessage":"对应企业没有某域名微应用",:"errorCode":"3" ...
- vue js 实现 树形菜单
添加一个模板.<template id="menu-template"> <li v-if="model.nodes!=undefined"& ...
- N - 嘤嘤嘤 (并查集+枚举)
Our lovely KK has a difficult Social problem. A big earthquake happened in his area. N(2≤N≤2000)N(2≤ ...
- [2019BUAA软工]第一次团队作业
Team V1 团队启动 BUAA Team V1 于2019年3月正式成立,将开始为期四个月的合作. 队员介绍 Name Summary Sefie wxmwy V1-bug制造公司资深工程师精 ...