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代码
Jan 01 Javascript
B/S模式项目中常用的javascript汇总
Dec 17 Javascript
FireBug 调试JS入门教程 如何调试JS
Dec 23 Javascript
Jquery解析Json格式数据过程代码
Oct 17 Javascript
JavaScript静态类型检查工具FLOW简介
Jan 06 Javascript
使用jspdf生成pdf报表
Jul 03 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
在点击div中的p时,如何阻止事件冒泡
Feb 07 Javascript
通过jQuery学习js类型判断的技巧
May 27 jQuery
package.json中homepage属性的作用详解
Mar 11 Javascript
详解Node.JS模块 process
Aug 31 Javascript
JavaScript圣杯布局与双飞翼布局实现案例详解
Aug 05 Javascript
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
做个自己站内搜索引擎
2006/10/09 PHP
不用GD库生成当前时间的PNG格式图象的程序
2006/10/09 PHP
php实现的css文件背景图片下载器代码
2014/11/11 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
用PHP的反射实现委托模式的讲解
2019/03/22 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
Microsoft Ajax Minifier 压缩javascript的方法
2010/03/05 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
2013/04/15 Javascript
js根据日期判断星座的示例代码
2014/01/23 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
2015/03/21 Javascript
在Node.js应用中使用Redis的方法简介
2015/06/24 Javascript
jQuery遮罩层效果实例分析
2016/01/14 Javascript
JavaScript SHA-256加密算法详细代码
2016/10/06 Javascript
React快速入门教程
2017/01/17 Javascript
AugularJS从入门到实践(必看篇)
2017/07/10 Javascript
在vue中实现简单页面逆传值的方法
2017/11/27 Javascript
微信小程序表单验证功能完整实例
2017/12/01 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
2018/10/31 Javascript
原生js canvas实现鼠标跟随效果
2020/08/02 Javascript
python基础教程之基本内置数据类型介绍
2014/02/20 Python
tensorflow 1.0用CNN进行图像分类
2018/04/15 Python
解决Pycharm下面出现No R interpreter defined的问题
2018/10/29 Python
python判断所输入的任意一个正整数是否为素数的两种方法
2019/06/27 Python
Python使用ffmpy将amr格式的音频转化为mp3格式的例子
2019/08/08 Python
Python 实现黑客帝国中的字符雨的示例代码
2020/02/20 Python
python IP地址转整数
2020/11/20 Python
妇科医生自荐信
2013/11/05 职场文书
大学生实习自我鉴定
2013/12/11 职场文书
班长竞选演讲稿
2014/04/24 职场文书
企业工会工作总结2015
2015/05/13 职场文书
2015年社区重阳节活动总结
2015/07/30 职场文书
诗词赏析-(浣溪沙)
2019/08/13 职场文书
Python中递归以及递归遍历目录详解
2021/10/24 Python
Go语言基础函数基本用法及示例详解
2021/11/17 Golang
如何用vue实现网页截图你知道吗
2021/11/17 Vue.js