JavaScript学习笔记

最新推荐文章于 2023-04-14 09:47:29 发布

小小马同学

最新推荐文章于 2023-04-14 09:47:29 发布

阅读量793

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_42093672/article/details/110202254

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

结构层：html

表现层：css

行为层：javascript

JavaScript：是一种脚本语言，其源代码不需要经过编译，而是由浏览器解释运行，用于控制网页的行为

JQuery 是一个库相当于库

三大框架：

Angular：Google收购的前端框架模块化开发

React：FaceBook出品的的提出了新概念虚拟化DOM

Vue:综合了Angular（模块化开发）和React（虚拟化DOM）的优点。

Ant Design 阿里巴巴的出品

ElementUI 、iview、ice 饿了么出品，基于Vue的UI框架

Bootstrap ：Twitter推出的一个用于前端开发的开源工具包

AmazeUI:又叫“妹子UI”，一款HTML5的屏障前端框架

1.什么是JavaScript

1.1概述

JavaScript是一门世界上最流行的脚本语言。

Java与JavaScript没有一点点关系，他俩是完全不同的语言

1.2历史

ECMAScript它可以理解为是JavaScript的一个标准

最新的版本已经到6版本了，但是浏览器大部分还只停留在支持5版本的代码上

开发环境–线上环境，版本不一致

2.快速入门

2.1引入javaScript

1.内部标签

<script>
    //代码
</script>

2.外部引用

<script src="">
    </script>

3.hello,world的源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--script标签内写js代码-->
    <!--<script>-->
    <!--alert('hello,world')-->
    <!--</script>-->

    <!--外部引用，注意点是必须是闭合标签-->
    <script src="js/hello.js">

    </script>

</head>
<body>

<!--这里也可以存放script标签-->
</body>
</html>

js 源代码

alert('hellow,orld');

2.2.基本语法入门

 <!--JavaScript严格区分大小写-->
<!DOCTYPE html>
<html lang="en">
<head>
   
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //1.定义变量  变量类型  变量名  =  变量值;
        var score =73;
        'helloworld'
       // alert(num);
        //2.条件控制

        if(score>60 && score<70){
            alert("60-70");
        }else if (score>=70 && score<80) {
            alert("70-80");
        }else {
            alert("other")
        }
        //console.log(score) 在浏览器的控制台打印变量！  System.out.println()
    </script>
</head>
<body>

</body>
</html>

3数据类型

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

数值类型numberjs不区分小数和整数，Number

前提：IDEA 需要设置支持ES6语法

在这里插入图片描述

严格检查模式'use strict',预防javascript的随意性导致产生的一些问题

必须写在 javascript第一行

局部变量建议都使用let去定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //严格检查模式
        'use strict'
        //ES6 let  定义局部变量
        let i=1;
    </script>

</head>
<body>

</body>
</html>

3.1字符串

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

2.需要注意转义字符 `\`

\`
\n
\t
\u4e2d  \u#### Unicode 字符
Ascll字符

3.多行字符串编写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        'use strict'
        console.log('a');
        console.log("a");
        //table键上边  esc键下边
        var str=`
        hello
        world
        你好啊
        你好
        `
    </script>
</head>
<body>
</body>
</html>

4.模板字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        'use strict'
        console.log('a');
        console.log("a");
        //table键上边  esc键下边
     let name =`xiaoming`
        let age=18;
     let msg =`你好呀，${name}`
        console.log(msg)

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

5.字符串长度


//str.length
var student = 'student';
console.log(student.length)

6.字符串的可变性，不变性

//str[]通过下标打印字符串的每一个元素
console.log(student[2])
 u

通过赋值发现是不可变的。

在这里插入图片描述

7.大小写转换

小写转大写：通过方法

console.log(student.toLocaleUpperCase())
STUDENT

大写转小写：通过方法

console.log(student.toLocaleLowerCase())
student

8.获得指定字符的下标

console.log(student.indexOf(`t`))
1

console.log(student.indexOf(`u`))
 2

9.截取字符串substring[)

console.log(student.substring(0,3))
stu
//从指定的字符截取到指定字符[)[0,3)
console.log(student.substring(1))
//从第一个字符截取到最后一个字符

3.2数组

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

数组的定义

var arr = [1,2,3,4,5,6];//通过下标取值

1.数组长度

arr.length
//6

注意：加入给arr.length 赋值，数组大小会发生变化如果赋值过小元素就会丢失

arr[0]=0
//0
arr[0]
//0
console.log(arr)
 //(6) [0, 2, 3, 4, 5, 6]0: 0 1: 2 2: 3 3: 4 4: 5 5: 6length: 6__proto__: Array(0)

arr.length=10
//10
console.log(arr)
//(10) [0, 2, 3, 4, 5, 6, empty × 4]0: 0 1: 2 2: 3 3: 4 4: 5 5: 6 length: 10__proto__: Array(0)
//empty × 4 4个空的

arr[7]
//undefined

arr.length=2
//2

console.log(arr)

//(2) [0, 2]0: 0 1: 2 length: 2__proto__: Array(0)

2.通过元素获得下标索引

arr.indexOf(2)
//1

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

var arr=[1,2,3,4,5,6,'1','3']
arr.indexOf(1)
//0
arr.indexOf('1')
//6

3.截取Array的一部分，返回一个新的数组

arr.slice(3)
//从下标为3的元素开始截到最后
arr.slice(1,5)
//[1,5)

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

4.向数组的尾部添加一些元素

push()往数组中添加元素

arr.push('a','b')
console.log(arr)
//(10) [1, 2, 3, 4, 5, 6, "1", "3", "a", "b"]

pop() 从数组中弹出元素

arr.pop()
"b"
console.log(arr)
// (9) [1, 2, 3, 4, 5, 6, "1", "3", "a"]

push():将元素压入数组的尾部
pop():弹出尾部的一个元素

5.向数组的头部添加一些元素

unshift()：向数组的头部添加一个元素

arr.unshift('a','b')

console.log(arr)
//(11) ["a", "b", 1, 2, 3, 4, 5, 6, "1", "3", "a"]

shift():去掉数组头部的一个元素

arr.shift()
"a"

console.log(arr)
// (10) ["b", 1, 2, 3, 4, 5, 6, "1", "3", "a"]

5.数组排序

arr.sort()

arr=['C','B','A']
//(3) ["C", "B", "A"]
arr.sort()
//(3) ["A", "B", "C"]

6.元素反转

arr.reverse()：从数组的中间下标将元素反转


//(3) ["A", "B", "C"]
arr.reverse()
//(3) ["C", "B", "A"]

7.数组拼接

concat():元素拼接，但是并没有修改改变原来的数组，只是返回了一个新的新的数组

arr.concat([1,2,3])
//(8) ["X", "D", "C", "B", "A", 1, 2, 3]
//但是并没有将原来的数组干掉
console.log(arr)
//(5) ["X", "D", "C", "B", "A"]

8.打印数组拼接连接符

join():打印拼接数组，使用特定的字符串拼接


//(5) ["X", "D", "C", "B", "A"]
arr.join('-')
//"X-D-C-B-A"

9.多维数组

arr=[[1,2],[3,4],['a',6]]
//[Array(2), Array(2), Array(2)]
arr[1][1]
//4

数组：存储数据的（如何存，如何取、方法都可以自己实现）

3.3对象

若干个键值对


var 对象名 ={
    属性名:属性值,
    属性名:属性值,
    属性名:属性值,
    属性名:属性值
    //最后一个属性没有逗号  
}

//示例 ：定义了一个person对象拥有四个属性
     var person ={
            name:"张三",
            age: 18,
            email: "123456789",
            score:0
        }

js中对象，{…}表示一个对象，使用键值对来描述属性。键值对书写 xxx：xxx，多个属性之间使用逗号隔开，最后一个属性不加逗号。

javaScript中所有的键都是字符串，值是任意对象。

1.给对象的属性赋值

person.name="李四"
"李四"
person.name
//"李四"

2.使用一个不存在的属性不会报错 undefined

person.haha
//undefined

3.动态的删减属性


person
{name: "李四", age: 18, email: "123456789", score: 0}
elete person .score
true
person
{name: "李四", age: 18, email: "123456789"}

4.动态的增加属性

person.haha = "haha"
"haha"
person
{name: "李四", age: 18, email: "123456789", haha: "haha"}

5.判断属性值是否在这个对象中！ xxx in xxx

'age' in person
true
// toString 方法是继承父类的
'toString' in person
true

在这里插入图片描述

6.判断一个属性是否是这个对象自身拥有的hasOwnProperty()

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

3.4流程控制

1.if判断

var age =3;
if(age>3&& age <6){
    alert("haha")
   }else if(age>= 6){  
       alert("play") 
  }else {
        alert("ku") 
  }

2.while循环，避免程序死循环

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

3.for循环

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

4.forEach循环

 var arr=[1,2,3,4,5,56,65,42,323,3234,42,24,2];
        arr.forEach(function (value) {
           console.log(value)
        })

3.5map和set集合

Map集合：

  //ES6中新出现的
        //学生的成绩和学生的姓名
        var  map =new Map([["zhangsan",100],["lisi",60],["wangwu",90]]);
        //通过key值获得value
        var score= map.get("lisi");
        console.log(score);
		//新增一个元素
        map.set("zhaoliu",80);
		//通过key值删除一个元素
         map.delete("zhangsan")
//控制台输出map
//map
//Map(4) {"zhangsan" => 100, "lisi" => 60, "wangwu" => 90, "zhaoliu" => 80}

Set：无序不重复的集合

set中有多个一样的元素只会显示一个元素。

        var set =new Set([3,2,2,2,2,2,2,7]);
        //Set(3) {3, 2, 7}
        //往set中添加元素
         set.add(6)
        //Set(4) {3, 2, 7, 6}
        //删除set中的某一个元素
         set.delete(2)
        //Set(3) {3, 7, 6}
        //判断该set中是否包含3
        console.log(set.has(3))
        //true

3.6 iterator迭代

es6的新特性，使用迭代来遍历

1.遍历数组


//通过for in打印数组的下标
//通过for of打印具体的值    

var arr =[3,4,5];
        //打印arr数组具体的值
        for (var x of arr){
            console.log(x)
        }

2.遍历map

    var map =new Map([["zhangsan",100],["lisi",80],["wangwu",60]]);
        for (let x of map){
            console.log(x)
        }

3.遍历set

     var set =new Set([1,2,6,8])
        for (let x of set){
            console.log(x)
        }

4.函数

4.1定义函数

绝对值函数：

定义方法一：

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

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

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

定义方法二：

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

function(x){…}这是一个匿名函数，但是可以把结果赋值给abs通过abs就可以调用函数。

2.调用函数

abs(50) //50
abs(-90)//90

**参数问题：**javascript可以传递任意个的参数，也可以不传递参数。

思考：参数是否存在的问题？

假设参数不存在，如何规避？

手动的抛出异常：

var  abs =function (x){
        
        //手动的抛出异常
        if(typeof x!=='number'){
            throw 'not a number';
        }
        if(x>=0){
            return x;
        }else {
            return -x;
        }
    }

3.arguments关键字

arguments是javaScript免费赠送的关键字

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

 var  abs =function (x){
        console.log("x==>"+x);
        for (let i = 0; i < arguments.length; i++) {
            console.log(arguments[i]);
        }
        //手动的抛出异常
        if(typeof x!=='number'){
            throw 'not a number';
        }
        if(x>=0){
            return x;
        }else {
            return -x;
        }
    }

控制台运行的结果：

在这里插入图片描述

通过arguments可以获得隐藏参数的值

问题：arguments包含所有的参数，需要使用多余的参数，我么就要排除已有的参数。

rest参数：获得其他的隐藏参数

以前获取多余的参数:

    function  a(x,y){
        console.log(x);
        console.log(y);
        for (let i =2;i<arguments.length;i++){
            console.log(arguments[i]);
        } 
    }

es6引入的新特性，获取除了已经定义的参数之外的所有参数**…rest**

   function  a(x,y,...rest){
        console.log(x);
        console.log(y);
        console.log(rest)
    }

rest参数只能写在最后边，必须要用…标识。

4.2变量的作用域

1.在javaScript中，var变量实际是有作用域的，假设在函数体中声明，则在函数体外是不可以使用的。

function a() {
        var x =1;
        x =x+1;
    }
    x =x +2;//Uncaught ReferenceError: x is not defined

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

   function a() {
        var x=1;
        x=x+1;
    }

    function b() {
        var x=1;
        x=x+1;
    }

3.内部函数可以访问外部函数的成员，反之外部函数不能访问内部函数的成员。


    function a() {
        var x =1;
        x=x+1;
        //内部函数可以使用外部函数的成员，反之不行
        function b() {
            var  y=x+1;// y=3
            console.log(y)
        }
        var z =y+1;//z没值
        console.log(z)// Uncaught ReferenceError: y is not defined 但是已经定义了y
    }

4.内部类跟外部类同时定义相同名称的变量

        function a() {
            var x = 1;
            function b() {
                var x = "a";
                console.log("innner==>" + x);//innner==>a
            }
            b();
            console.log("outer==>" + x);// outer==>1
        }
        a();

javaScript中函数查找变量从自身函数先开始，由“内”像“外”查找。假设外部存在这个同名函数变量，则内部函数会屏蔽外部函数的变量

所有的变量都定义在函数的头部，不要乱放定义，便于代码的维护。即先定义后赋值

5.全局变量

   //全局变量
    var x=1;
    function a() {
        console.log(x)
    }
    a();
     console.log(x)

6.全局对象window

  var x="bbbbb";
   //alert(x);
   alert(window.x);//默认所有的全局变量，都会自动的绑定在window上

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

  window.alert(x)

javaScript实际上只有一个全局作用域(window)，任何变量（函数也可以视为变量），假设没有在函数作用范围找到，就会向外查找，如果在全局作用域中没有找到，就会报错，报错RefernceError

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

自定义一个全局变量,把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名的冲突。

 //唯一全局变量
    var mApp ={};
//定义全局变量
    mApp.name ="zhangsan";
    mApp.add =function (a,b) {
        return a+b;
    }

7.局部作用域 let

function aaa() {
    for (var i = 0; i <100 ; i++) {
        console.log(i)
    }
    console.log(i+1);//输出i=101 发现问题i出了for循环还能使用
}

为了解决这样的冲突在 ES6中引入了let关键字来解决


function aaa() {
       for (let i = 0; i < 100; i++) {
           console.log(i)
       }
       console.log(i + 1);//ReferenceError: i is not defined
   }

建议使用let去定义局部作用域的变量

8.常量const

在ES6之前，怎么定义常量的：只有用全部大写字母命名的为常量，不建议去修改这些值

   var PI ='3.14';
   console.log(PI);
PI ='9999';//可以去修改的
console.log(PI)

在ES6中引入常量的关键字const

 const  PI ='3.14';
   console.log(PI);

4.3方法

1.定义方法：
就是把函数放到对象的里边，对象只有两个东西，属性和方法。

   var demo={
       name: 'zhangsan',
       birth:2010,
       age:function () {
          var now = new Date().getFullYear();
          return now-this.birth;
       }
   }
   //调用属性  demo.name
    //调用方法 demo.age()

拆开上面的代码：

   function getAge() {
        var now = new Date().getFullYear();
        return now-this.birth;
    }
   var demo={

       name: 'zhangsan',
       birth:2010,
       age:getAge
   }
   //调用属性  demo.name
    //调用方法 demo.age()
   //getAge()   NaN 代表的是window

this：代表什么？
this始终指向调用它的对象，即是默认只想调用它的那个对象

apply：在js中可以控制this的指向，

    function getAge() {
        var now = new Date().getFullYear();
        return now-this.birth;
    }
   var demo={

       name: 'zhangsan',
       birth:2010,
       age:getAge
   };
   //调用属性  demo.name
    //调用方法 demo.age()
     getAge.apply(demo,[]);//空参this指向demo参数为空

5.内部对象

标准对象：

typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"

5.1、Date

基本使用：

 var date = new Date();//Mon Nov 09 2020 19:32:19 GMT+0800 (中国标准时间)
    date.getFullYear();//年
    date.getMonth();//月  0-11代表月
    date.getDate();//日
    date.getDay();//星期几
    date.getHours();//时
    date.getMinutes();//分
    date.getSeconds();//秒
    date.getTime();//时间戳  全世界唯一 1970年1月1日  0:00:00 毫秒数
    console.log(new Date(1604921539945));//时间戳转为时间  Mon Nov 09 2020 19:32:19 GMT+0800 (中国标准时间)

转换

date = new Date()
Mon Nov 09 2020 19:41:11 GMT+0800 (中国标准时间)
date.toLocaleString()//调用是一个方法，不是一个属性
"2020/11/9 下午7:41:11"
date.toGMTString()
"Mon, 09 Nov 2020 11:41:11 GMT"

5.2 JSON

早期的数据传输使用xml！

什么是JSON（查自百度百科）

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在JavaScript中一切皆为对象。任何js支持的类型都可以使用Json来表示：number，string…

格式：

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

Json 字符串和js对象的转换示例：

    var user  ={
        name:"张三",
        age: 18,
        sex: '男'
    };
    //将对象转换为json字符串 {"name":"张三","age":18,"sex":"男"}
    var Jsonuser = JSON.stringify(user);

    //将接送字符串转换为对象  参数是json字符串需要用''包起来  {name: "张三", age: 18, sex: "男"}
     var  obj = JSON.parse('{"name":"张三","age":18,"sex":"男"}');

JSON与js的区别

var obj ={a:"hello",b:"hellob"}//标准的对象
var json={"a":"hello","b":"hellob"}//json字符串

6.面向对象编程

面向对象：类和对象

1.面向对象的原型继承

        var Student ={
            name:"张三",
            age:4,
            run:function () {
                console.log(this.name + "run...")
            }
        };
        var xiaoming ={
            name:"xiaoming"
        };
        //xiaoming的原型是Studnent可以继承student的方法以及属性
        // xiaoming.__proto__ = Student;
        var Bird ={
            fly:function () {
                console.log(this.name + "fly...")
            }
        }
        //xiaoming的原型又变为Bird
        xiaoming.__proto__ = Bird;

2.class 继承

class关键字是在ES6引入的

1.定义一个类，属性和方法

   //定义一个Student类
    class Student {
        constructor(name,age){
            this.name=name;
            this.age=age;
        }
        hello(){
            alert("hello")
        }
    }
    //创建多个对象
     var xiaoming = new Student("xiaoming",4);
    var lisi =new Student("lisi",9);

2.继承

//定义一个Student类
    class Student {
        constructor(name,age){
            this.name=name;
            this.age=age;
        }
        hello(){
            alert("hello")
        }
    }
    class xiaoStudent extends Student{
        constructor(name,age,grade){
            super(name,age)
            this.grade =grade;
        }
        myGrade(){
            alert("我是一名小学生")
        }
    }
  var lisi =new xiaoStudent("lisi",9,1);

本质，还是指向原型

在这里插入图片描述

原型链：

7.操作BOM对象(重点)

javaScript与浏览器的关系？

javaScript的出现是为了在浏览器上使用。

BOM:浏览器对象模型。

1.window

全局变量

window.alert(10)
undefined
window.innerHeight
927
window.outerHeight
1047
window.innerWidth
150
window.outerWidth
974
//大家可以调整浏览器窗口试一试会获得不同的值

2.Navigator

Navigator，封装了浏览器的信息

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

大多数时候我们不会使用navigator对象，因为会被人为修改

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

3.screen

屏幕的信息(尺寸)

screen.width
1920
screen.height
1080

4.location（重要）

location代表当前页面的URL信息

host: "www.baidu.com"//主机
href: "https://www.baidu.com/?tn=62095104_26_oem_dg"//指向
protocol: "https:"//协议
reload: ƒ reload()//重新加载


location.assigm('https://www.bilibili.com/')//跳转到指定的网页 跳转到b站

5.document

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

document.title
"百度一下，你就知道"
document.title='改为我们自己的标题'
"改为我们自己的标题"

获取具体的文档数节点。

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

document对象可以获得cookie

document.cookie
"BIDUPSID=6DBA1989230DF693DAC3491728A6EEFA; PSTM=1604969635; BAIDUID=6DBA1989230DF69382089972580272FB:FG=1; H_PS_PSSID=; BD_UPN=12314753; delPer=0; BD_CK_SAM=1; PSINO=2; __guid=136081015.1445115290938759000.1604969969216.8213; BDRCVFR[tFA6N9pQGI3]=mk3SLVN4HKm; BD_HOME=1; BDRCVFR[QxxZVyx49rf]=0AuBJa0A3HcfjmznjbdnH0Yg1cvgvq-; H_PS_645EC=855foh%2FaWHLbI0iuFpfaSj35YlP8cCf8xnKHYQj5iLg6MPXvaFE%2BTe7vJ79AahJlPENjTlCGO9vC; BDORZ=FFFB88E999055A3F8A630C64834BD6D0; BA_HECTOR=04aha0a400ag2la6p61fqjtr00p; COOKIE_SESSION=4787_0_2_3_0_20_1_2_0_2_2_9_0_0_0_0_0_0_1604974435%7C3%230_0_1604974435%7C1; __yjsv5_shitong=1.0_7_a2c510e50e4c83d2ab82cec78e763c7ef7b7_300_1604975270635_124.89.2.70_67769414; monitor_count=9"

6.history（不建议使用）

history代表浏览器的历史纪录

history.forward()//前进4
history.back()//后退

8.操作DOM对象

DOM：文档对象模型

1.获得DOM节点

整个浏览器网页就是一个DOM树形结构！

更新DOM节点‘
遍历DOM节点，得到DOM节点
删除一个DOM节点
添加一个DOM节点

要操作一个DOM节点，首先必须要先获得这个DOM节点

  //对应css选择器
    var h1 =  document.getElementsByTagName('h1');//标签选择器
    var p1= document.getElementById('p1');
    var p2 =document.getElementsByClassName('p2');
    var father= document.getElementById('father');
    var childrens = father.children;//获取父节点下的所有子节点
    //father.firstChild
    //father.lastChild;

这是原生的代码，之后会使用jQuery();

2.更新节点

<div id = "id1"></div>
<script>
    var id1 = document.getElementById('id1');
</script>

操作文本

id1.innerText ='123' //修改文本的值
"123"
id1.innerHTML = '<strong>abc</strong>'//可以解析HTML中的文本标签
"<strong>abc</strong>"

操作css样式

id1.innerText ='123'
"123"
id1.innerHTML = '<strong>abc</strong>'
"<strong>abc</strong>"
id1.style.color = 'red'
"red"
id1.style.fontSize = '200px'
"200px"
id1.style.padding ='2em'
"2em"

3.删除节点

删除节点需要获取节点。

删除节点的步骤：需要先获得父节点，通过父节点来干掉自己。

在已经知道父节点的情况下删除该节点：

<div id ="father">
    <h1>h1</h1>
    <p id ="p1">p1</p>
    <p class ="p2">p2</p>
</div>
<script>
    var p1 =document.getElementById('p1');
	//获得父亲的元素
	
    var father =document.getElementById('father');
    father.removeChild(p1);
</script>

在未知父节点的情况先获取父节点，然后再删除自己

<div id ="father">
    <h1>h1</h1>
    <p id ="p1">p1</p>
    <p class ="p2">p2</p>
</div>
<script>
	//首先获取父节点
    var fu =p1.parentElement;
    fu.removeChild(p1)

删除是一个动态的过程:数组的第一个是变化的

    //删除是一个动态的过程这是不可以实现的
    father.removeChild(father.children[0]);
    father.removeChild(father.children[1]);
    father.removeChild(father.children[2]);
    father.removeChild(father.children[3])

注意：删除多个节点的时候，children是在时刻变化的，删除ijedi俺的时候一定要注意。

4.插入节点

我们获得了某个Dom节点，假设这个dom节点是空的，我们可以通过innerHTML就可以增加一个元素，但是这个dom节点已经存在了元素，我们就不能这样使用。原因是：会将原有的标签进行覆盖的。

如何解决这个问题，追加

    <p id ="js"> javaScript</p>
    <div id="list">
        <p id="se">javaSE</p>
        <p id="ee">javaEE</p>
        <p id="me">javaME</p>
    </div>
    <script>
        //获得list和js的节点
        var js =document.getElementById('js');
        var list =document.getElementById('list');
        list.appendChild(js)
    </script>

效果：

在这里插入图片描述

通过创建新的标签来实现插入

 <p id ="js"> javaScript</p>
    <div id="list">
        <p id="se">javaSE</p>
        <p id="ee">javaEE</p>
        <p id="me">javaME</p>
    </div>
    <script>
       
        //通过js创建一个新的节点
        var newP =document.createElement('p');
        newP.id = 'newP';
        newP.innerText ="hello";
        list.appendChild(newP)
        //创建一个标签节点
        var myScript = document.createElement('script');
        myScript.setAttribute('type','text/javascript');
        list.appendChild(myScript);
        //创建一个style标签 修改颜色
        var myStyle =document.createElement('style');//创建一个style标签
        myStyle.setAttribute('type','text/css');
        myStyle.innerHTML='body{background-color: blue;}';//设置标签内容
       document.getElementsByTagName('head')[0].appendChild(myStyle)//将style标签放入head中
    </script>

inserBefer:往前插

        var ee =document.getElementById('ee');
        var list =document.getElementById('list');
        var js =document.getElementById('js');
        //insertBefore(要插入的值,要插入哪个值之前);
        list.insertBefore(js,ee);

9.操作表单

表单是什么？form dom树

文本框 text
下拉框 select
单选框 radio
多选框 checkbox
隐藏框 hidden
密码框 password
…

表单的目的是：提交信息

1.获得提交的信息

<!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="username">
    </p>
    <!--多选框的值就是定义好的value-->
    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="man" id="boy" > 男
        <input type="radio" name="sex" value="woman" id="girl" > 女
    </p>
</form>
<script>
   var username = document.getElementById('username');
   var boy_radio =document.getElementById('boy');
   var girl_radio = document.getElementById('girl');
    //得到输入框的值 username.value
    //既然可以得到输入框的值，那么可以修改输入框的值  username.value ="hahfjkdhs";
    //对于多选框和单选框的固定的值 boy_radio/boy_radio只能获得固定的值value
   boy_radio.checked;//查看返回的结果，是否为true 如果为true则被选中
   girl_radio.checked = true;//给赋值，使其被选中
</script>
</body>
</html>

2.提交表单

js前端md5加密

正常提交：

<body>
<form action="#" method="post" >
    <p>
        <span>用户名:</span>
        <input type="text" id="username" name="username">
    </p>
    <p>
        <span>密  码:</span>
        <input type="password" id="password" name="password" >
    </p>
    <!--在按钮上绑定事件-->
    <!--onclick点击事件，绑定的是一个函数-->
    <button type="submit" onclick="a()">提交</button>
</form>
<script>
    //通过函数来获取value
function a() {
   var username =document.getElementById('username');
   var pwd     =document.getElementById('password');
   console.log(username.value);
   console.log(pwd.value);
   //通过md5给pwd加密，使其抓包抓不住
    pwd.value =md5(pwd)
}
</script>

隐藏域的提交：

<body>
<form action="#" method="post" >
    <p>
        <span>用户名:</span>
        <input type="text" id="username" name="username">
    </p>
    <p>
        <span>密  码:</span>
        <input type="password" id="password" name="password" >
    </p>
		//通过隐藏域
    <input type="hidden" id="md5-password" name="md5-password">
    <!--在按钮上绑定事件-->
    <!--onclick点击事件，绑定的是一个函数-->
    <button type="submit" onclick="a()">提交</button>
</form>
<script>
    //通过函数来获取value
function a() {
   var username =document.getElementById('username');
   var pwd     =document.getElementById('password');
   var md5pwd =document.getElementById('md5-password');
   console.log(username.value);
   console.log(pwd.value);
   //通过md5给pwd加密，使其抓包抓不住
    md5pwd.value = md5(pwd.value);
}
</script>

10.jQuery

1.使用在线的cdn

https://www.jq22.com/cdn/#a2

2.将jQuery下载下来导入

https://jquery.com/download/

jQuery的公式：

$(选择器).action()

1.初识jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<a href="" id="text-jquery">点我</a>
<script>
    //选择器就是css的选择器
    $('#text-jquery').click(function () {
        alert('hello,jquery');
    })
</script>
</body>
</html>

2.选择器

    //js选择器
    //标签
    document.getElementsByTagName();
    //id
    document.getElementById();
    //类
    document.getElementsByClassName();

    //jQuery css中的选择器它都可以使用
    //标签选择器
    $('p').click()
    //id选择器
    $('#id1').click()
    //class选择器
    $('.class1').click()

jQuery的文档工具站：https://jquery.cuishifeng.cn/

3.事件

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

示例：鼠标移动事件，获的鼠标的具体坐标值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style>
        #divmove{
            width: 500px;
            height: 500px;
            border: 1px solid #02801a;
        }
    </style>
</head>
<body>
mouse: <span id="mouseMove"></span>
<div id="divmove">在这里移动鼠标试试</div>

<script>
    //当页面元素加载完毕之后，响应事件
    $(function () {
        $('#divmove').mousemove(function (e) {
            $('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
        })
    })
</script>
</body>
</html>

其他的事件通过查询jQuery文档去实现。

4.操作DOM

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

</head>
<body>
<ul id="text-ul">
    <li id="javascript">JavaScript</li>
    <li name="python">Python</li>
</ul>
<script>
   // $('#text-ul li[id=javascript]').text();
    //$('#text-ul li[id=javascript]').text('c++');

  // $('#text-ul li[id=javascript]').css("color","red")
   // $('#text-ul li[id=javascript]').show();
   //$('#text-ul li[id=javascript]').hide()
</script>
</body>
</html>

1.修改文本

$('#text-ul li[id=javascript]').text();//获得文本
$('#text-ul li[id=javascript]').text('c++');//修改文本

2.设置css样式

$('#text-ul li[id=javascript]').css("color","red")

3.显示和隐藏文本：本质display: none

$('#text-ul li[id=javascript]').show();//显示
$('#text-ul li[id=javascript]').hide();//隐藏

小小马同学

关注

1
点赞
踩
1

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

JavaScript学习笔记

1.什么是JavaScript

1.1概述

1.2历史

2.快速入门

2.1引入javaScript

2.2.基本语法入门

3数据类型

3.1字符串

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

2.需要注意转义字符 \

3.多行字符串编写

4.模板字符串

5.字符串长度

6.字符串的可变性，不变性

7.大小写转换

8.获得指定字符的下标

9.截取字符串substring[)

3.2数组

1.数组长度

2.通过元素获得下标索引

3.截取Array的一部分，返回一个新的数组

4.向数组的尾部添加一些元素

5.数组排序

6.元素反转

7.数组拼接

8.打印数组拼接连接符

9.多维数组

3.3对象

1.给对象的属性赋值

2.使用一个不存在的属性不会报错 undefined

3.动态的删减属性

4.动态的增加属性

5.判断属性值是否在这个对象中！ xxx in xxx

6.判断一个属性是否是这个对象自身拥有的hasOwnProperty()

3.4流程控制

1.if判断

2.while循环，避免程序死循环

3.for循环

4.forEach循环

3.5map和set集合

Map集合：

Set：无序不重复的集合

3.6 iterator迭代

1.遍历数组

2.遍历map

3.遍历set

4.函数

4.1定义函数

4.2变量的作用域

4.3方法

5.内部对象

5.1、Date

5.2 JSON

6.面向对象编程

1.面向对象的原型继承

2.class 继承

7.操作BOM对象(重点)

1.window

2.Navigator

3.screen

4.location（重要）

5.document

6.history（不建议使用）

8.操作DOM对象

1.获得DOM节点

2.更新节点

3.删除节点

4.插入节点

9.操作表单

1.获得提交的信息

2.提交表单

10.jQuery

1.初识jQuery

2.选择器

3.事件

4.操作DOM

2.需要注意转义字符 `\`