jQuery属性操作

最新推荐文章于 2023-07-07 16:55:54 发布

小码哥呀

最新推荐文章于 2023-07-07 16:55:54 发布

阅读量62

点赞数

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

本文链接：https://blog.csdn.net/qq_46112274/article/details/122404229

版权

JQuery 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1、设置或获取元素固有属性值prop()

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <a href="http://www.baidu.com" title="百度">百度</a>
    <input type="checkbox" name="" id="" checked></input>
    <div index="1"></div>
    <script>
        $(function(){
            // 1、element.prop("属性名")获取元素固有的属性值
            console.log($("a").prop("href"));
            $("a").prop("title","百度一下");
            $("input").change(function(){
                console.log($(this).prop("checked"));
            })
        })
    </script>
</body>
</html>

在这里插入图片描述

2、设置或获取元素固有属性值attr()

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <a href="http://www.baidu.com" title="百度">百度</a>
    <input type="checkbox" name="" id="" checked></input>
    <div index="1" data-index="5"></div>
    <span>123</span>
    <script>
        $(function(){
            // 2、元素自定义属性 我们通过attr()
            console.log($("div").attr("index"));
            $("div").attr("index",4);
            console.log($("div").attr("data-index"));
        })
    </script>
</body>
</html>

在这里插入图片描述

3、数据缓存data()

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <a href="http://www.baidu.com" title="百度">百度</a>
    <input type="checkbox" name="" id="" checked></input>
    <div index="1" data-index="5"></div>
    <span>123</span>
    <script>
        $(function(){
            // 3、数据缓存 data() 这个里面的数据是存放在元素的内存里面
            $("span").data("uname","andy");
            console.log($("span").data("uname"));
             //这个方法获取data-index h5自定义属性 第一个 不用写data- 而且返回的是数字型
            console.log($("div").data("index"));
        })
    </script>
</body>
</html>