-jq-data存储数据-/-jq-data临时存储数据-数据编辑-让input框拿到光标：focus()

喵帕斯_喵太

于 2021-05-09 20:26:03 发布

阅读量209

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/miaopasi_poi/article/details/116569751

版权

jquery 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

01-jq-data存储数据

<body>
    <div class="box" data-age="80">前端小白</div>

    <script>
        $(function () {
            // data()
            const $box = $('.box')

            // 获取是所有以data-开头的自定义属性
            console.log($box.data())

            // 设置：内存有效：不会放入到DOM元素中
            $box.data('name', '小马哥')

            console.log($box.data('name'))
            console.log($box.data())

            // data()如果不是写死在元素结构中的，是动态添加的：一旦页面刷新，数据就会丢失

            // 类似于js原生中的：dataset
        })
    </script>
</body>

注意：
1.获取是所有以data-开头的自定义属性
2.设置：内存有效：不会放入到DOM元素中
3.data()如果不是写死在元素结构中的，是动态添加的：一旦页面刷新，数据就会丢失.

02-jq-data临时存储数据-数据编辑

<body>
    <input type="text" name="username" value="前端小白">

    <button class="btn2">撤回</button>

    <script>
        // 编辑：让input框拿到光标：focus()

        $(function () {
            $('input').focus(function () {
                // 原始数据保存
                // console.log($(this).prop('value'))

                $(this).data('oldValue', $(this).prop('value'))
            })

            // 撤回
            $('.btn2').click(function () {
                // console.log($('input').data())

                $('input').prop('value', $('input').data('oldValue'))
            })
        })
    </script>
</body>