*整理文档（个人收藏）*****

2012-03-26 23:32 臭小子1983 阅读(666) 评论(0) 编辑收藏举报

一、函数

1、直接量 var square = function(x) { return x}; 这种方式称为拉姆达函数或匿名函数

2、函数定义时可以设置参数，如果传给函数的参数个数不够，则从最左边起依次对应，其余的用undefined赋值，如果传给函数的参数多于函数定义参数的个数，则多出的参数被忽略.

function myprint(s1,s2,s3) {  
    alert(s1+"_"+s2+"_"+s3);  
}  
myprint();      //undefined_undefined_undefined  
myprint("string1","string2"); //string1_string2_undefined  
myprint("string1","string2","string3","string4"); //string1_string2_string3

3、形参：function test(handle); 函数定义的参数是形参

4、实参：test("哈哈"); 实际传入的参数

5、判断函数参数是否存在
　　如果id存在返回true，否则返回false

function wanmeihd(id){
    if(id){
    　   console.log("a");
    }
    else{
        console.log("b");
    }
}
wanmeihd();

6、获取函数参数的个数

function att(p1, p2, p3){
    if(arguments.length == 2){
        alert("两个参数");
    }

    if(arguments.length == 3){
        alert("三个参数");
    }
}
att(1,2,3)

二、对象

创建对象：

var obj = new Object();

obj.x = 2;　　// 对象的属性

obj.y = 3;

obj.getDistance = function(){　　//对象的方法

　　......

}

1、对象直接量

var point = { x:2.4, y:1,2 };

2、对象的声明

var emptyObject1 = {};           //创建空对象  
var emptyObject2 = new Object(); //创建空对象  
var person = {"name":"sdcyst",  
          "age":18,  
          "sex":"male"};         //创建一个包含初始值的对象person  
alert(person.name);              //sdcyst  
alert(person["age"]);            //18

3、fon...in对象

var name = {"name1":"NAME1","name2":"NAME2","name3":"NAME3","name4":"NAME4"};  
var namestring = "";  
for(var props in name) {  //循环name对象中的属性名字  
    namestring += name[props];  
}  
alert(namestring);  //NAME1NAME2NAME3NAME4

4、删除对象

delete name.name1;      //删除name1属性  
delete name["name3"];  //删除name3属性  
namestring = "";

5、构造函数、构造对象 prototype

构造对象：

Math.prototype.person = function(name,sex){ ..... }

function Person(name,sex) { //构造函数
this.name = name;
this.sex = sex;
}
Person.prototype.age = 12; //为prototype属性对应的prototype对象的属性赋值
Person.prototype.print = function() { //添加方法
alert(this.name+"_"+this.sex+"_"+this.age);
};
var p1 = new Person("name1","male");
var p2 = new Person("name2","male");
p1.print(); //name1_male_12
p2.print(); //name2_male_12
Person.prototype.age = 18; //改变prototype对象的属性值,注意是操作构造函数的prototype属性
p1.print(); //name1_male_18
p2.print(); //name2_male_18

6、对象直接量与JSON对区别（重要）

　　区别：对象没有引号name:"Objector.L" JSON有引号 "summary":"Blogs"

对象：

var objectLiteral = {
    name: "Objector.L",
    age: "24",
    special: "JavaScript",
    sayName: function() {
        return this.name;
    }
};

JSON：

var jsonFormat = {
    "summary": "Blogs",
    "blogrolls": [
        {
             "title": "Explore JavaScript",
             "link": "http://example.com/"
        },
        { 
             "title": "Explore JavaScript",
             "link": "http://example.com/"
        }
    ]
};

7、变量、对象作用域：

变量作用域：

var sco = "global"; //全局变量
function t() {
var sco = "local"; //函数内部的局部变量
alert(sco); //local 优先调用局部变量
}
t(); //local
alert(sco); //global 不能使用函数内的局部变量

8、闭包：

闭包是拥有变量、代码和作用域的表达式，在javascript中函数就是变量、代码和函数的作用域的组合体，因此所有的函数都是闭包

三、eval和JSON

eval("(" + jsonFormat + ")");　　将jsonFormat的json数据转化为对象.

由于Ajax的兴起，JSON这种轻量级的数据格式作为客户端与服务器之间的传输格式逐渐地流行起来，进而出现的问题是如何将服务器端构建好的JSON数据转化为可用的JavaScript对象。利用eval函数无疑是一种简单而直接的方法。在转化的时候需要将JSON字符串的外面包装一层圆括号：

var jsonObject = eval("(" + jsonFormat + ")");

为什么要加括号？

加上圆括号的目的是迫使eval函数在评估JavaScript代码的时候强制将括号内的表达式（expression）转化为对象，而不是作为语句（statement）来执行。举一个例子，例如对象字面量{}，如若不加外层的括号，那么eval会将大括号识别为JavaScript代码块的开始和结束标记，那么{}将会被认为是执行了一句空语句。所以下面两个执行结果是不同的：

alert(eval("{}");  // return undefined
alert(eval("({})");// return object[Object]

JSON格式的名字部分为什么要加引号？

因为eval函数会将{foo:”bar”}解释成合法的JavaScript语句，而非表达式。但是人们往往想要的是让eval将这段代码解释成一个对象。所以JSON格式会强制你去在名字的外侧加上引号再结合圆括号，这样eval就不会错误的将JSON解释成代码块。

举例说明

eval错误解析语义

alert(eval('{foo:"bar"}'));      // return "bar", incorrect

eval正确解析JSON

alert(eval('({"foo": "bar"})')); // return JSON object, correct

结论

理解eval的工作原理和json的严格的限定格式，合理结合eval和json应用于JavaScript的数据传递和对象转换。

following this format:

eval('{' + jsonString + ')');// code removed by author at 2010-01-03

eval('(' + jsonString + ')');

四、js自己调用自己，调用函数的简写方法 (function(a){ alert(1) }) (1) - 重要

闭包，内部与外界不冲突，并且会执行内部的方法，

(function(a,b){
     alert(a+b)}
) (1,2);         将要传的参数写到后面。

tx一专题写法   (function(){ alert('a'); }就是参数o
(function(o){
      if(window.attachEvent)      
      {window.attachEvent("onload",o);}else{window.addEventListener("load",o,false);};
}(function(){ alert('a'); }

五、创建数组的三种方法和哈希表

1、var arr = new Array();

arrk[0] = ‘aaas’;

　　arr[1] = ‘adfwer’;

2、var arr = new Array(‘sss’, ‘sdfsdf’);

　　3、var arr = [‘adfasdfasd’, ‘adsfasdf’, {x:1, y:4}];

　　二、哈希表：是根据关键码值对来进行直接访问的集合类型的数据结构，哈希表是一种查找效率很高的结构、

　　　　创建哈希表：var hashTable = {a:1, b:2, c:3}

　　　　访问哈希表可以通过下标来：hashTable["a"]

　　elements[]：

每个对象都有一个数组，document.forms[0].elements[2].options[2].test;　　

六、null和undefinde

　　null：表示无值，

　　undefinde：未定义值，在使用一个未志明的变量，或一个不存在的对象属性，返回undefined。

七、内存释放

　　Var s = ‘hello’;

Var u = s.toUpperCase();

八、return expression语句

如果return 不带expression来终止程序的执行，并不返回，

Function display_obj(obj){

If(obj==’’){

　　　　return ; 终止程序,并不返回，与return false;一样

　　}

九、逻辑表达式

　　1、&&：两个表达式都为真时，表达式为真

2、||：两个表达式有一个为真时，表达式为真

3、!：当表达式为假的时候，表达式为真

十、函数定义

1、

function f2(){ alert() } 　　// 命名函数

var f2 = function() { alert() } // 匿名函数

2、

function setNode(a, b){}　// 形参：出现在函数定义方法中的参数叫形参.

setNode(1,2);　　　　　　 // 实参：实际传入的参数叫实参.

3、Arguments对象

Arguments对象是一个集合，可以按照数字下标获取传递给函数的参数值.

十一、Prototype类的继承

var message = "hello world";

message.endsWidth('h');                  // 最后一个数是否为h

message.endsWidth('d');                  // 最后一个数是否为h

 

String对象中定义一个新的endsWidth()方法

String.prototype.endsWidth = function(c){

         return (c == this.charAt(this.length-1));           // 返回false或true;     

}

十二、功能测试

如果使用一种没有被所有浏览器支持的代码，可以测试浏览器是否支持此代码

if(element.addEventListener){

　　 alert('支持addEventListener');

　　　　}

　　　　else if(element.addachEvent){

　　 alert('支持addachEvent');

　　　　}

　　　　else{

　　alert('element.onkeydown');

　　　　}

View Code

 1 var EventUtil = {//建新对象
 2          addHandler:function(element,type,func){//添加事件
 3             if(element.addEventListener){
 4                 element.addEventListener(type,func,false);
 5             }else if(element.attachEvent){
 6                 element.attachEvent("on"+ type,func);
 7             }else{
 8                 element["on"+ type] = func;
 9             }     
10          },
11          getEvent:function(event){//获取Event对象
12              return event?event:window.event;         
13          },
14          getTarget:function(event){//获得事件目标
15              return event.target || event.srcElement;
16          },
17          preventDefault:function(event){//阻止事件的默认行为
18             if(event.preventDefault){
19                 return event.preventDefault();//非IE
20             }else{
21                 event.returnValue = false;//IE
22             }
23          },
24          removeHandler:function(element,type,func){//取消事件
25             if(element.removeEventListener){
26 element.removeEventListener(type,func,false);
27             }else if(element.detachEvent){
28                 element.detachEvent("on"+ type,func);
29             }else{
30                 element["on"+ type] = null;
31             }
32          },
33          stopPropagation:function(event){//取消事件的冒泡
34              if(event.stopPropagation){
35                 event.stopPropagation();//非IE
36             }else{
37                 event.cancelBubble = true;//IE
38             }
39          }
40     };

十二、确定浏览器支持哪个DOM

<script type="text/javascript">
if(document.all){
　　alert('当前浏览器支持IE') 
}
else if(document.layers){
　　alert('当前浏览器支持Netscape') 
}
else if(document.getElementById){
　　alert('当前浏览器支持DHTML的DOM') 
}
else {
　　alert('当前浏览器支持其它浏览器')
}
</script>

document.all：是IE 4.0及以上版本的专有属性，是一个表示当前文档的所有对象的数组，不仅包括页面上可见的实体对象，还包括一些不可见的对象，比如html注释等等。在document.all数组里面，元素不分层次，是按照其在文档中出现的先后顺序，平行地罗列的。所以可以用数字索引来引用到任何一个元素。但比较常用的是用对象id来引用一个特定的对象，比如document.all["element"]这样。

document.layers：是Netscape 4.x专有的属性，是一个代表所有由储如<div><layer>等定位了的元素的数组。通常也是用<div>或<layer>对象的id属性来引用的，但是这里面不包含除此以外的其它元素。

其实这两个属性没什么可比性，大概你经常看到他们同时出时，这有一个历史原因。在第四代浏览器出现的时候，标准相当混乱，Netscape和微软分别推出了它们的Navigator 4.x和IE 4.0，这两个浏览器的巨大差异，也使开发者面临了一个使网页跨浏览器兼容的噩梦。而document.layer和document.all分别是两者一个最显著的标志，为了确定浏览者使用的什么浏览器，通常用是否存在document.layers和document.all来判断。
新的统一的标准用document.getElementById等系列方法来引用DOM对象，而且Netscape 6.0以后放弃了layers特征，虽然IE继续保留了document.all，但这最终没有成为DOM标准的一部分。希望document.layers和document.all能够早日作古，让标准早日深入人心！

十三、IE中的条件注释

HTML中的条件注释：

 1  <!--[if IE]>
 2  根据条件判断，这是Internet Explorer<br />
 3  < ![endif]-->

 4  <!--[if IE 5]>
 5  根据条件判断，这是Internet Explorer 5<br />
 6  < ![endif]-->

 7  <!--[if IE 5.0]>
 8  根据条件判断，这是Internet Explorer 5.0<br />
 9  < ![endif]-->

10  <!--[if IE 5.5]>
11   根据条件判断，这是Internet Explorer 5.5<br />
12  < ![endif]-->

13  <!--[if IE 6]>
14  根据条件判断，这是Internet Explorer 6<br />
15  < ![endif]-->

16  <!--[if gte IE 5]>
17  根据条件判断，这是Internet Explorer 5 或者更高<br />
18  < ![endif]-->

19  <!--[if lt IE 6]>
20  根据条件判断，这是版小于6的Internet Explorer<br />
21  < ![endif]-->

22  <!--[if lte IE 5.5]>
23  根据条件判断，这是Internet Explorer 5.5或更低<br />
24  < ![endif]-->
25 注意两个特殊的语法：
26 gt: 大于 
27 lte: 小于或等于 
28 CSS hack? 条件判断属于CSS hack吗？严格地说是属于CSS hack。因为就好象其他真正的css hack一样，它使得我们可以给一些浏览器赋予特殊的样式，再则它不依赖于某个浏览器的BUG来控制另外一个浏览器（的样式）。除此之外，条件判断还能用 来做一些超出CSS HACK范围的事情(虽然这种情况很少发生).。
29 
30 因为条件判断不依赖于某个浏览器的hack,而是一个经过深思熟虑的特色功能，所以我相信它是可以被放心地使用的。当然，其他浏览器也有可能支持条件判断（到目前为止还没有），但是看起来，他们应该不会使用如<!--[if IE]>这样的语法。
31 
32 我很节俭地使用条件判断。首先我会尝试着去寻找在IE上一个真正的CSS解决方法。如果找不到，我将会毫不犹豫地使用条件判断。
33 
34 Comment标签:
35 一个读者告诉我，IE（Windows和Mac）支持<comment>标签（非标准）。
36 <p>这 <comment>不</comment> 是Internet Explorer.</p>
37 这 是Internet Explorer.
38 
39 如果你想为非IE的浏览器使用专门的标签或样式，那么这个这个comment标签将会非常方便。不幸地是，这种情况很少发生（译者注：IE太烂？呵呵）。特别是这个标签，同时被windows和mac平台上的IE支持，而你往往只想在他们其中之一使用特殊的内容或样式。

十四、获取url参数 var url = window.location.href

 1 $(function(){ 
 2     var url = 'http://www.cnblogs.com/hnyei/archive/2012/03/16/2399962.html';
 3     var arr = url.split('/');
 4     var addStr = '';
 5     
 6     for(var i=0; i<arr.length; i++){
 7         addStr += arr[i] + "<br />";    
 8     }
 9     $('#str').html(addStr);
10 });

十五、从 = , == 与 === 说起JS类型比较

"="：为赋值

首先，== equality 等同，=== identity 恒等。
==，两边值类型不同的时候，要先进行类型转换，再比较。
===，不做类型转换，类型不同的一定不等。

下面分别说明：

先说 ===，这个比较简单。下面的规则用来判断两个值是否===相等：
1、如果类型不同，就[不相等]
2、如果两个都是数值，并且是同一个值，那么[相等]；(！例外)的是，如果其中至少一个是NaN，那么[不相等]。（判断一个值是否是NaN，只能用isNaN()来判断）
3、如果两个都是字符串，每个位置的字符都一样，那么[相等]；否则[不相等]。
4、如果两个值都是true，或者都是false，那么[相等]。
5、如果两个值都引用同一个对象或函数，那么[相等]；否则[不相等]。
6、如果两个值都是null，或者都是undefined，那么[相等]。

再说 ==，根据以下规则：
1、如果两个值类型相同，进行 === 比较。
2、如果两个值类型不同，他们可能相等。根据下面规则进行类型转换再比较：
   a、如果一个是null、一个是undefined，那么[相等]。
   b、如果一个是字符串，一个是数值，把字符串转换成数值再进行比较。
   c、如果任一值是 true，把它转换成 1 再比较；如果任一值是 false，把它转换成 0 再比较。
   d、如果一个是对象，另一个是数值或字符串，把对象转换成基础类型的值再比较。对象转换成基础类型，利用它的toString或者valueOf方法。js核心内置类，会尝试valueOf先于toString；例外的是Date，Date利用的是toString转换。非js核心的对象，令说（比较麻烦，我也不大懂）
   e、任何其他组合，都[不相等]。

举例：
"1" == true
类型不等，true会先转换成数值 1，现在变成 "1" == 1，再把"1"转换成 1，比较 1 == 1，相等。

= 赋值运算符
== 等于
=== 严格等于
例：
var a = 3;
var b = "3";

a==b 返回 true
a===b 返回 false

因为a,b的类型不一样
===用来进行严格的比较判断

十六、获取当前触发事件焦点的id

十七、获取当前id

<input name="p1" type="text" id="username" onfocus="onFocus(this)"/>
<input name="p1" type="password" id="password" onfocus="onFocus(this)"/>

<script type="text/javascript">
    var backButton = document.getElementById("backbutton");
    var rowsButton = document.getElementById("rows");
    var userName = document.getElementById("username");
    var passWord = document.getElementById("password");
    var unLen, pwLen;
    var mouseCurrrent="";

    // 获取当前ID
    function onFocus(handle){
        mouseCurrrent = handle.id;
        document.getElementById("test").innerHTML = handle.id;
    }


    // 退格键按下
    backButton.onclick = function(e){
        // var events = window.event ? window.event : e;
        switch(mouseCurrrent){
            case "username":
                alert("username");
                break;

            case "password":
                alert("password");
                break;

            default :
                alert("要删除的位置");
                break;
        }
    }

</script>

十八、使用值和使用引用

在js中可以采用三种方式来传播和操作一个数据

1、复制它，将一它赋给一个新的变量.

2、将它做成参数传递给一个函数或方法.

3、可以把它和其它值进行比较

var vector = {};

vector.reverse = function(vector){

　　vector.x = -vector.x;

　　vector.y = -vector.y;

}

var v = {x:1,y:2};

vector.reverse(v);

十九、装箱和拆箱

1、装箱：把基本数据类型转换为对应的引用类型的操作称为装箱。

2、拆箱：把引用类型转换为对象的值类型称为拆箱。

装箱：

　　var a = 10, b='js', c =true;

　　var oa = new Number(a);　　// 将值装箱

　　var ob = new String(b);

　　装箱最大的用处就是将

二十、类型转换

1、转换整型：parseInt(n);

2、转换成浮点型：parseFloat(n);

3、转为字符串：n.String();

4、转为number型：Number(n);

5、转为Object型：Object(n);

6、强制转换成字符串：String(n);

二十一、获取页面中的节点

1、document.getElementById('header').innerHTML = "<h1>标题</h1>";    // 通过ID来获取
2、document.getElementsByName('text')[1].value = "哈哈";               // 通过name名称获取节点
3、document.getElementsByTagName('div')[0].style.height = '200px';   // 通过节点来获取
4、document.getElementsByClassName('main')[0].style.height = '400px';   // 通过class名来获取元素，是一个数组注册必须写数据的下标并且IE不支持

/* 自定义通过class来获取节点 */
var tagName = getClassName("div",'main');

for(var i=0; i<tagName.length;i++){
    tagName[i].innerHTML = "你好";
}

function getClassName(tagname,className){
    if (document.getElementsByClassName){       // 判断是否支持getElementsByClassName
        return document.getElementsByTagName(className);
    }
    else{
        var tarname = document.getElementsByTagName_r(tagname);      // 这个节点下边的所有
        var tagnameAll = [];

        for(var i=0; i<tarname.length; i++){
            if(tarname[i].className == className){
                tagnameAll[tagnameAll.length] = tagname[i];
            }
        }
        return tagnameAll;
    }

}

二十二、document.activeElement.id 获取当前所在id

$(document).keydown(function(evt){          // 学习点
    var evt = window.event ? window.event : evt;
    if (evt.keyCode == 13) {
        if(document.activeElement.id == 'captcha'){
            login();        // 如果在登陆框执行登陆
        }
        if(document.activeElement.id == 'keyword'){
            searchcnt();    // 如果在搜索框执行搜索
        }
    }
})

二十三、判断手持设备是什么系统

<script type="text/javascript">
    $(function () {
        var names = navigator.userAgent;

        if(names.indexOf("iphone") != -1){
            $("#test").text("当前为iphone <br />" + names);
        }
        else if(names.indexOf("ipad") != -1){
            $("#test").text("当前为ipad <br />" + names);
        }
        else if(names.indexOf("Android") != -1){
            $("#test").text("当前为Android系统 " + names);
        }
        else{
            $("#test").text("其它设备 " + names);
        }
        // document.getElementById("test").innerHTML = names;
    })
</script>

二十四、判断是手机还是PC机访问

var _plat = navigator.platform;
if(_plat!="Win32"&&_plat!="Win64"&&_plat!="MacIntel"){
    //访问手机版
    document.location.href="http://malibu.chevrolet.com.cn/m/";
}else{
    $("#test1").text("你使用的是PC机");
}

二十五、简写代码

1.1 简化常用对象定义：

使用 var obj = {}; 代替 var obj = new Object();
使用 var arr = []; 代替 var arr = new Array();

二十六、获取元素样式和添加样式

1、添加样式

var getId = document.getElementById("pic")
getId.style.width = "200px";

2、获取元素的宽度值

var getId = document.getElementById("pic"); 
var _w  = getId.offsetWidth
alert(_w)

3、获取元素的left或top

var getId = document.getElementById("pic"); 
var l  = getId.ffsetLeft
alert(l)

二十七、a标签三种写法的区别

1、<a href="javascript:;"></a>　// 和javascript:void(0)同理不会点击之后跑到页面的顶端...

2、<a href="javascript:void(0);"></a> 　　// vodi(0)为死链接

3、<a href="###"></a>　　　　// ＃"包含了一个位置信息，默认是网页的最上面

但要慎用JavaScript:void(0)，我个人基本上用<a href="javascript:;">这个...

二十八、标准和兼容的写法

一、平台和浏览器的兼容性

1、最小公分母法：通过避开不兼容代码和实现上有BUG的代码来达到跨浏览器的兼容性，例如FF不支持DOM对象的innerText那编写怕的同时在IE和FF上运行的代码应该避免innerText属性.

　　IE和Mozilla浏览器的事件处理，使用最小公分母来保证兼容性

　　bnt.onclick = function(event){

　　　　// 处理event的兼容性

　　　　event = event || window.event;

　　　　alret(event.x)

　　}

2、防御性编码

　　说就是说你在不能确定某个模块是否被实现并且对应实现没有BUG时，通过学习一些额外的编码来保证这些模块化被正确运行.

　　btn.onclick = function(event){

　　　　event = event || window.event;

　　　　var src = event.srcElement || event.target;　　　　// 发生事件的节点

　　　　alert(src.value);

　　}

3、客户端的探测器

var isopera = navigator.userAgent.indexOf("opera") > -1;
var isIE = navigator.userAgent.indexOf("MSIE") > -1;
var isMoz = navigator.userAgent.indexOf("Mozilla") > -1;

if(isIE){
    console.log("是ie浏览器");
}

4、特性检测

　　检测浏览器不支持或者正确实现某个模块或特性时

if(window.ActiveXObject){
    // 如果没有window.ActiveXObject对象，下面代码不会执行，
    var xmlHttp = new ActiveXObject("MSXML.XMLHTTP");
}

5、实现标准

　　自己编写的JS代码实现某些浏览器未能实现的标准模块，这种方法用于较大规模的应用程序中

if(!document.createElementNS){
    // 有的浏览器里没有实现document.createElementNS接口，所以我们自己实现在
    document.createElementNS = function(tagName, ns){
        if(isIE){
            return document.createElementNS(ns + ":" + tagName);
        }
    }
}

二十九、获取CSS属性值

#box { width: 200px; height: 200px; border: 1px solid #c5c5c5; position: absolute; left: 0; top:0; opacity: 0.3 }

<script type="text/javascript">
    var o = document.getElementById("box");
    var msg = o.currentStyle ? o.currentStyle["width"] : document.defaultView.getComputedStyle(o, false)["width"];  // 获取css样式的属性值
    alert(msg);
</script>

三十、事件侦听

var startBtn = document.getElementById("startID");  // 开始按钮

var start = function(){
     testCode();
} 

function addListeners(obj, type, fn){
    // alert(obj.id);
    if(obj.addEventListener){
        obj.addEventListener(type, fn, false);
    }
    else{
        obj.attachEvent("on" + type, fn);
    }
}

addListeners(startBtn, "click", start);     // 这里调用的方法定义一定要用匿名函数

三十一、代码执行的时间

/* 测试代码的执行时间，以毫秒为单位，*/
var startBtn = document.getElementById("startID");  // 开始按钮
var endBtn = document.getElementById("endID");      // 结束按钮
var showNum = document.getElementById("num");       // 显示时间
var setNum = document.getElementById("setNum");     // 显示内容
var t,num = 0;

function clock(){
    num += 1;
    showNum.innerHTML = num;
}

var s_d = new Date();
var e_d = new Date();

// 测试代码
function testCode(){
    var s_e_d = s_d.getTime();  // 在代码开始放置一个获取时间
    for(var i=0; i<2230; i++){
        setNum.innerHTML = i;
    }
    var e_e_d = e_d.getTime();  // 代码执行完后放置一个获取的时间
    console.log("sed：" + s_e_d + " eed：" + e_e_d);
    showNum.innerHTML = e_e_d - s_e_d;
}

var start = function(){
    testCode();
}

var end = function(){

}

function addListeners(obj, type, fn){
    // alert(obj.id);
    if(obj.addEventListener){
        obj.addEventListener(type, fn, false);
    }
    else{
        obj.attachEvent("on" + type, fn);
    }
}

addListeners(startBtn, "click", start);     // 这里调用的方法定义一定要用匿名函数
addListeners(endBtn, "click", end);

三十二、获取一组元素的下标

<script type="text/javascript">
　　var _id = document.getElementById("box");
　　var childs = _id.getElementsByTagName("li");    

　　for(var i=0; i<childs.length; i++){
    　　childs[i].index = i;
    　　childs[i].onclick = function(){
        alert(this.index);
    }
}    
</script>

childs[i].index = i; // 来存储数组的下标

三十三、;（function($){}）前面的那个“;”

;function($,undefined) 是什么用处？

;(function($){$.extend($.fn...

现般在一些 JQuery 函数前面有分号

在前面加分号可以有多种用途:

1、防止多文件集成成一个文件后，高压缩出现语法错误。

2、这是一个匿名函数，一般js库都采用这种自执行的匿名函数来保护内部变量 (function(){})()

3、因为undefined是window的属性，声明为局部变量之后，在函数中如果再有变量与undefined作比较的话，程序就可以不用搜索undefined到window，可以提高程序性能

三十四、a href="javascript:void(0)"或 javascript：0在ie6下不执行onclick后的问题

问题：

$(function(){

　　$("a").click(function(){　　// ie6下会不执行，原来在于href="javascript:void(0)"

　　　　alert("a");

　　})

解决方法：

1、不使用a标签

2、将href值为空，方法后加入return false;

$(function(){

　　$("a").click(function(){　　// ie6下会不执行，原来在于href="javascript:void(0)"

　　　　alert("a");

　　　　return false;

　　})

3、将href值设置为href="#@"

三十五、对象的指针问题　　

css:

.nav { width:400px; padding-top:20px; }
.nav li{ width:20px; height:20px; border:1px #CCCCCC solid; background:#EBF0F3; float:left; text-align:center; margin-right:8px; line-height:20px; cursor:pointer; }
.nav li.active { background:#99C2D5; }
</style>

html:

js 一:

　　this.navBtn.click(function(){　　　　// 点击后将下标传给tag，但如果这块使用bind事件对象的指针需要注意指向的问题，详看js二
　　　　var _index = $(this).index();
　　　　_this.tag(_index);
　　})
};

FocusBox.prototype = {
　　tag : function(cur){
　　　　this.navBtn.removeClass(this.activeName).eq(cur).addClass(this.activeName);
　　　　this.boxCont.hide().eq(cur).show();
　　}
}

var arge = {
　　boxCont: ".box li",
　　navBtn: ".nav li",
　　activeName: "active",
　　init: 0
}
new FocusBox(arge);
</script>

js 二:重要

　　// 如果bind的第二个参数不为匿名函数，move不能有参数和写()否则会自动执行，

　　this.navObj.bind("click", function(){　　　　
　　　　var _index = $(this).index();
　　　　_this.move(_index);
　　});
}

Init.prototype = {
　　move :function(num){
　　　　alert(num);
　　　　alert(this.active);
　　}
}

new Init();
</script>

三十六、查找一组元素下每个元素中是否有指定的子元素

<h1><a href="#">adfadfad</a></h1>
<h1><a href="#">adfadfad</a></h1>
<h1>adf</h1>
<h1><a href="#">adfadfad</a></h1>
<h1>adsf</h1>
<h1>adsf</h1>
<h1><a href="#">adfadfad</a></h1>

for(var i= 0, len = getH.length; i < len; i++){　　
　　if(getH[i].getElementsByTagName("a").length){　　　　// 如果h1下有a标签执行
　　　　alert(getH[i].innerHTML);
　　}
}
</script>

三十七、table（表格）的定位处理

1、表格是不支持position(定位)，

2、表格中的td默认都是display:table-row，而不是display:block

需求：鼠标移到td时在td后加一个处理层

层结构：

</table>

解决方法：

给td中加一个div，使div的position:relative，层的position:absolute，控制层的left值为td的宽度

注意：在ie6下如果不给td中的div设置宽度，left的开始位置会以文字(实际内容)所在的位置为起启点，比如设置text-align:center:这时就不是以div的0起点算起

刷新页面返回顶部

臭小子1983

*************整理文档（个人收藏）*****************

一、函数

二、对象

三、eval和JSON

四、js自己调用自己，调用函数的简写方法 (function(a){ alert(1) }) (1) - 重要

五、创建数组 的三种方法和哈希表

六、null和undefinde

七、内存释放

八、return expression语句

九、逻辑表达式

十、函数定义

十一、Prototype类的继承

十二、确定浏览器支持哪个DOM

十三、IE中的条件注释

十四、获取url参数 var url = window.location.href

十五、从 = , == 与 === 说起JS类型比较

十六、获取当前触发事件焦点的id

十七、获取当前id

十八、使用值和使用引用

十九、装箱和拆箱

二十、类型转换

二十一、获取页面中的节点

二十二、document.activeElement.id 获取当前所在id

二十三、判断手持设备是什么系统

二十四、判断是手机还是PC机访问

二十五、简写代码

二十六、获取元素样式和添加样式

二十七、a标签三种写法的区别

二十八、标准和兼容的写法

二十九、获取CSS属性值

三十、事件侦听

三十一、代码执行的时间

三十二、获取一组元素的下标

三十三、;（function($){}）前面的那个“;”

三十四、a href="javascript:void(0)"或 javascript：0在ie6下不执行onclick后的问题

三十五、对象的指针问题

三十六、查找一组元素下每个元素中是否有指定的子元素

三十七、table（表格）的定位处理

About

*整理文档（个人收藏）*****

五、创建数组的三种方法和哈希表

三十五、对象的指针问题　　