zoukankan      html  css  js  c++  java
  • 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;

  • 相关阅读:
    Vagrant安装virtualbox
    SQLSERVER排查CPU占用高的情况
    删除重复记录,只留一条
    ASCII码对应表chr(9)、chr(10)、chr(13)、chr(32)、chr(34)、chr(39)、……
    手机和PC端的录屏软件
    2017年初面试总结
    Python面向对象
    Python字体颜色
    Python第二模块总结
    Fiddler使用教程(转)
  • 原文地址:https://www.cnblogs.com/sheldon-lou/p/3459028.html
Copyright © 2011-2022 走看看