day13——js基本概念总结及闭包，dom元素及操作

川长思鸟来 2021-11-09 10:24 198阅读 0赞

## 概念补充——基本语法 ##

#### 1. 变量类型（面试题） ####

在java,php,c\#等后端语言中，大概有14种数据类型：

<table> 
 <thead> 
  <tr> 
   <th>类型</th> 
   <th>定义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>int</td> 
   <td>整型（有符号）</td> 
  </tr> 
  <tr> 
   <td>uint</td> 
   <td>无符号整型</td> 
  </tr> 
  <tr> 
   <td>long</td> 
   <td>长整型</td> 
  </tr> 
  <tr> 
   <td>ulong</td> 
   <td>无符号长整型</td> 
  </tr> 
  <tr> 
   <td>byte</td> 
   <td>8位，用于表示最小的数据单位，默认为0，范围为-128~+127</td> 
  </tr> 
  <tr> 
   <td>sbyte</td> 
   <td>有符号8位</td> 
  </tr> 
  <tr> 
   <td>short</td> 
   <td>32位，很少用，范围为-32768~+32767</td> 
  </tr> 
  <tr> 
   <td>string</td> 
   <td>字符串</td> 
  </tr> 
  <tr> 
   <td>char</td> 
   <td>字符类型，16位</td> 
  </tr> 
  <tr> 
   <td>bool</td> 
   <td>布尔型</td> 
  </tr> 
  <tr> 
   <td>float</td> 
   <td>32位单精度浮点型，不精确，不能进行精确比较</td> 
  </tr> 
  <tr> 
   <td>double</td> 
   <td>64位双精度浮点型</td> 
  </tr> 
  <tr> 
   <td>decimal</td> 
   <td>格式: decimal (M,D)；M为最大精度位数，D为小数点右侧位数</td> 
  </tr> 
  <tr> 
   <td>object</td> 
   <td>对象</td> 
  </tr> 
 </tbody> 
</table>

而java是一种**弱类型语言**，所有变量均用var声明；变量数据类型有六种：  
number string boolean object null undefined（其中数组，空都属于对象object类型），还有函数类型function  
eg:

var a=10;
         var b="nihao";
         var c=true;
         var d={};//对象
         var e=[];//数组
         var f=null;//空对象引用
         var g=undefined;//未定义
         console.log(typeof a);//number
         console.log(typeof b);//string
         console.log(typeof c);//boolean
         console.log(typeof d);//object
         console.log(typeof e);//object
         console.log(typeof f);//object
         console.log(typeof g);//undefined
         console.log(typeof showname);//function
         function showname(){}

数据类型大体分为两类：值类型和引用类型  
值类型 值  
引用类型 ： function和对象  
**区别：**–值类型是 值的引用空间不变（在内存中的位置不变），引用类型 ：引用的位置是可变的

#### 2. 变量在使用之前切记初始化，若使用时未初始化，则数据类型为undefined ，未定义类型，并且有提示信息 error： a is not defined/undefined ####

#### 3. 变量的提升——变量会被js 提前声明 ####

eg: 
    console.log(a);//undefined:
    执行完之后检测到a是未定义，说明a只是被声明但未完成初始化
     var a=10;//这里面包含两部分，变量a的声明和初始化赋值
              console.log(a);

函数（**除匿名函数外**）也会被提前声明 ， 如果不被提前声明，在函数定义之前解析到show()，会提示show is not a function;但是浏览器可以执行函数输出结果为1

show();//function
        function show() {
            console.log(1);
        }

#### 4. 函数 ####

###### a)带返回值的函数; ######

function showinfo() {
             //执行代码
             return 1;
        }
        var a = showinfo();
        console.log(a);//1

###### b)带参函数 ######

function showname(name, sex, age) //括号中为形参{
        return name;
    }
    var name = showname("张三", "男", 18);//实参
    console.log(name);

如果函数**没有参数列表** 传递参数怎么接收参数？

function showData() {
            //arguments 参数列表对象arguments  
            取值按照集合来取值 ，key:value索引取值：
          console.log(arguments[0], arguments[1], arguments.length);
        }
    showData("小花", 18);

###### c) 匿名函数——不带函数名称的函数 ，用变量去接收 —匿名函数不提前声明 ######

list(); //，匿名函数不会被提前声明，在函数体前面调用函数报错
    var list = function () {
        console.log(arguments);
        return arguments[0];
    }
    console.log(list(1, 2, 3));

![在这里插入图片描述][20190802210228985.png]

###### d)自执行函数——自动执行的函数体，有实参形参 返回值 ######

格式：  
`var 变量=（function(参数){}）（参数）//后面这个括号表示执行函数`  
**eg:有参数有返回值**

var mm = (function (x, y) {
            console.log(x, y);
            console.log(arguments);
            return x + y;
        })(1, 2);
    console.log(mm);

例题：写出输出结果（tips:观察变量颜色）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]

解析：因为全局变量和局部变量名称相同
    在进入函数体后，由于函数体内部声明了temp同名变量（声明变量和赋值
    是两步操作），此时的局部变量temp未初始化会覆盖之前定义的object，
    所以检测到temp为undifined输出；在执行完赋值语句输出student,
    之后所有的temp变量就又变成了“student”

##### 5.js是面向对象开发，而对象包括属性和行为，世间万物皆对象 #####

## 变量作用域（全局变量，局部变量），闭包 ##

#### 1. 变量作用域示意图: ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 1]

eg1:（同理注意观察变量颜色）  
声明变量为全局变量的时候可以**不写var**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 2]  
eg2:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 3]

输出结果为6；
    首先定义全局变量为value=3，执行函数test(),结果为return后的函数，
    再执行return后的函数且参数为2，且调用了全局变量window.value此时
    为3则结果为3*2等于6

js里面定义全局变量 ，全局方法 ， 都是*window属性* *浏览器最大对象*

#### 2.闭包 ####

变量里面的闭包 —使用别人的局部变量 ，闭包会大量占用内存 会导致网页内存泄露 ，应尽量避免使用闭包  
eg1：

//在f2中调用f1函数
    function f1(){
            var a=10;
            return a;
        }
        function f2(){
            console.log(f1());
        }
    f2();

例题1：判断输出结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 4]

var a1=f1();//括号表示执行函数f1，
        			结果为return 后的内容——一个匿名函数
        a1();//执行return后的匿名函数，结果为1
        t();//执行匿名函数t，此时a为2
        a1();//在执行return后的function输出a
    将t声明后执行函数会报错的原因是，不用var声明则为全局变量，可以在外
    部调用，用var声明后再调用时会提示变量未定义

例题二：判断输出结果  
![在这里插入图片描述][20190802210857420.png]

console.log(f1()());//第一个括号表示执行函数f1，结果为return后
    的内容（function f2），第二个括号表示执行f2函数，返回n的值999

console.log(f1());输出return后的内容即  
![在这里插入图片描述][20190802210923571.png]  
例题三：  
![在这里插入图片描述][2019080221095637.png]

fooOuter1();//输出为global
    执行footOuter1函数其中name为局部变量，只在该函数内部有效，再闭包
    调用函数foo，执行后输出name,全局变量作用于整个代码此时输出global

例题四：（就像局部变量一样，潜逃在一个函数内部的函数为局部函数，局部函数取就近）

![在这里插入图片描述][20190802211050496.png]

输出结果为local//局部函数就近取值

例题五:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 5]

输出11//第一个括号执行f1函数，结果为return 后的内容，
    第二个括号表示执行函数f2，b自增后输出

例题六:方法重写（改写函数内置功能，一般情况下改写toString或valueOf,重写tostring 会自动执行String 类里面的tostring）  
![在这里插入图片描述][20190802211135755.png]

方法重写后，将toString改写成需要的功能：返回m的值，
    console.log(f2(1));//输出结果为1

## 常规语句 ##

#### 1. js里面的运算符 —算数运算符 —逻辑算符 —比较运算符 ####

#### 2. 语句包括 循环语句 条件语句 switch 选择结构 三元运算符 ####

#### 3. ####

// 简单的for 也称死循环

for(; ; ){}

#### 4. 简单应用 ####

eg输出下列形状  
![在这里插入图片描述][20190802211252455.png]

for (var i = 0; i < 4; i++) {
            for (var k = 0; k < 7; k++) {
                document.write("*")
            }
            document.write("<br>");}

![在这里插入图片描述][20190802211620814.png]

for (var i = 0; i < 4; i++) {
                for (var k = 0; k < 3 - i; k++) {
                    document.write("  ");
                }
                for (var k = 0; k < 7; k++) {
                    document.write("*")
                }
                document.write("<br>");
            }

打印菱形

打印金字塔形状的九九乘法表

document.write("<div align='center'>");
    for(var x=1;x<=9;x++){
     for(var y=1;y<=x;y++){
     document.write(x+"*"+y+"="+x*y);
     }
        document.write("<br>");
     }
    document.write("</div>");

## dom元素获取 ##

#### 1. dom ：document object model (文本对象模型) ####

#### 2. document dom对象在页面中就是整个页面（html） ####

#### 3．dom元素的8种获取方式,在进行dom元素获取的时候注意 获取的元素是否初始化 ####

a) document.getElementsByClassName()
    b) document.getElementById()
    c) document.getElementsByName()
    d) document.getElementsByTagName()

前面4个选择 属于**动态**的获取dom,动态获取：通过js获取  
在js里面不能进行隐式迭代 （说人话：不能操作一堆元素 只能操作单个元素）  
各个获取方式获取到的内容不同  
eg:![在这里插入图片描述][2019080221165216.png]

1）var b_ele = document.getElementsByClassName("block");
    	//获取到的类型为HTMLCollection  标签集合型/数组 
    	//取元素对象要按照索引来取值如:b_ele[0].innerHTML = "1111";
    2）var a1 = document.getElementById("binfo");获取的为单个对象
    3）var a3 = document.getElementsByTagName("div");//获取到的
    	  //为HTMLCollection  标签集合型/数组，
    	  //同理取元素对象时要通过索引
    4）var a2 = document.getElementsByName("blist"); 
     //NodeList节点数组类型，同理要通过索引取对象

以下两个为**静态获取**，即一开始就写在页面中的，通过选择器来获取元素

document.querySelector();//返回单个元素
    document.querySelectorAll();//返回多个元素，一个NodeList集合
    
    e)var a4 = document.querySelector("#binfo");//返回单个元素，即使是多个同名class也只返回第一个class的元素
    f)var a5 = document.querySelectorAll("#binfo1");//返回多个元素

**特定的元素获取方式**

g)  console.log(document.body);  //获取body
    h） console.log(document.documentElement);//  获取html

## dom事件的操作 ##

#### 1. 键盘事件 鼠标事件 表单事件 浏览器事件 ####

a)  onkeydown  onkeyup onkeypress
    b)  onmouseover,onmousemove,onmouseout（包含垂直离开）
    	onmouseleave(水平离开)  onclick  ondblclick（双击执行）  
    	onmousedown onmouseup  
    	oncontentmenu (右键目录栏，return false取消右键事件)
    c) onfocus   onblur   onselected  onchange
    d) onload   onreload   onresize（改变尺寸）    onerror

#### 2. 事件在js里面有多少种写法：3种 ####

此处的举例代码前提  
![在这里插入图片描述][20190802212108459.png]

*  直接在网页上写
    
    function showname() \{  
    alert(“张三”);  
    \}
 *  动态绑定事件

var btn = document.querySelector("#btn");
            btn.onclick = function () {
            alert("你点我");
                btn.onclick=null;//单击一次后不再出现弹框
            }
       btn.onclick=showalert();//不加括号——否则在点击前就执行了函数
            function showalert(){//想要再重复提示弹框
            alert("你点我");
            }

*  事件的监听

**只有click点击事件**才能冒泡，且父元素和子元素都为点击事件  
1、如果不解除事件的效果则使用匿名函数，如果需要解除则使用一般函数  
不解除：

var btn = document.querySelector("#btn");
        btn.addEventListener("click", function () {
            alert("1");
    });

需要解除：

var btn = document.querySelector("#btn");
        btn.addEventListener("click",show);//事件不加on
        function show() {
            alert("1");
            this.removeEventListener("click",show);
    }

#### 2、不能绑定多个事件，每次只能绑定一个事件 ####

#### 3、addEventListener共有三个参数：`event事件，function函数，useCapture`指定事件在捕获或冒泡阶段执行，布尔值，true为捕获，false为冒泡，默认为false冒泡 ####

默认冒泡，从内到外执行

var ul = document.getElementsByTagName("ul");
    var li = document.getElementsByTagName("li");
    ul[0].addEventListener("click", function (e) {
        console.log(1);
    });
    li[0].addEventListener("click", function (e) {
        console.log(2);
    });

结果：  
![在这里插入图片描述][2019080221225038.png]  
加上参数true后

var ul = document.getElementsByTagName("ul");
    var li = document.getElementsByTagName("li");
    ul[0].addEventListener("click", function (e) {
        console.log(1);
    },true);
    li[0].addEventListener("click", function (e) {
        console.log(2);
    },true);

> 输出为1，2

#### 4、处理事件冒泡,即要**阻止事件冒泡**，事件的**执行参数为e event**，写在函数参数中，在原生js里面阻止事件冒泡是 `e.stopPropagation();`后期框架中为`return false;` ####

在子元素中加上 `e.stopPropagation();阻止冒泡，输出为2`

#### 5、**事件的执行参数为e event**\-有开发者使用的相关属性和方法 ####

*  1）事件的执行对象直接添加事件匿名函数上面

document.body.onkeypress=function (e){
            console.log(e);
        }

除了键盘事件外也可以为鼠标事件（以坐标为主），屏幕事件等  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 6]  
得到键盘键入后的所有对象  
便可直接调用

document.body.onkeypress=function (e) {
            //1.事件的执行对象直接添加事件匿名函数上面
            //获取按键键值
            console.log(e.keyCode);
    }

> 输出键入字符的ascii码

*  2）可以直接声明变量使用window.event 调用事件的执行对象

document.body.onkeypress=function () {
            var e = window.event;
            console.log(e);
        }

同样可以输出结果  
鼠标事件

document.body.onmousemove=function (e){
         console.log(e.pageX, e.pageY);//获取坐标
         }

#### 6、事件的委托 click事件委托 ####

var ul = document.getElementsByTagName("ul")[0];
        var li = document.getElementsByTagName("li")[0];
        ul.onclick = function (e) {
            //输出的当前点击的元素
            //1.找到委托的元素对象
            var child = e.target || e.srcElement;
    
            console.log(e);
            if (child.nodeName.toLowerCase() == "li") {
            //toLowerCase转化为小写
                console.log(1);
            }
        }

> 找到ul下的li元素时输出1

#### 7、Js中的this指针 ####

*  函数里面的this 指代window对象

function showData() {
            console.log(this);
        }
        showData();

> 输出为window

*  事件里面的this指代当前执行事件的对象

var btn = document.querySelector("#btn");
        btn.onclick = function () {
            console.log(this);
        }

> 输出为`<button id="btn">按钮</button>`

*  js中的自定义对象 this 对象

[20190802210228985.png]: /images/20211109/a07aab31acbf4c96a35bcaa67807c4db.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]: /images/20211109/53b5e6aba9d547258e8d9ed909b23603.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 1]: /images/20211109/b5d6144754b44f1c91f7aefea8fb8633.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 2]: /images/20211109/7a5b91cefbb74a9eb4907c32680c5ba6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 3]: /images/20211109/a2b11eb251ee45fba937c66c7d8960cd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 4]: /images/20211109/0417b4e7ca294ed394c9682b77bae867.png
[20190802210857420.png]: /images/20211109/f2cc336e57c74f0f9f9220ae9b486603.png
[20190802210923571.png]: /images/20211109/db0c57091ed14a4eb7ee703d7f855ba9.png
[2019080221095637.png]: /images/20211109/7d3e9c8e765447dc827418431b923717.png
[20190802211050496.png]: /images/20211109/1b0a79395a2b4fc6a70d97711441637e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 5]: /images/20211109/78eea993631140a2aabda99fecd6cb6a.png
[20190802211135755.png]: /images/20211109/5a89270dc04e4c6994dcffde55751f2e.png
[20190802211252455.png]: /images/20211109/7f94916c1e06457eb5aef62b0e902499.png
[20190802211620814.png]: /images/20211109/561b4ebd3a9a4f58befd15636dbd2beb.png
[2019080221165216.png]: /images/20211109/7e72ea645eb4486ba42db1593befb07a.png
[20190802212108459.png]: /images/20211109/9f61b062f9da476cb5ee5da131e19600.png
[2019080221225038.png]: /images/20211109/9322b8361be343ee844039146019e234.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 6]: /images/20211109/b04ddc62e1cc46cf9acf4794fb514d09.png