jQuery属性操作-prop()/attr()/data()

最新推荐文章于 2022-12-12 14:07:28 发布

httpkaidi

最新推荐文章于 2022-12-12 14:07:28 发布

阅读量173

点赞数

分类专栏： jQuery 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/httpkaidi/article/details/121621882

版权

jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文介绍了jQuery中如何使用prop()方法设置和获取元素的固有属性，如href和type，以及如何通过attr()处理自定义属性。同时，文章详细讲解了data()方法在元素内存中存储和检索数据的功能，用于实现数据缓存，数据在页面刷新后将丢失。示例代码展示了这些方法的实际应用。

摘要由CSDN通过智能技术生成

jQuery属性操作
设置或获取元素固有属性值 prop()
元素固有属性值就是元素本身自带的属性，比如<a>元素里面的 href ，比如<input>里面的 type
prop("属性")
prop("属性","属性值")
修改/获取自定义属性
attr()（类似于原生js里面的getAttribute/setAttribute)
数据缓存
data() data方法可以在指定的元素上存储数据，并不会修改DOM元素结构，一旦页面刷新，之前存放的数据都将移除

        $(function() {
            //1.设置或获取元素固有属性值 prop()
            console.log($("a").prop("herf")); //获取a里面的链接
            $("a").prop("title", "周九良"); //改变 a 里面的title 值
            $("input").change(function() {
                    console.log($(this).prop("checked")); //点击后返回复选框的值
            })
            //2.自定义属性attr()
            console.log($("div").attr()); //获取自定义属性 类似于原生js里面的getAttribute
            $("div").attr("index", 4); //修改自定义属性  类似于原生js里面的setAttribute
            
            //3.数据缓存data  这个数据是存放在元素的内存里 
            $("span").data("uname", "andy"); //存储数据
            console.log($("span").data("uname")); //获取数据
            //这个方法获取data-index h5自定义属性时，不用写data- ,而且返回的是数字型
            console.log($("div").data("index"));
        })