首页 > 编程语言> 文章详细

JavaScript

2022-06-24 01:00:56 阅读：262 来源： 互联网

标签：function console name JavaScript let var document

JavaScript：

学习视频-狂神说JavaScript：视频链接

JavaScript

1、什么是JavaScript

1.1、概述

JavaScript是一门世界上最流行的脚本语言
Java，JavaScript 10天
一个合格的后端人员，必须精通JavaScript

1.2、历史

JavaScript的起源故事
ECMAScript它可以理解为JavaScript的一个标准
最新版本已经到es6版本~
但是大部分浏览器还只停留在支持es5代码上！
开发环境---线上环境，版本不一致

2、快速入门

2.1、引入JavaScript

1、内部标签

 <script> 
     //...
 <script>

2、外部引入

abc.js

//...

test.html

<!-- 外部引入 -->
<!-- 注意：script标签必须成对出现 -->
<script src="abc.js"></script>
 
<!--不用显示定义type，也默认就是javaScript-->
<script type="text/javascript"></script>

测试代码

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

    <!-- script标签内，写JavaScript代码 -->
    <!-- <script> -->
    <!--     alert('hello,world'); -->
    <!-- </script> -->

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

    </script>

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

    </script>
</head>
<body>


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

2.2、基本语法入门

<!-- JavaScript严格区分大小写！ -->
<script>
    // 1. 定义变量  变量类型  变量名 = 变量值;
    var score = 70;
    // alert(num);
    // 2. 条件控制
    if (score>=60 && score<70){
        alert("60~69");
    }else if (score>=70 && score<80){
        alert("70~80");
    }else {
        alert("other");
    }

    //console.log(log) 在浏览器的控制台打印变量，System.out.println();
    /*注释*/
</script>

浏览器必备调试须知：

浏览器必备调试须知

2.3、数据类型

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

变量

var a_$w

number
js不区分小树和整数，number

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

字符串
‘abc’ “abc”

布尔值
true，false

逻辑运算

 && 两个都为真，结果为真
 || 一个为真，结果为真
 !  真即假，假即真

比较运算符 ！！！重要！

 =
 1,"1"
 == 等于（类型不一样，值一样，也会判断为true）
 === 绝对等于（类型一样，值一样，结果为true）

这是一个JS的缺陷，坚持不要使用 == 比较
须知：

NaN === NaN，这个与所有的数值都不相等，包括自己
只能通过isNaN(NaN) 来判断这个数是否是NaN

浮点数问题

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

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

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

null和undefined

null 空
undefined 未定义

数组
Java的数组必须是相同类型的对象~，JS中不需要这样！

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

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

 undefined

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

每个属性之间使用逗号隔开，最后一个属性不需要逗号

// Person person = new Person(1,2,3,4,5);
var person = {
    name: "TangGuo",
    age: 3,
    tags: ['js','java','web','...']
}

取对象的值

 person.name
 > "TangGuo"
 person.age
 > 3

2.4、严格检查格式use strict

严格检查模式

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

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

</body>
</html>

3、数据类型

3.1、字符串

1、正常字符串我们使用单引号('a')，或者双引号("a")包裹

2、注意转义字符 \

\'			'
\n			换行
\t			tab
\u4e2d    	\u#### Unicode字符
\x41    	Ascall字符

3、多行字符串编写

'use strict';
//tab 上面 esc键下面
let msg =
    `hello
    world
    你好呀
    糖果`

4、模板字符串

'use strict';
//tab 上面 esc键下面
let name = "糖果";
let age = 3;
let msg =`你好呀，${name},${age}`
console.log(msg);

5、字符串长度

'use strict';
let str = 'abc';
console.log(str.length);

6、字符串不可变

字符串不可变

7、大小写转换

//注意，这里是方法，不是属性了
student.toUpperCase();//大写
student.toLowerCase();//小写

8、获取字符下标

student.indexof('t');

9、substring，截取字符串从0开始

//前闭后开
student.substring(1)//从第一个字符串截取到最后一个字符串
student.substring(1,3)//[1,3)

3.2、数组

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

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

1、长度

arr.length

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

2、indexOf，通过元素获得下标索引

arr.indexOf(2)
1

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

3、slice（）

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

4、push()，pop()尾部

push：压入到尾部
pop：弹出尾部的一个元素

5、unshift(),shift() 头部

unshift：压入到头部
shift：弹出头部的一个元素

6、排序sort()

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

7、元素反转reverse()

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

8、concat()

arr = ["C","B","A"]
(3) ['C', 'B', 'A']
arr.concat([1,2,3])
(6) ['C', 'B', 'A', 1, 2, 3]
arr
(3) ['C', 'B', 'A']

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

9、连接符join

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

(3) ['C', 'B', 'A']
arr.join('-')
'C-B-A'

10、多维数组

arr = [[1,2],[3,4],["5","6"]];
arr[1][1]
4

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

3.3、对象

若干个键值对

var 对象名 = {
	属性名：属性值，
	属性名：属性值，
	属性名：属性值
}
//定义了一个person对象，它有四个属性
var person = {
	name: "TangGuo",
	age: 3,
	email: "123456798@QQ.com",
	score: 66
}

Js中对象，{…}表示一个对象，键值对描述属性xxx：xxx，多个属性之间用逗号隔开，最后一个属性不加逗号！

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

1、对象赋值

person.name = "TangGuo"
"TangGuo"
person.name
"TangGuo"

2、使用一个不存在的对象属性，不会报错！

person.haha
undefined

3、动态的删减属性，通过delete删除对象的属性

delete person.name
true
person

4、动态的添加，直接给新的属性添加值即可

person.haha = "haha"
"haha"
person

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

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

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

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

3.4、流程控制

if判断

var age = 3;
if (age>3){ //第一个判断
    alert("haha");
}else if(age<5){ //第二个判断
    alert("kuwa~");
}else{ //否则
    alert("kuwa~");
}

while循环，避免程序死循环

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

for循环

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

forEach循环

ES5.1引入的特性

'use strict';
let age = [12,3,24,65,56,43,22,9];
//函数
age.forEach(function (value) {
    console.log(value)
})

for …in--下标

let age = [12,3,24,65,56,43,22,9];
//for(var index in object)
for (let num in age){
    console.log(age[num]);
}

3.5、Map和Set

ES6的新特性~

Map：

'use strict';

//ES6 Map
//学生的成绩，学生的名字
let map = new Map([['tom',100],['jack',90],['haha',80]])
let name = map.get('tom'); //通过key获取value
map.set('admin',123456); //新增或修改
map.delete('admin'); //删除

Set：无序不重复的集合

let set = new Set([3,2,3,1,3,2,3,1]); //set可以去重
set.add(4); //添加
set.delete(1); //删除
console.log(set.has(3)); //是否包含某个元素！

3.6、iterator

ES6新特性

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

遍历数组

//通过for of
let arr = [3,4,5];
for (let x of arr) {
    console.log(x)
}
//通过for in 下标
for (let index in arr) {
    console.log(arr[index])
}

遍历Map

let map = new Map([['tom',100],['jack',90],['haha',80]])
for (let x of map) {
    console.log(x)
}

遍历set

let set = new Set([5,6,7]);
for (let num of set) {
    console.log(num)
}

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就可以调用函数！
方式一和方式二等价！

调用函数

abs(10)//10
abs(-10) //10

参数问题：javaScript可以传任意个参数，也可以不传递参数~
参数进来是否存在问题？

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

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

arguments

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包含所有的参数，我们有时候想使用多余的参数来进行附加操作。需要排除已有参数~

rest

以前：

if (arguments.length>2){
    for (let i = 2; i < arguments.length; i++) {
        //...
    }
}

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

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

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

4.2、变量的作用域

变量的作用域

在javascript中，var定义变量实际是有作用域的。

假设在函数体重声明，则在函数体外不可以使用~（非要想实现的话，后面可以研究一下闭包）

'use strict';
function tg() {
    let x = 1;
    x = x + 1;
}
x = x + 2; //Uncaught ReferenceError: x is not defined

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

'use strict';
function tg1() {
    let x = 1;
    x = x + 1;
}

function tg2() {
    let x = 1;
    x = x + 1;
}

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

'use strict';
function tg() {
    let x = 1;
    //内部函数可以访问外部函数的成员，反之则不行
    function tg2() {
        let y = x + 1;
    }
    var z = y + 1; //VM184:1 Uncaught ReferenceError: y is not defined
}

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

'use strict';
function tg() {
    let x = 1;
    //内部函数可以访问外部函数的成员，反之则不行
    function tg2() {
        let x = 'A';
        console.log('inner'+x); //innerA
    }
    console.log('outer'+x); //outer1
    tg2()
}
tg()

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

提升变量的作用域

如果使用let，变量的作用域不会提升。

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

结果：xundefined

说明：js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值；

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

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

function tg2() {
    var x = 1,
        y = x + 1,
        z,i,a; //undefined
    
    //之后随意用
}

全局变量

'use strict';
//全局变量
var x = 1;
function f() {
    console.log(x)
}
f();
console.log(x);

全局对象 window

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

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

var x = 'xxx';
window.alert(x);

var old_alert = window.alert;
old_alert(111);

window.alert = function () {
    
}
//发现 alert() 失效了
window.alert(222);

//恢复
window.alert = old_alert;
window.alert(333);

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

规范

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

唯一全局变量

//唯一一个全局变量
var tangGuo = {};

//定义全局变量
tangGuo.name = 'tangGuo';
tangGuo.add = function (a, b) {
    return a+b;
}

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

jQuery中就是使用的该方法：jQuery.name，简便写法：$()

局部作用域 let

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

let

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

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

建议大家都用let去定义局部作用域的变量；

常量 const

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

var PI = '3.14';

console.log(PI);
PI = '213'; //可以改变这个值
console.log(PI);

const

在ES6引入了常量关键字 const

const PI = '3.14'; //只读变量
console.log(PI);
//PI = '123'; // TypeError: Assignment to constant variable.
console.log(PI);

4.3、方法

定义方法

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

'use strict';
var tangguo = {
    name: '糖果',
    birth: 1997,
    // 方法
    age: function () {
        // 今年 - 出生的年
        let now = new Date().getFullYear();
        return now - this.birth;
    }
}
//属性
tangguo.name
//方法，一定要带 ()
tangguo.age()

this.代表什么？拆开上main的代码看看~

'use strict';
function getAge() {
    // 今年 - 出生的年
    let now = new Date().getFullYear();
    return now - this.birth;
}
var tangguo = {
    name: '糖果',
    birth: 1997,
    age: getAge
}

// tangguo.age() ok
// getAge() NaN  window

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

apply

在js中可以控制this指向

'use strict';
function getAge() {
    // 今年 - 出生的年
    let now = new Date().getFullYear();
    return now - this.birth;
}
var tangguo = {
    name: '糖果',
    birth: 1997,
    age: getAge
};
// tangguo.age() ok
getAge.apply(tangguo,[]); // this，指向了tangguo，参数为空

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

基本使用

let now = new Date(); //Tue Jun 21 2022 13:43:54 GMT+0800 (中国标准时间)
now.getFullYear(); //年
now.getMonth(); //月  0-11
now.getDate(); //日
now.getDay(); //星期几
now.getHours(); //时
now.getMinutes(); //分
now.getSeconds(); //秒

now.getTime(); //时间戳 全世界统一 1970 1.1 0:00:00 毫秒数

console.log(new Date(1655790801571)) //时间戳转为时间

转换

now = new Date(1655790801571)
Tue Jun 21 2022 13:53:21 GMT+0800 (中国标准时间)
now.toLocaleString //注意：调用是一个方法，不是一个属性！
ƒ toLocaleString() { [native code] }
now.toLocaleString()
'2022/6/21 13:53:21'
now.toGMTString()
'Tue, 21 Jun 2022 05:53:21 GMT'

5.2、JSON

JSON是什么

早期，所有数据传输习惯使用XML文件！

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

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

格式：

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

JSON字符串和js对象转化

var user = {
    name:"tangguo",
    age:3,
    sex:'女'
}

//对象转化为json字符串{"name":"tangguo","age":3,"sex":"男"}
var jsonUser = JSON.stringify(user);

//json 字符串转化为对象，参数为json字符串
var obj = JSON.parse('{"name":"qinjiang","age":3,"sex":"男"}');

很多人搞不清楚，JSON和JS对象的区别

var obj = {a: 'hello',b: 'hellob'};
var json = '{"a":"hello","b":"hellob"}'

5.3、Ajax

原生的js写法 xhr异步请求
jQuery封装好的方法$("#name").ajax("")
axios请求

6、面向对象编程

原型对象

javascript、java、c#。。。面向对象；但是javascript有些区别！

类：模板原型对象
对象：具体实例

在javascript中，需要大家转换一下思维方式！

原型：

var Student = {
    name:"tangguo",
    age:3,
    sex:'女',
    run: function () {
        console.log(this.name + "run...");
    }
};

var xiaoming = {
    name: 'xiaoming'
};

//原型对象
xiaoming.__proto__ = Student;

var Bird = {
    fly: function () {
        console.log(this.name + "fly...");
    }
};
//原型对象
xiaoming.__proto__ = Bird;

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

class继承

class关键字，是在ES6引入的
1、定义一个类、属性、方法

//ES6 之后
//定义一个学生的类
class Student{
    constructor(name) {
        this.name = name;
    }
    hello(){
        alert('Hello')
    }
}

var xiaoming = new Student('xiaoming');
var xiaohong = new Student('xiaohong');
xiaoming.hello()

2、继承

//ES6 之后
//定义一个学生的类
class Student{
    constructor(name) {
        this.name = name;
    }
    hello(){
        alert('Hello')
    }
}

class XiaoStudent extends Student{
    constructor(name,grade) {
        super(name);
        this.grade = grade;
    }
    myGrade(){
        alert('我是一名小学生')
    }
}
var xiaoming = new Student('xiaoming');
var xiaohong = new XiaoStudent('xiaohong',1);

本质：查看对象原型

原型链

__ proto __:

原型链

7、操作BOM对象（重点）

浏览器介绍

JavaScript和浏览器的关系？

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

BOM：浏览器对象模型

IE6~11
Chrome 谷歌
Safari 苹果
FireFox 火狐
Opera

三方

QQ浏览器
360浏览器

window

window代表浏览器窗口

window.alert(1)
undefined
//页面内高
window.innerHeight
458
//页面内宽
window.innerWidth
867
window.outerHeight
917
window.outerWidth
884
//可以调整浏览器窗口测试...

Navigator（不建议使用）

Navigator，封装了浏览器的信息

//名
window.navigator.appName
'Netscape'
//版本
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36'
//代理
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36'
//平台
navigator.platform
'Win32'

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

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

screen

代表屏幕尺寸

screen.width
1280 px
screen.height
720 px

location（重要）

location代表当前页面的URL信息

host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
reload: ƒ reload() //刷新网页
// 设置新的地址
location.assign('https://blog.kuangstudy.com/')

document（内容；DOM）

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>

获取cookie

document.cookie
'__gads...'

劫持cookie原理

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

服务器端可以设置cookie为httpOnly

history（不建议使用）

history代表浏览器的历史记录

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

8、操作DOM对象（重点）

DOM：文档对象模型

核心

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

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

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

获得Dom节点

//对于 css 选择器
let h1 = document.getElementsByTagName('h1');
let p1 = document.getElementById('p1');
let p2 = document.getElementsByClassName('p2');
let father = document.getElementById('father');

let children = father.children; //获取父节点下的所有子节点
// father.firstChild;
// father.children[index];
// father.lastChild;

这是原生代码，之后我们尽量都使用jQuery();

更新节点

<div id="id1">

</div>

<script>
    let id1 = document.getElementById('id1');
    id1.innerText = '123'; //修改文本的值
    id1.innerHTML = '<strong>456</strong>'; //解析超文本标签
</script>

操作文本

id1.innerText='value'修改文本的值
id1.innerHTML='<strong>value</strong>'可以解析超文本标签

操作css：

id1.style.coler = 'yellow';	//属性使用 字符串 包裹
id1.style.fontSize = '20px';	// css中的- 转 驼峰命名法
id1.style.padding = '2em'

删除节点

删除节点的步骤：先获取父节点，再通过父节点删除自己

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


<script>
    let self = document.getElementById('p1');
    let father = p1.parentElement;
    father.removeChild(self);
    
   	/*
    删除是一个动态的过程
    删除第一个子节点后，后续的子节点下标也随之改变
    */
    father.removeChild(father.children[0]);
    father.removeChild(father.children[1]);
    father.removeChild(father.children[2]);
</script>

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

插入节点

我们获得了某个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>
    var js = document.getElementById('js');
    var list = document.getElementById('list');
    list.appendChild(js); //追加到后面
</script>

效果：

追加效果

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

<script>
    let js = document.getElementById('js');
    let list = document.getElementById('list');
    //通过js 创建一个新的节点
    let newP = document.createElement('p'); //创建一个p标签
    newP.id = 'newP';
    newP.innerText = 'Hello,TangGuo';
    list.append(newP);
   	//创建一个标签节点（通过这个属性，可以设置任意的值）
    let myScript = document.createElement('script');
    myScript.setAttribute('type','text/javascript');
 	list.appendChild(newP);
    list.append(myScript);
	//可以创建一个style标签
    let myStyle = document.createElement('style');//创建了一个空style标签
    myStyle.setAttribute('type','text/css');
    myStyle.innerHTML = 'body{background-color: chartreuse;}';//设置标签内容
    document.getElementsByTagName('head')[0].append(myStyle);
   	document.getElementsByTagName('body')[0].setAttribute('style','background-color: red');//设置背景颜色
    document.getElementsByTagName('body')[0].style.background = 'blue';//设置背景颜色
</script>

insertBefore插到前面

let js = document.getElementById('js');
let me = document.getElementById('me');
let list = document.getElementById('list');
//要包含的节点，insertBefore(newNode,targetNode)
list.insertBefore(js,me);

jQuery 教程1

jQuery 教程2

jQuery API 3.5.1 速查表

9、操作表单form（验证）

表单是什么？form DOM树

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

表单的目的提交信息

获得要提交的信息

<form action="#" method="post">
    <p>
        <span>用户名：</span><input type="text" id="username">
    </p>
    <!-- 多选框的值，就是定义好的value -->
    <p>
        <span>性别：</span>
        <input type="radio" name="gender" value="boy" id="boy">男
        <input type="radio" name="gender" value="girl" id="girl">女
    </p>
</form>

<script>
    let input_text = document.getElementById('username');
    let boy_radio = document.getElementById('boy');
    let girl_radio = document.getElementById('girl');
    //得到输入框的值
    input_text.value;
    //修改输入框的值
    input_text.value = '123';

    //对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值
    boy_radio.checked;//查看返回的结果，是否为true，如果为true，则被选中。
    girl_radio.checked = true;//赋值
</script>

提交表单

md5加密密码，表单优化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--MD5加密工具类-->
    <!-- <script src = "lib/md5.min.js"></script> -->
    <script src = "https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>

<!--表达绑定提交事件
    οnsubmit= 绑定一个提交检测的函数，true，false
    将这个结果返回给表单，使用onsubmit接收
    onsubmit="return aaa()"
-->
<form action="#" method="post" onsubmit="return aaa()">
    <p>
        <span>用户名：</span><input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span><input type="password" id="input-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);
        let uname = document.getElementById('username');
        let pwd = document.getElementById('input-password');
        let md5pwd = document.getElementById('md5-password');
        //MD5 算法
        // pwd.value = md5(pwd.value);
        md5pwd.value = md5(pwd.value);
        //可以校验判断表单内容，true就是通过提交，false就是阻止提交
        return true;
    }
</script>

</body>
</html>

input标签要实现抓取数据，必须通过name属性来实现

数据抓取

10、jQuery

javaScript和jQuery的关系？

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

获取jQuery

引入jQuery的方式

引入本地下载的jQuery
在线CDN引入jQuery
- 在线CDN加速jQuery
- CDN 加速服务

<!-- 引入本地下载的jQuery -->
<script src="lib/jquery-3.6.0.js"></script>
<!-- cdn引入 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/core.js"></script>

公式：$(selector).action()

$(选择器).事件(事件函数)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- cdn引入 -->
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/core.js"></script> -->
    <script src="lib/jquery-3.6.0.js"></script>
</head>
<body>

<!--
    公式：$(selector).action()
-->
<a href="" id="test-jquery">点我</a>

<script>
    // document.getElementById('test-jquery');
    //选择器就是css选择器
    $('#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选择器

文档工具站：http://jquery.cuishifeng.cn/

事件

//鼠标事件、键盘事件，其他事件
//不知道记录频次
mousedown()(jQuery)	按下
mouseenter()(jQuery) 进入页面后的第一个坐标
mouseleave()(jQuery) 离开页面后的第一个坐标
mousemove()(jQuery)	移动
mouseout()(jQuery) 退出页面前的最后坐标
mouseover()(jQuery)	点击结束
mouseup()(jQuery) 松开

获取鼠标当前的坐标

<!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: 400px;
            height: 300px;
            border: 1px solid red;
        }
    </style>
</head>
<body>

<!--要求：获取鼠标当前的一个坐标-->
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

节点文本操作

<ul id="test-ul">
    <li class="js">JavaScript</li>
    <li name="python">Python</li>
</ul>

<script>
    $('#test-ul li[name=python]').text();//获得值
    $('#test-ul li[name=python]').text('设置值');//设置值
    $('#test-ul').html();//获得值
    $('#test-ul').html('<strong>123</strong>');//设置值
</script>

CSS的操作

$('#test-ul li[name=python]').css('color','red');
$('#test-ul li[name=python]').css({'color':'red','background':'green'});

元素的显示和隐藏

本质display: none;

$('#test-ul li[name=python]').show();//显示状态
$('#test-ul li[name=python]').hide();//隐藏状态
$('#test-ul li[name=python]').toggle();//切换状态

娱乐测试

$(window).width()
$(window).height()
$('#test-ul li[name=python]').toggle();//切换状态

未来ajax()；

 $('#form').ajax()
 
 $.ajax({url:"test.html",context:document.body,success:function(){
     $(this).addClass("done");
 }})

小技巧

源码之家游戏源码

1、如何巩固JS（看jQuery源码，看游戏源码！）

2、巩固HTML、CSS（扒网站，全部down下来，然后对应修改看效果~）a

IDEA快捷键

Ctrl+Alt+L：自动对齐

标签：function,console,name,JavaScript,let,var,document
来源： https://www.cnblogs.com/ZhaiTangGuo/p/16407317.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JavaScript

JavaScript

1、什么是JavaScript

1.1、概述

1.2、历史

2、快速入门

2.1、引入JavaScript

1、内部标签

2、外部引入

2.2、基本语法入门

2.3、数据类型

2.4、严格检查格式use strict

3、数据类型

3.1、字符串

1、正常字符串我们使用单引号('a')，或者双引号("a")包裹

2、注意转义字符 \

3、多行字符串编写

4、模板字符串

5、字符串长度

6、字符串不可变

7、大小写转换

8、获取字符下标

9、substring，截取字符串从0开始

3.2、数组

1、长度

2、indexOf，通过元素获得下标索引

3、slice（）

4、push()，pop()尾部

5、unshift(),shift() 头部

6、排序sort()

7、元素反转reverse()

8、concat()

9、连接符join

10、多维数组

3.3、对象

1、对象赋值

2、使用一个不存在的对象属性，不会报错！

3、动态的删减属性，通过delete删除对象的属性

4、动态的添加，直接给新的属性添加值即可

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

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

3.4、流程控制

if判断

while循环，避免程序死循环

for循环

forEach循环

for …in--下标

3.5、Map和Set

Map：

Set：无序不重复的集合

3.6、iterator

遍历数组

遍历Map

遍历set

4、函数

4.1、定义函数

定义方式一

绝对值函数

定义方式二

调用函数

arguments

rest

4.2、变量的作用域

变量的作用域

提升变量的作用域

全局变量

全局对象 window

规范

唯一全局变量

局部作用域 let

let

常量 const

const

4.3、方法

定义方法

apply

5、内部对象

5.1、Date

基本使用

history（不建议使用）