关于H5的自定义属性data-*

【关于H5的自定义属性data-*】的更多相关文章

H5对自定义属性的规定和添加获取自定义属性的方法

H5对自定义属性的规定和添加获取自定义属性的方法元素属性那么多,如何区分是自带的属性还是默认的属性呢? H5规定自带的属性有个data- 前缀,如data-index="1" <script> var divele = document.querySelector("div"); //我们常用的添加和获取自定义属性 divele.setAttribute("flag", 1); console.log(divele.getAttri…

h5小功能_classList和自定义属性data

###1.classList返回一个对象集通过obj.classList.add()或obj.classList.remove()可操作对象的class属性值 classList.toggle( ) class属性值中存在则删除,不存在则添加缺点: 需考虑兼容性,不兼容则需自行定义addClass和removeClass的js模块方法 ###2.自定义属性自定义属性只有attribute 但在属性前加data- 含有property 该属性含dataset等方法 eg: <inp…

关于H5的自定义属性data-*

data-* 是H5的新属性,用来让开发者对标签添加自定义属性的. 其读写方式有如下几种: 如果是 data-abc 的格式,则采用正常格式 abc 来读写该属性值 <div id="content" data-age="18">html5 data-*自定义属性 age</div> // 原生 js 方式读写 var content= document.getElementById('content'); console.log(conte…

关于H5中自定义属性的设置和获取

自定义数据属性是在HTML5中新加入的一个特性.简单来说,自定义数据属性规范规定任何以data-开头属性名并且赋值.自定义数据属性是为了保存页面或者应用程序的私有自定义数据,这些自定义数据属性保存进DOM中,对于整个DOM的布局和表现无任何影响,但是却可以方便操控整个网页的交互以及想要表达的效果. 比如我们想要统计一个页面玩家的排行榜,但是DOM页面的原生标签并没有提供这样的一个类似的属性.这时,就可以创建一个data-rank数据属性,保存玩家的分数,利用JS去控制属性的赋值以及逻辑分析,最终…

h5笔记

标签更语义化标签 header标签 nav标签 section标签 article标签 aside标签 widget标签 footer标签为什么要有语义化标签能够便于开发者阅读和写出更优雅的代码,代码如诗同时让浏览器或是网络爬虫可以很好地解析,从而更好分析其中的内容更好地搜索引擎优化切记:HTML的职责是描述一块内容是什么(或其意义)而不是它长的什么样子,它的外观应该由CSS来决定. 应用程序标签 [datalist(数据列表)] datalist数据列表的呈现需要载体 <input…

自定义属性--JavaScript

1 - 获取属性值 element.属性获取属性值 element.getAttribute('属性') 区别: element.属性 --获取内置属性(元素本身自带的属性) element.getAttribute('属性'); --主要获得自定义的属性(标准) 程序员自定义的属性 code-1: <div id="demo" index="1" class="nav"></div> <script> va…

移动端H5上传图片并压缩上传

手头上的这个项目主要是在微信内运行的一个网站,需要用户上传手机内的照片,而现在手机照片尺寸越来越大,直接上传的话的确上传进度慢影响用户体验而且也会给服务器增加压力,所以利用H5的新特性压缩后上传不失为一良策. 最后选用的是localResizeImg进行压缩上传,简单易上手,核心代码部分如下. 前台部分 <input id="upload" type="file" name="upload" multiple accept="im…

h5 audio播放音频文件

h5 audio播放音频文件注:下面html中样式及不相关的内容去掉了第一个例子播放没有防盗链的外网音频文件是可以的 <!doctype html> <html> <head> <meta charset="utf-8"> <title>音乐</title> <script src="Js/jquery-1.11.0.min.js" type="text/javascrip…

ThinkPHP 5 整合支付宝微信支付（支付宝H5，微信H5、APP支付、公众号支付）

因项目没有PC站所以没有写电脑网站支付. Pay.php支付控制器 <?php // +---------------------------------------------------------------------- // | YFCMS [ WE CAN DO IT MORE SIMPLE ] // +---------------------------------------------------------------------- // | Copyright (c) 2…

H5 语义化、基本事件浅析（含file对象、drag拖拽等）

1.语义化标签帮助搜索引擎,盲人设备等程序,辨识网页内容信息,明确网页区域分布,不体现任何样式,但存在浏览器兼容性问题,如IE8下无<header>标签. ① H5基本语义标签: <nav> 导航 <header> 页眉 <footer> 页脚 <section> 区块 <article> 文章 <aside…

微信H5支付(基于Java实现微信H5支付)

微信的H5支付区别与APP支付,主要在于预下单(返回的参数不一样),其它大体相同(基本没什么区别,区别在于有些人加密喜欢用MD5有些人喜欢用官方提供的加密方式加密,我用的是官方的),贴一下H5支付预下单的业务层以及控制层代码方便以后参考,其它代码可以参考微信APP支付. 业务层(预下单) import com.aone.app.common.util.RandomNumUtil; import com.aone.app.common.wx.*; import com.aone.app.servi…

在小程序内点击按钮分享H5网页给好友或者朋友圈

在小程序内点击按钮分享H5网页给好友或者朋友圈首先需要建立h5容器文件夹页面.wxml <navigator url="/pages/report-await/fouryearh5share/fouryearh5share"> <button class="sharebutton" open-type="share" ></button > </navigator> 页面.js onShareA…

uniapp 兼容H5复制文本功能，亲测可用

封装copyText函数,具体如下: copyText(val){ let result // #ifndef H5 uni.setClipboardData({ data: val, success() { result = true }, fail() { result = false } }); // #endif // #ifdef H5 let textarea = document.createElement("textarea") textarea.value = val…

HTML5和css3的总结

简单的罗列一个HTML5的新东西,以后的几天里详细的过一遍一个挺有用的网站:www.css88.com [H5的新标签] 用之前的标签完全可以代替的:header footer aside atrical nav address time mark section 新增的重要的标签:video audio caves(画图) 这些新标签的作用:语义化,使代码的可读性更强:便于提高搜索优化. 再谈谈兼容性:兼容IE9+,IE8及其以下有些可以解决,但大部分的还是放弃.这里有两个词我觉得挺好,简单写…

jQuery系列：N种方法大总结

jquery自定义属性,区分prop()和attr() jQueryObject.prop( propertyName [, value ] ):为添加,获取属性(property),并非attribute. jquery 1.6新增. jquery:prop()和attr()的主要区别: prop()函数针对的是DOM元素(JS Element对象)的属性, attr()函数针对的是DOM元素所对应的文档节点的属性. js:property和attribute的主要区别: 1.(隐式)docu…

html5+css3

1,文件声明,<!Doctype>,不再有严格模式和混杂模式 2语意的标签 1,header 头 section中 nav导航(中上) aside侧边栏(中左) article内容(中右) footer底 3自定义属性.约定.为一个元素,使用data-* <div data-title="自定义标题属性"> jquery取:之前: jquery("selector").attr('data-title') h5 jquery(&…

web开发前端面试知识点目录整理

web开发前端面试知识点目录整理基本功考察关于Html 1. html语义化标签的理解; 结构化的理解; 能否写出简洁的html结构; SEO优化 2. h5中新增的属性; 如自定义属性data, 类名className等, 新增表单元素, 拖拽Drag 3. h5中新增的API, 修改的API, 废弃的API 稍作了解 (离线存储, audio, video) 关于CSS 1. CSS选择器( 三大特性 ) 2. BFC机制 3. 盒模型 4. CSS模块化开发(封装); SCSS和LES…

JS 节点笔记

h5新增自定义属性为了保存并使用数据,有一些数据不必要保存到数据库中: data开头作为自定义属性并赋值兼容性获取element.getAttribute("data-自定义属性名") h5新增element.dataset.属性名或者element.dataset['属性名'] 注意如果自定义属性有多个连接起来的获取的时候一定要用驼峰命名法 <div class="conter" id=&qu…

jquery里面的一些方法使用

prop("属性名"); //获取属性名 prop("属性名","属性值"); //设置属性名 change(fucntion(){ //当元素的值发生改变时,会发生 change 事件. }) //该事件仅适用于文本域(text field),以及 textarea 和 select 元素. attr("index"); //获取自定义属性,当该方法用于返回属性值,则返回第一个匹配元素的值 attr("…

jQuery缓存数据

很多同学在项目中都喜欢将数据存储在HTMLElement属性上,如 1 2 3 4 <div data="some data">Test</div> <script> div.getAttribute('data'); // some data </script> 给页面中div添加了自定义属性“data”及值“some data”.后续JS代码中使用getAttribute获取. jQuery从1.2.3开始提供了data/re…

ASP.Net MVC开发基础学习笔记：五、区域、模板页与WebAPI初步

一.区域—麻雀虽小,五脏俱全的迷你MVC项目 1.1 Area的兴起为了方便大规模网站中的管理大量文件,在ASP.NET MVC 2.0版本中引入了一个新概念—区域(Area). 在项目上右击创建新的区域,可以让我们的项目不至于太复杂而导致管理混乱.有了区域后,每个模块的页面都放入相应的区域内进行管理很方便.例如:上图中有两个模块,一个是Admin模块,另一个是Product模块,所有关于这两个模块的控制器.Model以及视图都放入各自的模块内.可以从上图中看出,区域的功能类似一个小的MVC项…

Caffe框架下的图像回归测试

Caffe框架下的图像回归测试参考资料: 1. http://stackoverflow.com/questions/33766689/caffe-hdf5-pre-processing 2. http://corpocrat.com/2015/02/24/facial-keypoints-extraction-using-deep-learning-with-caffe/ 3. http://stackoverflow.com/questions/31774953/test-labels-f…

Bootstrap_Javascript

弹窗一. 结构分析 Bootstrap框架中的模态弹出框,分别运用了“modal”.“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-content”中,其主要又包括三个部分: ☑ 弹出框头部,一般使用“modal-header”表示,主要包括标题和关闭按钮 ☑ 弹出框主体,一般使用“modal-body”表示,弹出框的主要内容 ☑ 弹出框脚部,一般使用“modal-footer”表示,主要放置操作按钮 <div class="mo…

MVC4 WEBAPI(一)使用概述

所谓概述,也就是总结一些WEB API常用的使用用法.MVC APIWEB是一个轻量级的服务接口,完全符合RestFul框架设计,每个URL代表一种资源,使用方便,没有WCF那么庞大,但是麻雀虽小五脏俱全,WEBAPI提供的内容很值得研究:API请求方式有GET.POST.PUT.DELETE.所以WEBAPI对应的APIControl提供的接口也分为以上4个类型. 1.WEBAPI创建: 使用的时候也很简单,利用VS2013新建项目,选择MVC4,让后选择WEBAPI,创建完成,这就是默认的M…

ASP.Net MVC开发基础学习笔记（5）：区域、模板页与WebAPI初步

一.区域—麻雀虽小,五脏俱全的迷你MVC项目 1.1 Area的兴起为了方便大规模网站中的管理大量文件,在ASP.NET MVC 2.0版本中引入了一个新概念—区域(Area). 在项目上右击创建新的区域,可以让我们的项目不至于太复杂而导致管理混乱.有了区域后,每个模块的页面都放入相应的区域内进行管理很方便.例如:上图中有两个模块,一个是Admin模块,另一个是Product模块,所有关于这两个模块的控制器.Model以及视图都放入各自的模块内.可以从上图中看出, 区域的功能类似一个小的MV…

Bootstrap 固定定位（Affix）

来自:慕课网 http://www.imooc.com/code/5396 Affix 效果常见的有以下三种: ☑ 顶部固定 ☑ 侧边栏固定 ☑ 底部固定固定定位--声明式触发固定定位 Affix 插件可以对任何元素进行固定定位,其中比较简单的方法,就是通过自定义属性 data 来触发.其主要包括两个参数: 1.data-spy:取值 affix,表示元素固定不变的. 2.data-offset:整数值,比如 90,表示元素 top 和 bottom 的值都是 90px,其包括两种方式:dat…

转载：第二弹！全球首个微信小程序（应用号）开发教程！通宵吐血赶稿！每日更新！

今天一波三折,承受了超出预料的压力和煎熬,最后还是决定继续放出我的更新教程.我想我一没有泄露公司的代码,二没有提供泄露开发工具下载,只是从程序猿角度写了篇开发日志.我已经做好了最坏的准备,就算放弃这份工作,也会把完成的教程交给「名片盒」的团队继续更新发布下去!做了就绝不后悔!只是博卡君水平有限,文章还请各位多包容. 以上!开始吧: 小提示: http://wxopen.notedown.cn/ 这里面复刻了微信小程序的 api 第三章:微信小程序项目结构以及配置找到创建的 demo 文件夹,把…

我在 impress.js 中学到的小套路

我在 impress.js 中学到的小套路写在开篇作为了一个自学 JavaScript 才一个月的新手,前几天“妄图”研究 jQuery-3.1.0 源码,结果自然是被虐得死去活来.机缘巧合之下,遇到了 impress.js ,代码量只有 jQ 的十分之一,看起来挺好下手,研究了两天,勉强弄懂了其中的原理.于是写下此文,记录我在 impress.js 中学到的小套路. 附上impress.js github链接. impress.js 简介套路开始如何使用 JS 为某个元素添加多个样式?…

11-18的学习总结(DOMSecondday)

DOM:读取访问节点对象属性批量删除父元素下所有子节点 elem.innerHTML=""; 批量替换父元素下所有子节点 elem.innerHTML="所有子元素标签组成的html字符串" 一切从属性获取的值和设置到属性上的值必须都是字符串所以,都要先类型转换,再计算! 获取元素的属性值只找一个属性值时:var strValue=elem.getAttribute("属性名"); 遍历一个元素所有属性时: elem.attributes集…

Bootstrap_Javascript_固定定位

Affix 插件可以对任何元素进行固定定位,其中比较简单的方法,就是通过自定义属性 data 来触发.其主要包括两个参数: 1.data-spy:取值 affix,表示元素固定不变的. 2.data-offset:整数值,比如 90,表示元素 top 和 bottom 的值都是 90px,其包括两种方式:data-offset-top 和 data-offset-bottom. data-offset-top 用来设置元素距离顶部的距离.比如 90,表示元素距离顶部 90px,当用户从顶部向下拖…