jQuery中data和attr实例

来源：互联网发布：淘宝主图视频制作教程编辑：程序博客网时间：2024/06/03 09:26
<!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>
阅读全文
0 0