«

jQuery怎么自定义属性

时间:2024-3-8 16:23     作者:韩俊     分类: Javascript


这篇文章主要介绍“jQuery怎么自定义属性”,在日常操作中,相信很多人在jQuery怎么自定义属性问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”jQuery怎么自定义属性”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

传统的HTML中如果想要实现某种样式,可以在标签上添加id、class、或者在标签上添加固有属性,通过CSS中的类选择器、id选择器、属性选择器来实现,在许多UI框架中,例如:bootstrap,可以通过data-[ ]自定义属性,不用写一行js代码,方便了很多。同样在HTML5可以通过data-自定义属性名来给元素添加自定义的属性名。一旦添加完成之后。通过JS可以获取以及设置自定义属性。

自定义属性目的:是为了保存并使用数据。有些数据可以保存到页面中而不保存到数据库中。

自定义属性获得是通过getAttribute('属性')获得,但有些自定义属性很容易引起歧义,不容易判断是元素的内置属性还是自定义属性。

一、自定义属性(html5标准)data-属性名称="属性值"

自定义属性的名称驼峰式命名规则需要用-隔开

自定义属性名称如果连在一起写,大写会自动转为小写

data-user="eric"======>属性名称是user
data-user-name="eric"===>属性名称是userName
data-userName="eric"=====>属性名称是username

二、jquery自定义属性常用操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实例</title>
    <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            var t1=$('.test').data();//获取该元素全部自定义属性
            var t2=$('.test').data('age');//获取指定自定义属性
            console.log(t1);//{age:18,user:"li"}
            console.log(t2);//18
            $('.test').data('age',20);//改变自定义属性
            console.log(t1);//{age:20,user:"li"}
            $('.test').data('weight','60kg');//设置新自定义属性
            console.log(t1);//{age:20,user:"li",weight:"60kg"}
        });
    </script>
</head>
<body>
    <div class="test" data-user="li" data-age="18">
    </div>
</body>
</html>

三、jQuery中选择查找自定义属性具有特定值的所有元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实例</title>
    <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('a[data-url="1.html"]').html('<span >5.html</span>');
            $('a[data-url="2.html"]').html('<span >6.html</span>');
        });
    </script>
</head>
<body>
    <div class="test" data-user="li" data-age="18">
        <a href="https://www.maopiaopiao.com">

标签: javascript

热门推荐