web(js基础二)

最新推荐文章于 2022-09-06 17:23:41 发布

奢คิดถึง

最新推荐文章于 2022-09-06 17:23:41 发布

阅读量139

点赞数

本文链接：https://blog.csdn.net/pet_ch/article/details/103569072

版权

web(12.15)

一、js简介

js是一种脚本语言，由三部分组成：

ecmascript：是js的核心；
DOM：文档对象模型；
BOM：浏览器对象模型。

二、js函数

1.常规函数；【详见web(js基础一)】
2.匿名函数；【详见web(js基础一)】
3.自执行函数：

 (function (){
       函数体；
 })(参数);

注：
1.常规函数和变量会提前声明，如：函数的定义和调用可写为：

 method();                                       
 function method() {
        函数体；
 }

2.执行无形参函数时传入实参，在函数中如何使用该实参？
----使用参数列表arguments，实例：

 method_4(1,2,3);               //执行无参函数时传入实参
 function method_4(){          //定义无参函数
     //使用传递的参数  arguments  参数列表对象
          console.log(arguments[0]);  //使用arguments可对传入的实参进行操作；
          console.log(arguments[2])；
         console.log(arguments.length);
  }

三、js变量作用域

局部变量：变量在函数内声明，只能在该函数内部访问，所以不同的函数内可以使用相同名称的变量。
全局变量：网页中所有脚本和函数均可使用。
在函数中使用var关键字进行申明的变量是局部变量，而没有用var关键字，直接赋值声明的变量是全局变量。
变量作用域中的特殊情况：变量的闭包；
闭包：是指有权访问另一个函数作用域中的变量的函数(即访问另一个函数中的局部变量)，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量，闭包的缺点就是常驻内存，会增大内存使用量，使用不当很容易造成内存泄露；
实例1：

var add =(function () {     //add为自执行函数执行后返回的匿名函数
       var counter = 0;      //counter 为该自执行函数的局部变量
       return function () {  
          return counter +=1； //该匿名函数需访问其外层自执行函数的变量counter；
       }
 })();
 console.log(add());             //执行add，counter加1并输出（执行结果为1）

实例2：

function fun(n,o) {
            console.log(o)
            return {                   //返回一个对象
                fun:function(m){       //fun为对象中的一个方法
                    return fun(m,n);   //需要访问fun函数中的局部变量n
                }
            }
  }
        var a = fun(0);
        //执行fun(),传入实参0，此时n=0,o未定义，输出undefined,a为fun返回的对象
        a.fun(1);
        //执行a的fun方法，传入参数1，即m=1，返回fun函数，参数为(1,0),输出0
        a.fun(2);
        //执行a的fun方法，传入参数2，即m=2，返回fun函数，参数为(2,0),输出0
        a.fun(3);
       //执行a的fun方法，传入参数3，即m=3，返回fun函数，参数为(3,0),输出0
        var b = fun(0).fun(1).fun(2).fun(3);
        //执行fun(),传入实参0，此时n=0,o未定义，输出undefined,第一次返回对象
        //执行第一次返回对象的方法，传入参数1，即m=1，返回fun函数，参数为(1,0),输出0，第二次返回对象
        //执行第二次返回对象的方法，传入参数2，即m=2，返回fun函数，参数为(2,1),输出1，第三次返回对象
        //执行第三次返回对象的方法，传入参数3，即m=3，返回fun函数，参数为(3,2),输出2，b为第四次返回的对象
       var c = fun(0).fun(1);  c.fun(2);  c.fun(3);
       //执行fun(),传入实参0，此时n=0,o未定义，输出undefined,第一次返回对象
       //执行第一次返回对象的方法，传入参数1，即m=1，返回fun函数，参数为(1,0),输出0，c为第二次的返回对象
       //执行c的fun方法，传入参数2，即m=2，返回fun函数，参数为(2,1),输出1,返回对象
       //执行c的fun方法，传入参数2，即m=2，返回fun函数，参数为(3,1),输出1,返回对象

四、DOM

1.DOM元素的8种获取方式

dom元素的4种动态获取方式(即后期添加的同类型的元素仍然可以获取)

document.getElementById("id名");            //单个对象
document.getElementsByClassName("类名");    //同类型元素集合
document.getElementsByName("name");         //同类型元素集合
document.getElementsByTagName("标签名");     //同类型元素集合

dom元素的2种固定获取方式（即后期添加的同类型的元素不能直接获取)

document.querySelector(".button");
 //获取类名为button的元素,若有多个符合条件的元素，只能获取第一个，参数为选择器类型
document.querySelectorAll(".button");
 //获取所有类名为button的元素

2个固定元素的获取

document.body; //获取整个body
document.documentElement;  //获取整个页面的html元素

2.DOM元素的事件

鼠标事件：mousedown,mouseup,mouseover,mousemove,mouseout;
键盘事件：keyup,keydown;
表单事件：change,focus,blur;
浏览器事件：error,resize,load;
触屏事件：touchend,touchstrat,touchmove;

注：dom事件在使用时需要加上on;

3.dom元素绑定事件的方法

直接绑定,即在行内直接添加事件(注:行内同类事件只能绑定一次)
实例：

<button class="button" onclick="fun()">确认1</button>
function fun(){
      console.log("确认");
 }

动态绑定,先获取元素，再进行绑定

<button class="button">确认1</button>
var but1=document.getElementsByClassName("button")[0];
but1.onmousedown=function(){
     console.log("确认1");
 }

注：同一事件不能绑定多次；

事件监听

//事件不用带on;
对象.addEventListener("事件",方法,boolean);
对象.removeEventListener("事件",方法,boolean);
//关于第三个参数：第三个参数默认值为false，即冒泡；值为true时，为捕获

①事件监听时，同一方法可以用于两个事件的监听；
②事件监听时，同类型事件可以监听多次；
③解除同类型事件监听时，需要逐个解除；

4.事件的执行参数e

鼠标事件执行参数,其中：

 clientX/Y ，  pageX/Y      //鼠标相对于浏览器的坐标
 srcElement，target         //目标元素
 timestamp                  //触发的时间间隔

键盘事件执行参数，其中：

keyCode，charCode，which，ASCII      //键盘值所对应的ascii值
key，code                           //键盘字母
srcElement，target                  //目标元素
 timestamp                          //触发的时间间隔