jQuery中data和attr实例

最新推荐文章于 2021-08-05 22:23:23 发布

xuxinwen32

最新推荐文章于 2021-08-05 22:23:23 发布

阅读量350

点赞数

分类专栏：前端文章标签： jQuery中data和attr实例

本文链接：https://blog.csdn.net/xuxinwen32/article/details/78725208

版权

前端专栏收录该内容

40 篇文章 1 订阅

订阅专栏

这篇博客探讨了在jQuery中使用data和attr的区别。通过三个不同的方法展示了如何在点击事件中获取data-key值，并分析了性能和可读性的优劣。方法一涉及嵌套事件，方法二使用attr获取值，而方法三利用jQuery的data方法存储和检索值，强调了避免DOM重复操作以提高性能的重要性。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<tbody id="sitelist1" class="sitelist">
<tr>
    <td>1</td>
    <td>aaaaaaaa</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td><a href="javascript:void(0)" data-key="51" class="viewDetail">查看详情</a></td>
</tr>
<tr>
    <td>2</td>
    <td>bbb</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td><a href="javascript:void(0)" data-key="107400" class="viewDetail">查看详情</a></td>
</tr>
<tr>
    <td>3</td>
    <td>cccc</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td><a href="javascript:void(0)" data-key="107401" class="viewDetail">查看详情</a></td>
</tr>

</tbody>

</body>

<script>
    $(function(){


        //方法一：查看详情       点击事件里面嵌套点击事件容易造成不可预知的错误；代码维护性和可读性不高；
/*        $('.viewDetail').on('click',function(){
            that = this;
            gopage(1, 10, that);
            // 设备详情查询按钮 ---
            $("#search").off('click');
            $("#search").on("click",function() {
                gopage(1, 10, that);
            })
        });*/

        // 方法二：查看详情  通过声明变量的方式进行调用；点击事件里面不用嵌套点击事件，但是使用的是attr，我们再次操作相同的元素的时候，dom重复操作，性能消耗比较大；
        var searchKey = '';
        $('.viewDetail').on('click',function(){
            searchKey = $(this).attr('data-key');
            console.log('searchKey = ' + searchKey);
            gopage(1, 10, searchKey);
        });

        // 查询按钮 --------------------------------------------------
        $("#search").on("click",function() {
            gopage(1, 10, searchKey);
        });


        // 方法三：查看详情  通过声明变量的方式进行调用；点击事件里面不用嵌套点击事件，并且使用了jQuery里面的$.data()方法，进行存取对象
        // 使用jQuery中的$.data方法在第一次取值之后就会保存到这个缓存对象中，我们再次操作的时候就直接从jQuery缓存中取值，速度非常快
        // 性能的损耗一般都是在dom操作上，所以避免重复操作dom是非常必要的。
        //注意data获取值的时候不用带上data标识符，直接取data后面的key就可以了；例：data-key    $(selector).data('key');
        var searchKey = '';
        $('.viewDetail').on('click',function(){
            searchKey = $(this).data('key');
//            searchKey = $(this).attr('data-key');
            console.log('searchKey = ' + searchKey);
            gopage(1, 10, searchKey);
        });

        // 查询按钮 --------------------------------------------------
        $("#search").on("click",function() {
            gopage(1, 10, searchKey);
        });
    })



    function gopage(tag,pages, keyVal){
        locationAllow = $("#direction").val();
        deviceId = keyVal;

        var data = {
            "locationAllow": locationAllow,
            "deviceId": deviceId,
            "pageNo": tag,
            "pageSize": pages
        };
        $.ajax({
            type: "get",
            url: 'xxxxxx',
            data:data,
            callback: function (data) {
            }
        });
    }

</script>
</html>