1.触屏事件
touchstart/touchmove/touchend
2.移动端注意事项
a.点透现象,原因是使用touchstart,click有延迟,fastclick.js document.addEventListener("DOMContentLoaded", function(){ Fastclick.attach(document.body) }, false)
b. 弹窗出现输入表单的时候
c. 上传图片 <input type="file">
事件模拟/图片缩略图
改变复选框默认样式
1. element.classList
element.classList.add(param1, param2...) 添加
element.classList.remove(param1, param2...) 移出
element.classList.toggle("") 切换
2. jsonp 跨域请求
响应的文本格式:函数的调用的字符串
函数名( json 格式的字符串【返回来的数据】)
搜狗/淘宝/360
3. cookie 保存在浏览器端的用户信息的文本,约4k 120~150条
cookie必须在服务器环境下,cookie第一次在服务器生成,响应给客户端
客户端发起请求时,cookie会跟随请求一起发送到服务器端
优点:能记录用户信息,保持状态
缺点:消耗相当的带宽网络资源,可能泄露用户的私隐
4.localhost
127.0.0.1 本机地址
本地存储,5M,不需要服务器环境,一直保留在浏览器
localStorage
localStorage.score = 12;
localStorage.score
localStorage.getItem(name) 获取
localStorage.setItem(name, value) 设置
localStorage.removeItem(name) 移除
sessionStorage 会话,跟localStorage 时效不一致,浏览器或当前页面关闭,信息不保存
sessionStorage.getItem(name) 获取
sessionStorage.setItem(name, value) 设置
sessionStorage.removeItem(name) 移除
5. for in 遍历对象
查看window中以"on"开头的属性
for(var i in window) {
if(i.indexOf("on") === 0) {
console.log(i)
}
}
6. hammer.js 提供触屏手势事件的插件
tap, doubletap, pan, swipe, press, pinch , rotate
directions
Name Value
DIRECTION_NONE 1
DIRECTION_LEFT 2
DIRECTION_RIGHT 4
DIRECTION_UP 8
DIRECTION_DOWN 16
DIRECTION_HORIZONTAL 6
DIRECTION_VERTICAL 24
DIRECTION_ALL 30
swipe默认水平方向生效,设置全方位生效
hammer.get('swipe').set({ direction: Hammer.DIRECTION_ALL });
pinch 和 rotate 默认是不可用的,因为它们可能会导致元素被卡住,如果你想启用它们,可以加上这两句:
hammer.get('pinch').set({ enable: true });
hammer.get('rotate').set({ enable: true });
7. swiper.js 提供轮播图,适配移动端
使用
a.引入对应的swiper.css跟swiper.js
b. var myswiper = new Swiper(".swiper-container", {
})
https://github.com/nolimits4web/Swiper/blob/Swiper2/API.md
http://www.cnblogs.com/scavengers/p/3760449.html