jQuery属性操作

最新推荐文章于 2024-11-08 16:09:18 发布

Eli-sun

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量117

点赞数

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

本文链接：https://blog.csdn.net/vfjcgg/article/details/106001265

版权

jQuery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.设置或获取元素固有属性 prop()
所谓元素固有属性就是元素本身自带的属性，比如a元素里面的href,比如input元素里面的type。

1.获取固有属性语法
prop(“属性”)
2.设置属性语法
prop(“属性”,“属性值”)

2.设置或获取元素自定义属性值 attr()
用户自己给元素添加的属性，我们称为自定义属性，比如给div添加index=“1”

1.获取自定义属性语法
attr(“属性”) //类似于原生getAttribute()
2.设置属性语法
attr(“属性”,“属性值”) //类似于原生setAttribute()
该方法也可以获取H5自定义属性

3.数据缓存data()
data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据将被移出。

1.附加数据语法
data(“name”,“value”) // 向被选元素附加数据
2.获取数据语法
data(“name”) // 向被选元素获取数据
同时，还可以读取HTML5自定义属性data-index,得到的是数字型

栗子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-mini.js"></script>
</head>

<body>
    <a href="http://www.itcast.cn" title="都挺好">都挺好</a>
    <input type="checkbox" name="" id="" checked>
    <div index="1" data-index="2">我们是</div>
    <span>123</span>
    <script>
        $(function() {
            // 1.element.prop("属性名") 获取元素固有的属性值
            console.log($("a").prop("href"));
            $("a").prop("title", "我们都挺好");
            $("input").change(function() {
                console.log($(this).prop("checked"));
            });
            // console.log($("div").prop("index"));
            // 2.元素的自定义属性 我们通过 attr()获取
            console.log($("div").attr("index"));
            console.log($("div").attr("index", "4"));
            console.log($("div").attr("data-index"));
            // 3.数据缓存 data() 这个里面的数据是存放在元素的内存里面
            $("span").data("uname", "andy");
            console.log($("span").data("uname"));
            // 这个方法获取data-index h5自定义属性 第一个 不用写 data- 而且返回的是数字型
            console.log($("div").data("index"));
        })
    </script>
</body>

</html>