2021-04-08 10:29发布
就是标签上的一个属性,比如:js获取的时候是:obj.getAttribute("data-type");做一些逻辑操作或者唯一标示等,很方便的。
那个其实不属于正规的HTML属性,是jquery这个库专门用来寻址的一种自定属性,其他库也有类似的这种;利用它的目的是库自定义的属性,所以可以在库中更方便的区分其他HTML自带的属性,用获得的值来做的事情很多,比如data-target=id2,可以取得id2这个相关联的DOM元素
HTML5中的data-*属性
我们往往会根据需要在HTML标记上添加自定义的属性来存储和操作数据,我们自定义的属性名字也千奇百怪,五花八门。我们可以通过原生的 getAttribute()或jQuery中的.attr()来获取我们自定义的属性。但是前端技术在向着规范化前进。HTML5标准规定,自定义的属性都已data—*开头,这样就区分开了固有属性和自定义属性。HTML代码如下:
$(document).ready(function(){
var el = document.getElementById("testDiv");
console.log(el.dataset.cname);//=>张三
el.dataset.cname = "ZS";//设置值为"ZS"
console.log(el.dataset.cname);//=>"ZS"
console.log("jQuery data:", $("#testDiv").data("eName") );
$("#testDiv").data("eName", "abcefg");
console.log("遍历testDiv上的自有属性");
$.each(el.dataset, function(key, value){
console.log(key+":"+value);
});
//遍历testDiv上的自有属性
//cname:ZS
//eName:zhangsan
//myname:my name is zs.
在获取自定义属性的值时,使用dataset属性,然后通过自定义属性(这时去掉data-前缀)的名称去获取值。dataset是JS5规范中新增加的属性,用于和data-*配合使用。
通过each打印的结果,我们需要注意:
1,如果data-后面包含了“-”,例如 date-e-name,"-"会去掉,并转换成为骆驼峰式的命名 eName。这是因为JSON Object 的key不能包含”-“。
2,如果data-后面的单词有大写,例如 myName,将会转存成小写 myname。这里就不理解为什么会转换成小写了,JSON Object的key是区分大小写的。求高人指定??
3,如果你想删除一个data-*属性,请使用 delete dataset.cname或者dataset.cname=null;
data-*属性看起来很好,但是不幸的是只有在Chrome 8+ Firefox(Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+的浏览器中实现了此标准。如果你的脚步需要兼容各主流浏览器的不同版本建议还是使用原生的getAttribute()或jQuery中的.attr()。
jQuery中的.data()
jQuery中的.data()方法作用:在jQuery对象对应的DOM元素上获取或存放key-value对。我们可以通过html5的data-*属性在元素上存取数据,在jQuery也可以通过data()来实现。data()方法有多个重载,传递一个参数是获取value值,传递两个参数是存储或覆盖已存在的值,传递一个JSON Object是在元素上存储或覆盖已存在的多个key-value对。如果通过data() 在元素上存储key-value,value可以是一个对象,而不是像data-*只能存储一个字符串的value。下面给出一个综合示例:
[removed][removed]
测试在元素上存储一个key-value
$(function(){
function printVlaue(){
//通过data()在testDiv元素上存储 {ename:zhangsan} 健/值对。
$("#testDiv").data("ename", "zhangsan");
//修改data()通过 data-* 属性存储的值
$("#testDiv").data("cname", "我是张三");
console.log( "获取通过data()存储在testDiv元素上的ename值:", $("#testDiv").data("ename") );
console.log( "获取通过 data-* 存储在testDiv元素上的cname值:", $("#testDiv").data("cname") );
//$("#testDiv").jQueryremoveAttr("data-"+"abc");
console.log( "获取ename值:", $("#testDiv").data("ename") );
console.log( "获取cname值:", $("#testDiv").data("cname") )
console.log("删除testDiv元素上 ename 和 cname 键/值对。");
$("#testDiv").removeData("ename");
$("#testDiv").removeData("cname");
console.log("输出 eanem 和 canme 对应的值,看是否已经删除");
console.log( $("#testDiv").data("ename") );
console.log( $("#testDiv").data("cname") );
};
$("获取值").appendTo("body").bind("click", printVlaue);;
console.log("debug use.");;
/*
获取通过data()存储在testDiv元素上的ename值: zhangsan
获取通过 data-* 存储在testDiv元素上的cname值: 我是张三
获取ename值: zhangsan
获取cname值: 我是张三
删除testDiv元素上 ename 和 cname 键/值对。
输出 eanem 和 canme 对应的值,看是否已经删除
undefined
张三
*/
从上例中我们可以看出,.data()可以获取通过data-*属性存储的值。但是通过.data()修改data-*属性的值不会显示在HTML标记中,我们只是通过.data()在元素存储了一个新值。.removeData()也不能删除通过data-*存储的数据。由于jQuery是一个通用的JS框架,最浏览器兼容性做的非常好,大多数情况,我们应该通过.data()在元素上存取数据(有一个好处是可以存储一个对象)。如果我们必须通过data-*来存取和修改数据,建议使用JS5的dataset属性,这个属性的兼容问题,我们可以通过写jQuery插件来解决。这是我的插件代码,如下:
[removed]
src="//cdn.bootcss.com/jquery/2.2.0/jquery.js">[removed]
function printValue(){
var $testDiv = $("#testDiv").udDataAttr();
console.log("udDataAttr get()=>", $testDiv.get("cname") );
$testDiv.set("cname", "set 张三");
console.log("打印所有已data-*开头的属性和值=>", $testDiv.dataset());
console.log("udDataAttr get e-name=>", $testDiv.get("e-name") );
//var el = document.getElementById("testDiv");
//console.log("el.dataset.eName=>", el.dataset.eName);
$("获取值").appendTo("body").bind("click", printValue);
console.log("debug use.");
(function($, window){
//user-defined Attribute
var plugName = "udDataAttr";
$.fn[plugName] = function(){
var $self = $(this),
obj = ($self.length && $self[0].dataset) || null;
return {
get: function(name){
return obj===null? $self.attr("data-"+name) : obj[ this._format(name) ];
}
,set: function(name, value){
if(obj === null){
$self.attr("data-"+name, value);
}else{
obj[ this._format(name) ] = value;
return $self;
,dataset: function(){
var newObj = {};
$.each(obj, function(key, value){
newObj[key] = value;
newObj = $self.data(); //获取所有以data-*开头的属性
return newObj;
* 将name转换成dataset可识别的格式。
* 例如:e-name 转换成 eName
* 总感觉 _format()的实现不是最优的,求高手给出实现
,_format: function(name){
console.log("_format old name=>",name);
name = name.toLowerCase();
if(name.indexOf('-')>-1){
var array = name.split('-');
for(var i=1,len=array.length; i var v = array[i]; array[i] = v.substr(0,1).toUpperCase() + v.substr(1,v.length); name=array.join(""); } } console.log("_format() new name=>",name); return name; } }; }; }(jQuery, window));
var v = array[i];
array[i] = v.substr(0,1).toUpperCase() + v.substr(1,v.length);
name=array.join("");
console.log("_format() new name=>",name);
return name;
}(jQuery, window));
现在有很多女生学习编程哦,尤其是前端,越来越多的女生学习,所以是合适的
html插入图片有两种方式:一种是通过标签插入的正常的图片,另一种是通过>< style>问题分析:1、首先你是通过第二种方式插入的是背景图片,直接用width和height只能控制div的宽度和高度。2、如果你插入的图片是通过标签的方式来插入的话,可以通过自身的属性...
html添加图片的方法如下:1、打开html软件。2、导入项目。3、找到要添加图片的位置。4、写【imgsrc=图片路径】即可。
1、默认状态下,背景会延伸到边框的区域下层2、可以通过 background-clip 属性来调整上述默认行为所带来的不便;这个属性的初始值是 border-box, 意味着背景会被元素的 border box(边框的外沿框) 裁切掉实现半透明边框代码如下:body { ...
html图片对齐主要用text-align属性来控制:text-align的值主要又分为:left左对齐,center居中对齐,right靠右对齐。
你没有设置好,具体解决方法如下。输入如下代码:width表示宽度height表示高度下图所示,我将图片的宽和高通通缩小,可以看到,图片的尺寸果然按照我的意愿进行了改变。
设置表格单元格的外边距为0 css中设置border-collapse: collapse; 或者在table标签中写cellspacing=0px
br是强制换行的,一般用在段落文字里边的换行。
1. 原生。直接告诉你,开发太慢,不能跨平台,先不要学。2. 使用WebView的hybrid app,Cordova/ionic 这些。就是用浏览器运行html,js,css仿app,我用了好几年,学习快,开发块,跨平台。问题是每个安卓版本/苹果版本/浏览器版本运行效果不一致,有些版本还运...
常用的移动APP开发框架:1、框架:PhoneGapPhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台。优点:可跨平台。phonegap框架帮我们解决了差异性,javascript与平台系统的连接由phonegap框架完成。 提供硬件访问控...
1. LungoJS 这个是被认为开发移动网站最好的HTML5开发框架,使用 HTML5/CSS3 和 JavaScript 技术。可帮助创建基于 iOS、 Android、 Blackberry 和 WebOS 平台的应用程序。该框架可利用当前移动设备的高级特性,可捕捉事件包括滑动、触屏、长按等。无需...
应该是样式不一样造成的
1、使用meta标签:viewportH5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。viewport 是用户网页的可视区域。翻译为中文可以叫做视区。手机...
src标签中放的是你的图片的路径,其中可以使用相对路径和绝对路径,相对路径就是你的图片在电脑中的存放位置,绝对路径就是指一些网站地址。alt标签中可以输入文本,当图片的路径错误时就会显示该文本内容。title标签中的值也是文本,当你鼠标悬停是所显示的...
最多设置5个标签!
就是标签上的一个属性,比如:
js获取的时候是:obj.getAttribute("data-type");
做一些逻辑操作或者唯一标示等,很方便的。
那个其实不属于正规的HTML属性,是jquery这个库专门用来寻址的一种自定属性,其他库也有类似的这种;利用它的目的是库自定义的属性,所以可以在库中更方便的区分其他HTML自带的属性,用获得的值来做的事情很多,比如data-target=id2,可以取得id2这个相关联的DOM元素
HTML5中的data-*属性
我们往往会根据需要在HTML标记上添加自定义的属性来存储和操作数据,我们自定义的属性名字也千奇百怪,五花八门。我们可以通过原生的 getAttribute()或jQuery中的.attr()来获取我们自定义的属性。但是前端技术在向着规范化前进。HTML5标准规定,自定义的属性都已data—*开头,这样就区分开了固有属性和自定义属性。HTML代码如下:
$(document).ready(function(){
var el = document.getElementById("testDiv");
console.log(el.dataset.cname);//=>张三
el.dataset.cname = "ZS";//设置值为"ZS"
console.log(el.dataset.cname);//=>"ZS"
console.log("jQuery data:", $("#testDiv").data("eName") );
$("#testDiv").data("eName", "abcefg");
console.log("jQuery data:", $("#testDiv").data("eName") );
console.log("遍历testDiv上的自有属性");
$.each(el.dataset, function(key, value){
console.log(key+":"+value);
});
//遍历testDiv上的自有属性
//cname:ZS
//eName:zhangsan
//myname:my name is zs.
});
在获取自定义属性的值时,使用dataset属性,然后通过自定义属性(这时去掉data-前缀)的名称去获取值。dataset是JS5规范中新增加的属性,用于和data-*配合使用。
通过each打印的结果,我们需要注意:
1,如果data-后面包含了“-”,例如 date-e-name,"-"会去掉,并转换成为骆驼峰式的命名 eName。这是因为JSON Object 的key不能包含”-“。
2,如果data-后面的单词有大写,例如 myName,将会转存成小写 myname。这里就不理解为什么会转换成小写了,JSON Object的key是区分大小写的。求高人指定??
3,如果你想删除一个data-*属性,请使用 delete dataset.cname或者dataset.cname=null;
data-*属性看起来很好,但是不幸的是只有在Chrome 8+ Firefox(Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+的浏览器中实现了此标准。如果你的脚步需要兼容各主流浏览器的不同版本建议还是使用原生的getAttribute()或jQuery中的.attr()。
jQuery中的.data()
jQuery中的.data()方法作用:在jQuery对象对应的DOM元素上获取或存放key-value对。我们可以通过html5的data-*属性在元素上存取数据,在jQuery也可以通过data()来实现。data()方法有多个重载,传递一个参数是获取value值,传递两个参数是存储或覆盖已存在的值,传递一个JSON Object是在元素上存储或覆盖已存在的多个key-value对。如果通过data() 在元素上存储key-value,value可以是一个对象,而不是像data-*只能存储一个字符串的value。下面给出一个综合示例:
[removed][removed]
测试在元素上存储一个key-value
$(function(){
function printVlaue(){
//通过data()在testDiv元素上存储 {ename:zhangsan} 健/值对。
$("#testDiv").data("ename", "zhangsan");
//修改data()通过 data-* 属性存储的值
$("#testDiv").data("cname", "我是张三");
console.log( "获取通过data()存储在testDiv元素上的ename值:", $("#testDiv").data("ename") );
console.log( "获取通过 data-* 存储在testDiv元素上的cname值:", $("#testDiv").data("cname") );
//$("#testDiv").jQueryremoveAttr("data-"+"abc");
console.log( "获取ename值:", $("#testDiv").data("ename") );
console.log( "获取cname值:", $("#testDiv").data("cname") )
console.log("删除testDiv元素上 ename 和 cname 键/值对。");
$("#testDiv").removeData("ename");
$("#testDiv").removeData("cname");
console.log("输出 eanem 和 canme 对应的值,看是否已经删除");
console.log( $("#testDiv").data("ename") );
console.log( $("#testDiv").data("cname") );
};
$("").appendTo("body").bind("click", printVlaue);;
console.log("debug use.");;
});
/*
获取通过data()存储在testDiv元素上的ename值: zhangsan
获取通过 data-* 存储在testDiv元素上的cname值: 我是张三
获取ename值: zhangsan
获取cname值: 我是张三
删除testDiv元素上 ename 和 cname 键/值对。
输出 eanem 和 canme 对应的值,看是否已经删除
undefined
张三
*/
从上例中我们可以看出,.data()可以获取通过data-*属性存储的值。但是通过.data()修改data-*属性的值不会显示在HTML标记中,我们只是通过.data()在元素存储了一个新值。.removeData()也不能删除通过data-*存储的数据。由于jQuery是一个通用的JS框架,最浏览器兼容性做的非常好,大多数情况,我们应该通过.data()在元素上存取数据(有一个好处是可以存储一个对象)。如果我们必须通过data-*来存取和修改数据,建议使用JS5的dataset属性,这个属性的兼容问题,我们可以通过写jQuery插件来解决。这是我的插件代码,如下:
[removed]
src="//cdn.bootcss.com/jquery/2.2.0/jquery.js">[removed]
测试在元素上存储一个key-value
$(document).ready(function(){
function printValue(){
var $testDiv = $("#testDiv").udDataAttr();
console.log("udDataAttr get()=>", $testDiv.get("cname") );
$testDiv.set("cname", "set 张三");
console.log("udDataAttr get()=>", $testDiv.get("cname") );
console.log("打印所有已data-*开头的属性和值=>", $testDiv.dataset());
console.log("udDataAttr get e-name=>", $testDiv.get("e-name") );
//var el = document.getElementById("testDiv");
//console.log("el.dataset.eName=>", el.dataset.eName);
};
$("").appendTo("body").bind("click", printValue);
console.log("debug use.");
});
(function($, window){
//user-defined Attribute
var plugName = "udDataAttr";
$.fn[plugName] = function(){
var $self = $(this),
obj = ($self.length && $self[0].dataset) || null;
return {
get: function(name){
return obj===null? $self.attr("data-"+name) : obj[ this._format(name) ];
}
,set: function(name, value){
if(obj === null){
$self.attr("data-"+name, value);
}else{
obj[ this._format(name) ] = value;
}
return $self;
}
,dataset: function(){
var newObj = {};
if(obj === null){
$.each(obj, function(key, value){
newObj[key] = value;
});
}else{
newObj = $self.data(); //获取所有以data-*开头的属性
}
return newObj;
}
/*
* 将name转换成dataset可识别的格式。
* 例如:e-name 转换成 eName
* 总感觉 _format()的实现不是最优的,求高手给出实现
*/
,_format: function(name){
console.log("_format old name=>",name);
name = name.toLowerCase();
if(name.indexOf('-')>-1){
var array = name.split('-');
for(var i=1,len=array.length; i
var v = array[i];
array[i] = v.substr(0,1).toUpperCase() + v.substr(1,v.length);
name=array.join("");
}
}
console.log("_format() new name=>",name);
return name;
}
};
};
}(jQuery, window));
相关问题推荐
现在有很多女生学习编程哦,尤其是前端,越来越多的女生学习,所以是合适的
html插入图片有两种方式:一种是通过标签插入的正常的图片,另一种是通过>< style>问题分析:1、首先你是通过第二种方式插入的是背景图片,直接用width和height只能控制div的宽度和高度。2、如果你插入的图片是通过标签的方式来插入的话,可以通过自身的属性...
html添加图片的方法如下:1、打开html软件。2、导入项目。3、找到要添加图片的位置。4、写【imgsrc=图片路径】即可。
1、默认状态下,背景会延伸到边框的区域下层2、可以通过 background-clip 属性来调整上述默认行为所带来的不便;这个属性的初始值是 border-box, 意味着背景会被元素的 border box(边框的外沿框) 裁切掉实现半透明边框代码如下:body { ...
html图片对齐主要用text-align属性来控制:text-align的值主要又分为:left左对齐,center居中对齐,right靠右对齐。
你没有设置好,具体解决方法如下。输入如下代码:width表示宽度height表示高度下图所示,我将图片的宽和高通通缩小,可以看到,图片的尺寸果然按照我的意愿进行了改变。
设置表格单元格的外边距为0 css中设置border-collapse: collapse; 或者在table标签中写cellspacing=0px
br是强制换行的,一般用在段落文字里边的换行。
1. 原生。直接告诉你,开发太慢,不能跨平台,先不要学。2. 使用WebView的hybrid app,Cordova/ionic 这些。就是用浏览器运行html,js,css仿app,我用了好几年,学习快,开发块,跨平台。问题是每个安卓版本/苹果版本/浏览器版本运行效果不一致,有些版本还运...
常用的移动APP开发框架:1、框架:PhoneGapPhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台。优点:可跨平台。phonegap框架帮我们解决了差异性,javascript与平台系统的连接由phonegap框架完成。 提供硬件访问控...
1. LungoJS 这个是被认为开发移动网站最好的HTML5开发框架,使用 HTML5/CSS3 和 JavaScript 技术。可帮助创建基于 iOS、 Android、 Blackberry 和 WebOS 平台的应用程序。该框架可利用当前移动设备的高级特性,可捕捉事件包括滑动、触屏、长按等。无需...
应该是样式不一样造成的
1、使用meta标签:viewportH5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。viewport 是用户网页的可视区域。翻译为中文可以叫做视区。手机...
src标签中放的是你的图片的路径,其中可以使用相对路径和绝对路径,相对路径就是你的图片在电脑中的存放位置,绝对路径就是指一些网站地址。alt标签中可以输入文本,当图片的路径错误时就会显示该文本内容。title标签中的值也是文本,当你鼠标悬停是所显示的...