jquery中prop()方法和attr()方法的区别浅析


Posted in Javascript onSeptember 06, 2013

jquery1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值。

大家都知道有的浏览器只要写disabled,checked就可以了,而有的要写成disabled = "disabled",checked="checked",比如用attr("checked")获取checkbox的checked属性时选中的时候可以取到值,值为"checked"但没选中获取值就是undefined。

jq提供新的方法“prop”来获取这些属性,就是来解决这个问题的,以前我们使用attr获取checked属性时返回"checked"和"",现在使用prop方法获取属性则统一返回true和false。

那么,什么时候使用attr(),什么时候使用prop()?
1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();
3.其他则使用attr();
项目中jquery升级的时候大家要注意这点!

以下是官方建议attr(),prop()的使用:

Attribute/Property .attr() .prop()
accesskey  
align  
async
autofocus
checked
class  
contenteditable  
draggable  
href  
id  
label  
location ( i.e. window.location )
multiple
readOnly
rel  
selected
src  
tabindex  
title  
type  
width ( if needed over .width() )  
Javascript 相关文章推荐
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
Aug 13 Javascript
浅谈javascript中字符串String与数组Array
Dec 31 Javascript
JS实现两表格里数据来回转移的方法
May 28 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
Sep 14 Javascript
JSON简介以及用法汇总
Feb 21 Javascript
使用jQuery处理AJAX请求的基础学习教程
May 10 Javascript
使用jquery获取url及url参数的简单实例
Jun 14 Javascript
原生JS实现匀速图片轮播动画
Oct 18 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
JS点击缩略图整屏居中放大图片效果
Jul 04 Javascript
React+TypeScript+webpack4多入口配置详解
Aug 08 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
Sep 18 Javascript
CheckBoxList多选样式jquery、C#获取选择项
Sep 06 #Javascript
jquery阻止冒泡事件使用模拟事件
Sep 06 #Javascript
Jquery的hover方法让鼠标经过li时背景变色
Sep 06 #Javascript
Jquery的hide及toggle方法让超链接慢慢消失
Sep 06 #Javascript
JS远程获取网页源代码实例
Sep 05 #Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
Sep 05 #Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
Sep 05 #Javascript
You might like
第四节 构造函数和析构函数 [4]
2006/10/09 PHP
php如何调用webservice应用介绍
2012/11/24 PHP
浅析PHP程序设计中的MVC编程思想
2014/07/28 PHP
phpMyAdmin安装并配置允许空密码登录
2015/07/04 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
分析 JavaScript 中令人困惑的变量赋值
2007/08/13 Javascript
利用js获取服务器时间的两个简单方法
2010/01/08 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
2011/04/24 Javascript
js获取当月最后一天实例代码
2013/11/19 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
四种参数传递的形式——URL,超链接,js,form表单
2015/07/24 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
javascript中类的定义方式详解(四种方式)
2015/12/22 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
AngularJS 指令详细介绍
2016/07/27 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
2016/10/05 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
2017/09/08 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
2017/10/09 Javascript
angularjs实现分页和搜索功能
2018/01/03 Javascript
javascript变量提升和闭包理解
2018/03/12 Javascript
浅谈Webpack 持久化缓存实践
2018/03/22 Javascript
详解微信小程序的 request 封装示例
2018/08/21 Javascript
微信小程序如何获取手机验证码
2018/11/04 Javascript
微信小程序wxml列表渲染原理解析
2019/11/27 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
2020/06/01 Javascript
js实现星星打分效果
2020/07/05 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
2020/11/16 Javascript
python一行sql太长折成多行并且有多个参数的方法
2018/07/19 Python
Django框架会话技术实例分析【Cookie与Session】
2019/05/24 Python
python:按行读入,排序然后输出的方法
2019/07/20 Python
简单了解pytest测试框架setup和tearDown
2020/04/14 Python
python实现人工蜂群算法
2020/09/18 Python
Python中Yield的基本用法
2020/10/18 Python
使用CSS3来制作消息提醒框
2015/07/12 HTML / CSS
技校毕业生自荐书
2014/05/23 职场文书
亮剑观后感
2015/06/05 职场文书