js复习笔记

数据类型

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

true\false判定

false、undefined 、null、0、""  为 false
true、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-31
   getDay ()                  获取星期 0-6      
   getMonth ()                获取月  0-11
   getFullYear ()             获取完整年份（浏览器都支持）
   getHours ()                获取小时 0-23
   getMinutes ()              获取分钟 0-59
   getSeconds ()              获取秒  0-59
   getMilliseconds ()         获取当前的毫秒 
   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(“字符”);//左边开始找，找不到返回-1
   8. 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.oncroll
    window.onload
    window.onresize
    window.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