js

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