分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

jQuery中attr和prop的区别

发布时间:2023-09-06 01:31责任编辑:赖小花关键词:jQuery

在高版本的jQuery引入prop方法后,什么时候该用prop?什么时候该用attr?它们之间有什么区别?这些问题就出现了。 
关于它们的区别,我有一些自己的看法:

  • 对于HTML元素本身就带有的固有属性,在处理时建议使用prop方法
  • 对于HTML元素我们自定义的DOM属性,在处理时建议使用attr方法

上面的描述也许有点模糊,举几个例子就知道了。

<a id="first" href="#" target="_self">超链接</a>

这个例子里<a>元素的DOM属性有id、href、target,这些属性是<a>元素本身就有的属性,W3C标准里就包含这几个属性,或者说在IDE里能够智能提示出的属性,这些就叫做固有属性。处理这些属性时,建议使用prop。

<a id="first" href="#" target="_self" uuu="guoguo">超链接</a>

这个例子里<a>元素的DOM属性有id、href、target、uuu,前三个是固有属性,最后一个“uuu”属性使我们自定义的,<a>元素本身是没有这个属性的,这种就是自定义的DOM属性。处理这些属性时,建议使用attr。

读取HTML元素固有属性(已赋值)

<a href="#" target="_self">超链接</a>//attr和prop都读取成功//attr("href")的值是:#//prop("href")的值是:http://localhost:4590/AttributeHandle/Index#alert($("a").attr("href"));alert($("a").prop("href"));

读取HTML元素固有属性(未赋值)

不同HTML标签的固有属性不完全相同,例如:checked属性是checkbox标签的固有属性,但不是a标签的固有属性。class属性虽然是a标签的固有属性,但是如果元素中没有对该属性赋值,用attr()也是读取不到的。

<a href="#" target="_self">超链接</a><input type="checkbox" id="testCheckBox" value="测试CheckBox"/>alert($("a").attr("id"));//输出:undefinealert($("a").prop("id"));//输出:默认值""alert($("a").attr("checked"));//输出:undefinealert($("a").prop("checked"));//输出:undefinealert($("#testCheckBox").attr("checked"));//输出:undefinealert($("#testCheckBox").prop("checked"));//输出:默认值falsealert($("a").attr("class"));//输出:undefinealert($("a").prop("class"));//输出:默认值""

读取HTML元素自定义属性(已赋值)

<a href="#" target="_self" uuu="guoguo">超链接</a>alert($("a").attr("uuu"));//输出:guoguoalert($("a").prop("uuu"));//输出:undefine

读取HTML元素自定义属性(未赋值)

<a href="#" target="_self" uuu="guoguo">超链接</a>alert($("a").attr("abc"));//输出:undefinealert($("a").prop("abc"));//输出:undefine

设置HTML元素固有属性

<a href="#" target="_self" uuu="guoguo">超链接</a>$("a").attr("id","link");//id属性添加成功$("a").prop("id","link");//id属性添加成功

设置HTML元素自定义属性

<a href="#" target="_self" uuu="guoguo">超链接</a>$("a").attr("abc", "myself");//成功添加属性abc="myself"$("a").prop("abc", "myself");//添加abc属性失败$("a").attr("action", "addAttribute");//成功添加属性action="addAttribute"$("a").prop("action", "addAttribute");//添加action属性失败

总结

prop读取属性值:读取已赋值的固有属性会得到属性值,读取未赋值的固有属性会得到属性默认值,读取自定义属性时无论是否赋值均得到undefine。 
prop设置属性值:prop只能设置固有属性值。 
attr读取属性值:无论是固有属性还是自定义属性,attr只能读取元素中已有的属性值,读取元素中没有的属性值会返回undefine。 
attr设置属性值:attr可以对任意属性设置属性值。

 
 

jQuery中attr和prop的区别

原文地址:http://www.cnblogs.com/sunsie/p/8072702.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved