您好!欢迎进入紫石头原创模板堂!
网站首页 | 购买流程 | 关于我们 |  联系方式 |  客服热线:0371-56789-390
当前位置:首页 >> 建站知识 >> 详情
扫二维码关注紫石头原创模板堂 4大优势,全网首家
  • NO.1

    模板类网站比起独立设计的网站来讲价格低的多,因为很多东西是已经做成的,成本就低很多!

  • NO.2

    开源模板网站,任意修改使用!服务好到没话说!模板建站经常被贴上服务差的标签,而紫石头完全打破这样的格局!

  • NO.3

    模板网站还享受设计型网站同等级售后服务,这不是做梦!紫石头原创模板站,让这一切变为可能!

  • NO.4

    建站速度快,购买后简单修改即可投入使用。设计型网站正常需要10~20个工作日,而模板站只需要几个小时!

免费咨询热线
0371-56789-390

jQuery中attr()与prop()方法的用法和区别
发表:紫石头原创模板堂    发表时间:2019-07-17 10:42:10    阅读:80
    在jQuery里,我们要获取一个标签元素的属性,可以用 attr()方法或者 prop()方法 ,那么两者有什么区别呢?
    jQuery attr() 方法 和 prop() 方法
    attr() 方法设置或返回被选元素的属性值。
    prop() 方法设置或返回被选元素的属性和值。
    注:单纯从定义看的话,两个方法的作用都是一样的。而且用法也都差不多,如下所示。
    作用一:返回被选元素的属性值。语法如下:
    $(selector).attr(attribute)
    $(selector).prop(property)
    作用二:设置被选元素的属性和值。语法如下:
    $(selector).attr(attribute,value)
    $(selector).prop(property,value)
    作用三:设置多个属性和值。语法如下:
    $(selector).attr( {attribute:value, attribute:value ...} ) //对象的写法,键值对
    $(selector).prop( {property:value, property:value,...} ) //对象的写法,键值对
    作用四:使用函数设置属性和值。语法如下:(平时很少用到)
    //第二个参数:规定返回要设置的属性值的函数。
    /*该函数包括两个参数:
    * index - 检索集合中元素的 index 位置。
    * oldvalue / currentvalue - 检索被选元素的当前属性值。
    */
    $(selector).attr(attribute,function(index,oldvalue))
    $(selector).prop(property,function(index,currentvalue))
    我们会发现:
    两个方法的用法都如出一辙,只是方法名称存在差异。一个是 attr,一个是 prop。
    attr 的 全拼是 attribute。 prop 的全拼是 property。它们是两个不同的单词,虽说都有 属性 的意思,但其中的寓意必然不一样。
    property 和 attribute 的 区别
    property n. 属性,性质,性能;财产;所有权
    attribute n. 属性;特质
    由此可见,两者非常容易混淆,因为在中文上的翻译都特别接近。但实际上,它们两个是不同的东西,属于不同的范畴。
    深究它们的中文含义,我们可以将 attribute 理解为 “特性” ,而将 property 理解为 “属性”。
    显而易见,一个是 属性,一个是特性。肯定不一样了。
    如果你百度 “属性” 关键字的话,你会发现,属性 对应的英文直接就是 property。而且百度含义对 “属性” 的 详细释义 是:指事物本身固有的不可缺少的性质。。
    现在,我们知道了:
    property 属性。它是与生俱来的,并不是后天赋予的。比如说,某些对象在定义时就具有某一些属性。
    attribute 特性。本身没有的,后天赋予的。比如说,某些对象在创建后,自定义赋予的一些属性。
    对应到 js 中就是:
    property 是 DOM 中的属性,是 JavaScript 里的对象;
    attribute 是 HTML 标签上的特性(属性),它的值只能够是字符串;
    对应到 jQuery 中就是:
    对于 HTML 元素本身就带有的固有属性,或者说 W3C 标准里就包含有这些属性,更直观的说法就是,编辑器里面可以智能提示出来的一些属性,如:src、href、value、class、name、id等。在处理时,使用 prop() 方法。
    对于 HTML 元素我们自定义的 DOM 属性,即元素本身是没有这个属性的,如:data-*。在处理时,使用 attr() 方法。
    attr() 方法 和 prop() 方法 的返回值
    $(eleStr).attr()
    <img src="/smile.jpg"/>
    <button>获取图像的 class 属性值</button>
    $("button").click(function(){
    console.log( $("img").attr("class") );//如果属性存在,则返回属性值;如果属性不存在,则返回 undefined
    console.log( $("img").prop("class") );//如果属性存在,则返回属性值;如果属性不存在,则返回 空("")
    });
    $(eleStr).prop()
    <input type="checkbox">
    <button>获取复选框的选中状态</button>
    $("button").click(function(){
    console.log( $("input").prop("checked") ); //如果属性值存在,则返回 true;如果属性值不存在,则返回 false。
    console.log( $("input").attr("checked") );//如果属性值存在,则返回 checked;如果属性值不存在,则返回 undefined。
    });
工作时间:周一至周五(08:30~18:00)
Copyright ©2003-2020 永易搜旗下紫石头原创模板堂 All Rights Reserved 豫ICP备14011598号-7 营业执照