温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

jquery中attr()和prop()有哪些区别

发布时间:2020-11-30 12:47:12 来源:亿速云 阅读:408 作者:小新 栏目:web开发

小编给大家分享一下jquery中attr()和prop()有哪些区别,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

jquery中attr()和prop()的区别是:attr函数操作的是文档节点的属性,设置的属性值只能是字符串类型;prop函数操作的是js对象的属性,设置的属性值可以是包括数组和对象在内的任意类型。

区别介绍:

在jQuery中,attr()函数和prop()函数都用于设置或获取指定的属性,它们的参数和用法也几乎完全相同。但不得不说的是,这两个函数的用处却并不相同。

(推荐教程:jquery视频教程)

具体区别如下:

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是获取不到这个属性值的。

以上是“jquery中attr()和prop()有哪些区别”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI