JavaScript学习记录

星悦糖

已于 2022-05-01 15:17:46 修改

阅读量1.3k

点赞数 2

分类专栏： Js 文章标签： javascript jquery json ajax

于 2022-05-01 15:15:53 首次发布

本文链接：https://blog.csdn.net/friggly/article/details/124515176

版权

Js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

视频来源（文章笔记根据如下视频学习整理）：【狂神说Java】JavaScript最新教程通俗易懂_哔哩哔哩_bilibili笔记资料交流都在我们的平台：www.kuangstudy.com秦疆老师的JavaScript课程，前端三大基石最后一个什么是JavaScript？基本语法是什么样？如何理解面向对象？操作BOM，操作DOM，jQuery怎么快速上手？趣味加实战，新特性补充讲解，都在这里啦狂神说Java系列，努力打造通俗易懂的教程QQ交流群: 664386224https://www.bilibili.com/video/BV1JJ41177di?p=1

1 概述

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

一个合格的后端人员，必须要精通JavaScript

2 入门

2.1 引入JavaScript

（1）内部标签，在<script>标签内写JavaScript代码，下面简称JS。

<script>
        //....
        alert("Hello World！");
</script>

（2）外部引入，一般新建一个js文件夹用来存放JS代码。

<script src="js/keleJs.js"></script>

（3）不用显示定义type，默认是javascript

    <!--不用显示定义type，默认是javascript-->
    <script type="text/javascript"></script>

2.2 基本语法

javaScript严格区分大小写。

调试错误时：在浏览器的source下面打断点，然后刷新界面即可。

定义变量格式：变量类型变量名=变量名

    <script>
        var name="zlk";
    </script>

条件控制：

    <script>
        // 1.定义变量  (可以按照Java的代码规范)
        var num = 1;
        //alert(num);
        // 2. 条件控制
        var score = 80;
        if (score >= 60 && score < 70) {
            alert("成绩合格");
        } else if (score >= 70 && score < 80) {
            alert("成绩良好");
        } else {
            alert("成绩不合格");
        }
        console.log(score) //在浏览器的控制台打印变量
    </script>

2.3 数据类型

（1）number：（js不区分小数和整数，统一用Number表示）

123//整数123
123.1//浮点数123.1
1.123e3//科学计数法
-99//负数
NaN	//not a number
Infinity // 表示无限大

（2）字符串：（'abc' "abc"）

（3）布尔值：（true，false）

（4）逻辑运算：

&& 两个都为真，结果为真

|| 一个为真，结果为真

! 	真即假，假即真

（5）比较运算符【重要】

=  赋值
1，"1"
== 等于（类型不一样，值一样，也会判断为true）
=== 绝对等于（类型一样，值一样，结果为true）
这是一个JS的缺陷，在比时不要使用 == 进行比较，因为：
    NaN===NaN,NaN与所有的数值都不相等，包括自己
    只能通过isNaN(NaN),来判断这个数是不是NaN

（6）浮点数问题

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

尽量避免使用浮点数进行运算，存在精度问题。一般用 |a-b| < 某个精确度，来表示 a=b

console.log(Math.abs(1/3-(1-2/3))<0.00000001)   //true

在这里插入图片描述

（7）null和undefined

null 空
undefined 未定义

（8）数组

java的数组必须是相同类型的对象，js中不需要这样

// 保证代码的可读性，尽量使用[]
var arr = [1,2,3,4,5,'hello',null,true];
// 第二种定义方法
new Array(1,2,3,4,5,'hello');

取数组下标，如果越界了，就会undefined

（9）对象

对象是大括号，数组是中括号
- 每个属性之间使用逗号隔开，最后一个属性不需要逗号
- 取对象值

var Person = {
    name :"Tom",
    age:3,
    tags:['js', 'web','java']
}
console.log(Person.name);
console.log(Person.age);

2.4 严格检查模式

在这里插入图片描述

    <!--
    前提：IDEA需要设置支持ES6语法
        'use strict';严格检查模式，预防JavaScript的随意性导致产生的一些问题
        必须写在JavaScript的第一行！
        局部变量建议都使用let去定义!
    -->
    <script>
        'use strict';
        //全局变量
        let i = 1
    </script>

3 数据类型

3.1 字符串

（1）一般时候用单引号或者双引号对字符串进行包裹，此外还要注意转义字符\

    <script>
        console.log('Test01\'测试');
        console.log('Test02\n测试');
        console.log('Test03\t测试');
        console.log('Test04\u4e2d测试');
    </script>

（2）多行字符串编写

var msg=
    `hello
            world
           你好呀
           JavaScript`;

运行结果：

（3）模板字符串

let name='zlk';
let age=20;
var msg=`你好呀，${name}`;

（4）字符串长度

str.length;

（5）字符串的可变性，不可变

（6）大小写转换

var str='Zlk';
// 注意，这里是方法，不是属性
str.toUpperCase();
str.toLowerCase();

（7）console.log(str.indexOf(‘b’)); //在字符串中第一次出现的坐标。

（8）substring，从数组下标为0开始截取字符串。

str.substring(1); // 从第一个字符串截取到最后一个字符串
str.substring(1,3); // [1,3)

3.2 数组

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

长度：arr.length；
- 注意：给arr.lennth赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失；
indexOf，通过元素获得下标索引；
- 字符串的"1"和数字 1 是不同的；
slice（）：截取Array的一部分，返回的一个新数组，类似于String中substring；
push()，pop()尾部；
unshift(),shift() 头部；
排序：sort()；
元素反转：reverse()；
concat()；
- 注意：concat()并没有修改数组，只是会返回一个新的数组。
连接符：join()；打印拼接数组，使用特定的字符串连接。
多维数组。

var arr = [1,2,3,4,5,6];	// 通过下标取值和赋值
arr.length;	// 长度
arr.indexOf(2);	// 通过元素获得下标索引
arr.slice(2,5); //从数组下标为2开始截取到下标为4  [3,4,5]
arr.push(42); //在尾部添加一个元素，返回数组长度
arr;
arr.pop(); //默认从尾部删除一个，返回删除的元素
arr;
arr.unshift(92); //在头部添加一个元素，返回数组长度
arr;
arr.concat();//没有传递参数，此时它只是复制当前数组，并且返回一个副本
arr;
arr.shift();//从头部删除一个元素，返回删除元素的值
arr;
arr.sort(); //排序
arr.reverse(); //元素反转
arr.concat(["a","b","c"]);//先给当前数组创建一个副本，然后将接收到的参数添加到这个副本（数组）的末尾，最后返回一个新的数组。

arr;
arr.join('+');//打印拼接数组，使用特定的字符串连接
var arr2 = [[1,2],[3,6],[9,12]];  //多维数组
arr2[1][1];

3.3 对象

JS中对象，大括号{…}表示一个对象，键值对用来描述属性xxx：xxx，多个属性之间用逗号隔开，最后一个属性不加逗号。
JS中的所有的键都是字符串，值是任意对象。

// 定义了一个person对象，它有四个属性
var person = {
	name:"zlk",
	age:20,
	email:"sada@qq.com",
	score:100
};
person.name = "kk";  //给对象中的属性赋值：
person.name
delete person.name;  //若存在该属性则返回true，删除对象的属性
person;
person.str = "num23";  //增加一个属性，直接给新的属性添加值即可。
person;
'score' in person;  //对象中是否存在该属性
// 继承
'toString' in person;  //true
person.hasOwnProperty('toString'); //false  判断一个属性是否是这个对象自身拥有的
person.hasOwnProperty('age');   //true    //私有的

3.4 流程控制

if判断

    <script>
        // 1.定义变量  (可以按照Java的代码规范)
        var num = 1;
        //alert(num);
        // 2. 条件控制
        var score = 80;
        if (score >= 60 && score < 70) {
            alert("成绩合格");
        } else if (score >= 70 && score < 80) {
            alert("成绩良好");
        } else {
            alert("成绩不合格");
        }
        console.log(score) //在浏览器的控制台打印变量
    </script>

while循环判断，注意避免死循环

    <script>
        var age = 12;
        while(age<100){
            age = age + 1;
            console.log(age);
        }
        
        do{
            age = age + 1;
            console.log(age);
        }while(age<100);
    </script>

for循环

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

for-each循环

var age = [1,,2,3,4,5,6];
// 函数
age.forEach(function (value){
	console.log(value);
})

for……in——下标

    <script>
        var age = [1,2,3,4,5,6];

        for(var num in age){
            if(age.hasOwnProperty(num)){
                console.log("存在！");
                console.log(age[num]);
            }
        }
    </script>

3.5 Map和Set

Map

    <script>
        // ES6语法 Map
        // 学生成绩，学生姓名
        // var names = ["Tone","jay","sony"];
        // var scores = [92,84,96];
        
        var map = new Map([['Tone',92],['jay',84],['sony',96]]);
        var name = map.get('Tone'); // 通过key获得value
        map.set('admin',123456);    // 新增
        map.delete('Tone'); //删除  
        
    </script>

Set：无序不重复的集合

var set = new Set([1,2,3,4,5,6,7,8]);
set.add(2); // 添加
set.delete(1);   // 删除
console.log(set.has(3));    // 是否包含某个元素

3.6 iterator

使用iterator来遍历迭代我们Map，Set！

遍历数组

var arr = [3,4,5,6,7,8,12];
for(var x of arr){
	console.log(x);
}

遍历Map

var map = new Map([['Tone',92],['jay',84],['sony',96]]);
for (let x of map){
	console.log(x);
}

4 函数

4.1 定义函数

以绝对值函数为例

执行到return代表函数结束，返回结果，如果没有执行return，函数执行完也会返回结果，结果就是undefined。

方式一：

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

方式二：

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

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

调用函数：

abs(12);	// 12
abs(-36);	// 36

参数问题：javaScript可以传任意个参数，也可以不传递参数。那么传进来的参数是否存在问题？假设传入的参数类型不对，我们又当如何规避呢？

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

arguments是一个JS免费赠送的关键字；代表传递进来的所有参数是一个数组！

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

在这里插入图片描述

问题：arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作。需要排除已有参数时该怎么做呢？

以前：

var aaa = function(x,y){
    console.log("x-->" + x);
    console.log("y-->" + y);
    //想获取x,y之外的参数
    for (var i = 2; i < arguments.length; i++) {
        console.log(arguments[i]);
    }
}

现在：

...rest：ES6引入的新特性，获取除了已经定义的参数之外的所有参数。

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

function aaa(a,b,...rest){
    console.log("a=>" + a);
    console.log("b=>" + b);
    console.log(rest);
}

4.2 变量的作用域

1、在 JS中，var 定义的变量是有作用域的。如果在函数体中声明，则在函数体外不可以使用

//函数体
function qj(){
    var x = 1;
    x = x + 1;
}
x = x + 2;//Uncaught ReferenceError: x is not defined

2、如果两个函数使用了相同的变量名，只要两个变量分别在两个函数内部就不会发生冲突。

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

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

function qj(){
    var x = 1;
    
    function qj2(){
        var y = x + 1;
    }
    var z = y + 1;//Uncaught ReferenceError: y is not defined
}

4、内部函数变量和外部函数变量重名：函数查找变量从自身函数开始，由“内”向“外”查找，如果自身内部存在该变量，那么外部存在这个同名的函数变量将会被内部函数屏蔽掉。

JS实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找（自内向外），如果在全局作用域都没有找到，就会报错 Refrence。

function qj(){
    var x = 1;

    function qj2(){
        var x = "A";
        console.log("inner:" + x);//inner:A
    }
    console.log("outer:" + x);//outer:1
    qj2();
}
qj();

5、JS会提升变量的作用域

function qj(){
    var x = "x" + y;
    console.log(x);
    var y = "y";
}

运行结果：

JS执行引擎，自动提升了 y 的声明，但是不会提升变量 y 的赋值；同于下面的代码（常用）：

function qj() {
    var y;
    var x = "x" + y;
    console.log(x);
    y = 'y';
}

所有的变量定义都放在函数的头部，这个是在JS 建立之初就存在的规范。不要乱放，便于代码维护；

function qj(){
    var x = 1,
        y = 2,
        z,i,a;
    
    //变量全部在前面声明完
}

6、全局变量

<script>
    //全局变量x
    var x = 1;

    function qj(){
        console.log(x);
    }
    qj();
    console.log(x);
</script>

7、全局对象 window，默认所有的全局变量都会自动绑定在window对象下

<script>
    var x = 'xxx';
    alert(x);
    alert(window.x);//默认所有的全局变量，都会自动绑定在window对象下
</script>

8、alert() 这个函数本身也是一个window的变量；

var x = 'xxx';
window.alert(x);
//方法也可以作为变量
var old_alert = window.alert;
old_alert(x);

window.alert = function (){

}
//alert()失效了，因为我们重写了 alert()
window.alert('123');
//恢复
window.alert = old_alert;
window.alert('123');

9、规范
所有变量都会绑定到 window上。如果不同的 js 文件，使用了相同的全局变量，就会产生冲突，如何减少这样的冲突呢？

我们可以把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突问题，
jQuery中就是使用的该方法：jQuery.name，简便写法：$()。

//唯一全局变量
var KuangApp = {};
//定义全局变量
KuangApp.name = '张三';
KuangApp.add = function (x, y) {
    return x + y;
}

10、局部作用域（局部变量建议用 let 定义！）

使用var关键字除了局部作用域变量还可以继续使用！

function aaa() {
    for (var i = 0; i < 10; i++) {
        console.log(i);
    }
    console.log(i + 1);//有问题--->i出了这个作用域还可以使用
}
aaa();

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

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

11、常量

在ES6之前，约定只要是用全部大写字母命名的变量就是常量；建议不要修改这样的值（变量值实际上是可以进行修改的）。

var PI = '3.14';
console.log(PI);
PI = '3.11';//如果有人不遵守约定，是可以随便改的
console.log(PI);

在ES6引入了常量关键字 const定义常量，此时常量一旦定义便不可以修改。

const PI = '3.14';
console.log(PI);
//下面报错了
PI = '3.11';//Attempt to assign to const or readonly variable(尝试赋值给const或只读变量)

4.3 方法

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

var kuangshen = {
    //属性
    name:'天降',
    birth:2000,
    //方法
    age: function () {
        //今年-出生的年
        var now = new Date().getFullYear();
        return now - this.birth;
    }
}
//属性
console.log(kuangshen.name);
//方法，一定要带上()
console.log(kuangshen.age());

在 Java 中 this 默认指向当前方法所在的对象；在 js 中可以使用 apply 控制 this 指向。

function getAge() {
    //今年-出生的年
    var now = new Date().getFullYear();
    return now - this.birth;
}
var kuangshen = {
    name:'狂神',
    birth:2000,
    //方法
    age: getAge
}
var xiaoming = {
    name:'小明',
    birth:2000,
    //方法
    age: getAge
}
getAge().apply(kuangshen, []);//指定该方法中的this，指向kuangshen，参数为空

5 内部对象

标准对象

typeof 123
typeof '123'
typeof true
typeof NaN
typeof []
typeof {}
typeof Math.abs
typeof undefined

输出结果：

5.1 Date

基本使用

var now = new Date();
console.log(now);//打印此刻的中国标准时间
console.log(now.getFullYear());//年
console.log(now.getMonth());//月 (0~11),0代表1月
console.log(now.getDate());//日
console.log(now.getDay());//星期几
console.log(now.getHours());//时
console.log(now.getMinutes());//分
console.log(now.getSeconds());//秒
console.log(now.getTime());//时间戳 全世界统一  1970.1.1 0:00:00 到现在的总毫秒数
console.log(new Date(1543541513213));//将时间戳转为时间
console.log(now.toLocaleString());//转换为当地时间

5.2 JSON

查看JSON具体知识请移步此处：
Json交互处理_friggly的博客-CSDN博客_json 交互json简介：json是一种轻量级的数据交换格式，采用完全独立于编程语言的文本格式来存储和表示数据。它易于阅读和编写，同时也有利于及其解析和生成。在js中，一切皆对象，因此任何js支持的类型都可以通过json来表示，例如字符串、数字、对象、数组，对象等，json语法规则如下所示：数组（Array）用方括号(“[]”)表示。对象（0bject）用大括号(“{}”)表示。名称/值对(name/value）组合成数组和对象。名称(name）置于双引号中，值（...https://blog.csdn.net/friggly/article/details/124375771

5.3 AJAX

查看AJAX具体知识请移步此处：

https://blog.csdn.net/friggly/article/details/124509554https://blog.csdn.net/friggly/article/details/124509554

6 面向对象编程

面向对象是一种编程思想。谈到面向对象，我们需要先来说一下面向过程的编程方式，因为面向对象是从面向过程过渡而来的。

以实际生活的洗衣服进行说明：

（1）如果是面向过程，我们把洗衣服任务拆解成一系列的步骤，每一个步骤就是一个函数。

第一步，打开洗衣机；

第二步，放衣服和洗衣液；

第三步，选择洗衣模式，开始洗衣；

第四步，等待洗完，拿出衣服。

（2）如果是面向对象，我们拆分成人和洗衣机两个对象，再分析每一个对象需要做哪些事情。

人在其中需要做这三件事：

第一件打开洗衣机
第二件是放衣服和洗衣液
第三件事是洗完衣服后拿出衣服。

洗衣机在其中只需要做一件事情：

根据洗衣模式洗衣服。

我们能够看出来面向过程跟面向对象，是两种不同的思维方式，处理问题的思考的角度不一样。面相过程的思维方式，它更加注重这个事情的每一个步骤以及顺序。他比较直接高效，需要做什么可以直接开始干。面向对象的思维方式，它更加注重事情有哪些参与者，需求里面有哪些对象，这些对象各自需要做些什么事情。将其拆解成一个个模块和对象，这样会更易于维护和拓展。
其中面向对象的三大特点是封装、继承、多态。

javaScript、java、c#等都是面向对象编程；但是javaScript有些区别！

在Java中：类是模板，对象是具体实例；而在 JS 中，我们需要转换一下思维方式！

原型：

var Student = {
    name:"张三",
    age:3,
    sex:"男",
    run : function () {
        console.log(this.name + " run...")
    }
}
//小明也是学生，就没必要再重新写Student类中的某些属性和方法
var xiaoming = {
    name:"小明"
}

//小明的原型指向Student ("原型"可以理解为"父类")
xiaoming.__proto__ = Student;
console.log(xiaoming.run());

var Bird = {
    fly : function () {
        console.log(this.name + " fly...")
    }
}
//js的原型比较随意，也可以把小明指向鸟
xiaoming.__proto__ = Bird;
console.log(xiaoming.fly());

既然原型可以理解为父类，那干嘛不直接用父类呢? 所以 js 中就借鉴了 Java 的 class 继承

class集继承

class 关键字，是在 ES6 引入的

1、定义一个类、属性、方法

class Student {

    constructor(name) {
        this.name = name;
    }
    hello() {
        alert('hello,' + this.name);
    }
}
var jerry = new Student("jerry");
var jack = new Student("jack");

console.log(jerry.hello());
console.log(jack.hello());

2、继承

//ES6之后========================
//定义一个学生的类
class Student {
    constructor(name) {
        this.name = name;
    }
    hello() {
        alert('hello,' + this.name);
    }
}
//定义一个小学生类继承Student
class XiaoStudent extends Student{
    constructor(name,grade){
        super(name);
        this.grade = grade;
    }
    myGrade(){
        alert(this.name + '是一名小学生');
    }
}

var jerry = new Student("jerry");
var jack = new Student("jack");
var tom = new XiaoStudent("tom");

console.log(jerry.hello());
console.log(jack.hello());
console.log(tom.myGrade());

继承的本质还是原型，只是换了一种更加友好的写法而已

原型链

__ proto __:
在这里插入图片描述

7 操作BOM对象（重点）

javascript 和浏览器关系?

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

BOM：浏览器对象模型

拓展：浏览器内核有Edge、Chrome、Safari、FireFox、Opera

window对象(重要)，代表浏览器窗口

// window代表浏览器窗口
window.alert(1); //弹窗
undefined
window.innerHeight;  
699
window.innerWidth
158
window.outerHeight
818
window.outerWidth
1065

screen对象，代表屏幕尺寸

location(重要)，代表当前页面的URL信息

location;
// 设置新的地址
location.assign('https://blog.csdn.net/m0_46153949');

document（内容DOM）,代表当前的页面，HTML是怎么展示的？-->HTML DOM文档树

获取具体的文档树节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM</title>
    <script>
        var dl = document.getElementById('app');
    </script>
</head>
<body>

<dl id="app">
    <dt>java</dt>
    <dd>javaSE</dd>
    <dd>javaWeb</dd>
    <dd>javaEE</dd>
</dl>

</body>
</html>

获取 cookie

8 操作DOM对象（重点）

DOM：文档对象模型

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

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

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

下面的示例代码用的是原生JS代码，之后我们尽量都使用 jQuery()操作会更加方便;

（1）获取Dom节点：

<body>

    <div id="father">
        <h1>标题一</h1>
        <p id = "p1">p1</p>
        <p class = "p2">p2</p>
    </div>
    
    <script>
        //对应css选择器
        var father = document.getElementById('father');
        var h = document.getElementsByTagName('h1');
        var p1 = document.getElementById('p1');
        var p2 = document.getElementsByClassName('p2');
    
        var childrens = father.children;//获取父节点下的所有子节点
    </script>

</body>

（2）更新DOM节点

先拿到 id1

<body>
    <div id="id1">
        <!--一个空标签-->
    </div>

    <script>
        var id1 = document.getElementById('id1');
    </script>
</body>

操作文本:

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

操作CSS

id1.style.color = 'blue'; 修改文本颜色；
id1.style.fontSize='22px'; 修改文字大小；
id1.style.padding='2em'; 修改文本位置；

（3）删除DOM节点

步骤：

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

删掉节点 p1：

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

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</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]);
</script>

</body>
</html>

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

（4）插入节点

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

appendChild()，追加到后面：

<body>
    <p id="js">JavaScript</p><!--现在我们想把这个标签添加到 div中-->
    <div id="list">
        <p id="se">JavaSE</p>
        <p id="ee">JavaEE</p>
        <p id="me">JavaME</p>
    </div>

    <script>
        var js = document.getElementById('js');
        var list = document.getElementById('list');

        list.appendChild(js);//追加到后面
    </script>
</body>

效果如下：
在这里插入图片描述
上面是将一个已经存在的节点添加到别处，现在我们新创建节点：

<script>
    var js = document.getElementById('js');//已经存在的节点
    var list = document.getElementById('list');
    //通过JS创建一个新的节点
    var newP = document.createElement('p');//创建一个p标签
    newP.id = 'newP';
    newP.innerText = 'Hello,Kuangshen';
    //创建一个标签节点
    var myScript = document.createElement('script');
    myScript.setAttribute('type','text/javascript');

    //可以创建一个style标签
    var myStyle = document.createElement('style');//创建了一个空style标签
    myStyle.setAttribute('type','text/css');
    myStyle.innerHTML = 'body{background-color:chartreuse;}';//设置标签内容

    document.getElementsByTagName('head')[0].appendChild(myStyle);
</script>

追加在前面 insertBefore()

<body>
    <!--现在我们想把这个JavaScript添加到div中JavaEE的前面-->
    <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>
        var ee = document.getElementById('ee');
        var js = document.getElementById('js');
        var list = document.getElementById('list');
        //要包含的节点.insertBefore(newNode,targetNode)
        list.insertBefore(js,ee);
    </script>
</body>

9 操作表单

表单form----->DOM树:

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

<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 input_text = document.getElementById("username");
    var boy_radio = document.getElementById("boy");
    var girl_radio = document.getElementById("girl");
    // 得到输入框的值
    // input_text.value;
    // 修改输入框的值
    input_text.value="admin";

    // 对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值
    boy_radio.checked = true;  // 赋值
    girl_radio.checked;  // 查看返回的结果，是否为true，如果为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接收
-->
<form action="http://guozhivip.com/" method="post" onsubmit="return aaa()">
    <p>
        <span>用户名：</span>
        <input type="text" id="username" name="username"/>
    </p>
    <p>
        <span>密码：</span>
        <input type="password" id="password" />
    </p>
    <input type="hidden" id="md5-password" name="password">

    <!--绑定事件,onclick被点击,一般通过按钮级别进行操作-->
    <!--<button type="submit" onclick="aaa()">提交</button>-->
    <button type="submit">提交</button>

</form>

<script>
    function aaa(){
        alert(1);
        var username = document.getElementById("username");
        var pwd = document.getElementById("password");
        // console.log(uname.value);
        // console.log(pwd.value);
        var md5pwd = document.getElementById("md5-password");
        // MD5 算法
        // pwd.value = md5(pwd.value);
        md5pwd.value = md5(pwd.value);
        console.log(pwd.value);
        // 可以校验判断表单内容，true就是通过提交，false就是阻止提交
        return false;
    }
</script>

</body>
</html>

10 jQuery

javaScript 和 jQuery的关系？

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

（1）获取 jQuery
官网下载地址：jQuery CDNhttps://releases.jquery.com/
文档工具站：jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chmjQuery API 1.x - 3.x 中文在线版，jQuery API 中文最新版，jQuery 是一个兼容多浏览器的 JavasSript 框架，核心理念是 - write less, do more。jQuery API 中文文档(适用jQuery 1.0 - jQuery 3.x).https://jquery.cuishifeng.cn/

jQuery使用前提：从官网将下载的 js 文件放到项目中，新建HTML文件：

公式：$(selector).action()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入jQuery-->
    <script src="js/jquery-3.6.0.js"></script>
</head>
<body>
    <!--
        $就代表jQuery，()内是选择器
        公式：$(selector).action()
    -->
    <a href="" id="test-jquery">点我</a>
    <script>
        //选择器就是css选择器，#+id
        $('#test-jquery').click(function(){
            alert('hello,jQuery!');
        });
    </script>

</body>
</html>

选择器:

//原生js，选择器少，麻烦、不方便记忆
//标签
document.getElementByTagName();
//id
document.getElementById();
//class
document.getElementByClassName();

//jQuery css中的选择器它全部都能用！
$('p').click();//标签选择器
$('#id1').click();//id选择器
$('.class1').click;//class选择器

事件：鼠标事件、键盘事件，其他事件....

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.0.js"></script>
    <style>
        #divMove{
            width:500px;
            height:500px;
            border:1px solid red;
        }
    </style>
</head>
<body>
<!--要求：获取鼠标当前的一个坐标-->
mouse：<span id = "mouseMove"></span>
<div id = "divMove">
    在这里移动鼠标试试
</div>
<script>
    //当网页元素加载完毕之后，响应事件
    //$(document).ready(function(){})  //原生JS写法
    $(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>
    <script src="js/jquery-3.6.0.js"></script>
</head>
<body>
    <ul id="test-ul">
        <li class="js">JavaScript</li>
        <li name="python">Python</li>
    </ul>

    <script>
        //document.getElementById('');原本得这样写，太麻烦
        //用JQuery
        $('#test-ul li[name=python]').text();//获得值
        $('#test-ul li[name=python]').text('设置值');//设置值
        $('#test-ul').html();//获得值
        $('#test-ul').html('<strong>123</strong>');//设置值

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

在这里插入图片描述

浏览器控制台测试：

$('#test-ul li[name=python]').text();
> "Python"
$('#test-ul li[name=python]').text('设置值');

$('#test-ul li[name=python]').text();
>"设置值"

CSS的操作:

$('#test-ul li[name=python]').css({"color","red"},{"size",15px});

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

$('#test-ul li[name=python]').show();
$('#test-ul li[name=python]').hide();

娱乐测试:

$(window).width()
$(window).height()
$('#test-ul li[name=python]').toggle();//切换，显示变为隐藏，隐藏变为显示

11 总结

jQuery小游戏网站：网站①，网站②。可以利用小游戏对jQuery知识进行更深一步的学习。

星悦糖

关注

2
点赞
踩
1

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录