jQuery.prop , jQuery.attr ,jQuery.data
理一下这几个概念吧。根据jquery官网。
jquery.prop 获取匹配的元素中第一个元素特定的属性值,或者是设置多个元素的属性值。
有4个重载。
.prop(propertyName) 获取属性名对应的属性值。如果是多个的话返回第一个。如果值没有设置过或者不存在匹配的元素的话返回空(如果存在这个prop的key,比如var val=$("#div1").prop("class"),alert出来就是空)或者undefined(不存在这个prop的key。比如var val=$("#div1").prop("UnKnowPropKey") alert出val就是undefined.),而不是抛出异常。
.prop(propertyName,value) 设置对应的属性值。如果是多个的话都设置。同.attr。如果想通过这个方法来改变一个input的type属性,是会抛出异常的。
.prop(properties) 就是把要设置的几个属性的键值对放到一个object里面传进去就ok
.prop(propertyName,function(index,oldPropertyValue)) 按照文档上试了一下 ,
$("input[type='checkbox']").prop("checked", function (i,val) {
return !val;
}); //功能就是把checkbox的选中状态变了一下~~呵呵,又多了一种写法。如果在return上加判断,返回undefined就不改变。
接下来是.attr()
和prop很基本一样,都是4个重载。其中第三个方法,传入一个object,想改变class attribute的时候记得一定要加双引号,因为class是个关键字。
最后是.data(),感觉这个有点像winform里面控件的tag属性,存任意东西。。。
Attributes vs. Properties
C#里我是用特性和属性来区分,不晓得JQuery里面也这么说算了。
jQuery1.6 以前版本,获取某些attribute的时候会用property的值,但这有可能会引起不确定的行为表现。jQuery1.6以后,用.prop()特指获取property,.attr()特指获取attribute。
比如说 selectedIndex,tagName,nodeName,nodeType,ownerDocument,defaultChecked 和defaultSelected要用.prop来操作。在jQuery1.6以前的版本中,也可以用.attr()来获取。但这其实不是.attr的分内之事,因为这些只是property,而不是attribute。
比如有这个。<input type="checkbox" checked="checked" name="elem" />
$(elem).prop("checked") 是会随着checkbox的选中状态改变,但是$(elem).attr("checked")永远是checked 或者 undefined。
尽管如此,attr方法里面写checked 其实不是对应checked property。实际上他对应的是defaultChecked属性,这个属性只有在初始化设置checkbox的时候用的。所以,"改变"checked attribute不能改变checkbox的选中状态,但是用.prop可以。
考虑到浏览器兼容性的问题,判断一个checkbox是否被选中,用.prop()方法。
selected 和 value这两个动态的attribute也同理。(jQuery网站上是这么讲的,但是试了一下,不明白啊。。原句“The same is true for other dynamic attributes, such as selected and value”,估计是我理解错了。)
IE9 之前的浏览器如果用.prop() 来设置一些除number,string,boolean类型的DOM元素的属性值,并且没有用.removeProp()方法的话可能会引起内存泄露。[所以,设置类似object类型的属性值得时候推荐用.data()方法。原句(To safely set values on DOM objects without memory leaks, use .data());]set理解成是设置是不对的呀,因为$("#div1").data({"class":"colorfulRed"})不会改变div1的class;
jQuery.prop , jQuery.attr ,jQuery.data的更多相关文章
- jquery中prop,attr,data的区别
这两天翻了jq的源码,今天看到了jq关于数据存储的几个方法,遂总结一下,和小伙伴没分享一下,哪里说的不对,还望批评指正~~~ 废话不多说,直接上代码: $(function(){ $('#div1') ...
- JQUERY prop与attr差额
1. 1-9-1之前和之后之间的差 <html> <script src="Js/jquery-1.9.0.js" type="text/javasc ...
- 关于jQuery中的attr和data问题
今天在使用data获取属性并且赋值时遇到一个小问题,写下来防止以后再跳坑. 在使用jQuery获取自定义属性值时,我们习惯用 $(selector).attr('data-value'); jQuer ...
- jquery prop和attr的区别
jquery1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. 大家都知道有的浏览器只要写disabled,checked就可以了,而有的 ...
- jQuery.prop() 与attr()
1.attr()是jQuery 1.0版本就有的函数,prop()是jQuery 1.6版本新增的函数.毫无疑问,在1.6之前,你只能使用attr()函数:1.6及以后版本,你可以根据实际需要选择对应 ...
- jquery prop and attr
http://www.javascript100.com/?p=877 http://blog.sina.com.cn/s/blog_655388ed01017cnc.html http://www. ...
- prop()、attr()和data()
设置元素属性,用attr()还是prop()? 对于取值为true /false的属性,如 checked/selected/readonly或者disabled,使用prop(),其他属性使用 at ...
- 总结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( ...
随机推荐
- fortran常用语句--读写带注释文档、动态数组等语法
1.判断读取文档有多少行数据(文档最后的空行不计入其中): 首先在变量定义区域下方和执行语句前声明在程序中要被调用的GetFileN函数: external GetFileN 接下来在函数外部后边写上 ...
- 安装php rabbitmq扩展,继上一篇安装Rabbitmq
1 安装 rabbitmq-c,C 与 RabbitMQ 通信需要依赖这个库,这里只贴出正确的步骤,错误类型太多,不一一举例,大部分都是安装问题,缺少组件,安装目录问题 git clone git:/ ...
- Python h5py
1.关于安装: 如果你使用的是Anaconda的话,安装命令如下: conda install h5py 如果没有,安装命令如下: pip install h5py 2.核心概念 读取HDF5文件,假 ...
- virtualenv搭建
1.准备工作 终端 网络状况良好 2.安装虚拟环境 如何安装虚拟环境: 2.1了解你的电脑中有哪些版本的python whereis python 查看当前系统中有多少跟python有关的命令 ...
- 利用java解压,并重命名
由于工作需要,写了一个小工具,利用java来解压文件然后对文件进行重命名 主要针对三种格式,分别是zip,rar,7z,经过我的多次实践我发现网上的类库并不能解压最新的压缩格式 对于zip格式: ma ...
- keepalived给LVS带来了什么
LVS+Keepalived 1>Keepalived简介 Keepalived是Linux下一个轻量级别的高可用解决方案,高可用(High Avalilability,HA),其实两种不同的 ...
- 使用jquery实现文本框输入特效:文字逐个显示逐个消失反复循环
前两天看到某个网站上的输入框有个小特效:文字逐个显示,并且到字符串最大长度后,逐个消失,然后重新循环显示消失,循环显示字符串数组.我对这个小特效有点好奇,于是今天自己尝试用jquery写一个简单的小d ...
- GIT学习笔记——常用命令
最近使用使用GIT较多,但命令很容易就忘记了,于是整理下,大多整理与一些文档和他人博客 在当前目录新建建一个纯git代码库 $ git --bare init 在当前目录新建一个Git代码库 $ gi ...
- Handshake failed due to invalid Upgrade header: null 解决方案
Handshake failed due to invalid Upgrade header: null 解决方案 解决方案,在 Nginx ,location 中添加以下代码: proxy_set_ ...
- 第二节:Java入门第一行代码
前言 大家好,今天带来Java入门第一行代码的概述,希望你们喜欢 第一行代码 学习Java基础课程,学会使用eclipse,eclipse为Java集成开发坏境IDE,创建第一个Java源文件代码: ...