2018年3月

getElementById

通过 id 找到 HTML 元素,返回值是一个标签,可以直接使用。获得属性值,设置属性。
document.getElementById("demo");

getElementsByTagName

通过标签名找到 HTML 元素,返回值是一个标签数组,习惯性是遍历之后再使用。
document.getElementsByTagName("div");

getElementsByClassName

通过类名找到 HTML 元素,返回值是一个标签数组,习惯性是遍历之后再使用。
`document.getElementsByClassName("a");
注意:通过类名查找 HTML 元素在 IE 5,6,7,8 中无效

特殊情况:数组中的值只有1个。

  • document.getElementsByTagName("div")[0];取数组中第一个元素。
  • document.getElementsByClassName("a")[0];取数组中第一个元素。

附录:DOM的解析过程
HTML加载完毕,渲染引擎会在内存中把HTML文档,生成一个DOM树,getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。

概述

JS是以事件驱动为核心的一门语言。

事件三要素

事件源、事件、事件驱动程序。

  • 三句话:获取事件源、绑定事件、书写事件驱动程序。
  • 获取事件源:document.getElementById(“box”);
  • 绑定事件: box.onclick = function(){ 程序 };

事件有哪些

事件名说明
onabort图像加载被中断
onblur元素失去焦点
onchange用户改变域的内容
onclick鼠标点击某个对象
ondblclick鼠标双击某个对象
onerror当加载文档或图像时发生某个错误
onfocus元素获得焦点
onkeydown某个键盘的键被按下
onkeypress某个键盘的键被按下或按住
onkeyup某个键盘的键被松开
onload某个页面或图像被完成加载
onmousedown某个鼠标按键被按下
onmousemove鼠标被移动
onmouseout鼠标从某元素移开
onmouseover鼠标被移到某元素之上
onmouseup某个鼠标按键被松开
onreset重置按钮被点击
onresize窗口或框架被调整尺寸
onselect文本被选定
onunload用户退出页面

数组的遍历
定义一个数组
var array = [1,2,3,4,5,6];

for循环

for(var i = 0;i<arr.length;i++){
     console.log(arr[i]);
}

every

对数组中每一项运行以下函数,如果都返回true,every返回true,如果有一项返回false,则停止遍历 every返回false.

array.every(function(item,index,arr) {
    if(item<3){
        return true;
    }
    return false;
})

函数参数

  • item 必须。当前元素的值。
  • index 可选。当前元素的索引值。
  • arr 可选。当前元素属于的数组对象。

    filter

    对数组中每一项运行以下函数,该函数返回结果是true的项组成的新数组

      var arr1 = array.filter(function (ele,index,array) {
    
          if(ele>2){
                 return true;
          }
          return false;
      });
         console.log(arr1);

    foreach

    遍历数组(无返回值,纯操作数组中的元素),方法用于调用数组的每个元素,并将元素传递给回调函数。

          var str = "";
          array.forEach(function (ele,index,array) {
              str+=ele;
          });
          alert(str);

    map

    有返回值,返回什么都添加到新数组中。

         var arr2 = array.map(function (ele,index,array) {
               return ele+"你好";
          })
    
          console.log(arr2);

    some

    有返回值,函数结果有一个是true,本方法结果也是true。

          var flag = array.some(function (ele,index,array) {
              if(ele.length>2){
                  return true;
              }
              return false;
          })
    
          alert(flag);

arguments对象和Function是分不开的。因为arguments这个对象不能显式创建,arguments对象只有函数开始时才可用。只在函数中使用,实参的数组。不能修改长短的数组。(可以修改元素,但是不能变长变短)。

Instanceof

Instanceof是一个关键字,可以判断A是否是B类型。
布尔类型值 = A Instanceof B ;

Array.isArray()

HTML5中新增,判断是不是数组
布尔类型值 = Array.isArray(变量) ;

  • 调用者:Array
  • 参数:变量(被检测值)
  • 返回值:布尔类型

    toString()

    把数组转换成字符串,每一项用,分割
    字符串 = 数组.toString();

    valueOf()

    返回数组对象本身
    数组本身 = 数组.valueOf();

    join

    根据每个字符把数组元素连起来变成字符串。
    字符串 = 数组.join(变量);
    变量可以有可以没有。不写默认用逗号分隔,无缝连接用空字符串。

    push()

    在数组最后面插入项,返回数组的长度
    数组修改后的长度 = 数组.push(元素1);

    pop()

    取出(删除)数组中的最后一项,返回最后一项
    被删除的元素 = 数组.pop();

    unshift()

    在数组最前面插入项,返回数组的长度
    数组1改后的长度 = 数组.unshift(元素1);

    shift()

    取出数组中的第一个元素,返回最后一项
    被删除的元素 = 数组.shift();

    reverse()

    翻转数组(原数组讲呗反转,返回值也是被反转后的数组)
    反转后的数组 = 数组.reverse();

sort();

给数组排序,返回排序后的数组。如何排序看参数。

从小到大排序后的数组  =  数组1.sort(function(a,b){
           return a-b;
});

注意:

  • 无参:按照数组元素的首字符对应的Unicode编码值从小到大排列数组元素。
  • 带参:必须为函数(回调函数--callback)。函数中带有两个参数,代表数组中的 前后元素。如果计算后(a-b),返回值为负数,a排b前面。等于0不动。返回值为正数,a排b后面。

    其他方法

    concat()
    把参数拼接到当前数组
    新数组 = 数组1.concat(数组2);
    slice()
    从当前数组中截取一个新的数组,不影响原来的数组,参数start从0开始,end从1开始
    新数组 = 数组1.slice(索引1,索引2);包括索引1,不包括索引2.
    splice()
    删除或替换当前数组的某些项目,参数start,deleteCount,options(要替换的项目)
    新数组 = 数组1.splice(起始索引,结束索引,替换内容);
    indexOf()、lastIndexOf()
    查找元素的索引,如果没找到返回-1。
    索引值 = 数组.indexOf/lastIndexOf(数组中的元素);
    清空数组

  • array.splice(0,array.length); 删除数组中所有项目。
  • array.length = 0; length属性可以赋值,其它语言中length是只读。
  • array = []; 推荐使用。

This

  • this只出现在函数中。
  • 谁调用函数,this就指的是谁。
  • new People(); People中的this代指被创建的对象实例。

    new

  • 开辟内存空间,存储新创建的对象( new Object() )。
  • 把this设置为当前对象。
  • 执行内部代码,设置对象属性和方法。
  • 返回新创建的对象。

面向对象

可以创建自定义的类型、很好的支持继承和多态。面向对象的语言c++/java/c#...
面向对象的特征:封装、继承、多态
万物皆对象:世间的一切事物都可以用对象来描述

基于对象

无法创建自定义的类型、不能很好的支持继承和多态。基于对象的语言JavaScript

1043833959.jpg
定义:在函数内部,可以调用其他函数。如果一个函数在内部调用自身本身,这个函数就是递归函数。
递归注意的问题:递归必须有跳出的条件,否则就会进入死循环。

递归与循环的区别与联系

相同点:
(1)都是通过控制一个变量的边界(或者多个),来改变多个变量为了得到所需要的值,而反复而执行的;
(2)都是按照预先设计好的推断实现某一个值求取。

不同点:
递归通常是逆向思维居多,“递”和“归”不一定容易发现(比较难以理解);而循环从开始条件到结束条件,包括中间循环变量,都需要表达出来(比较简洁明了)。用循环能实现的,递归一般可以实现,但是能用递归实现的,循环不一定能。
递归案例:

  • 用递归求1+100和。

    function getSum(n){
          //跳出条件
          if(n<1){
              return 0;
          }
          //累加
          return n + getSum(n-1);
      }

全局变量(成员变量)

在整个程序中,哪里都可以访问到的变量。
定义形式:进入script立即定义的变量和没有var的变量。

局部变量

函数内部 的变量,只有函数内部可以访问到。
定义形式:函数内部用var定义的变量和形参)

隐式全局变量

隐式全局变量就是隐藏的全局变量不好被发现。
示例:

function  fn(){
var  a  =  b  =  c  =  1;   // b和c就是隐式全局变量
}

注意:

function  fn(){
var  a  =  b  =  c  =  1;   // b和c就是隐式全局变量(等号)
var  a = 1;  b = 2;  c = 3;     // b和c就是隐式全局变量(分号)
var  a = 1 ,  b = 2 ,  c = 3;    // b和c就不是隐式全局变量(逗号)
}

变量声明提升(出现原因:预解析)

函数中,定义变量在使用变量之后。
只提升变量名,不提升变量值,容易出现undefined。计算后形成NaN。
变量声明提升:在预解析的时候,成员变量和函数,被提升到最高位置,方便其他程序访问。
变量声明提升特点:成员变量只提升变量名,不提升变量值。但是,函数是所有内容全部提升。(function直接定义的)
函数范围内照样会出现变量声明提升。
什么情况容易出现变量声明提升:使用变量在定义变量之前。

函数

函数:函数就是可以重复执行的代码块,如果函数名相同,后面的函数会覆盖前面的函数。(函数名,不能一样。JavaScript没有函数的重载。函数不调用不执行。加载函数的时候,只加载函数名,不加载函数体。函数也是一种数据类型。
调用一个函数就等于执行这个函数并且得到这个函数的返回值。
函数名就是整个函数。
两个平级的函数中的变量不会相互影响(可以使用同样的形参名)
JS加载的时候,只加载函数名,不加载函数体。所以如果想使用内部的成员变量,需要调用函数。
函数的定义:
关键字:function。
第一种

function 函数名(参数)
{  
    程序块;   
}        

第二种(匿名函数)

    var  函数名 = function (){
        程序块; 
    }

第三种

    var 函数名 = new Function( 程序块);

参数

参数:参与运算的变量。为了增强函数的功能性,和程序员的交互性,和函数的可拓展行。参数相当于局部变量。

  • 形参
    形式上参与运算的变量,无实际值,为实参占位置,就像一个躯壳一样。(可以理解为函数的内部变量外部无法访问)
  • 实参
    实际参与运算的变量。形参为他占位置,真实参与运算的变量。
    注意:如果形参个数与实参个数不匹配(一般情况下,不会让形参和实参不匹配)
    1.相等的话,正常执行。
    2.实参大于形参,正常执行。(多余的实参,函数不使用)
    3.实参小于形参,要看你的程序是否报错。(报错,NaNundefined
    4.未给定实参的形参为undefined;

    返回值

  • return函数就有值;没有return函数就没值;
  • 函数程序运行后的结果外部需要使用的时候,我们不能直接给与,需要通过return返回。
  • 总结:函数内部,return后面的值就是返回值;
  • 作用:函数执行后剩下结果就是返回值。
  • 函数执行完毕,会不会留下点儿什么,取决于有没有返回值。

注意:

  1. 如果函数没有显示的使用 return语句 ,那么函数有默认的返回值:undefined
  2. 如果函数使用 return语句,那么跟再return后面的值,就成了函数的返回值
  3. 如果函数使用 return语句,但是return后面没有任何值,那么函数的返回值也是:undefined
  4. 函数使用return语句后,这个函数会在执行完 return 语句之后停止并立即退出,也就是说return后面的所有其他代码都不会再执行。

匿名函数

定义:匿名函数就是没有名字的函数。
作用:
1.不需要定义函数名的时候。
2.书写起来更简便。
匿名函数的调用有三种方法:

  • 直接调用或自调用。(function(){alert(1)})()
  • 事件绑定。

    document.onclick = function () {
          alert(1);
      }
  • 定时器。

      setInterval(function () {
          console.log(444);
      },1000);

    回调函数

    执行函数就等于:函数名+(); 整个函数+();
    回调函数就是函数作为参数进行传递。
    回调函数一般是用于定义一个规则来使用的。
    规则的传递只能通过函数实现。通过变量无法达成。所以我们需要传递规则的时候必须使用回调函数。

      //回调函数:函数作为参数进行传递和使用。
      function fn(demo){
          demo();
      }
      function test(){
          console.log("我是被测试的函数!");
      }