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;

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

JS基础(上)

JS与DOM的关系 浏览器有渲染html代码的功能,把html源码(如div,p标签等)在内存里形成一个DOM对象 文档对象模型DOM(Document Obj...

694140
来自专栏电光石火

mybatis在xml文件中处理大于号小于号的方法

第一种方法: 用了转义字符把>和<替换掉,然后就没有问题了。 SELECT * FROM test WHERE 1 = 1 AND start_da...

20190
来自专栏xingoo, 一个梦想做发明家的程序员

使用DOM动态创建标签

本文是参考《javascript Dom 编程艺术》第八章的内容所写,用到的知识点,就是关于创建平稳的web页面。 使用DOM方法:   getEleme...

22390
来自专栏柠檬先生

Angularjs基础(十二)

ng-model-options       描述:规定如何更新模型             实例: 在失去焦点时绑定输入框的值scope 变量中。 ...

217100
来自专栏Golang语言社区

厚土Go学习笔记 | 07. 基本类型

Go语言的基本类型有 bool string int int8 int16 int32 int64 uint uint8 uint16 uint32 uint6...

350120
来自专栏小壮和前端

es6之深入理解promise对象

10300
来自专栏HTML5学堂

获取标签的那些事 之 动态集合

HTML5学堂:今天的内容从一道题开始,很简单,但是,你可能会“跪”得很惨。之后我们自然要挖一挖这个坑喽~所有学过JavaScript的人都知道获取标签,但是真...

28350
来自专栏前端说吧

vue-学习笔记(更新中...)

95460
来自专栏xingoo, 一个梦想做发明家的程序员

快速排序

快速排序时间复杂度为O(nlogn),由于是在原数组上面利用替换来实现,因此不需要额外的存储空间。 算法思想:   通过设置一个岗哨,每次跟这个岗哨进行比较,比...

223100
来自专栏LanceToBigData

Jsoup(一)Jsoup详解(官方)

一、Jsoup概述 1.1、简介     jsoup 是一款Java 的HTML解析器,可直接解析某个URL地址、HTML文本内容。它提供了一套非常省力的API...

1.3K50

扫码关注云+社区

领取腾讯云代金券