在对象的方法中调用另一个对象

var obj = {
    sayhi:function() {
        console.log('1223');
        this.eat(); //-------------->这里的this指的是obj对象
    }
    eat:function() {
        console.log('33456');
    }
}
obj.sayhi();

阻止浏览器的默认事件

function (e) {
    e.preventDefault
}

有的浏览器不支持e，有的时候还是要用return false

超链接不跳转，href='javascript:void(0);

阻止事件冒泡

window.event.cancelBubble=true;
e.stopPropagation();

鼠标移动时文字不被选中

window.getSelection?window.getSelection().removeAllRanges():document.selection.empty()

元素隐藏的方式
display none 不占位
visiblity hidden 占位
opacity 0 占位
高为0 边框为none

拼接大量字符串用数组 节省空间

本地存储特性:

sessionStorage
1.生命周期为关闭浏览器窗口
2.在同一个窗口下打开的窗口数据可以共享
3.以键值对的形式存储使用
4.存储空间大约为5MB
语法:
存储数据 ： sessionStorage.setItem(key,value);
获取数据 ： sessionStorage.getItem(key);
删除数据 ： sessionStorage.removeItem(key);
删除所有数据： sessionStorage.clear();

localStorage:
1.生命周期为 不删除就存在
2.在不同网页下的数据可以共享
3.存储空间20MB左右

移动端

目前不考虑兼容问题

1. 移动端的一些事件

touchstart 手指触摸事件
touchmove 手指移动事件
touchend 手指离开事件

touch事件中具有的属性
触摸事件对象touchEvent
touches 正在触摸屏幕的所有手指的列表
targetTouches 正在触摸当前DOM元素的手指列表
如果侦听的是一个元素 那么touches和targetTouches是一样的
数组中的每一个元素都有详细的属性，例如手指的坐标
changedTouches 手指状态发生了改变的列表 从无到有或者从有到无

注意：
手指离开屏幕时，就没有了touches和targetTouches列表，但是会有changedTouches
最经常使用的是targetTouches.

注意：
手指移动时屏幕可能也会移动，要添加阻止方法
e.preventDefault

2.移动端的一些特效

移动端做特效时，配合css3新属性

自动播放 需要等到图片滚动完毕后再执行

监听过渡完成的事件 – trnasitionend

classList类名操作classList属性是H5新增的ie10以上才支持，但是移动端不考虑他的兼容性
–返回值是类名伪数组

方法
添加类名

element.classList.add();

删除类名

element.classList.remove();

切换类名

element.classList.toggle();

某个类名是否存在
contains()返回布尔值

3.其他

click事件时有300ms的延时，原因是一动端双击缩放double tap to zoom
解决方案

• 禁用缩放
  user-scalable=no

• 利用touch事件自己封装这个事件解决300ms延时

• fastclick.js插件
  使用代码规范，可以将移动端页面中所有的点击事件的延时去除

• swiper插件的使用
  轮播图插件

• 视频插件

• zy.media.js