详解jQuery中的prop()使用方法


Posted in jQuery onJanuary 05, 2020

prop()定义和用法

prop() 方法设置或返回被选元素的属性和值。

当该方法用于返回属性值时,则返回第一个匹配元素的值。

当该方法用于设置属性值时,则为匹配元素集合设置一个或多个属性/值对。

注意:prop() 方法应该用于检索属性值,例如 DOM 属性(如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected)。

提示:如需检索 HTML 属性,请使用 attr() 方法代替。

提示:如需移除属性,请使用 removeProp() 方法。

prop() 语法

返回属性的值:

$(selector).prop(property)

设置属性和值:

$(selector).prop(property,value)

使用函数设置属性和值:

$(selector).prop(property,function(index,currentvalue))

设置多个属性和值:

$(selector).prop({property:value, property:value,...})

参数 描述
property 规定属性的名称。
value 规定属性的值。
function(index,currentvalue) 规定返回要设置的属性值的函数。 index - 检索集合中元素的 index 位置。 currentvalue - 检索被选元素的当前属性值。

实例

添加并移除名为 "color" 的属性:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三水点靠木</title>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		var $x = $("div");
		$x.prop("color","FF0000");
		$x.append("color 属性值为: " + $x.prop("color"));
		$x.removeProp("color");
		$x.append("<br>现在 color 属性值为: " + $x.prop("color"));
	});
});
</script>
</head>
<body>

<button>添加和删除属性</button>
<br><br>
<div></div>

</body>
</html>

prop() 和 attr() 之间的不同

prop() 和 attr() 可能返回不同的值。本实例演示了当用于返回复选框的 "checked" 状态时的不同。

在jQuery中,attr()函数和prop()函数都用于设置或获取指定的属性,它们的参数和用法也几乎完全相同。

但不得不说的是,这两个函数的用处却并不相同。下面我们来详细介绍这两个函数之间的区别。

1、操作对象不同
很明显,attr和prop分别是单词attribute和property的缩写,并且它们均表示"属性"的意思。

不过,在jQuery中,attribute和property却是两个不同的概念。attribute表示HTML文档节点的属性,property表示JS对象的属性。

<!-- 这里的id、class、data_id均是该元素文档节点的attribute -->
<div id="message" class="test" data_id="123"></div>

<script type="text/javascript">
// 这里的name、age是Person的property
var Person = { name: "小明", age: 18};
</script>

在jQuery中,prop()函数的设计目标是用于设置或获取指定DOM元素(指的是JS对象,Element类型)上的属性(property);attr()函数的设计目标是用于设置或获取指定DOM元素所对应的文档节点上的属性(attribute)。

2、应用版本不同
attr()是jQuery 1.0版本就有的函数,prop()是jQuery 1.6版本新增的函数。毫无疑问,在1.6之前,你只能使用attr()函数;1.6及以后版本,你可以根据实际需要选择对应的函数。

3、用于设置的属性值类型不同
由于attr()函数操作的是文档节点的属性,因此设置的属性值只能是字符串类型,如果不是字符串类型,也会调用其toString()方法,将其转为字符串类型。

prop()函数操作的是JS对象的属性,因此设置的属性值可以为包括数组和对象在内的任意类型。

4、其他细节问题
在jQuery 1.6之前,只有attr()函数可用,该函数不仅承担了attribute的设置和获取工作,还同时承担了property的设置和获取工作。例如:在jQuery 1.6之前,attr()也可以设置或获取tagName、className、nodeName、nodeType等DOM元素的property。

直到jQuery 1.6新增prop()函数,并用来承担property的设置或获取工作之后,attr()才只用来负责attribute的设置和获取工作。

此外,对于表单元素的checked、selected、disabled等属性,在jQuery 1.6之前,attr()获取这些属性的返回值为Boolean类型:如果被选中(或禁用)就返回true,否则返回false。

但是从1.6开始,使用attr()获取这些属性的返回值为String类型,如果被选中(或禁用)就返回checked、selected或disabled,否则(即元素节点没有该属性)返回undefined。并且,在某些版本中,这些属性值表示文档加载时的初始状态值,即使之后更改了这些元素的选中(或禁用)状态,对应的属性值也不会发生改变。

因为jQuery认为:attribute的checked、selected、disabled就是表示该属性初始状态的值,property的checked、selected、disabled才表示该属性实时状态的值(值为true或false)。

因此,在jQuery 1.6及以后版本中,请使用prop()函数来设置或获取checked、selected、disabled等属性。对于其它能够用prop()实现的操作,也尽量使用prop()函数。

<button>按钮</button>
  <input type="checkbox" name="" id="" checked="checked">
  <script src="jquery.js"></script>
  <script>
    // $('button').on('click',function(){

    // });
    // var r = $('input');
    $('button').on('click',function(){
      console.log(11)
      if ($('input').prop('checked')) {
        $('input').prop('checked',false);
      }else{
        $('input').prop('checked',true);
      }
    })
  </script>

// attr / prop
// attr ==> getAttribute() / setAttribute()
// 用于操作 自定义的属性,对于DOM对象自身的布尔值类型的属性,只能
// 通过这个两个方法来设置或者读取默认值,而不能动态改变值
//
// prop ==> dom.checked = true;
// 对于 布尔值的属性(selected/checked/diabled) 都需要通过直接访问属性
// 方式来操作(点语法、[])

大家都知道原生js可以获取匹配元素的内部html和外部html,内部是innerHTML,外部是outerHTML,原生js的dom对象是存在这两个属性的,

document.getElementById("linkType").outerHTML;

如果用jQuery如何获取匹配元素(包括自身元素的html)呢?

既然存在这个属性,我们就可以用$("#linkType").prop("outerHTML")来获取;

可以通过$("#linkType").prop("outerHTML",outerHTML)赋值来改变outerHTML的内容;

值得注意的是jQuery的attr是获取不到这个属性值的。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三水点靠木(3water.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$("#p1").html("attr('checked'): " + $("input").attr('checked')
					 + "<br>prop('checked'): " + $("input").prop('checked'));
	});
});
</script>
</head>
<body>

<p><b>注意:</b>确认或取消选中该复选框,然后单击按钮刷新内容。</p>
<button>查看attr() 和 prop() 的值</button>
<br><br>
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p id="p1"></p>

</body>
</html>

jQuery removeProp() 方法

定义和用法
removeProp() 方法移除由 prop() 方法设置的属性。

注意:不要使用该方法来移除诸如 style、id 或 checked 之类的 HTML 属性。请使用 removeAttr() 方法代替。

语法

$(selector).removeProp(property)

参数 描述
property 规定要移除的属性的名称。

实例
添加并移除名为 "color" 的属性:

$("button").click(function(){
  var $x = $("div");
  $x.prop("color","FF0000");
  $x.append("The color 属性: " + $x.prop("color"));
  $x.removeProp("color");
});

完整实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三水点靠木(3water.com)</title>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		var $x = $("div");
		$x.prop("color","FF0000");
		$x.append("color 属性值为: " + $x.prop("color"));
		$x.removeProp("color");
		$x.append("<br>现在 color 属性值为: " + $x.prop("color"));
	});
});
</script>
</head>
<body>

<button>添加和删除属性</button>
<br><br>
<div></div>

</body>
</html>

jQuery removeAttr() 方法

定义和用法
removeAttr() 方法从被选元素移除一个或多个属性。

语法

$(selector).removeAttr(attribute)

参数 描述
attribute 必需。规定要移除的一个或多个属性。如需移除若干个属性,请使用空格分隔属性名称。

实例
从所有的 <p> 元素移除样式属性:

$("button").click(function(){
  $("p").removeAttr("style");
});

完整实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三水点靠木 3water.com</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$("p").removeAttr("style");
	});
});
</script>
</head>
<body>

<h1>这是一个标题</h1>
<p style="font-size:120%;color:red">这是一个段落。</p>
<p style="font-weight:bold;color:blue">这是另一个段落。</p>
<button>移除所有P元素的样式属性</button>

</body>
</html>

好了,这篇关于jquery prop()的文章就介绍到这,希望大家以后多多支持三水点靠木。

jQuery 相关文章推荐
jQuery Validate 校验多个相同name的方法
May 18 jQuery
jQuery正则验证注册页面经典实例
Jun 10 jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
jQuery.parseJSON()函数详解
Feb 28 jQuery
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
jQuery实现简单聊天室
Feb 08 jQuery
jQuery 选择器用法基础入门示例
Jan 04 #jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 #jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 #jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 #jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 #jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 #jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 #jQuery
You might like
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
PHP的面试题集
2006/11/19 PHP
PHP 字符串分割和比较
2009/10/06 PHP
php 目录遍历、删除 函数的使用介绍
2013/04/28 PHP
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
php无限分类且支持输出树状图的详细介绍
2013/06/19 PHP
php防止网站被刷新的方法汇总
2014/12/01 PHP
jQuery实现用方向键控制层的上下左右移动
2013/01/13 Javascript
QQ登录背景闪动效果附效果演示源码下载
2015/09/22 Javascript
AngularJS入门教程之MVC架构实例分析
2016/11/01 Javascript
Nodejs实现多房间简易聊天室功能
2017/06/20 NodeJs
纯js实现的积木(div层)拖动功能示例
2017/07/19 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
2018/09/05 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
JavaScript中的回调函数实例讲解
2019/01/27 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
2019/12/11 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
2020/05/11 Javascript
JavaScript Event Loop相关原理解析
2020/06/10 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
Python的for和break循环结构中使用else语句的技巧
2016/05/24 Python
Python编程使用tkinter模块实现计算器软件完整代码示例
2017/11/29 Python
Python 读取图片文件为矩阵和保存矩阵为图片的方法
2018/04/27 Python
python3 enum模块的应用实例详解
2019/08/12 Python
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
wedgwood加拿大官网:1759年成立的英国国宝级陶瓷餐具品牌
2018/07/17 全球购物
Fanatics英国官网:美国体育电商
2018/11/06 全球购物
自荐信范文
2013/12/10 职场文书
优秀员工年终发言演讲稿
2014/01/01 职场文书
节约粮食标语
2014/06/18 职场文书
小学生田径运动会广播稿
2014/09/11 职场文书
研究生简历自我评价范文
2014/09/13 职场文书
2014年仓库管理员工作总结
2014/11/18 职场文书
物业工程部主管岗位职责
2015/04/16 职场文书
2016春季运动会开幕词
2016/03/04 职场文书
浅谈Redis的事件驱动模型
2022/05/30 Redis