data属性在原生JS、jq attr()和jq data()的不同表现。
来源:互联网 发布:mac游戏排行 编辑:程序博客网 时间:2024/06/06 05:06
首先记录一下,data-* 其中*不能为空和不能含有大写字母。然后是如何获取data的值。页面是这么写的:
<a href="#" id="a" data-test="123">123</a>
1.原生js获取:document.getElementById("a").dataset.test。2.jq attr()获取$("#a").attr("data-test")。3.jq data()获取$("#a").data("test")。当然,这个时候三种方法取出来的值都是一样的,全是“123”。再看赋值,其实也是最容易迷糊的一个。
$(function(){ console.log($("#a").data("test"));//输出“123” $("#a").data("test","456");//此时element中data-test="123" console.log($("#a").data("test"));//输出“456” var a= document.getElementById("a"); console.log(a.dataset.test);//输出“123” console.log($("#a").data("test"));//输出“456” a.dataset.test="456";//此时element中data-test="456" $("#a").attr("data-test","789");//此时element中data-test="789" console.log($("#a").data("test"));/输出“456” });
现在分析一下,原生js和jq的attr()赋值其实是一样的,都会改变dom树,页面中的data-test会改变。而jq的data()辅助其实是赋值给jq对象,而取值的时候取得也是jq对象的,如果jq对象的缓存已经存在,页面的改变并不会改变data(“test”)取出的值。jq对象的改变并不会重构dom树,所以element中的data-test是不会改变的。
1 0
- data属性在原生JS、jq attr()和jq data()的不同表现。
- JQ属性选取attr、prop、data的区别
- jq:prop()、attr()、data()异同
- data在原生和jquery中的不同表现
- jq data属性操作的一个陷阱
- jq获取h5的自定义data-属性的问题
- 利用data-*属性与jq写动画
- JQ笔记本之attr属性操作(赋值与读取)
- JQ中attr和prop的区别
- Jq实现复选框的全选(Jq属性操作)
- 原生JS和jQ总结--样式
- 原生js实现类似jq的trigger
- 原生js实现jq的$.each()方法
- jq中自定义属性取值 data-info
- JS和JQ的区别
- jq和js的区别
- jq后面接原生js
- jQ中attr和prop的区别分析
- Android联网框架Ion
- 【Spring Boot】Spring Boot 静态资源处理
- Gradle 构建java项目示例
- Java基础知识_day08_(API,String类,StringBuilder类)
- IntelliJ IDEA 使用心得与常用快捷键
- data属性在原生JS、jq attr()和jq data()的不同表现。
- C++多态及虚表深度剖析
- bitmask type 位掩码类型
- mac下Nginx安装与配置
- 浅谈jsp、freemarker、velocity区别
- SSH框架整合后运行出现beans.Userposition_$$_javassist_2 cannot be cast to javassist.util.proxy.Proxy错误的解决方案
- SwitchButton
- [CDQ分治与整体二分]个人对CDQ分治与整体二分的理解
- Java基础知识_day07_(面向对象,构造方法,封装,成员变量与局部变量)