location.search会带着url后边的那个问号，比如http://www.yintai.com?url=10&conm=edd，那么location.search为?url=10&conm=edd
交换两个数的位置：
var a=5;
var b=12;
a=a+b;
b=a-b;
a=a-b;
alert('a:'+a);
alert('b:'+b);
ajax注意：
1、从服务器取过来都是字符串
eva('('+str+')');
new Function("return " + str);
2、不关心后缀，所有文件编码一致
在js中，如果你使用一个不存在变量，报错，如果你使用一个不存在的属性，是undefined
var a = 12;
function show(a) {
a = 5;
}
show(a);
alert(a);
-----------------
结果： 12
-------------------
var a = [1,2,3];
function show(a) {a = [2,3,4]}
show(a);
alert(a);
---------------
结果：[1,2,3];
分析：show(a); 相当于show( var a = a);第一个a是show方法里面的参数，第二个a是传过来的数组的引用，所以第一个a只是
得到了[1,2,3]的引用，在show里边，第一个a又被赋值了[2,3,4]的引用，就是第一个a的指向变了，但是全局变量a的指向还是[1,2,3];
------------------------
var a = [1,2,3];
function show(a) {a[0]="abc";}
show(a);
alert(a);
-------------------------
结果：['abc', 2, 3]
---------------------------
为什么玩正则？
方便、性能极高
function show(){
alert("show");
}
//高级浏览器
//obj.addEventListener(事件名，函数)
document.addEventListener("click",show,false);
document.onclick = show;
点击document会弹出两个show。
克隆节点：
obj.cloneNode(true/false);
true: 深度克隆 会把当前元素内的所有节点都复制
false: 浅克隆 只会复制当前元素
删除属性：obj.removeAttribute(属性名);
"事件"捕获：setCapture 把所有元素的事件都集中在一个元素上
特点： 1 ie独有
2 只能给元素添加捕获
3 只能给鼠标事件添加捕获 不能给键盘事件
ie:
oDiv.setCapture();
oDiv.releaseCapture();
oText.onkeydown = function(ev) {
var oEvent = ev || event;
if(oEvent.keyCode==13 && oEvent.ctrlKey && oEvent.shiftKey && oEvent.altKey) {
//同时按下回车，ctrl键，shift键及alt键就会进入if
alert("同时按下了回车，ctrl键，shift键， alt键");
}
}
----------------------------------
诡异事情：
1.
Function instanceof Object
Object instanceof Function
Function instanceof Function
Object instanceof Object
2.
alert(arr instanceof Array);
alert(Array instanceof Function);
alert(arr instanceof Function);
3.
Object.prototype.a=5;
var a=12;
alert(a instanceof Object);
包装类：
数字、字符串、布尔
数字-> new Number
字符串-> new String
布尔-> new Boolean
new Number(12)
检测对象具体类型：
instanceof: 检测自己父级，父级的父级...
constructor: 它的构造函数是谁，直接父级
请检测一个对象是否是json？
function isJson(arg){
return arg.constructor==Object;
}
typeof：检测类型
原型链：对象用到了一个方法，先找自身，再是自己的父级，再是父级的父级
*默认情况，所有的东西都属于Object
var oDate = new Date();
alert(typeof oDate); //object
alert(typeof Date); //function
严格模式：如何开启严格模式？
'use strict';
严格模式好处：
1. 修复了局部函数里面this
2. 定义变量必须加var
3. 不允许你在if、for等里面是定义函数
4. 干掉了with
严格模式作用范围：
1. 最大也冲不出script标签
2. 单个函数
3. 作用于整个js文件
*** 每个js文件开头一定要加 严格模式 'use strict';
严格模式兼容么？不兼容
this:当前发生事件的对象(元素)
当前的方法属于谁
好习惯：
1. 不用的东西删除 拖拽 jsonp
2. 尽量不使用全局变量
3. 能使用系统提供函数，坚决不自己写
4. 尽量使用正则操作字符串
作用域：
1. 全局变量：在哪里都能使用，生存周期长，直到浏览器关闭，占资源
2. 局部变量：只能在函数内部使用,生存周期极短，几乎不耗资源
3. 闭包：子函数可以使用父函数局部变量，如果子函数得不到释放，整条作用域链上面局部变量都会保留。
----------------------------------
function show(){
var a=12;
alert(a);
}
//函数调用之前 a 没有
show(); //中 a 有
//函数完毕 a 没有
----------------------------------
var a=12;
function show(){
alert(a);
}
//函数调用之前 a 有
show(); // 有
// 有
----------------------------------
function show(){
var a=12;
document.onclick=function(){
alert(a);
}
}
document.onclick=null;
// 之前 没有 a
show(); // 有a
// 完 有a
----------------------------------
function show(){
var a=12;
var b=5;
document.onclick=function(){
alert(b);
}
}
show();
----------------------------------
function aaa(){
var a=12;
function bbb(){
var b=5;
function ccc(){
var c=6;
document.onclick=function(){
var num=10;
alert(d);
}
}
ccc();
}
bbb();
}
aaa();
作用域链：子函数如果用一个变量，首先先找自己，自己的父级，父级的父级.....直到到全局，报错
(function(win){
})(window)
--------------------------------------
性能优化：
js -> 幻灯片
js -> html5 -> 游戏
项目：
1. 稳定性
2. 维护性
3. 性能
--------------------------------------
性能：
1. 网络性能
2. 执行性能(代码)
网络性能：
工具：
f12 -> network
name 资源名称
path 资源路径
method 请求方法
status 状态码
type 资源类型
主类型/次类型
text/html
text/css
image/jpeg
zns/json
initiator 发起人 (此资源是由谁引发)
size 资源大小
time 资源加载所需时间
timeline 时间线
total 总共耗时
stalled 卡 浏览器此时响应速度
DNS lookup 域名解析 DNS服务器问题
initial connection 浏览器连接数
request send 客户端网络带宽，发送数据过大
waiting 服务器配置，后台代码
Content Download 接收内容，服务器带宽
DNS: Domain Name System 域名解析
http://www.baidu.com/ -> IP地址
web服务器：
iis、apache、tomcat、nginx等
BWS/1.1 Tengine(concat) JDWS
link ref="index.css,news.css,list.css"
firefox -> firebug ->yslow
yslow: 给网站打分
人家优化建议，学习方向
chrome->audits
方法：
1. http请求越少越好
合并
css，js，图片等
index.css
news.css main.css
list.css
图片 -> css sprites
合并方法：
a). 手动
b). 工具
2. http请求越小越好
压缩 分号
css、js、图片
压缩方法：
a). 手动
b). 工具 yui compressor
http://tool.oschina.net/
3. 图片延迟加载
4. CDN -> 财务
CDN： Content Delivery NetWork 内容分发网络
5. 阻塞加载(同步加载):
非阻塞加载(并行加载、异步加载):
页面：
css,js,html，图片
css,html,图片 并行加载
js 阻塞加载
为什么js需要阻塞加载？
稳定
因为js阻塞加载，所以一般做法，把js放到body最后
<a href="javascript:;">连接</a>
<img src="1.1.png">
yslow: put css at top, put javascript at bottom
个人建议：
1. 外部的js文件，下载下来，然后放到body后面
2. 自己写的js文件，一定要放到head之间
split()中如果写的是字符串，它就认为你以字符串的形式分隔，如果写的是正则，那么就是以正则的形式分隔
split("\s") 它其实找的是s这个字符串，而不是空白
hack:
注意：先写标准的样式，再写hack（这样才能样式覆盖）
_或- IE6hack写法
+或* IE6/7
*+在一起表示仅IE7有效，比如*+html/body div{background:blue;}
如果写成*+div{background:blue}就没有效果
IE8+ background:blue ;
9 IE系列浏览器
:root 高级浏览器（chrome、FF、IE9+） 如:root div{background:red;}
火狐浏览器：@-moz-document url-prefix() { div {200px; height:200px; background:red;} }
chome谷歌浏览器：
@media screen and (-webkit-min-device-pixel-ratio:0) {div{200px; height:200px; background:blue;}}
条件注释：
IE10+不兼容条件注释
<!--[if IE 6]> .. <![endif]--> IE6
<!--[if IE 7]> .. <![endif]--> IE7
<!--[if IE]> .. <![endif]--> IE系列（不包括IE10）
<!--[if lt IE 7]> .. <![endif]--> 小于
<!--[if gt IE 7]> .. <![endif]--> 大于
<!--[if gte IE 7]> .. <![endif]--> 大于等于
<!--[if !IE]>--> 非IE浏览器（包括IE10）<!--<![endif]-->
IE6不支持png半透明
<!--[if IE 6]>
<script src="js/DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('.png-img');
</script>
<![endif]-->
表达式（仅适用于IE系列浏览器）
-------------------------------------------
background:expression( 语句 );
div { height:200px; background:expression(document.documentElement.clientWidth<400?'red':'green');}
<!--[if IE 6]>
<style>
a { hide-focus:expression(this.hideFocus=true); }
</style>
<![endif]-->
重置样式
-------------------------------------------
h1-6/p/ul/ol/dl margin-top margin-bottom
body margin-top margin-left maring-right margin-bottom
ol/ul padding-left
dd margin-left
table border-collapse:collapse;
td/th padding
input margin-top margin-left
form margin-top margin-bottom IE6
select margin
eval 能执行任何js代码
一般不用 太强大 不可控
注入攻击
while for 区别
for --- 个数确定循环
while 个数不定
没区别 能用for的地方 都能用while
能用while地方 都能用for
return
返回值 的数据类型 是任意的，你给什么类型的就返回什么类型！
参数 、变量 、返回值 都是一样
1 程序碰到return 程序终止
2 return 后面有明确的值 返回相应的数据
3 return ; 返回一个undefined
4 没有return 也是返回一个undefined 系统自带
函数每执行一次 就会复制一次！！！！
连等：var a = b = c = d = 1; console.log(a,b,c,d);
类型 前缀 类型 实例
对象 o object oDiv
数组 a Array aItems
字符串 s String sUserName
整数 i Integer iItemCount
布尔值 b Boolean bIsComplete
浮点数 f Float fPrice
函数 fn Function fnHandler
正则表达式 re RegExp reEmailCheck
变体变量 v Variant vAnything
模 % 整数求【余数】
10%3 1 0模上任何数都是0
基本类型：数字，字符串，布尔值，undefined
符合类型(object) : 可以再分的
除了基本数据类型，其他的都是复合数据类型
if中为false的情况：
false,0,"",null, undefined, NaN
var a = "";//false
a = " ";//true
if(a){
alert(true);
} else {
alert(false);
}
选项卡
typeof
number, string, boolean, object, undefined, function
typeof null是object
typeof undefined 是undefined
undefined：2种情况：
1、真的没有定义
2、定义了没有赋值
3、访问没有的属性
null：表示空对象，但是空对象也是对象。所以typeof null --》 object
null：给了但是是空的
undefined：没有给东西
null和undefined的区别
parseInt()
原理：从左到右扫描整个字符串，碰到不是数字的就返回。如果第一个就不是数字的话，返回结果是NaN
Number（参数）
参数不能有非数字的东西，如果有的话--》NaN
NaN加减乘除（包括取膜等）任何值都是NaN
NaN永远不等于NaN isNaN()
隐式类型转换：
var a = "12";
var b = 12;
alert(a == b);//true 勤快 先转换数据类型 再比较
alert(a === b);//false 太懒 直接比较
alert("11" - "5"); alert("string"-5); alert(typeof "11" - "5");
typeof "11" - "5"就相当于(typeof "11") - "5"
闭包：子函数能使用父函数的变量 （东西）
获取非行间样式
高级浏览器
getComputedStyle("操作的元素", false).样式的属性名
低级浏览器 ie8-
操作的元素.cuurentStyle.样式的属性名
不能操作复合样式
js里面操作样式都得驼峰标识
注意：这两个都是只能读取，不能设置，不能获取复合样式(比如background就获取不到)
即如果你要直接获取style的全部值是获取不到的，只能一个一个样式的获取，除非你用cssText(这个获取的也是行内样式，就是标签内的样式)
还有一点就是，在高级浏览器中，如果要获取border-width属性，那么必须border-style，border-color都有值，否则获取到的会是0px(在只设置了border-width这个属性的情况下)
obj.currentStyle.borderWidth getComputedStyle(obj, false).borderWidth
运算符：
1、算术运算符
2、比较运算符
3、赋值运算符
4、逻辑运算符
运算符的优先级：最好加括号（）！！！
常用优先级：
赋值《逻辑《比较《算术
true 1 false 0 null 0
alert(null + 1) //null 0
alert(undefined + 3); //NaN
Math.random()[0, 1)
n到m的随机数[n, m)
Math.random()*(m-n) + n
获取n到m的随机数
十、
this.style.width = "400px";
this.style.borderWidth = "20px";
this.style.cssText = "400px; height:400px; border-wdith:20px;"
批量设置样式(cssText)：1、会覆盖行间样式 2、能设置又能读取
还有一个设置样式的方法是width， 不推荐使用
function show(){//return undefined; 没有return的情况下，系统会默认加上} alert(show());
var time = oDate.getTime();//1970.1.1 0点开始 到现在的一个毫秒数
s = 130
m parseInt(s/60) 分钟
s s%60 秒
var str = "aaaaa"; 字符串是由字符组成
str.charAt(index) 字符（char）在 第index 位置
十一、
getElementsByClassName("className") //兼容性IE8-
js语法不允许花括号后面直接跟圆括号
封闭空间 ： 自执行函数
functoin show(){}
show(参数列表)
(show)(参数列表)
(functoin show(参数列表){})(参数列表)
(function(参数列表){
})(参数列表);
优点：
1 防止重名
2 解决i的问题
十二、
getByClass兼容性写法 2014-08-24 getByClass3.html
字符串： length
charAt(index) "abc" charAt(1) b
indexOf(str)
lastIndexOf(str)
substring(beginIndex[,endIndex])
substr(beginIndex, length)
split("切分规则")
toUpperCase();
toLowerCase();
json的for in方法
数组：
sort，reserve，length，join，concat，shift，unshift，push，pop，splice
pop没有数据，弹出undefined，从最后一位弹出；
//字符串比较，中文没有可比性 乱比
var a = "中国";
var b = "日本";
alert(a < b);
var a = "a"; var b = "b"; alert(a<b);
数组的方法：
concat() 连接两个或更多的数组，并返回结果。
join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop() 删除并返回数组的最后一个元素
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
reverse() 颠倒数组中元素的顺序。
shift() 删除并返回数组的第一个元素
slice() 从某个已有的数组返回选定的元素,请注意，该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()
sort() 对数组的元素进行排序
splice(index,howmany,item1,.....,itemX) 删除元素，并向数组添加新元素。
index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX 可选。向数组添加的新项目。
返回值类型：Array 包含被删除项目的新数组，如果有的话。
toSource() 返回该对象的源代码。
toString() 把数组转换为字符串，并返回结果。
toLocaleString() 把数组转换为本地数组，并返回结果。
unshift() 向数组的开头添加一个或更多元素，并返回新的长度。var arr = ["4", "5", "6"];arr.unshift("1", "2");alert(arr);
valueOf() 返回数组对象的原始值
var a = 2; var b = 5; alert(Math.max(a,b)); alert(Math.min(a,b));
十三、
var oH4 = document.createElement("h4");
oH4.innerHTML = '<a href="javascript:;">hello</a>';
oDiv.appendChild(oH4);
appendChild只能添加Node节点
十四、
getAttribute不能完全代替obj.属性名，比如一个checkbox(后边用oCk代替)，oCk的checked属性的值为false和true，而如果你用getAttribute获取checked的值的话，如果标签中没有checked这个属性，那么返回的是null。即使你选中了checkbox，但是没有给该标签上的checked赋值，那么用getAttribute获取的值还是null。
获取这个月有多少天
var oDate = new Date();
oDate.setDate(1);
oDate.setMonth(oDate.getMonth() + 1);
oDate.setDate(0);
十五、
预解析：把变量的定义（仅仅是定义）提升到作用域的最顶上
预解析的作用范围：1、函数 2、<script>标签
var aLi = oUl.children;
aLi.legnth; aLi[0];
父节点：oUl.parentNode，oUl.parentNode.style.display="none";
首个子节点：
//IE8- oUl.firstChild.tagName
//高级浏览器 oUl.firstElementChild.tagName
十六、
var oSelect = document.getElementById("city");
var aOption = oSelect.getElementsByTagName("option");
oSelect.onchange = function() {
alert(this.value);
alert(this.selectedIndex);
alert(aOption[this.selectedIndex].innerHTML);
//给select中动态添加一个option
var oNewOption = new Option("显示到页面上的值", "提交的时候的值");
aOption.add(oNewOption); //还可以写成oSeelct.add(oNewOption);
}
select:
索引：oSelect.selectedIndex
options: oSelect.options 数组
添加option：
1、先创建：var newOpt = new Option("显示的文本", "给后台用的文本");
2、插入：oSelect.options.add(newOpt);
oSelect.add(newOpt);
删除：oSelect.options.remove(index);
oSelect.remove(index);
十七、
JS的remove(index)方法，主要用用于从下拉列表删除选项。
该方法从选项数组的指定位置移除<option>元素。如果指定的下标比0小，或者大于或等于选项的数目，remove()方法会忽略它，并且什么也不做
aOption.remove(0); aOption.remove(1); oSelect.remove(0); oSelect.remove(1); aOption和oSelect都可以使用remove方法
十八、
var str = "123abc";
alert(typeof str++);
alert(str);
var abc = "123";
alert(typeof abc);
alert(typeof abc++);
alert(typeof abc);
十九、
str.charCodeAt(index); 字符串转码
var str = "abc你好";
document.write(str.charCodeAt(1) + " | " + str.charCodeAt(3));
String.fromCharCode(code) 编码转字符串
var str = "张三";
document.write(str.charCodeAt(0) + " | " + str.charCodeAt(1));//24352 19977
document.write(String.fromCharCode("24352") + " | " + String.fromCharCode("19977"));
写出0到255编码的所有值
var arr = [];
for(var i = 1; i <= 255; i++){
arr.push(i + "=" +String.fromCharCode(i))
}
document.write(arr.join(" <br />"));
0x 十六进制
u unicode码
中文的范围4e00 - 9fa5
所有汉字的unicode编码
var arr = [];
for(var i = 0x4E00; i < 0x9FA5; i++ ){
arr.push(String.fromCharCode(i));
}
document.write(arr.join(" "));
二十、
文字的写法
alert("一");
alert("u4E00");
alert("一"=="u4E00"); //true
数据的加密和解密：2014-08-31
文字加密.html + 文字加密2.html
计算文本大小.html（注意：如果字符编码以ANSI的形式，那么一个中文是2个字节，如果是无BOM的UTF-8的形式编码，那么一个中文是3个字节，如果是有BOM的UTF-8的形式编码，那么是4个字节，如果是gb2312的话，是2个字节）
二十一、
逗号表达式
//逗号表达式：以最后一个为准 逗号表达式的优先级最低
if(1,1,doucment,0,"") { //逗号表达式以最后一个为准
alert(true);
} else {
alert(false);
}
alert(1,0);
function show(a) {
alert(a);
}
show(1,0);
var a = (12,5);
alert(a);
二十二、
预解析
情况一：
<script type="text/javascript">alert(a); //报错</script>
<script type="text/javascript">var a = 12;</script>
情况二：
<script type="text/javascript">var a = 12;</script>
<script type="text/javascript">alert(a); //没问题</script>
var a = 2; var b = 5; alert(Math.max(a,b)); alert(Math.min(a,b));
var a = 2; alert(Math.pow(a,3));//N方
var a = -12.51; alert(Math.abs(a));//绝对值
var a = -12.51; alert(Math.ceil(a));//向上取整 返回整数 (通过数轴想想上下)
var a = -12.51; alert(Math.floor(a));//向下取整 返回整数 (通过数轴想想上下)
var a = 4; alert(Math.sqrt(a));//开方
var a = -12.51; alert(Math.round(a));//四舍五入 返回整数
var str="123abc";
alert(typeof str++);//Number
alert(str); //NaN
alert(null == undefined);
return只能写在function中，不能写在其他地方，比如for循环中就不能写return;
属性的访问方式： 1点 （.） 2 [] 能用点的地方 都能用中括号
innerHTML ： 能设置 也能修改 写标签
var a = 12; alert(window.a);
预解析: 把变量的定义（仅仅是定义）提升到作用域的最顶上
var a = 12; 1变量的定义 2变量赋值
作用范围： 1 函数
2 script标签
var a;//定义
alert(a);//undefined
a = 12;//赋值
//如果变量是一个函数 按变量走
show();
var show = function (){
var a = 5;
alert(a);
}();
<script>var a = 12;</script><script>alert(a);</script>
<script>alert(a);//报错</script><script>var a = 12;</script>
字符编码
var str = "张三"; document.write(str.charCodeAt(0));//24352 19977
document.write(String.fromCharCode(97));//24352 19977
中文的范围
var arr = [];
for(var i = 0x4E00; i < 0x9FA5; i++ ){
arr.push(String.fromCharCode(i));
}
document.write(arr.join(" "));
alert("一"); alert("u4E00"); alert("一"=="u4E00");
20140727JS学习2014-08-31计算文本的大小；文字加密；文字解密
逗号表达式：
if(1,1,document,0,""){//逗号表达式以最后一个为准
alert(true);
} else{
alert(false);
}
<script>alert(1,0);function show(a){ alert(a); }show(1,0);</script>
<script>var a = (12,5);alert(a);</script>
js排序
js组成：
1.ECMAScript 翻译 --- 解释器
2.DOM document object model 文档对象模型 document 操作页面元素
3.BOM browser object mode 浏览器对象模型 window 操作浏览器
兼容性：
ECMAScript ---- 几乎没有兼容性问题
DOM --- 60-70%
BOM --- 基本不兼容
标签 = 元素 = 节点
节点：文本节点 --文字 元素节点-标签
父节点： obj.parentNode
孩子节点： obj.children 数组 只包含第一层
首尾节点： 没用
firstElementChild || firstChild
lastElementChild || lastChild
children[0] children[len-1]
兄弟节点：
previousElementSibling || previousSibling
nextElementSibing || nextSibing
oUl.insertBefore(oLi,null);
父级.insertBefore(需要移动节点，往谁前面);
oUl.insertBefore(oLi,null) 和oUl.appendChild(oLi); 等价
插入到元素的最后一个位置 必须是null
删除元素： 父级.removeChild(节点);
body ----> document.body
html ----> document.documentElement
document 是所有节点的父级 结构上的父级
BOM: window
window.alert(); window.navgator.userAgent window.console.log();
var oNewWin = window.open(url,打开的方式[,属性]);
返回一个新打开页面的一个引用；
chrome 拦截 用户体验
ff 拦截
ie 打开
*** 用户自己打开 浏览器不会阻止
url : 打开的一个地址
打开方式：
a target: _self 当页打开 _blank 新开页
window.close();
ff 没反应 安全 1 如果要关闭 需要修改ff的配置文件
2 用户自己打开的页面才能关闭
chrome 立刻关闭
IE 有提示
obj.offsetWidth 盒模型的宽度
obj.offsetHeight 高度
盒模型： width + padding + border
显示的元素才有盒模型的概念
1 没有宽高 也有值
2 display：none 元素 没有offsetWidth/Height
scroll事件
chrome:
document.body.scrollTop/scrollLeft 滚动的高度 / 左侧滚动的距离
ff ie:
document.documentElement.scrollTop/scrollLeft
当前可视区的高度 宽度
document.documentElement.clientHeight/clientWidth
location 能获取也能设置
protocol http/https/ftp/file
protocol 协议 "http:"
host 域名 "www.a.com"
pathname 路径 "/app/a.html"
search 数据 "?a=12"
hash 锚 "#1"
获取属性的方式：
3 种： 1 点
2 []
3 getAttribute
获取：getAttribute(属性名)
设置： setAttribute("属性名"，值)
特性： setAttribute 的属性 只能通过 getAttribute获取
getAttribute值能获取 setAttribute的属性 不能访问 .形式添加的属性
IE8- getAttribute能获取.形式添加的属性
通过setAttribute设置的属性，IE8-下也能通过.的形式获取该属性的值
用途： get/setAttribute 用来设置和获取自定义属性
offsetLeft/offsetTop
offsetLeft: 元素到定位父级的一个距离
offsetParent:定位父级
parentNode: 结构的父级
document 结构的父级 body ==> html ==> document
body 定位的父级 body offsetParent ==> null
20140727JS学习2014-09-21选中文本;
oBtn.onclick这样的事件会相互覆盖，addEventListener不会相互覆盖
已复习到2014-10-19