JQuery之对元素属性进行操作

最新推荐文章于 2021-07-15 10:48:04 发布

极客研究者

最新推荐文章于 2021-07-15 10:48:04 发布

阅读量141

点赞数

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

本文链接：https://blog.csdn.net/qq_34550459/article/details/106116499

版权

JQuery 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

1.设置和获取元素的自定义属性:
attr(name): 获取匹配的第一个元素的属性值
attr(name,value) 为所有匹配的元素设置一个属性值(value为属性值)
attr(properties) 为所有匹配元素以集合形式同时设置多个属性({name:value,name:value…})

2.设置和获取元素的固有属性:
所谓元素的固有属性就是元素本身自带的属性。

prop(name):获取匹配元素的属性值
prop(name,value):设置匹配元素的属性值

Demo:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery.min.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</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"));
            $("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>

Demo02:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Jquery之设置和获取元素的属性</title>
    <script src="../../js/jquery.min.js"></script>
    <script>
    $(function(){
        //element.prop(propertyName)  获取指定元素的固有属性值(非自定义的属性)
        //element.prop(propertyName,propertyValue)  添加属性 

        console.log($('p').prop('id'));
        console.log($('p').prop('class'));
        $('p').prop('title','testdemo');//添加title属性


        $("input[type='checkbox']").on('click',function(){
            console.log($(this).prop('checked'));//获取input元素的checked属性值
        });

        // debugger;
        var city=$("select#city option:checked");
        // console.log(city.val());
        // console.log(city.prop('index'));
        console.log($('.box1').prop('index'));//prop()无法获取自定义的属性        
        //元素的自定义属性,可以使用attr() 方法获取和设置
        console.log($('.box1').attr('index'));
        $('.box1').attr('index',100);//设置自定义属性值
        console.log($('.box1').attr('index'));
        //数据缓存: data()方法:数据存放在元素的内存中
        //不会修改元素的DOM结构
        $('.box1').data('name','jack bryant');
        console.log($('.box1').data('name'));//获取数据

        //获取data-index属性,H5自定义属性,不用写data-,返回的是数值
        console.log($("input[type='checkbox']").data('index'));

    });
    </script>
</head>
<body>
    复选框: <input type="checkbox" name="hobby" id="hobby" data-index="52"><br>

    所在的城市:<br>
    <select name="cities" id="city">
        <option index='0' value="0" checked="checked">上海</option>
        <option index='1' value="1">北京</option>
        <option index='2' value="2">广州</option>
        <option index='3' value="3">深圳</option>
    </select>
    <div class="box">
        <p id="pEle" class="pClass">you must try your best!</p>
    </div>
    <div class="box1" index='18'></div>
</body>
</html>

极客研究者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JQuery之对元素属性进行操作

1.设置和获取元素的自定义属性:attr(name): 获取匹配的第一个元素的属性值attr(name,value) 为所有匹配的元素设置一个属性值(value为属性值)attr(properties) 为所有匹配元素以集合形式同时设置多个属性({name:value,name:value…})2.设置和获取元素的固有属性:所谓元素的固有属性就是元素本身自带的属性。prop(name):获取匹配元素的属性值prop(name,value):设置匹配元素的属性值Demo:<!DOCTY
复制链接

扫一扫