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 相关文章推荐
jquery uaMatch源代码
Feb 14 Javascript
jquery ajaxSubmit 异步提交的简单实现
Feb 28 Javascript
创建js对象和js类的方法汇总
Dec 24 Javascript
Bootstrap下拉菜单样式
Feb 07 Javascript
javascript实现秒表计时器的制作方法
Feb 16 Javascript
Vue.js事件处理器与表单控件绑定详解
Mar 20 Javascript
浅谈JavaScript find 方法不支持IE的问题
Sep 28 Javascript
vue-cli axios请求方式及跨域处理问题
Mar 28 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
Aug 27 Javascript
JS实现拼图游戏
Jan 29 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
Aug 24 Javascript
openlayers实现地图测距测面
Sep 25 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
使用GROUP BY的时候如何统计记录条数 COUNT(*) DISTINCT
2011/04/23 PHP
PHP中list()函数用法实例简析
2016/01/08 PHP
PHP中读取文件的几个方法总结(推荐)
2016/06/03 PHP
php基于数组函数实现关联表的编辑操作示例
2017/07/04 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
php表单处理操作
2017/11/16 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
JavaScript 面向对象之命名空间
2010/05/04 Javascript
jquery 3D球状导航的文章分类
2010/07/06 Javascript
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
javascript特殊日历控件分享
2016/03/07 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
手把手搭建安装基于windows的Vue.js运行环境
2017/06/12 Javascript
实例详解BootStrap的动态模态框及静态模态框
2018/08/13 Javascript
如何在 JavaScript 中更好地利用数组
2018/09/27 Javascript
JS中this的4种绑定规则详解
2020/02/04 Javascript
原生js实现弹幕效果
2020/11/29 Javascript
nodejs+express最简易的连接数据库的方法
2020/12/23 NodeJs
[08:53]DOTA2每周TOP10 精彩击杀集锦vol.9
2014/06/26 DOTA
python入门基础之用户输入与模块初认识
2016/11/14 Python
python SMTP实现发送带附件电子邮件
2018/05/22 Python
python实现海螺图片的方法示例
2019/05/12 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
Python 实现将大图切片成小图,将小图组合成大图的例子
2020/03/14 Python
python用什么编辑器进行项目开发
2020/06/17 Python
python代码中怎么换行
2020/06/17 Python
美国手机支架公司:PopSockets
2019/11/27 全球购物
程序集与命名空间有什么不同
2014/07/25 面试题
高一数学教学反思
2014/02/07 职场文书
大学毕业感言50字
2014/02/07 职场文书
高中生综合素质自我评价
2015/03/06 职场文书
第一书记观后感
2015/06/08 职场文书
光荣之路观后感
2015/06/12 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书
redis cluster支持pipeline的实现思路
2021/06/23 Redis