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 tools之tabs 选项卡/页签
Jul 25 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
May 22 Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 Javascript
第一章之初识Bootstrap
Apr 25 Javascript
js 声明数组和向数组中添加对象变量的简单实例
Jul 28 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
Oct 29 Javascript
javascript 注释代码的几种方法总结
Jan 04 Javascript
js 博客内容进度插件详解
Feb 19 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
BootStrap Table 后台数据绑定、特殊列处理、排序功能
May 27 Javascript
vue配置font-awesome5的方法步骤
Jan 27 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
Sep 26 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
无数据库的详细域名查询程序PHP版(3)
2006/10/09 PHP
php escape URL编码
2008/12/10 PHP
php的zip解压缩类pclzip使用示例
2014/03/14 PHP
简述php环境搭建与配置
2016/12/05 PHP
PHP PDOStatement::rowCount讲解
2019/02/01 PHP
PHP7实现和CryptoJS的AES加密方式互通示例【AES-128-ECB加密】
2019/06/08 PHP
Javascript &amp; DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
2007/08/31 Javascript
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
javascript管中窥豹 形参与实参浅析
2011/12/17 Javascript
JQuery each()函数如何优化循环DOM结构的性能
2012/12/10 Javascript
页面加载完后自动执行一个方法的js代码
2014/09/06 Javascript
JavaScript实现网页对象拖放功能的方法
2015/04/15 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
vue中倒计时组件的实例代码
2018/07/06 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
jQuery实现本地存储
2020/12/22 jQuery
Python的Django框架中TEMPLATES项的设置教程
2015/05/29 Python
python实现windows下文件备份脚本
2018/05/27 Python
python cumsum函数的具体使用
2019/07/29 Python
python Qt5实现窗体跟踪鼠标移动
2019/12/13 Python
python无序链表删除重复项的方法
2020/01/17 Python
Pytorch如何切换 cpu和gpu的使用详解
2021/03/01 Python
35款精致的 CSS3 和 HTML5 网页模板 推荐
2012/08/03 HTML / CSS
悬挂训练绳:TRX
2017/12/14 全球购物
创伤外科专业推荐信范文
2013/11/19 职场文书
2014年机关植树节活动方案
2014/02/27 职场文书
红领巾广播站广播稿(3篇)
2014/09/20 职场文书
教学反思怎么写
2016/02/24 职场文书
财务会计个人原因辞职信
2019/06/21 职场文书
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
2021/12/06 HTML / CSS
JS封装cavans多种滤镜组件
2022/02/15 Javascript
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python
python blinker 信号库
2022/05/04 Python