HTML5和css3的总结三

继续总结H5的新东西

1》序列化与反序列化
序列化:其实就是一个json-》string的过程
JSON.stringify(json);
反序列化:string-》json的过程(注意,此处需要标准的json模式)
JSON.parse(string);

简单的比较一下eval和parse的区别
安全性 数据 兼容性
eval 不安全 任何数据 全兼容
parse 安全 标准json 兼容IE8+

2》localStorage

定义:localStorage.name=‘值‘;或者 localStorage.setItem(‘name‘,‘值‘);
相同的方法还有 getItem removeItem clear

cookie和localStorage的对比
大小 有效期 环境配置 兼容性
cookie 4k session(会话结束) 走网络 全兼容
localStorage 5M 不过期 不走网络 不兼容IE6

事件:onstorage 包含事件对象ev.key(存储的名字) loacalStorage[ev.key](名字对应的值)

应用:购物车页面和支付页面的实时关联
思路:购物车页面定义一个localStorage.name=‘‘;
支付页面使用window.onstorage事件获取ev.key和对应localStorage[ev.key]值来实时计算总价格(当然可以传输json形式的数据添加数量和运费等详细信息)

3》H5拖拽上传文件

事件:ondragenter ondragover ondragleave ondrop(当拖拽松手时)

上传文件可以配合setTimeout使用 在ondragover中因为不停的触动事件,事件中不停的清除上一个定时器来控制上传区域的显示和隐藏,注意事件冒泡的处理

读取上传文件
事件 ondrop 中的事件对象 ev.dataTransfer.files[0];
事件对象中包含 lastModifiedData 最后修改的日期
name
size
type等等
H5中读取文件的新功能 fileReader(object)
定义:var reader=new FileReader();

读取一个文本 reader.readAsText(‘要读取的数据‘,‘编码‘);
读取一个图片 reader.readAsDataURL(‘要读取的数据‘,‘base64‘);

事件: onload 当文件读取成功
onerror 当文件读取失败
onloadstart 当文件开始读取
onloadend 当文件读取结束
onabort 当文件读取中断
onprogress 当文件加载进行 包含事件对象 ev.loaded已加载 ev.total总加载量 ———》制作加载进度条

时间: 2024-11-24 20:39:48

HTML5和css3的总结三的相关文章

HTML5与CSS3基础(三)

11 用CSS进行布局 11.1 开始布局的注意事项 1 还是要强调的是内容与显示分离 2布局方法: 固定布局:整个页面和每一栏的内容都有基于像素的宽度. 就是说宽度都是固定好了的,不会因为你改变设备就随着你的设备的宽去进行改变. 响应式布局(流式页面):它使用的是百分数定义宽度,允许页面随着环境的改变来发生相应的改变. 就是现在最流行的响应式布局:bootstrap框架 3浏览器的注意事项: 浏览器之间存在在一些差异性,所以在网站建立好之后需要在不同的网站上进行测试 11.2构建页面 构造页面

Asp.Net MVC4开发三:HTML5、CSS3、JQuery、JQuery UI的应用

在Asp.Net MVC4里面UI层也就是View层默认使用HTML5以及与HTML相对应的CSS3,JS默认使用JQuery和JQuery UI.新建一个MVC4项目,项目会自动包含JQuery.JQuery UI所需要的文件及智能提示支持; HTML则是自动生成HTML5格式标签的页面. 先来看看MVC4项目里面对这些内容的支持: 在MVC4项目里面有Scripts和Content两个文件夹,Scripts里面存放Java scripts库包括JQuery, JQuery UI, JQuer

三款精美的html5及css3的源码插件

1.HTML5 3D爱心动画 晚来的七夕礼物 七夕情人节刚过,今天小编却在国外的网站上看到一个利用HTML5和CSS3制作的3D爱心动画,莫非老外也过七夕?当然小编还是将这款HTML5 3D爱心动画收藏了起来,虽是晚来的七夕礼物,但还是可以讲这款爱心动画留到明年七夕再用嘛.大家可以点解DEMO来看看. 在线演示 源码下载 2.jQuery可拖拽删除小图标回收站 利用jQuery实现拖拽非常简单,我们直接可以利用jQuery内部封装的拖拽接口即可简单实现在网页上拖拽任意元素.今天我们就利用jQue

《HTML5和CSS3基础教程》-笔记1

笔记(第一.二章整合) 1,HTML思想: 编写HTML是为网页内容打上能够描述它们的标签.并且,HTML元素描述的是:内容是什么,而非看起来是什么样. 即: a,HTML:用标签去说明网页内容的含义. b,语义化HTML:用最恰当的HTML元素去说明网页内容的含义. c,结构和表现完全分离.网页内容是什么,由HTML说明.网页内容什么样,由CSS说明. 另:为什么语义化很重要? 无障碍访问:搜索引擎优化(网页在搜索引擎的排名会靠前):更容易维护代码和添加样式. 2,网页构造块: 网页可保存为纯

HTML5与CSS3权威指南.pdf6

第11章 获取地理位置信息 HTML5为window.navigator对象新增了一个geolocation属性 取得当前地理位置 void getCurrentPosition(onSuccess,onError,options); 第一个参数为获取成功执行的回调函数,第二个为失败时执行的回调函数,第三个为一些可选属性的列表(第二个和第三个可选) navigator.geolocation.getCurrentPosition(function(position){ //获取成功时的处理(参数

HTML5 与 CSS3 jQuery部分知识总结

公司 部门 姓名 职位 分享内容 痛客梦工厂科技有限公司 技术部 张应钦 Web前端开发工程师 HTML5与CSS3 注:此帖子详见本人博客文件HTML5与CSS3.docx文件 一.    HTML5 为什么需要HTML5 什么是HTML5 HTML5现状及浏览器支持 HTML5优点与缺点 HTML5语法规则与文档声明 HTML5新增表达标签 HTML5多媒体组件 HTML5之canvas 二.    CSS3 CSS3简介 CSS3有什么(边框.圆角.背景.渐变.文本效果.字体.2D转换.3

HTML5与CSS3权威指南.pdf8

第17章 与背景和边框相关的样式 与背景相关的新增属性 background-clip指定背景的显示范围 background-origin指定绘制背景图像时的起点 background-size指定背景中图像的尺寸 background-break指定内联元素的背景图像进行平铺时的循环方式 在Firefox浏览器需要加“-moz-” Safari浏览器需要加“-webkit-” background-clip的值有border(背景范围包括边框区域)和padding(背景范围包括padding

HTML5与CSS3权威指南.pdf1

第2章 HTML5与HTML4的区别 HTML5的文件扩展符与内容类型保持不变仍为“.html”或“.htm”,内容类型(ContentType)仍为“text/html” DOCTYPE声明: HTML4中,<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> HT

HTML5与CSS3权威指南.pdf2

第三章 HTML5的结构 article元素更强调独立性,section元素强调分段,div元素强调css的套用,aretcle元素和section元素在核实的情况下可以调换 nav元素用作页面导航的链接组,通常里面包含<ul><li><a>元素 aside元素表示页面或文章的附属信息部分,可以是与当前页面或内容相关的参考资料,名词解释 time元素表示24小时中的某个时刻或日期<time datetime="2014-8-6T19:53-14:00&q