（javascript学习）复习记录2

偏执的太偏执、 2022-09-12 03:46 99阅读 0赞

# 1.iterator #

用for of遍历（相当于迭代器遍历）

var arr = [3,2,4];
    for(var x of arr)
    {
        
    console.log(x);
    }
    //打印键值对
    var map = new Map([[1,2,][,3,4]])
    for(let x of map)
    {
        
    console.log(x);
    }

for in遍历（下标访问）

var age = [1,2,3,4,5,6];
    //for var index in object)
    for(var num in age){
        
    if(age.hasOwnProperty(num)){
        
    console.log(age[num]);
    }
    }

# 2.函数 #

方法：对象（属性，方法）

## 定义函数 ##

1.eg：

function abs(x) {
        
            if (x >= 0) {
        
                return x;
            } else {
        
                reuturn - x;
            }
        }

如果没有执行return，函数执行完也会返回结果，结果为undefined  
2.eg：

var abs = function (x)
    {
        
        if (x >= 0) {
        
            return x;
        } else {
        
            return -x;
        }
    }

这里的function（x)\{…\}为一个匿名函数  
方式1和方式2等价

## 调用函数 ##

abs(10) //10

参数问题，可以向函数传0或很多参数，不会报错  
所以需要加异常处理， eg：

## arguments ##

关键字，代表传入进来的所有参数，其为数组类型，可以通过数组遍历传入的参数。  
问题：arguments会包含所有参数，有时候需要排除已用参数而只使用多余参数。

## rest ##

ES6新特性，获取除已定义参数外的多余参数  
eg：

//用arguments
        function f(a,b) {
        
            console.log(a);
            console.log(b);
            if(arguments.length>2)
            {
        
                for(var i=2;i<arguments.length;i++)
                {
        
                    console.log(arguments[i]);
                }
            }
            
        }
        //用rest
            function f(a,b,...rest) {
        
            console.log(a);
            console.log(b);
            console(rest);
    
        }

# 3.变量的作用域 #

在JavaScript中var定义是有作用域的  
函数体内定义变量只能在函数体内使用

内部函数可以访问外部函数成员变量，反之不行

假设在JavaScript中函数查找变量从自身函数开始，由内向外查找，假设外部存在同名变量，内部变量会屏蔽外部变量

**全局变量window**  
window.x  
默认全局变量均绑定在window对象下

var x = 1;
    alert(x);
    alert(window.x);
    window.alert(x);
    window,alert(window.x);
    //alart函数也是window对象的一个方法

说明可以把alert重写  
eg：

window.alert = function(){
        
    }

alert即失效

**用let去定义局部变量域的变量**

**ES6中引入常量 const 只读变量**

# 4.方法的定义和调用 apply #

## 方法 ##

var MCL = {
        
            name :"MCL",
            birth:2002,
            age:function (){
        
                var now=new  Date().getFullYear();
                return now-this.birth;
            }

如果使用函数，则其实是在使用window的方法

可以用函数.apply(对象名，参数）来确定this的指向

var MCL = {
        
            name :"MCL",
            birth:2002,
            }
        function getAge(){
        
            var now=new  Date().getFullYear();
            return now-this.birth;
    	
        }
        getAge().apply(MCL,[])

# 5.Date日期对象 #

用 typeof xxx 返回 其数据类型

typeof MCL
    'object'
    typeof NaN
    'number'
    typeof true
    'boolean'

let now = new Date();
        now.getFullYear();//年
        now.getMonth();//月
        now.getDay()//日
        now.getHours()//时
        now.getMinutes();//分钟
        now.getSeconds();//秒

# 6.json #

格式  
对象都用\{ \}  
数组用 \[ \]  
所有的键值对都是key;value

//对象解析为json
    var json = JSON.stringify(MCL)
    //json字符串转化为对象
    var obj = JSON.parse('{"name":"MCL","age":19}');

json和js对象区别

var obj = {
        a:"123",b:12};
    var json = '{"a":12,:b"::"ads"}';

**Ajax**  
原生的js写法 xhr异步请求  
jQuey封装的方法  
axios 请求

# 7.面向对象编程 #

# 8.class继承 #

ES6引入  
class

class Student{
        
            constructor(name) {
        //构造器
                this.name = name;
            }
            hello(){
        
                alert(:this.hello());
            }
        }
        var xiao = new Student("xiaoming");

继承

class xiaoStudent extends Student{
        
            constructor(name,grade) {
        
                super(name);
                this.grade = grade;
      }

object()的原型对象为objec.prototype  
objec.prototype的构造方法为object()

# 9.操作BOM对象 #

BOM：浏览器对象模型

window对象  
代表浏览器窗口

window.innerHeiht
    window.innerWidth

Navigator 封装浏览器信息

navigator.appVersion
    '5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36'
    navigator.userAgent
    'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36'
    navigator.platform
    'Win32'

大多数时候不会使用navigator，容易被人为修改  
不建议使用

screen  
屏幕尺寸

screen
    Screen {
        availWidth: 1536, availHeight: 824, width: 1536, height: 864, colorDepth: 24, …}
    screen.width
    1536

location  
代表当前页面的URL信息

location
    Location {
        ancestorOrigins: DOMStringList, href: 'http://localhost:63342/javascript/lesson1/fitst_1.html?_ijt=f2iot7vgrq6su51c1tpi806kl', origin: 'http://localhost:63342', protocol: 'http:', host: 'localhost:63342', …}
    hash: ""
    host: "localhost:63342"
    hostname: "localhost"
    href: "http://localhost:63342/javascript/lesson1/fitst_1.html?_ijt=f2iot7vgrq6su51c1tpi806kl"
    origin: "http://localhost:63342"
    pathname: "/javascript/lesson1/fitst_1.html"
    port: "63342"
    protocol: "http:"
    reload: ƒ reload()//刷新网页

lacation.assign("   ")

document  
代表当前的页面 HTML DOM文档数

document.title
    document.cookie
    document.getElementById(" ")

获取的具体文档数结点

history  
代表浏览器的历史记录

history.back()
    history.forward()

# 10.操作DOM对象（获取） #

文档对象模型  
浏览器网页就是一个DOM树形结构

更新：更新DOM节点  
遍历DOM节点；得到DOM节点  
删除DOM节点  
添加DOM节点

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="father">
    <h1>biaoti1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
    </div>
    <script>
      var h1 = document.getElementsByTagName("h1");//标签获取
      var p1 = document.getElementById("p1");//id获取
      var p2 = document.getElementsByClassName("p2");//class获取
      var div = document.getElementById("father");//id获取
      var children = div.children;//获取父节点下的子节点
      
    </script>
    
    </body>
    </html>

# 11.更新节点 #

操作文本

id1.innerText="456";//修改文本的值
    id1.innerHTML = '<p>123<p>';//解析文本标签

操作css

id1.innerText='12233';
      id1.style.color = 'yellow';
      id1.style.fontSize = '20px';
      id1.style.padding = '2em';

# 12.删除节点 #

步骤：  
1.获取父节点  
2.通过父节点删除自己  
eg:

var self = document.getElementById('p1');
    var father = p1.parentElement;
    father.removeChild(p1);
    //删除是一个动态的过程
    father.removeChild(father.children[0]));

# 13.创建和插入DOM节点 #

var newP = document.createElement('p');//创建一个p标签
    newP.id = 'newP';
    newP.innerText = 'ada'; 
    father.appendChild(newP);
    
    var myScript = document.createElement("script");
    myScript.setAttribute('type','text/javascript');
    myScript.innerHTML = " ";//在这可以直接写代码了

# 14.操作表单（验证） #

文本框 text  
下拉框 < select >  
单选框 radio  
多选框 checkbox  
隐藏域 hidden  
密码框 password  
获取节点后，用.value获得  
…

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <form action="post">
        <span>用户名</span><input type="text" id="name">
    
    </form>
    <script>
        var name =document.getElementById('name');//得到用户名
    	var now = name.value;
    
    </script>
    </body>
    </html>

# 15.验证表单 #

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <form action="post">
        <p><span>用户名</span><input type="text" id="uesrname"></p>
        <p><span>用户名</span><input type="password" id="password"></p>
        <button type="button" onclick="check()">提交</button>
    
    </form>
    <script>
        //绑定事件
        function check(){
        
         var uname =    document.getElementById("uesrname");
         var upass =    document.getElementById("password");
         console.log(uname.value);
         //upass.value = md5(upass.value);
    
        }
    
    
    </script>
    </body>
    </html>

# 16.jQuery #

原生js，选择器少，麻烦不好记

存在大量javascript函数

引入后使用即可

公式 ：$(selector).action(  
)

$('p').click();
    $('#id1').click();
    $('.class1').click();
    //选择器

# 17.jquery事件 #

鼠标事件，键盘事件，其他事件

鼠标事件  
![在这里插入图片描述][ca4bb9db421d41718d2310e173737ba3.png]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
        <style>
            #divmove{
        
                width: 1000px;
                height: 1000px;
                border: 1px solid red;
            }
        </style>
    
    </head>
    <body>
    mouse <span id="move" ></span>
    <div id="divmove">
        移动鼠标
    </div>
    <a href="" id="test">点我</a>
    <script>
     //当网页加载完后响应事件
     // $(function (){
        
     //
     // })
     $(function (){
        
         $("#divmove").onmousemove(
             function (e){
        
                 $("#move").text('x'+e.pageX+'y'+e.pageY)
             }
         )
     });
    
    
    
    </script>
    </body>
    
    </html>

[ca4bb9db421d41718d2310e173737ba3.png]: /images/20220828/0812bd2be30945f3be2b972679058d8e.png