适合新手的JavaScript基础学习笔记

1.变量的作用域

全局变量：最外层声明的变量；在函数内部但是没有var声明的变量（隐式全局变量）；

局部变量：在函数内部并且有var声明的变量

1          test();

2          console.log(a);

3          console.log(b);

4          console.log(c);

5          function test( ) {

6                 var a=b=c=9;

7                 console.log(a);

8                 console.log(b);

9                 console.log(c);

10      }

输出：9 9 9 undefined9 9

var a=b=c=9; 等价于c=9; b=9; var a=9

一般来说，只有变量在js中不加引号。

&  区分：变量与属性

变量是独立存在的，使用时不需要加引号

属性是属于某个对象的属性，使用时前面必须添加是哪一个对象。所有window对象的属性拥有全局作用域

       this指代当前对象，即：事件的触发者

 

2.隐藏样式写法

Display: none           display: block ;  显示

Visibility: hidden;       visibility: visible;  显示

Display 隐藏不占位置

Visibility:hidden;   隐藏占有位置   停职留薪

Overflow:hidden;   隐藏超出的部分。

btn.disabled = “disabled”     ||  btn.disabled = true; 按钮不可用

3.函数

函数声明

自定义函数

1     function fun(){

2         alert("我是自定义函数")

3     }

4     fun();  // 函数不调用，自己不执行

函数直接量声明

1     var fun1 = function(){

2         alert("直接量声明")

3     }

4     fun1();  也需要调用

利用Function 关键字声明

1     var fun2 = new Function("var a = 10; var b = 20;alert(a+b)");

2     fun2();

 

入口函数

1     window.onload = function(){

2          内部放js;

3     }

当我们页面加载完毕，即页面的结构、样式 、节点等加载完毕后，采取执行函数体里面的js部分。可以放在页面的任何地方，一般放在页面的顶端

 

变量提升

       对于变量，全局变量是可以和局部变量同名的，局部变量的优先级更高。在函数体内部，如果声明局部变量，会把该声明提升到函数体的最顶端，但只提升变量声明，不赋值；如果需要使用变量，但是没有声明局部变量，便会使用全局变量

1     var a = 18;

2     f1();

3     function f1(){

4         var b=9;

5         console.log(a);

6         console.log(b);

7         var a = '123';

8     }

结果是：undefined9

1     var a = 18;

2     f1();

3     function f1(){

4         var b=9;

5         console.log(a);

6         console.log(b);

7     }

结果是：18 9

第一个其实就相当于：

1     var a = 18;

2     f1();

3     function f1(){

4         var a;

5         var b=9;

6         console.log(a);

7         console.log(b);

8         var a = '123';}

函数参数

包括形参与实参，其中arguments是存储了函数传送过来的实参

u  Javascript在创建函数的同时，会在函数内部创建一个arguments对象实例.

u  arguments对象只有函数开始时才可用。函数的 arguments 对象并不是一个数组，访问单个参数的方式与访问数组元素的方式相同

u  arguments对象的长度是由实参个数决定的，而不是形参个数决定的

arguments.length：得到的是实参的个数

fn.length：得到的是形参的个数

<script>
    function fn(a,b)
    {
        console.log(fn.length); //得到是 函数的形参的个数
        //console.log(arguments);
        console.log(arguments.length); // 得到的是实参的个数
        if(fn.length == arguments.length)
        {
            console.log(a+b);
        }
        else
        {
            console.error("对不起，您的参数不匹配，正确的参数个数为:" + fn.length);
        }
        //console.log(a+b);
    }
    fn(1,2);
    fn(1,2,3);
</script>

u  实参个数<形参个数：多余的的形参则为undefined，它与其他参数运算结果NaN

u  实参个数>形参个数：多余的实参不传入函数内部

 

4.事件/方法

表单自动获得焦点

事件：onfocus              当获取到焦点时，再执行事件处理函数

方法：txt.focus( )         当页面完成加载，表单已经自动获取到焦点了

 

鼠标经过选择表单

       事件：onmouseover      当鼠标经过时，再执行事件处理函数

       方法：sel.select( )         当页面完成加载，鼠标已经选择了表单

1     sele.onmouseover = function(){

2         this.select(); //选择

3     }

所有input取出来的值都是字符型！

 

判断用户输入事件

正常浏览器：oninput

IE6 、7、8：onpropertychange  

参照案例：淘宝搜索框

 

下拉菜单的事件：onchange

1     <select id="sele">

2         <optionvalue="1">…</option>

3         <optionvalue="2">…</option>

4         <optionvalue="3">…</option>

5     </select>

改变的是select ，获取的是option的value值！

1     <script>

2         window.onload =function(){

3             var sele =document.getElementById("sele");

4             sele.onchange = function(){

5                 switch(this.value)

6                 {

7                     case"1":

8                         …

9                         break;

10                   case"2":

11                       …

12                       break;

13                   case"3":

14                       …

15                       break;

16               }

17           }

18       }

19   </script>

 

文件上传事件：onchange

文件的路径就是它的value值

1     var file = document.getElementById("file");

2     var span = document.getElementById("span");

3     //      文件选择的时间 onchange

4     file.onchange = function(){

5         var path = this.value;//文件的路径就是它的value值

6         var houzhui =path.substr(path.lastIndexOf(".")).toLowerCase();

7         //后缀名有大写有小写，全部转换成小写就少了一步对大小写的判断

8         if(houzhui ==".html" || houzhui == ".docx"){

9             span.innerHTML = "选择文件格式正确";

10       }else {

11           span.innerHTML = "选择文件格式错误";

12       }

13   }

 

拖动事件

原理：鼠标按下，接着移动鼠标 再鼠标弹起

1      bar.onmousedown = function(){

2     document.onmousemove = function(){ }

3     }

4     document.onmouseup = function(){ }

防止选择拖动：鼠标按下的时候，是可以选择文字的，可以清除选中的文字

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

5．数组

1      var arr = [1,3,5,7,9];

2      var arr = new Array(1,3,5);

添加数组

1. push()   后面推进去

push( ) 方法可向数组的末尾添加一个或多个元素，并返回新的长度

var arr =[1,3,5]  → arr.push(7) → arr结果变成 :  [1,3,5,7];

2.unshift()   从数组的前面放入

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度

 vararr = [1,3,5]  → arr.unshift(0) →  结果变成 [0,1,3,5]

注意：

var dom = [1,3,5];

console.log(dom.push(7));  // 返回的是添加元素后数组的长度  4

 

删除数组

1. pop()   删除最后一个元素，返回的是最后一个元素的值

 

var arr = [1,3,5]   → arr.pop()  → 结果   [1,3] 

2. shift()  删除第一个元素，返回第一个元素的值

var arr = [1,3,5]   → arr.shift()  → 结果   [3,5]

注意：

var dom = [1,3,5];

console.log(dom.pop());  // 返回的是原来数组的最后一个元素的值：5

 

连接两个数组：concat()

 concat()        用于连接两个或多个数组。它不会改变现有的数组，而仅仅会返回被连接数组的一个副本 不会产生新数组！

 varaa = [1,3,5];  var bb = [“a”,”b”,”c”];

 aa.concat(bb);     结果：  [1,3,5,“a”,”b”,”c”];

 

把数组转换为字符串:join()

join()     将数组各个元素是通过指定的分隔符进行连接成为一个字符串

语法:数组名.join(分隔符号)

指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

var arr = [1,2,3];

console.log(arr.join(“-”))    结果就是：  1-2-3   字符串

 

把字符串转换为数组:split()

split()     把一个字符串分割成字符串数组

语法stringObject.split(separator,howmany)

参数 separator 可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

howmany 可选。该参数可指定返回的数组的最大长度

 

 

6.排他思想

先干掉其他人，只留下我自己

1     <script>

2         window.onload =function(){

3             var btns =document.getElementsByTagName("button");

4             for(vari=0;i<btns.length;i++)

5             {

6                 btns[i].onclick =function(){

7                     //清除所有人的类名   只能用 for 遍历

8                     for(varj=0;j<btns.length;j++)

9                     {

10                       btns[j].className ="";

11                   }

12                   //就剩下自己就是一个 而且是点击那个

13                   this.className= "damao";

14               }

15           }

16       }

17   </script>

 

7.访问节点

 getElementById()   id 访问节点

 getElementsByTagName()    标签访问节点，返回伪数组

 getElementsByClassName()   类名    有兼容性问题（主流浏览器支持 ie 67 8不认识）

       可以通过封装自己的class类来解决这个兼容性问题

1     <script type="text/javascript">

2         window.onload = function(){

3             //如果支持getElementsByClassName

4             functiongetClass(classname) {

5                 if(document.getElementsByClassName){

6                     returndocument.getElementsByClassName(classname);

7                 }

8             //如果不支持getElementsByClassName 

9                 //先定义一个存放指定类名的数组

10               var arr = [];

11               //先获取所有标签

12               var doms =document.getElementsByTagName("*");

13               //再通过遍历所有dom来获取指定的类名

14               for(var i =0,len = doms.length; i<len; i++){

15                   //当出现一个标签有多个类名时，doms[i].className的值就不是那一个class类名，而是："test one"，需要把这些类名转换成数组从而分割开来：["test","one"]

16                   var txtArr =doms[i].className.split(" ");//分割类名，并且转换成数组

17                   //遍历数组，判断类名

18                   for(var j=0;j<txtArr.length; j++){

19                       if(txtArr[j]== classname){

20                           arr.push(doms[i]);//注意我们要添加的是div：doms[i] ;而不是类名：txtArr[j]

21                       }

22                   }

23               }

24               return arr;

25           }

26           console.log(getClass("test").length);

27       }

28   </script>

 

8.节点操作

节点

父节点	兄弟节点	子节点	孩子节点
parentNode	nextSibling 下一个（ie 6 7 8支持）	firstChild	childNodes
	nextElementSibling(其他浏览器支持的)	firstElementChild	children
	previousSibling 上一个	lastChild
	previousElementSibling	lastElementChild

我们想要兼容，可以连续写：||

1     var div = one.nextElementSibling || one.nextSibling;

孩子节点：

childNodes：它是标准属性，返回指定元素的子元素集合，包括HTML节点、属性节点、文本节点。注意：火狐 谷歌等高本版会把换行也看做是子节点！

设置nodeType === 1 时才返回元素节点！

nodeType === 2 属性节点 nodeType === 3 文本节点

children：选取所有的元素节点，但是ie 6 7 8会包括注释节点！

 

创建节点：createElement

1       var div = document.createElement(“li”);//生成一个新的  li 标签 

 

插入节点

1. appendChild();                                  添加孩子,放在盒子的最后面         

2. insertBefore(插入的节点，参照节点)   在指定节点的前面添加节点！写满两个参数    

1     demo.insertBefore(test,childrens[0]);   //放到了第一个孩子的前面 

2     //如果第二个参数为 null  则默认这新生成的盒子放到最后面。

3     demo.insertBefore(test,null);

 

移除节点:removeChild

1     var da = document.getElementById("xiongda");

2     demo.removeChild(da);

 

克隆节点:cloneNode

 cloneNode();        复制节点,括号里面跟参数

如果里面是 true  深层复制， 除了复制本盒子，还复制子节点 

      如果里面是 false  浅层复制，只复制本节点，不复制子节点。默认！

1     demo.appendChild(demo.cloneNode(true));  复制节点，作为自己的子节点

 

2     复制节点，作为自己的兄弟节点demo.parentNode.appendChild(demo.cloneNode(true));

 

节点属性设置

获取节点属性：getAttribute（“属性”）  

1     consol.log(demo.getAttribute("title"));   

 

设置节点属性：setAttribute(“属性”,”值”);

1     div.setAttribute(“class”,”demo”);  

 

删除某个属性：removeAttribute(“属性”);

1     demo.removeAttribute(“title”) 

9.日期对象

声明日期：

声明一个当前时间的日期：var  date = new Date();

声明一个指定时间的日期：var date = new Date("2016/09/15 00:00:00");

获得时间：

1     var date  = new Date();  // 声明

2     console.log(date.getTime());  // 提倡使用的

3     console.log(date.valueOf());  // 获得距离1970年的毫秒数

4     // 直接使用

5     console.log(Date.now());

6     console.log(+newDate());

 

常用的日期方法

获取日期、时间：

1     getDate()                  获取日 1-31

2     getDay ()                  获取星期 0-6     

3     getMonth ()                获取月  0-11

4     getFullYear ()                  获取完整年份（浏览器都支持）

5     getHours ()                获取小时0-23

6     getMinutes ()                  获取分钟0-59

7     getSeconds ()                  获取秒  0-59

8     getMilliseconds ()            获取当前的毫秒

9     getTime ()         返回累计毫秒数(从1970/1/1午夜)

 

定时器

1.设置定时器setInterval（）             每隔一段时间执行一次函数

 关闭定时器 clearInterval（定时器名称）

window.setInterval(“执行的函数”,间隔时间)              window可以省略不写

setInterval(fn,1000)

setInterval(“fn()”,1000)     

setInterval( function(){} , 1000 ) 

setInterval(fn(),1000)       写法错误！

var timer = setInterval(fn,1000)

clearInterval(timer)

2.设置定时器setTimeout（“执行的函数”,过多久）    过一段时间后执行一次函数

  关闭定时器 clearTimeout

 

&  两种定时器的区别

setInterval是排队执行的。如果间隔时间是1秒，而执行的程序的时间是2秒。那么上次还没执行完的代码会排队, 上一次执行完下一次的就立即执行, 这样实际执行的间隔时间就为2秒。

setTimeout是延迟1秒后执行。如果执行的程序的时间是2秒,那这段代码上一次与下一次的执行时间为3秒。

 

setTimeout实现setInterval效果

使用递归调用：自己调用自己

1     <script>

2         var demo =document.getElementById("demo");

3         var count = 5;

4         var speed = 1000;

5         setTimeout(goIndexPage,speed);  //  1秒钟之后去执行函数 

6         function goIndexPage() {

7             count--;

8             demo.innerHTML ="<a href='http://www.baidu.com'>本页面将在第"+count+"秒钟之后跳转页面</a>";

9             if(count <= 0)

10           {

11               // 如果 count 小于 0 就到了时间了   我们应该跳转页面

12                window.location.href ="http://www.baidu.com";

13           }

14           else

15           {

16               setTimeout(goIndexPage,speed);  //  递归调用

17           }

18       }

arguments.callee;    返回的是正在执行的函数。

在函数体内使用。

在使用函数递归调用时推荐使用arguments.callee代替函数名本身。

所以上段代码可以改成：setTimeout(arguments.callee,speed);

 

定时器注意问题：

Js是单线程，当一段代码正在执行时，所有后续的任务必须等待，形成一个队列，一旦当前任务执行完毕，从队列中取出下一个任务。

       如果代码中设定了一个setTimeout、setInterval，浏览器会在合适的时间将代码插入任务队列。如果这个时间设为0，表示立即插入队列，而不是立即执行，仍要等待前面代码执行完毕！

所以，setTimeout并不能保证执行的时间，是否及时执行还要取决于JavaScript线程是否空闲！

1     var num = 10;

2     alert(1);

3     num = 20;

4     setTimeout("console(num)",0); //30

5     alert(3);

6     num = 30;

 

倒计时

将来的时间 - 现在的时间

1     <script type="text/javascript">

2         window.onload = function(){

3     //  先获得截止时间

4             var endTime = newDate("2016.09.15 00:00:00");

5             var demo =document.getElementById("demo");

6            

7     //  定义函数,获得当前时间 并确定与截止时间的相差的天数,小时,分钟,秒

8                 function clock(){

9     //              1.获得当前时间

10               var nowTime = new Date();//每次执行函数都要获取最新的事件

11              

12   //              2.计算出当前时间与截止时间相差的秒数

13               var second =parseInt((endTime.getTime() - nowTime.getTime()) / 1000);

14              

15   //              3.根据相差秒数计算相差天数

16               var d =parseInt(second / 3600 /24);

17              

18   //              4.根据相差秒数计算相差小时数

19               var h =parseInt(second / 3600 % 24);

20              

21   //              5.根据相差秒数计算相差分钟数

22               var m =parseInt(second / 60 % 60 );

23              

24   //              6.根据相差秒数计算相差秒数

25               var s =parseInt(second % 60 );

26              

27   //              7.解决差值为个位数的情况

28               d<10? d ="0"+d : d;

29               h<10? h ="0"+h : h;

30               m<10? m ="0"+m : m;

31               s<10? s ="0"+s : s;

32               demo.innerHTML ="距离中秋节还剩"+d+"天"+h+"时"+m+"分"+s+"秒"

33               }

34   //      设置定时器,每隔一秒执行一次

35           setInterval(clock,1000)

36       }

37   </script>

 

 

 

页面跳转：window.location.href = ”…”

 

10.运算面试题

&& 的运算优先级高于 ||

a && b

如果a为真，结果为b

如果a为假，结果为a

1     var aa  =  0&&1; // 0

2     var bb =  1&&0;  //0 

3     var cc =  1&&10;  // 10

4     var a = 1 && 2 && 3; //3

5     var b = 0 && 1 && 2; //0

6     var c = 1 && 0 && 2; //0

a || b

如果a为真，结果为a

如果a为假，结果为b

1     console.log(0||1);   1

2     console.log(1||0);   1

3     console.log(1||5);   1

4     console.log(5||1);   5

 

11.字符串常用方法

转换为字符串

 1. +“”       2+ “”  = “2”    2+”ab”   = “2ab”

 2.String()    String(2)

 3.toString（基数）  ;    基数就是进制，可不写 

 vartxt = 10;

 txt.toString(2)       二进制      1010

 

字符串的长度

.length属性得到的是当前字符串占多少个字符，不能表示多少个字节。

我们知道，一个汉字占两个字节，所以可以自定义函数来计算指定字符串有多少个字节

1     var txt = "what are you 弄啥咧";

2     console.log(txt.length);    16

3     function getStringLength(str) {

4         var len = 0; //存储总长度

5         var c = 0;  // 存储每一个编码

6         for(vari=0;i<str.length;i++)

7         {

8             c = str.charCodeAt(i);

9             //alert(c);

10           if(c>=0 &&c<=127)

11           {

12               len++;

13           }

14           else

15           {

16               len += 2;

17           }

18       }

19       return len;

20   }

21    

22   console.log(getStringLength(txt));  19

 

获取指定位置的字符

1.charAt()；          获取相应位置字符（参数： 字符位置）

2.charCodeAt();            获取相应位置字符unicode编码（参数： 字符位置）

unicode编码  是我们字符的唯一表示 。

1     var txt = "abcdefg";

2     var txt1 = "今天是星期天";

3     alert(txt.charAt(5));    f

4     alert(txt1.charAt(3));   星

 

获取指定字符的位置

1.indexOf(“字符”);     返回字符从前面开始，第一次出现的索引号如果找不到，返回-1

1     var txt = “abcdef”;

2     console.log(txt.indexOf(“d”)); 3

2.lastIndexOf(“字符”); 返回字符从后面开始，第一次出现的索引号 如果找不到，返回-1

 

获取字符串

1.concat();                    连接字符串

 

2.slice(start, [end]);      获取从start到end之间的字符串，包含start不包含end

ü  结束位置可以省略，表示一直取到最后一个值

ü  起始位置可以是负数，表示从右边开始取，数值代表取的字符个数 此时end不可以写

1     var txt = "what are you 弄啥嘞？"

2     console.log(txt.slice(0));      whatare you 弄啥嘞？

3     console.log(txt.slice(0,3));        wha

4     console.log(txt.slice(-4));     弄啥嘞？

 

3.substr(start，[length]);              获取从start开始，length个长度的字符串

ü  长度可以省略，表示一直取到最后一个值

ü  起始位置可以是负数，表示从右边开始取，数值代表取的字符个数 此时length不可以写，并且ie 6 78不兼容 不提倡用这个写

1     console.log(txt.substr(5,3));       are

2     console.log(txt.substr(-4));        弄啥嘞？

3     console.log(txt.substr(txt.length-4));  弄啥嘞？

 

4.substring()  与slice基本一致，但是substring始终把小的数值当做起始位置，把大的数值当做结束位置：substring(6,3)在运行时会自动变成substring(3,6)

 

保留小数位数

保留两位有效数字，有三种方法：

1.转为字符串截取：通过indexof返回小数的位置

2.先乘以100，取整，再除以100

3.toFixed(2)

1     var PI = 3.1415926

2     var str = String(PI);

3     var dian = str.indexOf(".");

4     console.log(str.substr(0,dian+3));

5     console.log(parseInt(PI*100) / 100);

6     console.log(PI.toFixed(2));

 

12.网址编码

我们知道每个网站都有自己的网址，不同页面也有自己id网址。我们经常把网站送到后台，然后让后台去处理。但是有一个问题，后台处理的时候不认识比如换行、特殊符号等：var url = “http://www.itast.cn?name=cz” 

所以，我们先要实现编码，然后再传到后台

encodeURIComponent() 函数：可把字符串作为 URI组件来进行编码

decodeURIComponent() 函数：可把字符串作为 URI组件来进行解码

1     var url = "http://www.itcast.cn?name=andy";

2     console.log(encodeURIComponent(url));  // 编码

3     var afterUrl = encodeURIComponent(url);

4     console.log(decodeURIComponent(afterUrl));  // 解码

 

12.缓动动画公式

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

leader ：每次要走的距离，初始化为0

target ：一共要走的距离

1     $("btn").onclick = function(){

2         setInterval(function(){

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

4             $("demo").style.left= leader+"px";

5         },30);

6     }

 

13.Offset家族

获取元素自身的尺寸

offsetWidth   offsetHeight

得到对象自己的宽度和高度

offsetWidth =  width +padding   +  border

1     div {  width:220px;  border-left:2px solid red; padding:10px;}

div.offsetWidth =  220 + 2 + 20 =242 得到的是数值  

 

offsetLeft offsetTop 

得到对象自己到带定位的父级盒子的左边、上边的距离，即子盒子到定位的父盒子之间边框到边框的距离

u  这里的父级指的是所有上一级，不仅指父亲，还可是 爷爷曾爷爷 曾曾爷爷…

u  如果父级都没有定位则以body为准，否则取最近的那个父级元素

u  没有offsetRight和offsetBottom

 

offsetParent

得到对象自己带定位的父级元素 不一定是亲爸爸（parentNode得到的是亲爸爸）

u  如果父级都没有定位则以body为准，否则取最近的那个父级元素

 

offsetLeft与style.left区别

延伸至offsetLeft、offsetTop、offsetWidth、offsetHeight与style.left…..的区别

1.        offsetLeft可以返回没有定位的子盒子距离父盒子左侧的位置

style.left不可以，因为只有定位的盒子才有left 、top…

2.        offsetLeft返回的数字

style.left返回的是字符串，除数字还带单位px 只有parseInt（style.left）后才可计算

3.        offsetLeft只读      只能用它来获取值，不能用它来修改值

style.left可读写     编程时，用offsetLeft获取值，用style.left修改值  

4.        如果没有给 HTML元素指定过 top 样式，则 style.top 返回的是空字符串。

5.        style.left只能得到行内样式的数值；offsetLeft 随便

 

14.事件对象：event

btn.onclick = function(event) {  语句 }

event就是事件的对象，指向的事件是onclick

在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象，但支持的方式不同：

普通浏览器支持 event 

ie 678 支持 window.event

所以我们 采取兼容性的写法：var event =event || window.event;

event常见属性

data        返回拖拽对象的URL字符串（dragDrop）

type        事件的类型

target      该事件被传送到的对象

width      该窗口或框架的宽度

height     该窗口或框架的高度

pageX     光标相对于该文档对象document的水平位置（ie无）

pageY     光标相对于该文档对象document的垂直位置（ie无）

screenX   光标相对于该屏幕的水平位置

screenY   光标相对于该屏幕的垂直位置

clientX    光标相对于该网页当前可见区域的水平位置

clientY    光标相对于该网页当前可见区域的垂直位置

 

15.HTML基本结构访问

文档是 document

document.title        文档的标题 

document.head    文档的头

document.body      文档的体

没有document.html  取而代之的是  document.documentElement;

 

16.scroll家族

scrollTop   scrollLeft

scrollTop：被卷去的头部。就是当滑动滚轮浏览网页的时候网页隐藏在屏幕上方的距离

获取scrollTop：

u  ie9+ ：window.pageXOffset;    window.pageYOffset  （scrollTop）

u  标准浏览器： document.documentElement.scrollTop;

u  谷歌浏览器和没有声明<DOCTYPE   > ：document.body.scrollTop; 

页面滚动事件：window.οnscrοll= function() {页面滚动语句;}

兼容性写法：

var scrollTop  =  window.pageYOffset ||  document.documentElement.scrollTop ||document.body.scrollTop  ||  0;

 

封装自己的scrollTop  scrollLeft

1     function scroll(){

2         // 先判断ie9+和 最新浏览器是否认识

3         if(window.pageXOffset = !null){ // 如果存在就是0，故采用非空写法

4             return {

5                 left:window.pageXOffset,

6                 top:window.pageYOffset

7             }

8         }

9         // 判断是不是怪异浏览器：没有声明DTD

10       else if(document.compatMode == "CSS1Compat"){

11           // CSS1Compat：声明了，不是怪异浏览器   BackCompat：没有声明

12           return {

13               left:document.documentElement.scrollLeft,

14               top:document.documentElement.scrollTop

15           }

16       }

17       return {

18           left:document.body.scrollLeft,

19           top:document.body.scrollTop

20       }

21   }

 

scrollTo(x,y)

window.scrollTo(xpos,ypos)  把内容滚动到指定坐标，该坐标以整个文档的左上角为原点

xpos 必需。要在窗口文档显示区左上角显示的文档的 x 坐标

ypos必需。要在窗口文档显示区左上角显示的文档的 y 坐标

因为我们的网页大部分都没有水平滚动条，所以，这个x 不太常用。

 

17.client家族

&  几个宽度/高度对比

offsetWidth：width  +  padding +  border      

clientWidth：width  +  padding     

scrollWidth：width（里面内容的宽度） +padding 

event.width：窗口或者框架的宽度

检测屏幕宽度/高度

u  ie9+：window.innerWidth 

u  标准浏览器：document.documentElement.clientWidth

u  怪异浏览器 ：document.body.clientWidth

封装自己的函数

1     function getClient(){

2         // ie9+

3         if(window.innerWidth !=null){

4             return {

5                 width:window.innerWidth,

6                 height:window.innerHeight

7             }

8         }

9         // 标准浏览器

10       else if(document.compatMode== "CSS1Compat"){

11           return {

12               width:document.documentElement.clientWidth,

13               height:document.documentElement.clientHeight

14           }

15       }  

16       //怪异浏览器

17       else {

18           return {

19               width:document.body.clientWidth,

20               height:document.body.clientHeight

21           }

22       }

23   }

 

检测屏幕分辨率

window.screen.width     是我们电脑的分辨率，与浏览器无关

 

 

18.冒泡机制

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

E 6.0: div -> body -> html ->document

其他浏览器: div-> body -> html -> document -> window

不是所有的事件都能冒泡！这些事件不冒泡：blur、focus、load、unload

防止冒泡

标准浏览器：event.stopPropagation()

ie6 7 8：        event.cancelBubble =true

兼容性写法：

event && event.stopPropagation?event.stopPropagation() : event.cancelBubble = true

防止冒泡要写在相应的事件里面！

 

判断当前对象

标准浏览器：event.target

ie6 7 8：        event.srcElement

兼容性写法

var targetId = event.target ?event.target.id : event.srcElement.id;

 

获得用户选择的内容

标准浏览器：window.getSelection()    

ie6 7 8：document.selection.createRange().text

兼容性写法

var txt = window.getSelection?

window.getSelection().toString() :document.selection.createRange().text

 

19.动画原理

匀速动画的原理：   盒子本身的位置  +  步长 

缓动动画的原理:    盒子本身的位置  +  步长 (不断变化的)

匀速动画：

1     function animate(obj,target){

2         // 根据offsetleft与target的相对位置，判断运动方向：每次运动距离的正负来表示

3         var speed = target >obj.offsetLeft? 5 : -5;       

4     clearInterval(obj.timer);

5         obj.timer = setInterval(function(){

6             var result = target -obj.offsetLeft;

7             obj.style.left =obj.offsetLeft + speed +"px";      if(Math.abs(result)< 5){ //差值的绝对值<5时，清除定时器 同时还有最后一点距离没有走，直接到目标位置

8                 clearInterval(obj.timer);

9                 obj.style.left =target +"px";

10           }

11       },20);

12   }

缓动动画

1     function animate(obj,target){

2         clearInterval(obj.timer);

3         obj.timer =setInterval(function(){

4             // 得到每次运动的步长，正负代表方向

5             var step = (target -obj.offsetLeft) / 2;

6             step = step>0?Math.ceil(step) : Math.floor(step); // 步长是是商，有小数 需要取整

7             obj.style.left =obj.offsetLeft+step + "px"; // 原理：当前距离+步长

8             // 关闭定时器

9             if(obj.offsetLeft ==target){

10               clearInterval(obj.timer);

11           }  

12       },20);

13   }

 

20.js访问css

访问css属性

1. 利用点语法：box.style.width  box.style.top    结果是字符串，带有单位

   是写死的，后面的width  和 top  没有办法传递参数的

2. 利用[ ]访问属性：元素.style[“属性”];      box.style[“width”]

   是活的，可以给属性传递参数    

以上两种方法只能取行内式属性，没法取内嵌式和外链式

 

访问css样式

怎样得到内嵌式或者外链式的样式呢？

ie和Opera浏览器：obj.currentStyle    

标准浏览器：window.getComputedStyle("元素", "伪类")      

两个参数必须，没有伪类用null替代

兼容性写法：

var curStyle =obj.currentStyle? obj.currentStyle[attr] :window.getComputedStyle(obj,null)[attr];

封装获得当前样式函数

1     function getStyle(obj,attr){

2       var curStyle = obj.currentStyle? obj.currentStyle[attr] :window.getComputedStyle(obj,null)[attr];

3         return curStyle;

4     }

 

21.in运算符

是一个二元运算符，左边的操作数必须是字符串类型或者是可以转换成字符串类型的其他类型，右边的操作数必须是数组或者对象。只有左边操作数是右边的属性名时，才返回true，否则返回false，因此，in可以用来判断json里面有没有某个属性

遍历json：

1     var json = {name:"刘鸿飞",sex:"男",age:22}

2     console.log(json.name);

3     for (var k in json) {

4         console.log(k); // 遍历属性

5         console.log(json[k]); // 遍历属性的值

6     }

判断属性：

1     var json = {name:"刘鸿飞",sex:"男",age:22}

2     if("andy" in json){console.log("yes");}

3     else{console.log("no");}

 

22.闭包

用一个函数去访问另外一个函数的内部变量的方式就是闭包。

优点：不产生全局变量，可以实现属性私有化

缺点：闭包中的数据常驻内存，在不用的时候要删掉，否则会导致内存溢出。

1     function outFn(){

2         var num = 666;

3         return function (){

4             console.log(num);

5         }

6     }

7     outFn()()

23.对象

对象：带有属性和方法的数据类型

面向对象的特性：抽象，封装，继承，多态

new关键字：创建一个对象实例，可以让this指向该对象实例。对构造函数使用new运算符，就能生成实例，并且this变量会绑定在实例对象上。

原型：prototype

解决函数重复执行效率低问题。

类.prototype.方法  = function() {}

1     function Person(name,age){

2         this.name = name;

3         this.age = age;

4     }

5      

6     Person.prototype.getName = function(){

7         console.log("我的名字是："+this.name);

8     }

9      

10   Person.prototype.getAge = function(){

11       console.log("我的年龄："+this.age);

12   }

13    

14   var bossLiu = newPerson("刘鸿飞",22);

15   bossLiu.getName();

16   bossLiu.getAge();