天天看点
返回

（javascript学习）复习记录21.iterator2.函数3.变量的作用域4.方法的定义和调用 apply5.Date日期对象6.json7.面向对象编程8.class继承9.操作BOM对象10.操作DOM对象（获取）11.更新节点12.删除节点13.创建和插入DOM节点14.操作表单（验证）15.验证表单16.jQuery17.jquery事件

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等价

调用函数

参数问题，可以向函数传0或很多参数，不会报错

所以需要加异常处理， eg：

function abs(x) {
        if(typeof x !=='asd')
        {
            throw "not number";
        }
        if (x >= 0) {
            return x;
        } else {
            return -x;
        }
    }

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()//刷新网页

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事件

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

鼠标事件

（javascript学习）复习记录21.iterator2.函数3.变量的作用域4.方法的定义和调用 apply5.Date日期对象6.json7.面向对象编程8.class继承9.操作BOM对象10.操作DOM对象（获取）11.更新节点12.删除节点13.创建和插入DOM节点14.操作表单（验证）15.验证表单16.jQuery17.jquery事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    cdn引入-->
    <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>
<!--
公式  ： $(selector).action()
-->
</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>
javascript node.js html5
上一篇: AD7124-8使用说明与程序
下一篇: 回溯法迷宫求解

继续阅读