移动web开发总结 - roucheng

让网页的宽度自适应屏幕
1）html上加入
发确保网页的效果
2）
加上以下语句可使网页在苹果设备上运行更好



3）加入这句话可以定义iphone的添加到主屏幕的图标

网页打开方式：链接
target的值：_self(相同窗口，浏览器默认)、_top(整页窗口)和_parent(父窗口)相同、_blank(在新建的窗口打开)

表示页面中的所有链接都在新窗口打开

madinc.co//

autocomplete="off"//去掉输入框的历史记录

querySelector只返回匹配的第一个元素，如果没有匹配项，返回null。
querySelectorAll返回匹配的元素集合，如果没有匹配项，返回空的nodelist(节点数组)。
document.querySelector('#indicator > li.active').className = '';//......

innerheight: 返回窗口的文档显示区的高度。 (IE用document.documentElement.clientHeight)
innerwidth 返回窗口的文档显示区的宽度。(IE用document.documentElement.clientWidth )

HTML5新增:
contenteditable:设置是否允许用户编辑元素
contentextmenu:给元素设置一个上下文菜单
draggable:设置是否允许用户拖动元素
irrelevant:设置元素是否相关。不显示非相关的元素。
ref:引用另一个文档或本文档上另一个位置。仅在template属性设置时使用
registrationmark:为元素设置拍照。可规定于任何元素的后代，除了元素

// 控制手机全屏 ： 强制让文档的宽度与设备的宽度保持1:1， 并且文档最大的宽度比例 是1.0，且不允许用户点击屏幕放大浏览
//viewport:可视区域
//initial-scale:初始的缩放比例;user-scalable:用户是否可以手动缩放;
//minimum-scale:允许用户缩放的最小比例;maximum-scale :允许用户缩放的最大比例

//在手机中不会将网页中的一串数字(电话号码)显示为拨号的超链接,默认telephone=yes

//删除黙认的苹果菜单栏和工具栏,如需要苹果菜单栏和工具栏可不加

//控制状态栏样式content有三个值：default、black、black-translucent

//对移动网站-mobile web进行收藏（“添加到桌面图标”）的时候增加的图标定义属性
//apple-touch-icon:增加高光光亮的图标
//apple-touch-icon-precomposed:设计原图图标

网页针对不同屏幕分辨率修改，用-webkit-device-pixel-ratio这个media标签或在js中用 window.devicePixelRatio这个方法，设置target-densitydpi标签和device-dpi属性。这让你的定制更具有 灵活性。

移动网站的视图的标签

...

...

...

HTML5的data-前缀就被称为data属性

本地存储:
sessionStorage.lastname="Smith";//针对session的存储
localStorage.lastname="Smith";//没有时间限制的本地存储(IE8也支持)
document.write(localStorage.lastname);
使用本地存储前应先确定window.localStorage是否存在

//placeholder:默认提示,required:定义输入的字段是否必须(提交时的非空验证)

HTML5 提供了两种检测是否在线的方式：navigator.online（true/false） 和 online/offline事件。
navigator.standalone为true:从桌面启动
navigator.standalone为false:从ios浏览器启动

localStorage. length:返回现在已经存储的变量数目。
localStorage. key(n):返回第n个变量的键值(key)。
localStorage.getItem(k):和localStorage.k一样，取得键值为k的变量的值。
localStorage.setItem(k , v):和localStorage.k = v一样，设置键值k的变量值。
localStorage.removeItem(k):删除键值为k的变量。
localStorage.clear():清空所有变量。

window.applicationCache对象的事件:
checking: 用户代理检查更新或者在第一次尝试下载manifest文件的时候，本事件往往是事件队列中第一个被触发的

noupdate: 检测出manifest文件没有更新

downloading: 用户代理发现更新并且正在取资源，或者第一次下载manifest文件列表中列举的资源

progress: 用户代理正在下载资源manifest文件中的需要缓存的资源

cached: manifest中列举的资源已经下载完成，并且已经缓存

updateready: manifest中列举的文件已经重新下载并更新成功，接下来js可以使用swapCache()方法更新到应用程序中

obsolete: 1、manifest的请求出现404或者410错误，应用程序缓存被取消 2、manifest的请求出现404或者410错误，更新缓存的请求失败 3、manifest文件没有改变，但是页面引用的manifest 文件没有被正确地下载

error: 1、在取manifest列举的资源的过程中发生致命的错误 2、在更新过程中manifest文件发生变化

http://www.cnblogs.com/roucheng/p/sunwukong.html

-moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;//圆角
text-shadow: 2px 2px 5px #333;//添加阴影
-webkit-user-select: none;//不可先择文字(webkit内核的浏览器)
-webkit-text-size-adjust:none;//苹果移动设备上会识别，用于保证文字大小
变形(transformation)、转换(transition)和动画(animation)

图片旋转的一个样式：
transition_duration{
-webkit-transform:rotate(10deg);
-webkit-transition-property:all; //发生变化的属性
-webkit-transition-duration:0.5s; //发生变化的时间
-webkit-transition-timing-function:ease-in;//定义动画变化的曲线
}
transition_duration:hover{
-webkit-transform:rotate(40deg);
}

transform:旋转、扭曲、缩放、移动、矩阵变形 {transform-origin:元素的基点，默认在元素中心}
transform: rotate(30deg) | scale(2,1.5)(水平,垂直) | skew(30deg,10deg) | translate(100px,20px) |matrix;

isLocal: true//该请求来自本地计算机

用document.onreadystatechange的方法来监听状态改变，
用document.readyState == “complete”判断是否加载完成

0 － uninitialized （未初始化）还没有调用send()方法
1 － loading （载入）已调用send()方法，正在发送请求
2 － loaded （载入完成）send()方法执行完成，已经接收到全部响应内容
3 － interactive （交互）正在解析响应内容
4 － complete （完成）响应内容解析完成，可以在客户端调用了

document.getElementById("testButton").addEventListener("click", Go, false);//添加监听事件
window 的DOMContentLoaded事件在形成完成的DOM树之后就会触发，不理会图像、JavaScript文件、CSS文件或其他资源是否已经下载完 毕。与load事件不同，DOMContentLoaded支持在页面下载的早期添加事件处理程序，这也就意味着用户能够尽早地与页面进行交互。(它是火 狐下特有的事件)
document.addEventListener('DOMContentLoaded', loaded, false);//

侦听器在侦听时有三个阶段：捕获阶段(根节点到子节点检查是否调用了监听函数)→、目标阶段(目标本身)→冒泡阶段(目标本身到根节点)。
public override function addEventListener(type(事件类型):String, listener():Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void

$(selector).bind(event) //向匹配元素添加一个或更多事件处理器
$(selector).live(event) //向匹配元素添加一个事件处理器，现在或将来
$(selector).die() 移除所有通过 live() 函数添加的事件处理器
$(selector).unbind()移除被选元素的事件处理程序,适用于任何通过 jQuery 附加的事件处理程序

Tmpl提供了几种tag：
${}：等同于{{=}}，是输出变量，通过了html编码的。
{{html}}:输出变量html,但是没有html编码，适合输出html代码。
{{if }} {{else}}:提供了分支逻辑。
{{each}}:提供循环逻辑，$value访问迭代变量。

devicePixelRatio:设备像素比,高清iPad下，window.devicePixelRatio为2
(/ipad/gi).test(navigator.appVersion)//判断移动终端的浏览器是否为ipad,navigator.appVersion为浏览器的版本

window.orientation :这个属性给出了当前设备的屏幕方向，0表示竖屏，正负90表示横屏（向左与向右）模式
onorientationchange : 在每次屏幕方向在横竖屏间切换后，就会触发这个window事件，用法与传统的事件类似

页面事件先后顺序：
mobileinit:页面没加载DOM之前事件
pagebeforecreate:页面的DOM加载后，DOM初始化之前触发的事件
pagecreate:在HTML已经在DOM中建立完成，初始化也完成事件
pageinit:页面完全加载完后

触摸事件
三种在规范中列出并获得跨移动设备广泛实现的基本触摸事件：
1. touchstart：手指放在一个DOM元素上。
2. touchmove：手指拖曳一个DOM元素。
3. touchend：手指从一个DOM元素上移开。
每个触摸事件都包括了三个触摸列表：
1. touches：当前位于屏幕上的所有手指的一个列表。
2. targetTouches：位于当前DOM元素上的手指的一个列表。
3. changedTouches：涉及当前事件的手指的一个列表。
例如，在一个touchend事件中，这就会是移开的手指。
这些列表由包含了触摸信息的对象组成：
1. identifier：一个数值，唯一标识触摸会话（touch session）中的当前手指。
2. target：DOM元素，是动作所针对的目标。
3. 客户/页面/屏幕坐标：动作在屏幕上发生的位置。
4. 半径坐标和 rotationAngle：画出大约相当于手指形状的椭圆形。

gesturestart //当两个手指接触屏幕时触发
gesturechange //当两个手指接触屏幕后开始移动时触发
gestureend
onorientationchange //屏幕旋转事件
orientationchange // 检测触摸屏幕的手指何时改变方向

// 隐藏地址栏 & 处理事件的时候 ，防止滚动条出现
addEventListener('load', function(){
setTimeout(function(){ window.scrollTo(0, 1); }, 100);
});

e.preventDefault()//取消事件的默认动作
taphold :长按事件

var myscroll=new iScroll("wrapper",{hScrollbar:false, vScrollbar:false});//定义一滚动对象
hScroll:false 禁止横向滚动 true横向滚动 默认为true
vScroll:false 禁止垂直滚动 true垂直滚动 默认为true
hScrollbar:false 隐藏水平方向上的滚动条
vScrollbar:false 隐藏垂直方向上的滚动条
fixedScrollbar: 在iOS系统上，当元素拖动超出了scroller的边界时，滚动条会收缩，设置为true可以禁止滚动条超出scroller的可见区域。默认在Android上为true， iOS上为false
fadeScrollbar:false 指定在无渐隐效果时隐藏滚动条
hideScrollbar: 在没有用户交互时隐藏滚动条 默认为true
bounce: 启用或禁用边界的反弹，默认为true
momentum: 启用或禁用惯性，默认为true，此参数在你想要保存资源的时候非常有用
lockDirection:false 取消拖动方向的锁定， true拖动只能在一个方向上（up/down 或者left/right）
zoom:true 滚动对象可以放大缩小
zoomMax: 指定允许放大的最大倍数，默认为4
onScrollEnd:在滚动完成后的回调
x:滚动水平初始位置
y:滚动垂直初始位置
bounce:true,是否超过实际位置反弹
bounceLock:false,当内容少于滚动是否可以反弹，这个实际用处不大
momentum:true,动量效果，拖动惯性
lockDirection:true,当水平滚动和垂直滚动同时生效时，当拖动开始是否锁定另一边的拖动
useTransform:true,是否使用CSS形变
useTransition:false,是否使用CSS变换
topOffset:0,已经滚动的基准值(一般情况用不到)
checkDOMChanges:false,是否自动检测内容变化

【注意事项】：如果想要图片缩放的效果很好的话要把他们放到硬件的合成层中。通俗点说，就是在所有需要缩放的img元素上使用-webkit- transform:translate3d(0,0,0)来实现，而且尤为重要的是，硬件的加速会占用大量资源，要谨慎使用，否则你的应用可能就此崩 溃。

document.createElement()是在对象中创建一个对象，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。

encodeURI()//编码
decodeURI()//解码

停止:
myVideo.currentTime = 0;
myVideo.pause();

浏览器的渲染和操作顺序大致如下：

HTML解析完毕
外部脚本和样式表加载完毕
脚本在文档内解析并执行
HTML DOM完全构造起来
图片和外部内容加载
网页完成加载

news_template = $('#news_template').template();
$.tmpl(news_template, manufacture_news).appendTo('#news_content');
var html = $("#news_content").html();
if (html.indexOf("[br]") > -1)
{
html = html.$replace("[br]", "
");
html = html.$replace("<", "");
$("#news_content").html(html);
}