js复习笔记

数据类型

数据类型：String，number,boolean,null,undefined======>parseInt, parseFloat(),String(),!!,Boolean(),Number(),基本运算转化称数字型（除了+）

true\false判定

false、undefined 、null、0、""  为 falsetrue、1、"somestring"、[Object]  为 true

声明变量

var a = 5;  //定义变量都用var，不管是整形，浮点型，字符串，统一用var定义、接收，会自动识别。var b = typeof a; //识别类型js中有number，string，boolean等类型var c = Math.pow(3, 4); //次方运算var d = Math.sqrt(81);//开方运算//      var e=prompt("请输入点什么东西"); //接受用户输入，必须用变量接收输入的字符串var f = parseInt("5"); //转换成number类型,自带净化功能，可取整。可取字符串开头数字var g = true;  //布尔类型 true或false，false为0，true不为0的数var h = 5 > 6;  //关系运算符 >大于号 <小于号>= 大于或等于<=  小于或等于==等于===全等于!=不等于!==不全等于：==h和===的区别就是双等号不严谨var i = true && true;   //逻辑运算符：&&  ||    ！   与或非

全局变量、局部变量、变量提升

全局变量与局部变量，注意：在函数内部未声明的变量为全局变量。变量提升：在函数体内部，声明变量，会把该声明提升到函数体的最顶端。 只提升变量声明，不赋值。

隐藏与显示的属性

 Display: none           display: block ;  显示的意思 Visibility: hidden;       visibility: visible  显示的意思 Display  隐藏不占位置 Visibility:hidden 隐藏占有位置   停职留心 Overflow:hidden;   隐藏超出的部分。

padding的影响：

 内边距  会影响盒子大小 行内元素   尽量不用  上下的padding和margin 继承的宽度 padding不会挤开 。

js书写位置

 1.行内式  <button onclick="alert('你好吗')">点击我</button> 2.内嵌式  <scrip type=”text/javascript”></scrip> 3.外链式  <scrip type=”text/javascript” src=”xx.js”></scrip>标签之间不能写任何东西

函数

    /**     *1.自定义函数     */    function sayHello() {        console.log("javascript函数");        return "返回值";    }    /**     * 2.函数直接量声明     */    var fun1=function(){        //alert("nihao");    }    //调用    fun1();    /**     * 3.function关键字创建（了解，没用）     */    //          var fun2=new Function("var a=10;var b=10;alert(a+b)");    //          fun2();    /**     函数参数：实参个数:arguments.length 、形参个数 :[函数名].length     */    /**     函数返回值 return，return后面的不会执行     */

数组

         1.声明方式         var arr=[1,1,2,4];  //常用         var arr=new Array(1,2,3);         2.使用         arr[index];         3.方法属性         arr.length；属性         arr.push()------------->添加新的元素并返回新的长度         arr.unshift()---------->添加元素到第一个         arr.pop()--------------->删除并返回最后一个         arr.shift()--------------->删除第一个元素         arr.concat(arr)------------>合并两个数组         arr.join(seperator)--------->把数组转换成字符串，元素之间用seperator连接         str.split(seperator)--------->字符串切割成数组，通过分隔符         4.遍历数组         5.array[i].index=i; //自定义属性，获取数组的index值（排他思想）

DOM

1. 定义：DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。

2. getElementsByClassName:ie6,7，8不支持，所以需要自己封装。

   function getClass(id,classname){     if(document.getElementsByClassName){        if(id){            document.getElementById(id).getElementsByClassName(classname);        }else{            retur document.getElementsByClassName(classname);        }     }     // 不支持的 浏览器     var arr = []; // 用于存放满足的数组     if(id){             var dom = document.getElementById(id).getElementsByTagName("*");     }else{         var dom = document.getElementsByTagName("*");     }     for(var i=0;i<dom.length;i++){        //对类名进行切割，判断是否包含        var classarr=dom[i].className.split(" ");        for(var j=0;j<classarr.length;j++){            if(classarr[j]==classname){                arr.push(dom[i]);            }        }     }     return arr;}

3. 判断真假

   if(类型){}

   • 数字类型 所有数字都是真，0是假
   • 字符串 所有字符串都是真，’ ’串是假
   • 对象 所有对象都是真，null是假
   • 未定义 undefined是假，没有真

4. 节点

   1. 父节点parentNode

   2. 兄弟节点

      1. nextSibling 下一个 ie 678
      2. nextElementSibling 其他浏览器下一个
      3. previousSibling 上一个
      4. previousElementSibling 其他上一个

      5. 兼容做法

         var div = <div>.nextElementSibling || <div>.nextSibling;

   3. 子节点
      
      1. firstChild 第一个孩子 ie678
      2. firstElementChild 第一个孩子 正常浏览器
      3. lastChild
      4. lastElementChild

   4. 孩子节点

      1. childNodes 它是标准属性，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点。火狐 谷歌等高本版会把换行也看做是子节点。利用nodeType == 1 元素节点 nodeType == 2 属性节点 nodeType == 3 文本节点 来获取元素节点
      2. children 选取所有的孩子 （只有元素节点），ie 678 包含 注释节点

   5. dom操作

      1. 创建节点

         var div = document.creatElement(“li”);

      2. 插入节点

         appendChild();添加盒子，在盒子的最后面

         insertBefore(插入的节点，参照节点)

         removeChild()删除节点

         cloneNode();复制节点 括号里面可以跟参数，如果里面是 true则深层复制， 除了复制本盒子，还复制子节点。如果为 false 浅层复制 只复制 本节点 不复制 子节点。

      3. 设置节点属性

         1. 获取节点属性 getAttribute(属性)
         2. 设置节点属性 setAttribute(“属性”,”值”);
         3. 删除某个属性 removeAttribute(“属性”);

内置对象

Arguments,Array,Boolean,Data,Error,Function,Math,Number,Object,RegExp,String……

1. 日期 var date = new Date();

   date.valueOf();Date.now();+new Date();getDate()                  获取日 1-31getDay ()                  获取星期 0-6      getMonth ()                获取月  0-11getFullYear ()             获取完整年份（浏览器都支持）getHours ()                获取小时 0-23getMinutes ()              获取分钟 0-59getSeconds ()              获取秒  0-59getMilliseconds ()         获取当前的毫秒 getTime ()                 返回累计毫秒数(从1970/1/1午夜)

2. 定时器

   setInterval(“执行的函数”,间隔时间)setInterval(fun, 1000);setInterval(“fun()”,1000);setInterval( function(){} , 1000 );clearInterval(timer)；//清除计时器setTimeout(fn, 5000) //5秒钟之后，去执行 fn 函数， 只执行一次

3. 倒计时

   new Date(“2013/2/12 13:33:00”); //自定义时间

4. Arguments对象：只在函数内使用

   arguments.length;//实参的个数arguments.callee;//返回正在执行的函数,在递归时用这个代替函数

5. String

   1. + “” 2. String()3. toString（进制）4. charAt（）5. charCodeAt（）6. length  字符串有汉子的长度需注意，一个汉子占2个字节，但是length只有一个7. indexOf(“字符”);//左边开始找，找不到返回-18. lastIndexOf();//最后开始找9. encodeURIComponent() ；把字符串作为 URI 组件进行编码10. decodeURIComponent() ；函数可把字符串作为 URI 组件进行解码11. concat() 连接字符串12. slice(“取字符串的起始位置”, [结束位置]) ; 13. substring 与slice差不多，但始终会把  小的值作为  起始位置 大的值作为结束位置13. substr(起始位置,[取的个数])  14. toFixed();保留两位小数15. toUpperCase 转成大写16. toLowerCase 转成小写

6. offset：获取元素尺寸

   1. offsetWidth=width+border+padding  得到对象的宽度   2. offsetHeight：得到对象高度3. offsetLeft  返回距离上级盒子（最近的带有定位）左边的位置：子盒子到定位的父盒子边框到边框的距离4. offsetTop   返回距离上级盒子（最近的带有定位）上边的位置:子盒子到定位的父盒子边框到边框的距离5. offsetParent 返回改对象的父级 （带有定位）注：style.width只能得到行内元素    只有定位的盒子 才有 left  top right，但是offsetLeft  可以得到本身没有定位的盒子

7. 事件对象

   1. 兼容做法 var event = event || window.event;2. 常见属性    data    返回拖拽对象的URL字符串（dragDrop）    width   该窗口或框架的高度    height  该窗口或框架的高度    pageX   光标相对于该网页的水平位置（ie无，以文档为基准点，绝对定位）    pageY   光标相对于该网页的垂直位置（ie无）    screenX 光标相对于该屏幕的水平位置    screenY 光标相对于该屏幕的垂直位置    target  该事件被传送到的对象    type    事件的类型    clientX 光标相对于该网页的水平位置 （当前可见区域，固定定位）    clientY 光标相对于该网页的水平位置

8. Scroll
   1. scrollTop（自己封装兼容不同浏览器）：滑动滚轮浏览网页的时候网页隐藏在屏幕上方的距离（onScroll）。兼容写法如下：

   var scrollTop = window.pageYOffset || document.documentElement.scrollTop|| document.body.scrollTop || 0;2. scrollTo（x,y）滚动到指定坐标

9. client

   offsetWidth:   width  +  padding  +  border   clientWidth： width  +  padding      不包含border  scrollWidth:   大小是内容的大小    

10. window

    window.oncrollwindow.onloadwindow.onresizewindow.screen.width  屏幕分辨率window.getSelection  选中的内容

11. Math

    Math.abs()  绝对值Math.ceil() 向上取整Math.floor() 向下取整Math.round() 四舍五入

乱起八早

1. a&&b 结果是什么？

   如果a 为假 ，则返回 a
   如果a 为真 ，则返回 b

2. a||b

   如果 a 为假 则返回b
   如果 a 为真 则返回a

3. 缓动动画

   timer = setInterval(function() {
   // 盒子本身的位置 + 步长 (不断变化的)
   var step = (target - box.offsetLeft) / 10; // 步长
   console.log(step);
   step = step > 0 ? Math.ceil(step) : Math.floor(step); // 步长取整
   box.style.left = box.offsetLeft + step + “px”;
   if(box.offsetLeft == target) // 判断结束条件
   {
   clearInterval(timer);
   alert(“到目标了”)
   }
   },30)

4. js跳转

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

5. 防止鼠标拖动

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

6. Html基本结构访问方法

   文档是 document
   html body head
   document.head
   document.body
   document.title
   没有 document.html 取而代之的是 document.documentElement;

7. 判断是不是怪异模式的浏览器：有没有文件头dtd文件

   document.compatMode == “CSS1Compat”
   document.compatMode === “BackCompat”
   BackCompat 未声明
   CSS1Compat 已经声明
   注意大小写

8. 函数写法

   function fun() { 语句 }
   fun 是函数体的意思
   fun() 调用函数 的意思

9. 阻止冒泡的方法（点击旁边区域，隐藏弹出窗口）

    if(event && event.stopPropagation) {     event.stopPropagation();  //  w3c 标准 }  else {     event.cancelBubble = true;  // ie 678  ie浏览器 }//判断当前对象var targetId = event.target ? event.target.id : event.srcElement.id;

10. 访问css属性的方法

     1. box.style.left 2. box.style.["left"]//兼容获得外链式或内嵌式css样式 function getStyle(obj,attr) {  //  谁的      那个属性      if(obj.currentStyle)  // ie 等      {          return obj.currentStyle[attr];        }      else      {         return window.getComputedStyle(obj,null)[attr];  // w3c 浏览器      }  }

11. json

    for in  --->  for(var k in json){ json[k]-->值  } pop()  删除最后一个 shift()  删除第一个 push() 追加 添加到最后面 unshift()  添加到 第一个位置  json.unshift(json.pop());  把 最后一个json 删除   并且把最后一个添加到json 第一个位置json.pop()  删除最后一个元素console.log(json.pop())  返回最后一个值

12. 屏幕缩放（函数节流，延迟事件）

    var num = 0;var demo = document.getElementById("demo")window.onresize = throttle(function(){    demo.innerHTML = window.innerWidth || document.documentElement.clientWidth;    num++;    console.log(num);},300);function throttle(fn,delay) {  // 闭包  节流    var timer = null;    return function() {        clearTimeout(timer);        timer = setTimeout(fn,delay);    }}

13. new关键字

    new运算符的作用是创建一个对象实例ew 关键字可以让 this  指向新的对象 所谓"构造函数"，其实就是一个普通函数，但是内部使用了this变量   

14. 闭包的概念

15. 类的概念

    首字母大写，跟函数定义一样其实prototype原型。。

16. 很乱

    1.this,事件调用者 如：this.value ——————->表单是value
    2.(“result”).className=”wrong”;——————–>类名，更换样式3.(“id”).innerHTML=”是谁”;———————->盒子是innerHTML
    4.isNaN(123)——————–>判断是不是一个数字
    5.[input].focus();——————>表单获取焦点
    6.[input].select();——————>表单选择
    7.getElementsByTagName(“span”)—————->获取某类标签,，list[index]获取
    8.表单的输入事件：
    正常浏览器 : oninput
    Ie 678 支持的 ： onpropertychange