tx5总结

**
JS第七天：
1.根据字符返回位置
返回前面起第一个字符的位置indexOf()
返回后面起第一个字符的位置lastIndexOf()
根据位置返回字符 charAt()
2.网址编码
encodeURIComponent(myweb);
decodeURIComponent(myweb);
3.字符串操作
slice(起始位置，[结束位置]) 取到结束位置
substr(起始位置，[个数])
转换成大写toUpperCase()
转化成小写toLowerCase()
4.缓动公式

leader = leader + (target-leader)/10;

JS第八天：网页特效1
一、offset家族
offset:本身是偏移，补偿，位移的意思。这里是自己的意思。
js中方便获取元素尺寸的方法就是Offset家族。
offset常用属性
offsetWidth offsetHeight
得到对象的宽度和高度(自己的，与他人无关)
offsetWidth = width+padding+border 不包括Margin
offsetLeft 返回距离上级盒子(带有定位)左边的距离
offsetTop 返回距离上级盒子顶部的距离，如果父级都没有定位则以body为准，offsetLeft从父级的padding开始算，父级的border不算。总结：就是子盒子到定位盒子边框到边框的距离。
offsetParent返回该对象的父级(带有定位)，如果当前元素的父级元素没有css定位，offsetParent为body。如果当前元素的父级元素有定位，返回最近的那个父级元素。

offsetLeft和style.left的区别
1.offsetLeft可以返回没有定位盒子的左侧距离。style.left不可以，只有定位的盒子才有Left，right，top值
2.offsetLeft返回的是数字。style.left返回的是字符串，除了数字还有px
3.offsetLeft只读。style.left可读写。
4.如果没有给元素指定过left,right,top样式，则style.left返回空字符串。
5.style.left只能得到行内样式。offsetLeft都可以得到。

二、事件对象
在触发dom上的某个事件时，会产生一个事件对象event,这个对象中包含着所有与事件相关的信息。所有浏览器都支持event对象，但支持的方式不同。
比如鼠标操作时候，会添加鼠标位置的相关信息到事件对象中。
普通浏览器支持event
ie678支持window.event
兼容性写法：
var event = event || window.event;

clientX clientY 当前窗口的左上角为基准点
pageX pageY低版本浏览器不支持，以当前文档的左上角为基准点
screenX screenY当前屏幕的左上角为基准点

常用事件：
onmouseover onmouseout onclick
onmousemove 鼠标移动一像素就会执行的事件
onmouseup当鼠标弹起
onmousedown当鼠标按下的时候
拖动==鼠标按下down+鼠标移动move
当我们按下鼠标的时候，先记录先当前鼠标的位置，然后减去 大盒子的 位置 ，得出bar当前在大盒子的里距离。

防止选择拖动—清除选中的内容
window.getSelection() ? window.getSelection().removeAllRanges() : document.selection.empty();

=====================================================================================
JS第九天 网页特效2
模拟垂直滚动条
动态设置滚动条的高度scrollBarHeight = 大容器的高度 * 滚动条容器的高度/内容的高度
滚动条滚动一次 内容移动的距离
(内容的高度-容器的高度) / (容器的高度-滚动条的高度) * 滚动条移动的距离

Html基本结构访问方法
document.title–文档标题
document.body–文档的body标签
document.head–文档的头标签
document.documentElement–文档的html标签，基本结构中的html标签并不是通过document.html去访问的。

scroll家族
滚动的
1. scrollTop:当滑动滚轮浏览网页的时候，网页隐藏在屏幕上方的距离。被卷去的头部。
怎么得到scrollTop?用页面滚动事件
window.onsrcoll = function(){ 页面滚动语句 }
谷歌浏览器和没有声明DTD：document.body.scrollTop
火狐和其他浏览器:document.documentElement.scrollTop;
ie9+ 和最新浏览器都认识:window.pageXOffset;pageYOffset (scrollTop)
兼容性写法：
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
scrollLeft

json,JavaScript object notation 是一种轻量级的数据交换格式，我们称之为javascript对象表示法。

使用json进行数据传输的优势之一。json实际上就是javascript。
var myjson={k:v,k:v,k:v…}
json一般就是被当做一个配置单用：

var json = {name:”刘德华”,age:55}; console.log(json.name);
判断浏览器是否是怪异模式，就是没有声明dtd的模式。
document.compatMode == “CSS1Compat”
CSS1Compat 声明了
BackCompat未声明

1. scrollTo(x,y)
   window.scrollTo(x,y)
   方法可以把内容滚动到指定的坐标
   格式：scrollTo(x,y)
   x必需，要在窗口文档显示区左上角显示的文档的x坐标
   y必需，要在窗口文档显示区左上角显示的文档的y坐标

=============================================================================
JS第十天 第十天 网页特效3

1.1 client家族 可视区域
obj.offsetWidth: width+padding+border 获取网页总宽度，包含滚动条
obj.clientWidth:width+padding (不包含border)获取网页可视区域宽度
obj.scrollWidth:width+padding 大小是内容的大小

client这种，就是不包含border的offset
检测屏幕宽度(可视区域)
ie9+ window.innerWidth
标准模式
document.documentElement.clientWidth
怪异模式
document.body.clientWidth

1.2 window.onresize改变窗口事件，事件会在窗口或者框架被调整大小时发生。
响应式可以用js来做，好处是可以处理ie678的情况。也可以用css媒体查询来做，但是不能处理ie678.
区别函数调用：

function f(){return 3;} console.log(f);//返回函数体function f(){return 3} console.log(f());//返回结果3

1.3检测屏幕宽度(分辨率):window.screen.width，返回的是电脑分辨率，跟浏览器没关系
clientWidth返回的是可视区域 浏览器内部大小

1.4冒泡机制
事件冒泡:当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程叫事件冒泡。这个事件从原始元素开始一直冒泡到DOM树的最

上层。
1.4.1阻止冒泡的方法
标准浏览器 event.stopPropagation();
ie678 event.cancelBubble = true;
代码如下：
if(event && event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble =true;
}
1.4.2点击空白处隐藏盒子
1.4.3判断当前对象
火狐谷歌等 event.target.id
ie678 event.srcElement.id
兼容性写法：
var targetId = event.target? event.target.id :event.srcElement.id;
document.body.style.overflow = “hidden”; //不显示滚动条
1.4.4选中之后，弹出层
选择文字：选中的时候不出来，弹起鼠标的时候出现。onmouseup ，盒子坐标 是鼠标坐标。
获得用户选择的内容：
标准浏览器：window.getSelecttion();
ie:document.selection.createRange().text;
兼容性写法：
if(window.getSelection){
txt = window.getSelection().toString();
}else{
txt = document.selection.createRange().text;
}
所有字符串都为真，”“是假；所有数字都为真，0为假。
1.5动画原理

让盒子的offsetLeft + 步长

JS第十一天 网页特效4
1.2三个取整函数
Math.ceil()向上取整 天花板
Math.floor()向下取整 地板
Math.round() 四舍五入
1.3缓动动画原理
匀速动画原理：盒子offsetLeft+步长
缓动动画原理：盒子offsetleft+步长(不断变化的)
1.4js常用访问css属性
利用点语法：box.style.width 带有单位,没法传递参数
利用[]访问属性
box.style[“width”]
1.5得到css样式
obj.style获取的是行内样式，即style属性中的值。
obj.currentStyle外部（使用）和内嵌(使用