2021-6-23--------------06javaScript

最新推荐文章于 2024-09-22 11:17:00 发布

我卡在门缝里了>_<

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量205

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/qq_44494957/article/details/118145481

版权

06javaScript

javaScript框架
UI框架：
javaScript构建工具
1.什么是javascript?
- 1.1概述
- 特点
- 1.2ECMAscript
2.入门
- 引入方式二：
- 2.0、js语法-----变量
- - 局部变量和全局变量
  - - 局部变量
    - 全局变量
- 2.1内部引用：
- 2.2外部引用：
- 2.3基本语法
- 2.4数据类型
3.数据类型
- - 字符串
- 复杂数据类型
- 3.4流程控制
- 3.5Map和Set
- 3.6iterator
- 4.2变量的作用域
- 4.3全局函数
- 4.4局部作用域:let
- 4.5常量const
5.方法
JSON
- - JSON和JS的转换
- 5.3AJAX
6.面向对象编程
- 6.1什么是面向对象
- 原型：模版
- class 继承
8、DHTML 动态超文本标记语言
- 7、操作BOM（浏览器对象模型）
- DOM（文档对象模型）
9、操作表单（验证）
10、避免问题
11、JQuery
- 选择器
- 事件
- 操作DOM
- css操作
- 元素的显示和隐藏
- 扩展
let和var的区别

javaScript框架

Jquery不是框架，是一个库

vue

UI框架：

Ant—Design,ElementUI,BootStrap,AmazeUI

javaScript构建工具

WQebPack:模块打包器，主要作用是打包，压缩，合并及按序加载

Babel：JS编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript

1.什么是javascript?

1.1概述

javascript是一门最流行的脚本语言

一个合格的后端人员必须精通javascript

特点

跨平台性
基于对象
脚本语言

1.2ECMAscript

他可以理解为javascript的一个标准

最新版本已经到了ES6，但是大部分的浏览器只支持es5代码上，版本不一致

2.入门

引入方式二：

<!--    不能写成自闭标签，否则不能生效-->
    <script type="text/javascript" src="1.js">

    </script>
1.js
alert("a");

2.0、js语法-----变量

js中定义变量可以接收任意类型的数据，js是一门弱语言

局部变量和全局变量

局部变量

var 变量名称=初始化值；局部变量（只能在当前范围内生效）

全局变量

变量名称=初始化值----在变量后面所有位置都可以生效

a=1;

2.1内部引用：

<script>
    alert('Hello World');
</script>

2.2外部引用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
</head>
<body>

<!--外部引入-->
<!--注意：script必须成对出现-->
<script src="js/jq.js">

</script>
</body>
</html>

js/jq.js

alert('hello World')

注意：script必须成对出现

2.3基本语法

浏览器使用：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    <!--javas-->
    var i=1;
    var number='pc';

    //alert('num');
    // 2.条件类型
    if (i>1){
        alert('true')
    }
    console.log("pcy");//在控制台上面输出信息
</script>
</body>
</html>

2.4数据类型

数值，文本，图形，音频，视频-------

js不区分小数和整数

比较运算符

==等于（类型不一样，值一样，判断为true）
===	绝对等于（类型一样，值一样）
例子：
	console.log(null == undefined)
    console.log(null === undefined)

注意：

最好不要用== ,坚持用===
NaN===NaN//结果为false，与所有的值都不相等
只能通过isNaN(NaN)来判断是否是NaN

浮点数问题

console.log((1/3)===(1-2/3))

尽量避免使用浮点数进行运算，存在精度问题

Math.abs(1/3-(1-2/3))<0.00000001//判断是否等于

null和undefined

null：空

undefined:未定义

数组

js中的数组不需要类型相同

var p=[1,3,'s'];

new Array(1,'w');

对象

对象是大括号，数组是中括号

var people={
    name:'pen',
    age:3,
    tags:['js','html']
}

取对象的值

console.log(people.age)

变量

规范：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //    "use strict"严格检查模式，预防javascript的随意性导致产生的一些问题，必须写在javascript的第一行
    //局部变量建议度使用let去定义
    //前提设置idea支持ES6语法
    "use strict"
    //全局变量
    var i=1;
    //ES6 let   局部变量
    let i1=1;
</script>

</body>
</html>

3.数据类型

##基本数据类型
Number 数值型、String字符串类型、Boolean布尔型、Undefined未定义类型、Null空类型

字符串

不可变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //字符串：单引号和双引号都行
        "use strict"
        console.log("a\"");
        console.log('a\u4e2f');//Unicode字符
        console.log('\x41')//AscII字符
        //多行字符串编写
        //tab上面那个符号
        let msg=`
        hello
        world
        你好
        `
        //模版字符串
        let name="pcy";
        let msg1=`你好呀${name}`
        console.log(msg1)
        //字符串的长度
        let student="student";
        console.log(student.length)
        //字符串的下标
        console.log(student[0])
        //大小写转化,这里是方法
        console.log(student.toUpperCase())
        console.log(student.toLowerCase())
        //获取指定的下标
        console.log(student.indexOf('t'))
        //截取第几个到第几个
        console.log(student.substring(1,3))

    </script>
</head>
<body>

</body>
</html>

复杂数据类型

1.数组

var a=new Array();
    a[0]=1;
    a[99]=11;
    console.log(a);
    //第一种表现方式
    var a1=new Array(11);
    a1[10]=1;
    console.log(a1);
    //第二种表现方式
    var a2=new Array(1,2,"as",true);
    console.log(a2);
    //第三种表现方式
    var arr=[1,2,3,4];
    console.log(arr)

1.长度

只要给x.length赋值，就可以改变数组的长度，如果赋值较小，就会丢失一些数据

2.indexOf

通过元素获得下标索引

字符串的1和数字1是不同的

3.slice()

截取Array的一部分

4.push，pop(尾部),shift(),unshift()

push：添加数组元素 arr.push(“a”);
pop:删除数组最后一个元素
shift：删除数组第一个元素
unshift：压入头部

6.sort()

排序

7.元素反转

reverse()

8.concat()

注意：并没有修改数组，只是会返回一个新的数组

9、连接符join

打印拼接数组，使用特定的字符串连接

arr.join(’-’);

10、多维数组

数组：存储数据（如何存和如何取出）

2、对象

内置对象

内置对象：String,Boolean,Number,Array,Math,Date

标准对象

 typeof 123
"number"
typeof "123"
"string"
typeof NaN
"number"
typeof {}
"object"
typeof Math.abs
"function"

1Date

"use strict"
var date=new Date();

date.getFullYear();//年
date.getMonth();//月
date.getDate();//日
date.getHours();//时
date.getDay();//星期几
date.getSeconds();//秒
date.getMinutes();//分
date.getTime();//时间戳，全世界统一，1970 1.1 0:00:00
new Date(1612326597115);//得到当前时间


date.toLocaleDateString()//转换为本地时间

math

 		//绝对值
        console.log(Math.abs(-1));
        console.log(Math.ceil(2.00001));
        //向上制造型
        console.log(Math.floor(3.9999))
        console.log(Math.round(3.5));
        console.log(Math.random())

global

global.parseInt只输出数字

		console.log(parseInt("1223"))
        console.log(parseInt("123as"))//输出abc

正则对象
//匹配邮箱

自定义对象

对象是由一个大括号和多个键值对组成

无参构造来创建自定义对象

//定义了一个person属性
var person={
            name:"kuangshen",
            age:3,
            say:function () {
                return this.name+"1";
            }
        }
function Person(){
            
 }

有参构造来创建自定义对象

function Person(name,age){
            this.name=name;
            this.age=age;
}
var a=new Person("a",1);
console.log(a)

动态的删减属性

delete person.age

添加属性

person.sex='男'

判断属性值是否在这个对象中

'age' in person
//继承
'toString' in person

判断这个对象是否是自身拥有的

person.hasOwnProperty('age')

3.函数

方法：对象（属性，方法）
函数不能嵌套

3.1、定义函数

方式一基本定义函数：

function f(x) {
    if (x>0){
        return x;
    }
}
f(1)

一旦执行到return就结束

如果没有执行return,函数执行完也会返回结果，结果就是undefined

方式二：直接定义函数形式
匿名函数

let f=function (x) {
    if (x>0){
        return x;
    }
}
f(10)

方式三：动态定义函数

//变量可以接收函数
 let mx=new Function("a","b","return a+b;");
 console.log(mx(1,2))

参数问题

可以传任意的一个参数，也可以传多个参数，但是不报错

如何规避不传参数

function f(x) {
    //手动抛出异常
    if (typeof x!=="number"){
        throw "not is number";
    } 
    if (x>0){
        return x;
    }
}

//arguments可以检测所有传进来的参数
let f=function (x) {
    //拿到传进来的所有的参数
    for(let i=0;i<arguments.length;i++){
        console.log(arguments[i])
    }
    if (x>0){
        return x;
    }
}

问题：arguments会包含所有的参数，我们想要使用多余的参数来进行附加操作，需要排除已有的参数
arguments属性对象可以来接收所有传入参数值，可以遍历这个对象来操作这些值（遍历过程类似数组）

//如果传入的参数小于参数列表的参数个数，会把传入的参数值赋值给参数，剩余参数列表的参数没进行初始化就是undefined
    //拿数值和undefined运算结果是NaN
    
    function f(a,b) {
        console.log(a+b) ;
        for (var i=0;i<arguments.length;i++){
            console.log(arguments[i]);
        }
    }
    f(1);

rest获取除了已经定义的参数之外的参数

function f1(a,b,...rest) {
    console.log(a)
    console.log(b)
    console.log(rest)

}
f1(1,2,3,4,5,6)

rest参数只能定义在最后面，必须用…标识

3.4流程控制

if判断

var age=2;
if (age>1){
    alert('haha')
}

循环

var age=2;

while (age<100){
    age=age+1;
    console.log(age)
}

var age=2;
for (let i=2;i<100;i+5){
    console.log(i)
}

数组循环

var a=[1,2,3,4,5];
//num遍历的是索引
for(var num in a){
    console.log(a[num])
}
//foreach遍历
//函数遍历
a.forEach(function (value) {
    console.log(value)
})

3.5Map和Set

ES6的新特性

let map=new Map([['tom',100],['jack',99]]);
let name=map.get('tom')
console.log(name)
map.set('json',11)
console.log(map)

Set：无序不重复的集合

let a=new Set([1,2,4,5,2,1])
console.log(a)
a.add(6)//添加
console.log(a)
a.delete(1)//删除
console.log(a)
console.log(a.has(1))//是否存在

3.6iterator

//遍历map和set
let map=new Map([['tom',100],['jack',99]]);
for (let i of map){
    console.log(i)
}

let a=new Set([1,2,4,5,2,1])
for (let i of a){
            console.log(i)
        }

4.2变量的作用域

在javascript是有作用域的

假设在函数体中声明，现在函数体外不可以使用（闭包可以解决这个问题）

function f1(a,b,...rest) {
    var a=1;
    a=a+1;
}
a=a+1;

结论：内部函数可以访问外部函数的资源，反之则不行

所有的变量都要放在函数的头部，不要乱放，便于维护

4.3全局函数

//全局函数
var a=1;
alert(a);
alert(window.a);//等于,默认全局变量都会自动绑定在window对象下
window.alert(a)

alert()函数本身也是一个window对象

javascript是只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围就会找到，就会向外查找，如果没有找到就会报错RefrenceError

规范
由于我们所有的全局变量都会绑定到我们的window上，如果不同的js文件，使用了相同的全局变量，如何减少冲突？

<script>
    //字符串：单引号和双引号都行
    "use strict"
    //定义唯一一个一个全局对象
    var pcy={};
    pcy.name='pcy1';
    pcy.age=function (a,b) {
        return a+b;
    }
</script>

把自己的代码全部放入自己定义的唯一空间中，降低全局命名冲突的问题

例子：jQuery

4.4局部作用域:let

function f() {
    for (var i=1;i<100;i++){
        console.log(i)
    } 
    console.log(i+1);//出了这个作用域还能用
}

let关键字：解决作用域冲突问题

function f() {
    for (let i=1;i<100;i++){
        console.log(i)
    }
    console.log(i+1);//出了这个作用域还能用
}

介意使用let去定义局部变量作用域

4.5常量const

如何定义：只要用大写字母命名的变量都是常量，但是可以改变

所以ES6引入了常量关键字const

const i=1;
console.log(i)
//i=111;//报错了 readonly只读不能修改

5.方法

方法就是把函数放在对象的里面，对象只有两个东西：属性和方法

调用方法一定要带上（）；

var pc={
    name:'pcy',
    brithday:2000
    //方法
    age:function () {
        let now=new Date().getFullYear();
        return now - this.brithday;
    }
}
//调方法一定要带（）
pc.age()

this代表什么？上诉代码拆开

"use strict"
function getAge() {
    let now=new Date().getFullYear();
    return now - this.brithday;
}
var pc={
    name:'pcy',
    brithday:2000,
    //方法
    age:getAge
}
pc.age();ok
getAge();//不能如此调用

this是无法指向的，是默认指向调用它的那个对象

apply

在js中可以控制this的指向

"use strict"
function getAge() {
    let now=new Date().getFullYear();
    return now - this.brithday;
}
var pc={
    name:'pcy',
    brithday:2000,
    //方法
    age:getAge
}
pc.age();
getAge.apply(pc,[]);//代表this指向pc这个对象，参数为空

JSON

数据交换格式：BOSN,JSON

json概念

是一种轻量级的数据交换格式

提升网络传输效率

早期左右的数据传输习惯使用XML文件

在javascript一切皆为对象，任何js支持的类型都可以用JSON来表示

格式：

对象都用{}
数组都用[]
所有的键值对都是用key:value

JSON和JS的转换

var user={
    name:'qinjiang',
    age:3,
    sex:'男'
}
//对象转换为JSON字符串{"name":"qinjiang","age":3,"sex":"男"}
var jsonuser=JSON.stringify(user)
console.log(jsonuser)
//字符串转化为对象
var json1=JSON.parse('{"name":"qinjiang","age":3,"sex":"男"}');
console.log(json1)

区别：

js对象：var obj={name: "qinjiang", age: 3, sex: "男"}
JSON：var json='{"name":"qinjiang","age":3,"sex":"男"}'

5.3AJAX

原生的js写法：xhr异步请求

JQuery封装好的方法 $("#name").ajax("")

axios请求

6.面向对象编程

6.1什么是面向对象

类：模版

对象：具体的实例

在javascript需要换思维方式

原型：模版

var user={
    name:'qinjiang',
    age:3,
    run:function () {
        console.log(this.name+"run...")
    }
}
var xiaoming={
    name:"xiaoming",

};
//小明的原型是user
xiaoming.__proto__=user;
xiaoming.run()

function Student(name) {
    this.name=name;
}
//给student新增一个方法
Student.__prototype.hello=function () {

}

class 继承

class关键字、是在ES6引入的

//ES6之后
class Student{
    constructor(name){
        this.name=name;
    }
    hello(){
        alert('Hello World');
    }
    
}
var xiaoming=new Student("xiaoming");
xiaoming.hello();
class Xiaoxue extends Student{
    constructor(name,grade){
        super(name)
        this.grade=grade;
    }
    myGrade(){
        alert('我是小学生')
    }
}

原型链

8、DHTML 动态超文本标记语言

所谓的DHTML就是在HTML原有的内容基础上添加js访问接口，允许js访问页面中HTML内容（HTML和JS在一起使用的技术就是DHTML）

把html里的每个标签都看成是js对象
页面中HTML内容都会变成js文档树，通过DHTML技术来操作js文档树上js对象。实际就是来操作对应的标签

对于js对象的操作可以有增删改查。

7、操作BOM（浏览器对象模型）

浏览器介绍

javascript和浏览器的关系：

javascript是为了让他在浏览器中运行

BOM:浏览器对象模型

Chrome
Safari
FireFox
Opera

window

window代表浏览器窗口

window.innerHeight
633
window.innerWidth
747
window.innerHeight
348
window.alert(1)
undefined
window.outerHeight

Navigator

封装浏览器的信息

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36 OPR/73.0.3856.344"
navigator.platform
"Win32"

大多数我们不会使用Navigator，因为会被人为修改

不介意使用这些属性和编写代码

screen

代表屏幕尺寸

screen.width
1536
screen.height

<script>
        // window对象
    //    失去焦点
        /*window.οnblur=function () {
            alert("失去焦点");
        };
    //    获取焦点事件
        window.οnfοcus=function () {
            alert("获取焦点事件");
        }
        //文档就绪事件----等待页面加载完成之后触发事件
        window.οnlοad=function () {
            var div=document.getElementById("div1");
        }*/
        //确认对话框
        /*var flag=window.confirm("是否使用高奎华宝典");
        if (flag){
            alert("欲练此功")
        }else {
            alert("不练了")
        }
        //消息提示框
        var password=window.prompt("请输入密码：")
        if ("")*/
        //关闭浏览器
        // window.close();
        //指定毫秒值之后就会执行程序
        /*window.setInterval(function () {
            var div=document.getElementById("div1");
            var d=new Date();
            let s = d.toLocaleString();
            div.innerText=s;
        },1000)
        //指定出现内容的时间，只能执行一次函数内容·
        window.setTimeout(function () {
            console.log("已经过了三秒");
        },3000)*/
        // location----地址栏对象
        /*
        hash        设置获取href属性中在"#"后面的分段

         */
        /*console.log(location.hash)
        console.log(location.host)
        location.hostname
        console.log(location.href)
        console.log(screen.availHeight)//获取屏幕的工作区的高度
        console.log(screen.availWidth)
        //history
        function back(){
            // window.history.back();
                window.history.go(-1)
        }

        //后退到前一个页面
        function forward(){
            window.history.forward();
        }*/
        console.log(window.navigator.appCodeName)
        console.log(window.navigator.appName)
        console.log(window.navigator.appVersion)

    </script>
</head>
<body>
    <div id="div1">div</div>
    <input type="button" value="后退" onclick="back()">
    <input type="button" value="前进" onclick="forward()">
</body>

location

代表当前页面的URL信息

location.assign('www.baidu.com')//可以跳转新的网页
location.reload()//重新刷新网页

document

代表当前的页面，HTML DOM文档

document.title

document.title='pcy'

获取具体的文档树节店

    <script>

        var dl=document.getElementById('el')

    </script>
</head>
<body>
<dl>
    <dt id="el">javase</dt>
    <dd>javaee</dd>
    <dd>HTML</dd>
</dl>
</body>
</html>

document.cookie//获取cookie
劫持cookie原理
<script src="aa.js"></script>
aa.js里面写上document.cookie可以获取你的cookie

服务器端可以设置cookie:httpOnly//只读

history

代表浏览器历史记录

history
History {length: 1, scrollRestoration: "auto", state: null}
history.back()//后退
undefined
history.forward()//前进
undefined

DOM（文档对象模型）

文档对象模型

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>如何通过document获取数据</title>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
	<script type="text/javascript">
		function demo1(){
		var username = document.getElementById("username");
		alert(username.value);
	}
		function demo2(){
			var elements = document.getElementsByName("password");
			for(var i=0;i<elements.length;i++){
				alert(elements[i].value);
			}
		}
		function demo3(){
			var elms = document.getElementsByTagName("input");
			for(var i=0;i<elms.length;i++){
				alert(elms[i].value);
			}
		}
		function demo4(){
			var p = document.getElementById("pid");
			//alert(p.innerHTML);
			//alert(p.innerText);
            //设置对象html内容
			//p.innerHTML = "<font color='green'>真好</font>";
		}
	</script>
	
</head>
<body>

	用户名称：<input type="text" name="username" id="username"/><br />
    用户密码：<input type="password" name="password" id="password" /><br />
    用户密码2：<input type="password" name="password" id="password2" /><br />
    
    <hr />
    <input type="button" value="通过ID获取节点的值" onclick="demo1()"/>
    <input type="button" value="通过NAME获取节点的值"  onclick="demo2()" />
    <input type="button" value="通过TAG获取节点的值" onclick="demo3()" />        
    
    <hr  />
    <p id="pid"><font color="red">获取P标签中的文字</font></p>
	<input type="button" value="获取P中文字" onclick="demo4()" />
	
</body>
</html>

浏览器网页就是一个Dom节点

更新：更新Dom节点
遍历：得到Dom节点
删除：删除一个Dom节点
添加：添加一个Dom节点

要操作一个Dom节点,必须要获得一个Dom节点

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<!--注意必须将html写在javascript上面，否则会报错-->
<script>

    var  h1=document.getElementsByTagName('h1')
    var p1=document.getElementById("p1")
    var father=document.getElementById('father')
    var p2=document.getElementsByClassName('p2')
    let children = p2.children;
    p2.firstChild;

</script>

这是原生代码，以后尽量使用jQuery

更新节点

操作文本

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>节点的增删改查</title>
<!--加入样式表-->
<style type="text/css">
div {
	border:#0099FF 1px solid;
	height:60px;
	width:120px;
	margin:20px 0px 20px 20px;
	padding:10px 0px 0px 20px;
	}
	
#div_1{
	background-color:#00FFFF;
	}
	
#div_2{
	background-color:#FF3399;
	}
	
#div_3{
	background-color:#0000FF;
	}
	
#div_4{
	background-color:#FFFF66;
	}

</style>

<script>
    //创建并添加节点
    function addNode() {
        //创建新增节点
        var new_div=document.createElement("div")
        new_div.innerHTML="<font color='#8a2be2'>我的div1</font>";
        // 获取body节点对象
        var parentNode = document.getElementsByTagName("body")[0];
        //把新节点的元素赋值给父节点
        // parentNode.appendChild(new_div);//只能把我们的新节点追加到父节点的末尾
        var div_4 = document.getElementById("div_4");
        parentNode.insertBefore(new_div,div_4);
    }
    function deleteNode() {
        let parentNode = document.getElementsByTagName("body")[0];
        let div_2 = document.getElementById("div_2");
        parentNode.removeChild(div_2);
    }

    function updateNode() {
        let new_div = document.createElement("div");
        new_div.innerHTML="updatediv";
        let parentNode = document.getElementsByTagName("body")[0];
        let div_3 = document.getElementById("div_3");
        parentNode.replaceChild(new_div,div_3)
    }
    function copyNode() {
        let parentNode = document.getElementsByTagName("body")[0];
        let div_1 = document.getElementById("div_1");
        let node = div_1.cloneNode(true);
        parentNode.appendChild(node);
    }

</script>

</head>



<body>
    <div id="div_1">
		
    </div>
    
    <div id="div_2">
    div区域2
    </div>
    
    <div id="div_3">
   	 div区域3
    </div>
    
    <div id="div_4">
    div区域4
    </div>
    
    <hr />
    <input type="button" value="创建并添加节点" onclick="addNode()" />
    <input type="button" value="删除节点" onclick="deleteNode()" />
    <input type="button" value="替换节点" onclick="updateNode()" />
    <input type="button" value="克隆节点" onclick="copyNode()" />

</body>
</html>

<div id="id1">

</div>
<!--注意必须将html写在javascript上面，否则会报错-->
<script>

    let elementById = document.getElementById('id1');
    elementById.innerText='123';//修改文本值
    elementById.innerHTML='<strong>123</strong>'可以解析HTMl标签

操作CSS

elementById.style.color='red';
elementById.style.fontSize='200px'//转驼峰命名问题

删除节点

先获取父节点
再通过父节点删除自己

<div id="father">
        <h1>标题一</h1>
        <p id="p1">p1</p>
        <p class="p2">p2</p>
    </div>

    </div>
    <!--注意必须将html写在javascript上面，否则会报错-->
    <script>
        var father=document.getElementById('father')
        //删除是一个动态的过程
        father.removeChild(father.children[0])

    </script>

删除多个节点的时候，children是动态变化的，删除节点的时候一定要注意

插入节点

我们不能覆盖节点，获得了某个Dom节点，假设这个dom节点是空的，我们通过innerHTMl就可以增加一个元素，但是这个DOM已经存在元素了，就会覆盖原来已有的元素

追加

<p id="js">java</p>
    <div id="list">
        <p id="js1">JavaSE</p>
        <p id="js2">JavaEE</p>
        <p id="js3">JavaME</p>
    </div>
    <!--注意必须将html写在javascript上面，否则会报错-->
    <script>
        //第一种方式
        var list1 = document.getElementById('list');
        let js = document.getElementById('js');
        list1.appendChild(js)
        //第二种方式
        let newp = document.createElement('p');
        newp.id='js1';
        newp.innerText='python';
        list1.appendChild(newp);
    </script>

insert

<div id="list">
    <p id="js1">JavaSE</p>
    <p id="js2">JavaEE</p>
    <p id="js3">JavaME</p>
</div>
<!--注意必须将html写在javascript上面，否则会报错-->
<script>
    let js1 = document.getElementById('js1');
    let js = document.getElementById('js');
    let list = document.getElementById('list');
    //插入前面newNode,oldNode
    list.insertBefore(js,js1)
</script>

9、操作表单（验证）

表单是一个DOM树

文本框test，下拉框select，隐藏域hidden，密码框password，单选框radio

表单作用：提交信息

获得要提交的信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <form action="">
        <p>
            <span>用户名：</span>
            <input type="text" id="username" value="username">
        </p>
        <p>
            <span>性别：</span>
            <input type="radio" id="girl" name="sex">女
            <input type="radio" id="boy" name="sex">男
        </p>
    </form>
    
    <script>
        let id = document.getElementById('username');
        console.log(id.value)
        id.value='123'
        console.log(id.value)
        //对于多选框，单选框时value只能选择固定的值
        let boy=document.getElementById('boy');
        console.log(boy.checked);//如果为true,则是选中的
    </script>
</head>
<body>

提交表单

MD5加密级别

md5链接：https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js

第一种：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--MD5加密-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
    <form action="https://www.baidu.com" method="post">
        <p>
            <span>用户名：</span>
            <input type="text" id="username" value="username"><br>
            <span>密码：</span>
            <input type="password" id="password" value="password">
        </p>
        <p>
            <span>性别：</span>
            <input type="radio" id="girl" name="sex">女
            <input type="radio" id="boy" name="sex">男
        </p>
        <!--绑定时间onclick被点击-->
<p>
    <button type="submit" onclick="a()">提交</button>
</p>
    </form>

    <!--注意必须将html写在javascript上面，否则会报错-->
    <script>

        function a(){
            let username = document.getElementById('username');
            let password=document.getElementById('password');
            console.log(username.value)
            //MD5 算法
            password.value=md5(password.value);
            console.log(password.value)
            return true;
        }

    </script>
</head>
<body>
</body>
</html>

第二种：（最优）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--MD5加密-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
    <!--表单级别-->
    <form action="https://www.baidu.com" method="post" onsubmit="return a()">
        <p>
            <span>用户名：</span>
            <input type="text" id="username" value="username"><br>
            <span>密码：</span>
            <input type="password" id="password" value="input-password">
            <input type="hidden" id="pwd">
        </p>
        <p>
            <span>性别：</span>
            <input type="radio" id="girl" name="sex">女
            <input type="radio" id="boy" name="sex">男
        </p>
        <!--绑定时间onclick被点击,按钮级别-->
<p>
    <button type="submit" onclick="a()">提交</button>
</p>
    </form>

    <!--注意必须将html写在javascript上面，否则会报错-->
    <script>

        function a(){
            let username = document.getElementById('username');
            let password=document.getElementById('input-password');
            let password1=document.getElementById('pwd');
            console.log(username.value)
            //MD5 算法
            password1.value=md5(password.value);
            console.log(password1.value)
            //true是提交表单，false是阻止提交
            return true;
        }

    </script>
</head>
<body>


</body>
</html>

10、避免问题

/*if (a==1){
    console.log("买东西");
}else {
    console.log("不买东西")
}*/
if (1==a){
    console.log("买东西");
}else {
    console.log("不买东西")
}

11、JQuery

javascript和jQuery

JQuery是一个库，里面存在大量的javascript函数

获取JQuery?https://jquery.com

文档：

https://www.w3school.com.cn/r.asp
https://www.runoob.com/jquery/jquery-tutorial.html
https://jquery.cuishifeng.cn
CDN jQuery
https://www.jq22.com/cdn/

如何使用jquery?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="lib/jquery-3.5.1.min.js"></script>
<!--
公式： $(selector).action()
-->
</body>
</html>

<script src="lib/jquery-3.5.1.min.js"></script>
<!--
公式： $(selector).action()
-->
<a href="" id="test-jqery">点我试试</a>
<script>
    document.getElementById('test-jqery')
    //选择器就是CSS的选择器
    $('#test-jqery').click(
        function () {
            alert('Hello World')
        }
    )

</script>

选择器

<a href="" id="test-jqery">点我试试</a>
<script>
    document.getElementById('test-jqery')
    //选择器就是CSS的选择器
    //id选择器
    $('#test-jqery').click(
        function () {
            alert('Hello World')
        }
    )
    //标签选择器
    $('a').click(
        function () {
            alert('Hello World')
        }
    )
    //class选择器
    $('.class').click(
        function () {
            alert('Hello World')
        }
    )
</script>

事件

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="lib/jquery-3.5.1.min.js"></script>
<!--
公式： $(selector).action()
-->
<style>
    #divMove{
        width: 1000px;
        height: 1000px;
        border: 1px solid red;
    }
</style>
<!--获取鼠标的坐标-->
mouse:<span id="mouseMove"></span>
<div id="divMove">
    移动鼠标试试
</div>
<script>
  //当页面加载完毕之后，响应事件
  //   $(document).ready(function () {
  //
  //   });
    $(function () {
        $('#divMove').mousemove(function (e) {
            $('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
        })
    });
</script>
</body>
</html>

操作DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="lib/jquery-3.5.1.min.js"></script>
<!--
公式： $(selector).action()
-->
<ul class="test-ui">
    <li name='python'>javascript</li>
    <li>java</li>
</ul>
<!--属性选择器-->
<script>
    //获得值
    $('.test-ui li[name=python]').text()
    //设置值
    $('.test-ui li[name=python]').text('python')

    $('.test-ui li[name=python]').html()

</script>
</body>
</html>

css操作

$('.test-ui li[name=python]').css({"color":"red"})

元素的显示和隐藏

//$('.test-ui li[name=python]').show()//显示
$('.test-ui li[name=python]').hide()//隐藏

扩展

$(window).width()
747
$(window).height()
634

巩固JS(看游戏源码)

Layui

https://element.eleme.cn/#/zh-CN/component/layout

let和var的区别

作用域不同
var的作用域作用在函数上，let作用域作用在块上，块作用域要比函数作用域小一些，但是如果两者既没在函数中也没再函数上，那么两者都是全局作用域
被let声明的变量不会作为全局对象window的属性，而被var声明的变量却可以
在块作用域中，let只能在for（）循环上可用，而var整个函数体内都是可见的
let可以允许在同一作用域中声明同名的变量，而let不可以

我卡在门缝里了>_<

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫