JavaScript

1. 概述

JavaScript是目前最流行的脚本语言,在你的手机,电脑等交互逻辑都是通过JavaScript实现的

重要性:一个合格的后端人员,必须要精通JavaScript

ECMAScript是一种语言标准,JavaScript是网景公司对ECMAScript标准的一种实现。

最新版本已经到es6版本,但是大部分浏览器还只停留在支持es5代码上

导致:开发环境—线上环境,版本不一致

2. 快速入门

2.1 引入JavaScript

内部标签引入:

 <script>
     alert("hello world");
 </script>

外部引入:

 外部文件代码:
 alert("hello world");
 
 引入文件:
 <script src="js/abc.js"></script>
 
 <!--不用显式定义type,默认就是javascript  所以下行代码写不写都可-->
 <script type="text/javascript"></script>

2.2 基本语法入门

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <script>
         // 1. 定义变量 所有定义变量都是用var定义
         var num=10;
         // alert(num);
 
         // 2. 条件控制
         var score=99;
         if (score>=80 && score<=100){
             alert("优秀");
        }else if (score>=60 && score<80){
             alert("良好");
        }else if (score>=0 && score<60){
             alert("还须努力");
        }else {
             alert("请输入正确成绩!");
        }
     </script>
 
 </head>
 <body>
 
 </body>
 </html>

 

浏览器必备调试须知:

 

Elements:元素 左边是html代码 右边styles是css代码

Console:控制台 console.log() 在浏览器的控制台打印变量 相当于Java中的 System.out.println()

 

Sources:来源 可以打断点进行查看运行过程

NetWork:网络请求

Application:相当于web里面的数据库 可以存一些简单的数据保存在网页里面

2.3 数据类型

数值、文本、图形、音频、视频……

变量:

 var name = "zcc";

number:

js不区分小数和整数,Number

 1      //整数1
 1.1    //浮点数1.1
 -1     //负数-1
 NaN    //not a number
 Infinity  //表示无限大

字符串:

‘abc’ “abc”

布尔值:

true false

运算逻辑:

 &&   与  两个都为真,结果为真
 ||   或  两个都为假,结果为假
 !    非  真即假  假即真

比较运算符:

 =
 ==  等于(类型不一样,值一样  也会判断为true)
 === 绝对等于(类型一样,值一样 结果为true)

这是一个js的缺陷,坚持不要使用==比较

须知:

  • NaN===NaN,结果为false NaN与所有的数值都不相等,包括自己

  • 只能通过isNaN(NaN)来判断这个数是否是NaN

浮点数问题:

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

上方比较的两边都是无线不循环小数,应尽量避免使用浮点数进行运算,存在精度问题

null和undefined:

  • null 空

  • undefined 未定义

数组:

Java的数值必须是相同类型的对象,JS中不需要这样:

 var arr=[1,2,5,'s',"超",null,true];
 
 console.log(arr[4])
 >
 
 //取数组下标,如果越界了,不报错 输出undefined
 console.log(arr[10])
 >undefined

对象:

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

每个属性之间用英文逗号隔开,最后一个不需要添加

 var zcc={
     name: "常超",
     age: 18,
     hobby:["code","study","sleep","play","eat"]
 }
 
 //取对象的值
 zcc.hobby
 >['code', 'study', 'sleep', 'play', 'eat']

2.4 严格检查模式

 

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <script>
         /**
          * 前提:IDEA需要提前设置支持ES6语法
          * "use strict":严格检查模式,预防JavaScript的随意性导致产生的一些问题
          * 它必须写在JavaScript的第一行
          * 另外 局部变量都建议用let去定义
          */
         "use strict"
         let i=10;
     </script>
 </head>
 <body>
 
 </body>
 </html>

 

ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: letconst

let 声明的变量只在 let 命令所在的代码块内有效。const 声明一个只读的常量,一旦声明,常量的值就不能改变。

 

3. 数据类型

3.1 字符串

  1. 正常字符串我们使用单引号或者双引号包裹

  2. 注意转义字符\

     \'      \
     \n     换行
     \t     相当于tab键
     \u4e2d(中) \u####   Unicode字符
     \x41(A)   Ascll字符
  3. 多行字符串编写

     //tab键上面 esc键下面的   包裹起来 可以写多行字符串
     let msg=`
             常超
             18
             boy
             `
  4. 模板字符串

     let name="常超"
     let age=18
     let sex="boy"
     let msg=`你好,我的名字是${name},性别${sex},今年${age}`
     
     console.log(msg)
     >你好,我的名字是常超,性别boy,今年18
     
     ${} //类似于正则表达式
  5. 字符串长度

     let str="hello"
     console.log(str.length)
     >5
  6. 字符串的不可变性

     str[0]=1
     >1
     console.log(str)
     >hello
  7. 大小写转换

     //注意 这里是方法 不是属性了
     console.log(str.toUpperCase())
     >HELLO
     
     let k="ABC"
     console.log(k.toLocaleLowerCase())
     >abc
  8. 获取字符串处于第几位

     console.log(k.indexOf("B"))
     >1
  9. 截取字符串指定区间内容

     let str="hello"
     console.log(str.substring(1))   //第1个字符到最后
     >ello  
     console.log(str.substring(1,3))  //第1个到第3个之间 包含第1个
     >el    
     [)   //左边包含 右边不包含

     

3.2 数组

Array可以包含任意的数据类型

 let arr=[1,5,6,8,9]  //通过下标取值和赋值
 
 arr[0];
 arr[0]=10;
  1. 长度

     arr.length
     >5

    注意:加了给arr.length赋值,数组大小会发生变化,如果赋值过小,会造成元素丢失

     arr.length=10
     >10
     arr
     >(10) [1, 5, 6, 8, 9, empty × 5]
     
     arr.length=3
     >3
     arr
     >(3) [1, 5, 6]
  2. indexOf() 通过元素获得下标索引

     arr
     >(3) [1, 5, 6]
     arr.indexOf(5)
     >1

    注意 :字符串的“1”和数字1是不同的

  3. slice() 截取Array的一部分,返回一个新数组,类似String中的substring

     arr
     >(3) [1, 5, 6]
     arr.slice(1,2)
     >[5]
     arr
     >(3) [1, 5, 6]
  4. push() pop() 尾部

     arr
     >(3) [1, 5, 6]
     arr.push("1")
     >4
     arr
     >(4) [1, 5, 6, '1']  //push:压入到尾部
     
     arr
     >(4) [1, 5, 6, '1']
     arr.pop()
     >'1'
     arr
     >(3) [1, 5, 6]     //pop:弹出尾部的一个元素
  5. unshift() shift() 头部

     arr
     >(3) [1, 5, 6]
     arr.unshift(123)
     >4
     arr
     >(4) [123, 1, 5, 6]   //unshift():压入到头部
     
     arr
     >(4) [123, 1, 5, 6]
     arr.shift()
     >123
     arr
     >(3) [1, 5, 6]    //shift():弹出头部的一个元素
  6. 排序:sort()

     arr
     >(4) ['D', 'A', 'B', 'C']
     arr.sort()
     >(4) ['A', 'B', 'C', 'D']
  7. 元素反转:reverse()

     arr
     >(4) ['A', 'B', 'C', 'D']
     arr.reverse()
     >(4) ['D', 'C', 'B', 'A']
  8. concat()

     arr
     >(4) ['D', 'C', 'B', 'A']
     arr.concat(1,2,3)
     >(7) ['D', 'C', 'B', 'A', 1, 2, 3]
     arr
     >(4) ['D', 'C', 'B', 'A']

    注意:concat() 并没有修改数组,只是会返回一个新的数组

  9. 连接符join

     打印拼接数组,使用特定的字符串连接
     
     arr
     >(4) ['D', 'C', 'B', 'A']
     arr.join("-")
     >'D-C-B-A'
  10. 多维数组

     arr=[[1,9],[2,8],["3","7"]]
     arr[1][1]
     >8

数组:重点就是如何存取数据,方法都可以自己实现

 

3.3 对象

若干个键值对

 let 对象名={
     属性名:属性值,
     属性名:属性值,
     属性名:属性值
 }
 
 //定义了一个person对象,他有三个属性
 let person ={
     name:"张三",
     sex:"男",
     age:18
 }

js中对象,{……}表示一个对象,键值对描述属性值 xxxx:xxxx,多个属性之间用逗号隔开,最后一个属性不用加逗号

注意:JavaScript中所有的键都是字符串,值是任意对象

  1. 对象赋值

     person
     >{name: '张三', sex: '男', age: 18}
     person.age=8
     >8
     person
     >{name: '张三', sex: '男', age: 8}
  2. 使用一个不存在的对象属性 不会报错,输出undefined

     person
     >{name: '张三', sex: '男', age: 8}
     person.abc
     >undefined
  3. 动态的删减属性,通过delete可删除对象的属性

     delete person.age
     >true
     person
     >{name: '张三', sex: '男'}
  4. 动态的添加属性,直接给新的属性添加值即可

     person
     >{name: '张三', sex: '男'}
     person.age=6
     >6
     person
     >{name: '张三', sex: '男', age: 6}
  5. 判断属性值是否在这个对象中 xxx in xxx

     'name' in person
     >true
     //有继承关系
     'toString' in person
     >true
  6. 判断一个属性是否是这个对象自身拥有的 用

     person.hasOwnProperty('toString')
     >false
     person.hasOwnProperty('name')
     >true

 

3.4 流程控制

if判断:

 let score=90;
 if (score>60){
     alert("及格");
 }else {
     alert("不及格");
 }

while循环,应避免程序死循环

 let score=9;
         while (score<100){
             score+=1;
             console.log(score)
        }

for循环:

 for (let i = 0; i <50 ; i++) {
     console.log(i)
 }

数组遍历:

 //forEach循环
 
 let arr=[12,56,8,89,5,8,9,99]
 arr.forEach(function (e) {
     console.log(e)
 })
 //也可  直接arr.forof
 for (let number of arr) {
     console.log(number)
 }

3.5 Map和Set

ES6的新特性

Map:

 //ES6  Map
 let map=new Map([["tom",90],["jack",85],["张三",100]])
 let tomScore=map.get("tom");   //通过key来获得value
 map.set("李四",70);  //新增或者修改
 map.set("tom",80);
 map.delete("jack");  //删除
 
 map
 >Map(3) {'tom' => 80, '张三' => 100, '李四' => 70}

Set:无序不重复集合

 let set=new Set([1,8,9,6,3,6,9]);  //{1, 8, 9, 6, 3}
 set.add(2);   //添加
 set.delete(1);  //删除
 console.log(set.has(6));  //判断是否包含某个元素

3.6 intrable迭代

为了统一集合类型,ES6标准引入了新的iterable类型,ArrayMapSet都属于iterable类型。

具有iterable类型的集合可以通过新的for ... of循环来遍历。

遍历数组:

 let arr=new Array(["张三","李四","王五"]);
 for (let arrElement of arr) {
     console.log(arrElement)
 }

遍历map:

 let map=new Map([["tom",90],["jack",85],["张三",100]])
 for (let x of map) {
     console.log(x)
 }

遍历set:

 let set=new Set([1,8,9,6,3,6,9]);  //{1, 8, 9, 6, 3}
 for (let number of set) {
     console.log(number)
 }

4. 函数

4.1 定义函数

定义方式一

举例:绝对值函数

 function jdz(x) {
     if (x>=0){
         return x;
    }else {
         return -x;
    }
 }
 
 jdz(-1)
 >1
 jdz(2)
 >2

定义方式二

 var jdz02=function (y) {
     if (y>=0){
         return y;
    }else {
         return -y;
    }
 }
 
 jdz02(-1)
 >1
 jdz02(0)
 >0

一旦执行到return,代表函数结束,返回结果

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

方式1和方式2等价

 

参数问题:JavaScript可以传递任意个参数,也可以不传递参数

参数进来存在的问题:

  1. 假设不存在参数,如何规避

     function jdz(x) {
         //手动抛出异常
         if (typeof x!=='number'){
             throw "Not a number"
        }
         if (x>=0){
             return x;
        }else {
             return -x;
        }
     }
  2. arguments包含所有的参数,我们有时候想使用多余的参数进行附加操作,需要排除已有参数

    arguments是一个JS免费赠送的关键字

    代表,传递进来的所有参数 都是一个数组

     var jdz02=function (y) {
         for (var i=0;i<arguments.length;i++){
             console.log(arguments[i])
        }
         if (y>=0){
             return y;
        }else {
             return -y;
        }
     }

    问题解决:使用rest

    以前:

     function cx(x) {
         if (arguments.length>2){
             for (let i = 0; i < arguments.length; i++) {
                 //..... console.log(arguments[i])
            }
        }
     }

    ES6引入的新特性,获取除了已经定义的参数之外的所有参数

     function f(a,b,...rest) {
         console.log("a:"+a)
         console.log("b:"+b)
         console.log(rest)
     }

    注意:rest参数只能写在最后面,必须用…标识

4.2 变量的作用域

在JavaScript中,var定义变量实际是有作用域的

假设在函数体内声明,则在函数体外不可以使用(非要想实现的话,后面可以研究下闭包

 function aaa() {
     var a=1;
     console.log(a);  //1
 }
 aaa();
 console.log(a);    //Uncaught ReferenceError: a is not defined

如果两个函数使用了相同的变量名,只要在函数内部,就不冲突

 function aaa() {
     var a=1;
     console.log(a);  //1
 }
 function bbb() {
     var a=2;
     console.log(a);  //2
 }

内部函数可以访问外部函数的成员,反之则不行

 function ccc() {
     var c=1;
     function ddd() {
         var d=c+1;
         console.log(d)
    }
     ddd();  //2
     console.log(c)  //1
     var dd=d+1
     console.log(dd)  //d is not defined
 }

假设内部函数变量和外部函数变量,重名

 function eee() {
     var e=2;
     function fff() {
         var e=1;
         console.log(e)
    }
     fff()  //1
     console.log(e)  //2
 }

在JavaScript中,函数查找变量从自身函数开始,由“内”向“外”查找,假设外部存在这个同名的函数变量,则内部函数会屏蔽外部函数的变量

提升变量的作用域

 function ggg() {
     var g=2-f;
     console.log(g)
     var f=1  //NaN   undefined
    }

说明:js执行引擎,自动提升了f的声明,但是不会提升变量f的赋值,相当于:

 function ggg() {
     var f;
     var g=2-f;
     console.log(g)
     f=1
 }

这个是在JavaScript建立之初就存在的特性,我们应养成规范,所有的变量定义都放在函数的头部,不能乱放,便于代码维护

全局函数

 function hhh() {
     var h=1;
     function iii() {
         console.log(h)
    }
     iii();  //1
     console.log(h)  //1
 }

全局对象:window

 var x="666"
 alert(x)
 alert(window.x)  //默认所有的全局变量,都会自动的绑定在window对象下
 //弹出两个666

alert() 这个函数本身也是一个window变量

 var x="666"
 window.alert(x)
 var old_alert=window.alert;
 old_alert(x)
 window.alert=function () {
 
 }
 window.alert(123)  //发现这个alert失效了
 
 //恢复
 window.alert=old_alert;
 window.alert(798)

JavaScript实际上只有一个全局作用域,任何变量(函数也可以被视为变量),假设没有在函数作用范围内找到,就会向外查找,如果在全局作用域都没有找到,就会报错ReferenceError

规范

由于我们所有的全局变量都会绑定到window上,如果不同的js文件,使用了相同的全局变量,就会有冲突,那么如何减少冲突?

 //定义唯一的全局变量
 var ZccApp={};
 //定义全局变量
 ZccApp.name="zcc";
 ZccApp.add=function (a,b) {
     return a+b;
 }
 
 console.log(ZccApp.name)
 >zcc
 undefined
 console.log(ZccApp.add(5,7))
 >12

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

jQuery就是这么做的

局部作用域let

 function f() {
     for (var i = 0; i < 20; i++) {
         console.log(i)  //0~19
    }
     console.log(i)  //20
     //问题   i出了作用域还能使用,显然是不可以的

ES6 let关键字,解决了局部作用域的冲突问题

 function f() {
     for (let i = 0; i < 20; i++) {
         console.log(i)  //0~19
    }
     console.log(i)  //Uncaught ReferenceError: i is not defined
 }

建议还是都用let去定义局部作用域的变量

常量 const

在ES6之前,定义常量:只有用全部大写字母命名的变量就是常量,建议不要修改这样的值

 var PI=3.14;
 console.log(PI)  //3.14
 PI=1.43
 console.log(PI)  //1.43
 //显然是有问题的

在ES6引入了常量关键字const

 const PI=3.14;
 console.log(PI)  //3.14
 PI=1.43
 console.log(PI)  //Assignment to constant variable.

4.3 方法

定义方法

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

 var people={
     name:"张三",
     brith:2006,
     age:function () {
         //今年-出生年
         var now=new Date().getFullYear();
         return now-this.brith;
    }
 }
 
 //属性
 console.log(people.name)
 >张三
 //方法 带上()
 console.log(people.age())
 >16

this代表什么,拆开看一下

 function getAge() {
     //今年-出生年
     var now=new Date().getFullYear();
     return now-this.brith;
 }
 var people={
     name:"张三",
     brith:2006,
     age:getAge
 }
 console.log(people.age());  //16 表明this指向people
 console.log(getAge());  //NaN 这个this是调用的window的birth,window没有birth

this是无法指向的,默认指向调用它的哪个对象

apply

但是在js中通过apply可以控制this的指向

 function getAge() {
     //今年-出生年
     var now=new Date().getFullYear();
     return now-this.brith;
 }
 var people={
     name:"张三",
     brith:2006,
     age:getAge
 }
 var student={
     name:"李四",
     brith:2009,
     age:getAge
 }
 
 getAge.apply(student,[]);//this,指向了people,参数为空
 >13

 

5. 内部对象

标准对象

 //typeof 可以查对象类型
 typeof 1.5
 'number'
 typeof "张三"
 'string'
 typeof true
 'boolean'
 typeof NaN
 'number'
 typeof []
 'object'
 typeof {}
 'object'
 typeof Math.abs
 'function'
 typeof undefined
 'undefined'

5.1 Date

基本使用

 var time=new Date()
 time  //具体时间
 time.getFullYear()  //年
 time.getMonth()  //月 外国人是0~11月
 time.getDate()  //日
 time.getDay()  //周几
 time.getHours()  //几时
 time.getMinutes()  //几分
 time.getSeconds()  //几秒
 
 time.getTime()  //时间戳   全世界统一 1970 1.1 0:00:00 毫秒数
 

转换

 now=new Date(1650371078050)  //时间戳转换为时间
 
 new
 >Tue Apr 19 2022 20:24:38 GMT+0800 (中国标准时间)
 now.toLocaleString()
 >'2022/4/19 20:24:38'
 now.toGMTString()
 >'Tue, 19 Apr 2022 12:24:38 GMT'

5.2 json

JSON是什么?

  • JSON(JavaScript Object Notation ,JS对象简谱)是一种轻量级的数据交互格式

  • 简洁和清晰的层次结构是的JSON成为理想的数据交互语言

  • 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率

在JavaScript中,一切皆为对象,所以js支持的类型都可以用JSON来表示

JSON格式:

  • 对象都用{}

  • 数组都用[]

  • 所有的键值对都是用key:value

JSON和对象之间的转换:

 var user={
     name:"张三",
     age:15,
     sex:"男"
 }
 
 //对象转换为JSON字符串
 var JSONUser=JSON.stringify(user)  //'{"name":"张三","age":15,"sex":"男"}'
 
 //JSON字符串转换为对象
 var UserJSON=JSON.parse('{"name":"张三","age":15,"sex":"男"}')  //成功转换为对象

区别:

  name:"张三",age:15,sex:"男"   //对象
  {"name":"张三","age":15,"sex":"男"}   //字符串

6. 面向对象编程

6.1 原型

ES6之前这么做的:原型

 var student={
     name: "张三",
     age: 18,
     run: function () {
         console.log(this.name+"run........")
    }
 }
 
 var zcc={
     name: "zcc"
 }
 //原型对象:zcc的原型是student
 zcc.__proto__=student

6.2 class继承

class关键字,是在ES6引入的

定义一个属性、方法:

 class Student{
     constructor(name) {
         this.name=name
    }
     hello(){
         alert("hello")
    }
 }
 
 var zcc=new Student("zcc")

继承:

 //定义一个学生的类
 class Student{
     constructor(name) {
         this.name=name
    }
     hello(){
         alert("hello")
    }
 }
 //学生的继承类
 class SmallStudent extends Student{
     constructor(name,age) {
         super(name);
         this.age=age
    }
     myGrade(){
         alert("我是小学生")
    }
 }
 
 var zcc=new Student("zcc")
 var ls=new SmallStudent("ls",18)

7. 操作BOM对象

浏览器对象

JavaScript诞生就是为了能够让他在浏览器上运行

BOM:浏览器对象模型

内核浏览器:IE、Chrome、Safari、FireFox

三方:QQ浏览器 360浏览器

window(重要)

window代表 浏览器窗口

 window.alert("你好")
 undefined
 //获取浏览器的窗口大小
 window.innerHeight
 150
 window.innerWidth
 978
 window.outerHeight
 730
 window.outerWidth
 993

Navigator(不建议使用)

Navigator 封装了浏览器的信息

 navigator.appName  //浏览器的名字
 'Netscape'
 navigator.appVersion  //浏览器的版本和使用信息
 '5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36'
 navigator.userAgent  //用户代理
 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36'
 navigator.platform  //平台
 'Win32'

大多数情况下,不使用navigator对象,因为会被人为修改

不建议使用这种属性来判断和编写代码

screen

screen :代表屏幕尺寸

 screen.width  //浏览器的宽度
 1536
 screen.height  //浏览器的高度
 864

location(重要)

location代表当前页面的url信息

 location.host  //返回当前URL的主机名和端口
 'www.baidu.com'
 location.href  //返回当前页完整的url
 'https://www.baidu.com/'
 location.protocol  //返回当前页的协议
 'https:'
 location.reload()  //刷新页面
 //加载一个新的文档
 location.assign("https://www.cnblogs.com/zccjy/")

document(内容:DOM)

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

 document.title
 '百度一下,你就知道'
 document.title="zcc"
 'zcc'

获取具体的文档书数节点

 <dl id="app">
     <dt>Java</dt>
     <dd>JavaSE</dd>
     <dd>JavaEE</dd>
 </dl>
 
 <script>
     var dl=document.getElementById("app")
 </script>

获取cookie:

cookie: 某些网站为了辨别用户身份,进行Session跟踪而储存在用户本地终端上的数据(通常经过加密),由用户客户端计算机暂时或永久保存的信息

 document.cookie
 

劫持cookie原理:

 <script src="a.js"></script>
 
 <!--恶意人员:获取你的cookie上传到它的服务器-->

安全措施:服务器端可以设置cookie:httpOnly

history

history代表浏览器的历史记录:

 history.back()  //回退
 history.forward()  //前进

8. 操作DOM对象

核心

浏览器网页就是一个Dom(文档对象模型)树形结构,

  • 更新:更新Dom节点

  • 遍历Dom节点:得到Dom节点

  • 删除:删除一个Dom节点

  • 添加:添加一个新的节点

要操作一个Dom节点,就必须要先获得这个Dom节点。

获得dom节点

 //对应 css 选择器
 var h1= document.getElementsByTagName("h1");
 var p1=document.getElementById("p1");
 p1.children;  //获得所有子节点
 var ul1=document.getElementsByClassName("ul1");

更新节点

 <div id="div1">
 
 </div>
 
 <script>
     var div1=document.getElementById('div1')
 </script>
 //操作文本
 div1.innerText="666"   //修改文本的值
 div1.innerHTML="<strong>666<strong/>"   //解析HTML文本标签
 
 //操作css 属性使用字符串包裹   遵循驼峰命名
 div1.style.color="red"  
 div1.style.fontSize="300px"

删除节点

删除节点的步骤:

  • 先获取父节点

  • 在通过父节点删除自己

 <div>
     <p id="p1">段落1</p>
     <p>段落2</p>
     <p>段落3</p>
 </div>
 
 <script>
     var self=document.getElementById("p1");  
     var father=p1.parentElement;   //获得父节点
     father.removeChild(self);   //通过父节点删除自己
     
     //删除是一个动态的过程
     father.removeChild(father.children[0])
     father.removeChild(father.children[1])
     father.removeChild(father.children[2])
     
     //最后还有 段落2
     
 </script>

注意:若通过下标方式删除多个children时,要注意,下标是一直变化的

插入节点

我们获得了某个Dom节点,假设这个Dom节点是空的,我们通过innerHTML就可以增加一个元素,但是如果这个Dom节点已经存在元素了,就会产生覆盖,导致之前的元素就没了。

追加元素:

 <body>
 <p id="Java">Java</p>
 <div id="list">
     <p id="se">JavaSE</p>
     <p id="ee">JavaEE</p>
     <p id="me">JavaME</p>
 </div>
 <script>
     var Java=document.getElementById('Java');
     var list=document.getElementById('list');
     list.appendChild(Java);  //放一个已经存在的节点
 </script>
 </body>

创建一个新的标签,实现插入

第一种方法:

 <body>
 <p id="Java">Java</p>
 <div id="list">
     <p id="se">JavaSE</p>
     <p id="ee">JavaEE</p>
     <p id="me">JavaME</p>
 </div>
 <script>
     var list=document.getElementById("list");
     var newP=document.createElement('p');  //创建一个p标签
     //1. 设置id
     newP.id='newP'
     newP.innerText="666";
     list.appendChild(newP);
     
     //2. 也可以直接设置属性和对应的值 这样方便
     var ppp=document.createElement('p')
     ppp.setAttribute('id','pp')
     ppp.innerText="888"
     list.appendChild(ppp)
     
     var body=document.getElementById("bb")
     body.setAttribute('style','</script>
 </body>

在一个节点的前面插入一个节点:

 <body id="bb">
 <p id="Java">Java</p>
 <div id="list">
     <p id="se">JavaSE</p>
     <p id="ee">JavaEE</p>
     <p id="me">JavaME</p>
 </div>
 <script>
    var six=document.createElement("p")
     six.setAttribute("id","six")
    six.innerText="666"
     var ee=document.getElementById("ee")
     var list=document.getElementById("list")
     list.insertBefore(six,ee)
 </script>
 </body>

 

9. 操作表单(验证)

表单是什么 ?     form DOM树

  • 文本框 text

  • 密码框 password

  • 下拉框 < select >

  • 单选框 radio

  • 多选框 checkbox

  • 隐藏域 hidden

  • …….

表单的目的:提交信息

获得表单提交的信息:

 <body>
 <form action="post">
     <span>用户名:</span> <input type="text" name="username" id="yhm"><br>
     <span>性&nbsp;别:</span>
     <input type="radio" name="sex" value="boy" id="nan">男
     <input type="radio" name="sex" value="girl" id="nv">女
 </form>
 <script>
     var username=document.getElementById("yhm")
     //获得输入的值
     username.value
     //修改、设置输入的值
     username.value="超神"
 
     var nan=document.getElementById("nan")
     var nv=document.getElementById("nv")
     //如果是获得单选框、多选框提交的值,用value是不行的,需要:
     //判断是否选中了它 如果结果为true 则为选中
     nan.checked
     //也可以设置它
     nv.checked="true"
 </script>
 </body>

验证提交信息 密码MD5加密 (最全) 重点

 <!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>
 </head>
 <body>
 <!--
 表单绑定提交时间
 onsubmit=绑定一个提交检测的函数 true/false
 将这个结果返回给表单,使用onsubmit()接收
 onsubmit="return f()
 -->
 <form action="https://www.baidu.com/" method="post" onsubmit="return f()">
     <p><span>用户名:</span><input type="text" name="username" id="un"></p>
     <p><span>密&nbsp;码:</span><input type="password" id="psw"></p>
     <input type="hidden" name="password" id="md5_psw">
     <input type="submit">
 </form>
 </body>
 <script>
 function f() {
     var yhm = document.getElementById("un");
     var mm = document.getElementById("psw");
     //加一个隐藏域 增加用户体验
     var md5_mm = document.getElementById("md5_psw");
 
     //设置MD5密码加密
     md5_mm.value = md5(mm.value);
 
     //可以校验判断表单内容,true就是通过提交,false就是阻止提交
     if (mm.value!=="123"){
         return false;
    }
 }
 </script>
 </html>

10. jQuery

jQuery库,里面存在大量的JavaScript函数。

如何获取jQuery库,两种方法:

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <!--引入jQuery方法一:使用cdn jQuery在线链接(百度搜索:cdn jQuery)-->
 <!--   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>-->
     
     <!--引入jQuery方法二:在jQuery官方下载文件到本地 导入-->
     <script src="lib/jquery-3.6.0.js"></script>
 
 <!--
 jQuery使用公式: $(selector).action()
 
 selector:css选择器
 -->
 </head>
 <body>
 <a href="" id="aaaaa">点击</a>
 
 <script>
     $("#aaaaa").click(function () {
         alert("123")
    })
 </script>
 </body>
 </html>

jQuery事件

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

演示以鼠标事件为例。其他的可看文档https://jquery.cuishifeng.cn/index.html

 $().mousedown()  //鼠标按下
 $().mousemove() //鼠标移动
 
 
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <script src="lib/jquery-3.6.0.js"></script>
     <style>
         div{
             width: 500px;
             height: 500px;
             border: 1px solid red;
        }
     </style>
 </head>
 <body>
 
 <!--获取鼠标当前的坐标-->
 mouse: <span id="spanMove"></span>
 <div id="divMove">
 在这里移动鼠标
 </div>
 
 <script>
 // 当网页元素执行之后 在加载事件
 //   之前是这样写 现在简化了 简写后:下面未注释的
 //     $(document).ready(function () {
 //
 //     })
     $(function () {
         $("#divMove").mousemove(function (e) {
             $("#spanMove").text("x:"+e.pageX + " y"+e.pageY)
        })
    })
 
 </script>
 </body>
 </html>

jQuery操作dom

节点文本操作:

 $("#java li[id=ee]").text()  //获得值
 $("#java li[id=ee]").text("666")  //设置值
 $("#java li[id=ee]").html()  //获得值
 $("#java li[id=ee]").html("<strong>666</strong>")  //设置值

css的操作:

 $("#java li[id=ee]").css({"color":"red"})

元素的显示和隐藏:本质上:display:none

 $("#java li[id=ee]").show()  //显示
 $("#java li[id=ee]").hide()  //隐藏

 

学习小技巧

  1. 如果巩固js (1. 看jQuery源码 2. 看游戏源码)

  2. 巩固HTML CSS(扒网站 需要模仿的网站:审查元素——>一步步的删除,只留下有用的 然后down下来)

 

layer 弹窗组件

Element-ui

 

 

 

 

 

 

 

 

 

版权声明:本文为zccjy原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/zccjy/p/16181962.html