jQuery.prop() 使用详解


Posted in Javascript onJuly 19, 2015

prop()函数用于设置或返回当前jQuery对象所匹配的元素的属性值。

该函数属于jQuery对象(实例)。如果需要删除DOM元素的属性,请使用removeProp()函数。

语法

jQuery 1.6 新增该函数。prop()函数有以下两种用法:

用法一:

jQueryObject.prop( propertyName [, value ] )

设置或返回指定属性propertyName的值。如果指定了value参数,则表示设置属性propertyName的值为value;如果没有指定value参数,则表示返回属性propertyName的值。

参数value还可以是函数,prop()将根据匹配的所有元素遍历执行该函数,函数中的this指针将指向对应的DOM元素。prop()还会为函数传入两个参数:第一个参数就是该元素在匹配元素中的索引,第二个参数就是该元素propertyName属性当前的值。函数的返回值就是为该元素的propertyName属性设置的值。

用法二:

jQueryObject.prop( object )

以对象形式同时设置任意多个属性的值。对象object的每个属性对应propertyName,属性的值对应value。

注意:prop()函数的所有"设置属性"操作针对的是当前jQuery对象所匹配的每一个元素;所有"读取属性"的操作只针对第一个匹配的元素。
参数

请根据前面语法部分所定义的参数名称查找对应的参数。

参数 描述
propertyName String类型指定的属性名称。
value 可选/Object/Function类型指定的属性值,或返回属性值的函数。
object Object类型指定的对象,用于封装多个键值对,同时设置多项属性。
参数value可以是包括对象和数组在内的任意类型。

返回值

prop()函数的返回值是任意类型,返回值的类型取决于当前prop()函数执行的是"设置属性"操作还是"读取属性"操作。

如果prop()函数执行的是"设置属性"操作,则返回当前jQuery对象本身;如果是"读取属性"操作,则返回读取到的属性值。

如果当前jQuery对象匹配多个元素,返回属性值时,prop()函数只以其中第一个匹配的元素为准。如果该元素没有指定的属性,则返回undefined。

prop()和attr()的主要区别:prop()函数针对的是DOM元素(JS Element对象)的属性,attr()函数针对的是DOM元素所对应的文档节点的属性。详情请查看jQuery函数attr()和prop()的区别。

注意事项

1、如果通过prop()函数更改<input>和<button>元素的type属性,在多数浏览器上将会抛出一个错误,因为该属性一般不允许在后期更改。

2、如果使用prop()函数操作表单元素的checked、selected、disabled等属性,如果该元素被选中(或禁用),则返回true,否则(意即HTML中没有该属性)返回false。

3、prop()函数还可以设置或返回DOM元素的Element对象上的某些属性,例如:tagName、selectedIndex、nodeName、nodeType、ownerDocument、defaultChecked和defaultSelected等属性。

4、在IE9及更早版本中,如果使用prop()函数设置的属性值不是一个简单的原始值(String、Number、Boolean),并且在对应的DOM元素被销毁之前,该属性没有被移除,则可能会导致内存泄漏问题。如果你只是为了存储数据,建议你使用data()函数,以避免内存泄漏问题。

示例&说明

以下面这段HTML代码为例:

<div id="n1">

    <p id="n2" class="demo test" data-key="UUID" data_value="1235456465">CodePlayer</p>

    <input id="n3" name="order_id" type="checkbox" value="1">

    <input id="n4" name="order_id" type="checkbox" checked="checked" value="2">

</div>

我们编写如下jQuery代码:
var $n2 = $("#n2");
// prop()操作针对的是元素(Element对象)的属性,而不是元素节点(HTML文档)的属性
document.writeln( $n2.prop("data-key") ); // undefined
document.writeln( $n2.prop("data_value") ); // undefined

document.writeln( $n2.prop("id") ); // n2
document.writeln( $n2.prop("tagName") ); // P
document.writeln( $n2.prop("className") ); // demo test
document.writeln( $n2.prop("innerHTML") ); // CodePlayer
document.writeln( typeof $n2.prop("getAttribute") ); // function

// prop()设置的属性也是针对元素(Element对象),因此也可以通过元素本身直接访问
$n2.prop("prop_a", "CodePlayer");
document.writeln( $n2[0].prop_a ); // CodePlayer
var n2 = document.getElementById("n2");
document.writeln( n2.prop_a ); // CodePlayer

// 以对象形式同时设置多个属性,属性值可以是对象、数组等任意类型
$n2.prop( { 
  prop_b: "baike",
  prop_c: 18,
  site: { name: "CodePlayer", url: "https://3water.com/" }
} );
document.writeln( $n2[0].prop_c ); // 18
document.writeln( $n2[0].site.url ); // https://3water.com/

// 反选所有的复选框(没选中的改为选中,选中的改为取消选中)
$("input:checkbox").prop("checked", function(index, oldValue){
  return !oldValue;
});

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JS TextArea字符串长度限制代码集合
Oct 31 Javascript
jquery获得页面元素的坐标值实现思路及代码
Apr 15 Javascript
JavaScript中的6种运算符总结
Oct 16 Javascript
JavaScript通过prototype给对象定义属性用法实例
Mar 23 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
Jan 23 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
Dec 14 Javascript
鼠标经过出现气泡框的简单实例
Mar 17 Javascript
详解微信小程序 相对定位和绝对定位
May 11 Javascript
JS实现的集合去重,交集,并集,差集功能示例
Mar 13 Javascript
vue定义全局变量和全局方法的方法示例
Aug 01 Javascript
vue 自动化路由实现代码
Sep 03 Javascript
jQuery实现鼠标滑动切换图片
May 27 jQuery
javascript中setAttribute()函数使用方法及兼容性
Jul 19 #Javascript
jQuery的position()方法详解
Jul 19 #Javascript
ExtJs动态生成treepanel的Json格式
Jul 19 #Javascript
javascript中mouseover、mouseout使用详解
Jul 19 #Javascript
javascript实现的简单计时器
Jul 19 #Javascript
javascript中setInterval的用法
Jul 19 #Javascript
js中跨域方法原理详解
Jul 19 #Javascript
You might like
基于php在各种web服务器的运行模式详解
2013/06/03 PHP
显示youtube视频缩略图和Vimeo视频缩略图代码分享
2014/02/13 PHP
php 生成自动创建文件夹并上传文件的示例代码
2014/03/07 PHP
PHP正则验证Email的方法
2015/06/15 PHP
Laravel框架实现的上传图片到七牛功能详解
2019/09/06 PHP
JS与框架页的操作代码
2010/01/17 Javascript
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
javascript中encodeURI和decodeURI方法使用介绍
2013/05/06 Javascript
JavaScript执行顺序详细介绍
2013/12/04 Javascript
jQuery 设置 CSS 属性示例介绍
2014/01/16 Javascript
express文件上传中间件Multer详解
2016/10/24 Javascript
Nodejs中解决cluster模块的多进程如何共享数据问题
2016/11/10 NodeJs
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
mpvue实现左侧导航与右侧内容的联动
2019/10/21 Javascript
js实现GIF图片的分解和合成
2019/10/24 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
2020/08/19 Javascript
[47:38]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
教你用一行Python代码实现并行任务(附代码)
2018/02/02 Python
Django+Xadmin构建项目的方法步骤
2019/03/06 Python
python opencv实现图像边缘检测
2019/04/29 Python
Django用户认证系统 Web请求中的认证解析
2019/08/02 Python
django框架forms组件用法实例详解
2019/12/10 Python
python 实现按对象传值
2019/12/26 Python
css3进行截取替代js的substring
2013/09/02 HTML / CSS
英国最大的宠物食品和宠物用品网上零售商: Zooplus
2016/08/01 全球购物
英国最大的女性服装零售商:Dorothy Perkins
2017/03/30 全球购物
Amcal中文官网:澳洲综合性连锁药房
2019/03/28 全球购物
介绍一下SQL中union,intersect和minus
2012/04/05 面试题
网络技术专业求职信
2014/07/13 职场文书
学习礼仪心得体会
2014/09/01 职场文书
公司文体活动总结
2015/05/07 职场文书
优秀班干部主要事迹材料
2015/11/04 职场文书
从结婚开始的恋爱故事。小说《我的美好婚事》TV动画化决定
2022/04/07 日漫
Docker容器harbor私有仓库部署和管理
2022/08/05 Servers
Python pyecharts案例超市4年数据可视化分析
2022/08/14 Python