JQuery 的prop()和attr()方法的区别与使用

最新推荐文章于 2022-02-12 10:48:55 发布

你好像很好吃a

最新推荐文章于 2022-02-12 10:48:55 发布

阅读量695

点赞数 3

分类专栏： JQuery

本文链接：https://blog.csdn.net/weixin_44296929/article/details/103460339

版权

JQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、前阶段做的项目中，页面渲染使用的是JQuery，其中一个页面需要实现单选框的点击选中取消，而使用attr()方法$("...").attr("checked",false);不起作用，去网上查了一些资料最后使用prop()解决了这个问题，特此来记录一下。

prop和attr方法都是获取一个元素指定属性的值，有什么区别呢？

大家都知道有的浏览器只要写disabled、checked、selected就可以了，而有的要写成disabled=“disabled”、checked=“checked”，比如用attr(“checked”)获取checkbox的checked属性时选中的时候可以取到值"checked"，但是没选中时获取的值就是undefined。

JQuery提供新方法prop()来获取这些属性，就是来解释这个问题的，以前我们使用attr获取checked属性时返回"checked"或""，现在使用prop()方法获取属性则统一返回true和false。

2、prop()方法是JQuery1.6新增的一个方法，prop()方法设置或返回被选元素的属性和值，听完这句话感觉和attr()方法差不多，下面我们就来对比一下这两个方法的使用：参考文章

1）attr()：$("").attr()返回的是html对象

设置或返回被选元素的属性和值；
当该方法用于返回属性值时，则返回第一个匹配元素的值；
当该方法用于设置属性值时，则为匹配元素设置一个或多个属性/值对。

2）prop()：$("").prop()返回的是DOM对象

设置或返回被选元素的属性和值；
当该方法用于返回属性值时，则返回第一个匹配元素的值；
当该方法用于设置属性值时，则为元素集合设置一个或多个属性/值对。

有关什么DOM属性和Input属性的区别：点击查看该文章

3、那么什么时候使用attr()？什么时候使用prop()？

1）添加属性名称，该属性就会生效应该使用prop()；
2）是有true，false两个属性时使用prop()（如"checked"、“selected”、"disabled"等）；
3）其它则使用attr()；

下面是官方建议attr()，prop()的使用：
在这里插入图片描述
4、下面我们就针对prop()方法来举几个例子：

首先说一下prop的几个参数：参考文章

参数	说明	类型	版本
name	属性名称	String	V1.6
properties	作为属性的"名/值对"对象	Map	V1.6
key，value	属性名称，属性值	String，Object	V1.6
key，function(index，attr)	1：属性名称，2：返回属性值的函数，第一个参数为当前元素的索引值，第二个参数为原先的属性值。	String Function	V1.6

1）参数name描述：选中复选框为true，没选中为false

$("input[type='checkbox']").prop("checked");

2）参数properties描述：禁用页面上所有复选框

$("input[type='checkbox']").prop({
  disabled: true
});

3）参数key，value描述：禁用和选中页面上所有复选框

$("input[type='checkbox']").prop("disabled", false);
$("input[type='checkbox']").prop("checked", true);

4）参数key，回调函数描述：通过函数来设置所有页面上的复选框被选中

$("input[type='checkbox']").prop("checked", function( i, val ) {
  return !val;
});

5、JQuery中使用attr()、prop()、val()：

示例代码：参考文章

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-2.1.4.js"></script>
 
</head>
<body>
<input type="text" value="123"/>
<button id="btn">click</button>
<script>
 
    $("#btn").click(function(){
        var attr=$("input").attr("value");
        var prop=$("input").prop("value");
        var val=$("input").val();
        console.log(attr);
        console.log(prop);
        console.log(val);
    })
</script>
</body>

代码如上所示，为输入框设定了初始值：123，此时点击按钮，控制台输出为：

123
123
123

改变输入框的值，此时控制台输出：

123
123thgf
123thgf

如果我们没有为文本框设定初始值，即删除value=”123”后，依旧使用如上js代码，则相应输出如下：

undefined

attr()输出为undefined，而prop()和val()输出为“空”。输入value值后：控制台输出为：

undefined
asdasd
asdasd

attr()输出依然为undefined，而prop()和val()则输出实际值，可见，prop()和val()都能获取到文本框的实际value值，而attr()获取的则始终为文档结构中的value的属性值，与文本框实际值无关，并不会变化。

下面是在百度知道上看到的，自己感觉总结的还蛮到位的：（分享给大家）
在这里插入图片描述
你要去做一个大人，不要回头，不要难过。

“世界上没有谁是不可替代的，一个人离开了，马上就会有另外一个人取代他的位置。”

你好像很好吃a

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
JQuery 的prop()和attr()方法的区别与使用

1、前阶段做的项目中，页面渲染也是使用的JQuery，其中一个页面需要实现单选框的点击选中取消，而使用attr()方法$("...").attr("checked",false);不起作用，去网上查了一些资料最后使用prop()解决了这个问题，特此来记录一下。大家都知道有的浏览器只要写disabled、checked、selected就可以了，而有的要写成disabled=“disabled”、...
复制链接

扫一扫