JS基本语法

介绍

ECMAScript基础语法

JavaScript的核心语法，ECMAScript描述了该语言的语法和基本对象

DOM文档对象模型

描述了处理网页内容的方法和接口

BOM浏览器对象模型

描述了与浏览器进行交互的方法和接口

使用JS

行内JS

  • 将JS代码写在html标签中
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>JS基础</title>
</head>

<body>
    <button type="button" onclick="alert('HelloWorld')">点我弹窗</button> 
</body>
</html>

image-20220401204103456

内部JS

  • 将JS代码写在html页面的script标签中，推荐写在head标签后
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>JS基础</title>
</head>

<body>
</body>
<script>
    alert("HelloWorld")
</script>

</html>

image-20220401204056870

外部JS

  • 创建JS文件，通过script标签引入JS文件，推荐创建一个文件夹专门用来存放js文件
  • 在script标签中设置了src属性后，script标签中写的js代码无效
1
2
// 在控制台中打印信息
console.log("HelloWorld");
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>JS基础</title>
    <!-- 引入外部JS -->
    <script src="js/myjs.js"> type="text/javascript"</script>
</head>
<body>
    
</body>
</html>

image-20220401203919237

语句与注释

语句

  • js代码以行为单位，从上往下一行一行执行，语句以分号;为结尾，表示一个语句的结束
  • js是一种弱类型语言，如果没有加上分号，也可能不会报错
  • 如果多语句写在一行，那每个语句结尾必须加上分号
1
2
语句1;
语句2;语句3;语句4;

注释

1
2
3
4
5
<!--在HTML中的注释-->

// 在js代码中的单行注释

/* 在js代码中的多行注释 */

标识符与关键词

命名与规范

  • 标识符就是一个名字，用来给变量个函数命名，有特定的规则和规范
  • 标识符由大小写字母、_、$、数字、中文组成，且不能以数字开头，不能是关键词或保留字，严格区分大小写
  • 在js中对标识符命名最好使用驼峰命名或蛇形命名，且最好是见名知意

js中的关键字

1
break、do、instanceof、typeof、case、else、new、var、catch、finally、return、void、continue、for、switch、while、default、if、throw、delete、in、try、function、this、with、debugger、false、true、null、class、enum、extends、super、export、import、impelements、let、public、yield、interface、package、static、const

规范命名标识符

1
2
3
4
5
6
7
8
// 大驼峰命名法(每个单词大写开头)
var UserName = "Hello";

// 小驼峰命名法(第一个单词小写开头，后面每个单词大写开头)
var userName = "Hello";

// 蛇形命名法(单词全部小写，每个单词用下划线连接)
var user_name = "Hello";

变量

语法

  1. 当变量只声明但未赋值时，变量会返回undfinded，当变量未声明就使用时，会报错
  2. 若使用var声明一个已存在的变量时，后声明的变量是无效的
  3. 若使用var声明一个已存在的变量并赋值时，则后声明的值会覆盖掉前面声明的值
1
2
3
4
5
6
7
8
9
10
// 声明并赋值
var 变量名 = 值;

// 先声明再赋值
var 变量名;
变量名 = 值;

// 同时声明多个变量
var 变量1,变量2,变量3 = 值;	// 只有变量3被赋值
var 变量1=值,变量2=值,变量3=值;

数据类型

数据类型

数据类型 描述
Number 数值类型，包含整数和小数
String 字符类型
Boolean 布尔类型，包含true和false
Undefined 表示未定义或不存在
Null 表示空缺，空值
Object 对象

定义数据

  • typeof输出某个值的数据类型
1
2
3
4
5
6
7
8
9
10
11
12
var my_number = 10;
var my_string = "Hello";
var my_bool = true;
var test;
var test2 = null;

console.log(typeof my_number);		// number
console.log(typeof my_string);		// string
console.log(typeof my_bool);		// boolean
console.log(typeof test);		// undefined
console.log(typeof test2);		// object

Undefined

  • 当声明了变量但未赋值时，这个变量的值就是undefined
  • 调用函数时函数有形参，但未提供实参，则参数为undefined
1
2
3
4
5
6
7
8
var txt;
function test(str){
    console.log(str);
}

console.log(txt);		// undefined
test();		// undefined

Null

  • 使用typeof测试null返回object字符串
  • undefined派生自null，所以等值比较返回true，未初始化的变量与赋值为null的变量相等
1
2
3
4
5
var a;
var b = null;
console.log(typeof b);		// object
console.log(a == b);		// true

Number

  • 所有数字(整型和浮点型)都是以64位浮点类型存储的，1与1.0是相等的，所以尽量不要使用浮点类型做判断
  • 在存储数值类型的数据时，会自动将浮点型数值转换为整型
1
2
3
4
5
6
var a = 1.0;
var b = 1.5;
console.log(1 == 1.0);		// true
console.log(a);		// 1
console.log(b);		// 1.5

String

  • 定义字符串时使用单引号或双引号包裹数据
1
2
3
4
5
var a = "Hello";
var b = 'Hello';
console.log(a);		// Hello
console.log(b);		// Hello

类型转换

自动类型转换

值 字符串 数字 布尔值
undefined “undefined” NaN false
null “null” 0 false
true “true” 1 true
false “false” 0 false
空字符 “” 0 false
“1.5” “1.5” 1.5 true
Infinity “Infinity” Infinity true
NaN “NaN” NaN false

函数转换

  • parseInt()将字符串转为整数，判断位置为0处的字符，如果不是有效字符则返回NaN，如果时有效字符则继续匹配，直到找到无效字符
1
2
3
4
5
console.log(parseInt("123abc"));		// 123
console.log(parseInt("abc123"));		// NaN
console.log(parseInt("123abc456"));		// 123
console.log(parseInt("123.456"));		// 123

  • parseFloat()将字符串转为浮点数，与上面的原理一样
1
2
3
4
5
6
console.log(parseFloat("123abc"));		// 123
console.log(parseFloat("abc123"));		// NaN
console.log(parseFloat("123abc456"));		// 123
console.log(parseFloat("123.456"));		// 123.456
console.log(parseFloat("123.456.789"));		// 123.456

显示转换

  • toString()将内容转换为字符串形式，注意不能对null、undefined使用
1
2
3
4
5
var num = 3.1415926;
num = num.toString();
console.log(typeof num);		// string
console.log(num);		// 3.1415926

  • toFixed()函数根据表述点后指定位数将数字转换为字符串，四舍五入，注意不能对null、undefined使用
1
2
3
4
5
6
7
8
9
10
11
var num1 = 3.1415926;
var num2 = 3.5;

num1 = num1.toFixed(2);     // 取前面两位小数
console.log(typeof num1);		// string
console.log(num1);		// 3.14

num2 = num2.toFixed();
console.log(typeof num2);		// string
console.log(num2);		// 4

强制类型转换

  • Number()方法将数据强制转换为数字类型，转换失败则返回NaN
1
2
3
4
5
6
7
8
console.log(Number(true));		// 1
console.log(Number(false));		// 0
console.log(Number("3.14"));		// 3.14
console.log(Number("3.1.4"));		// NaN
console.log(Number("314 "));		// 314
console.log(Number("123abc"));		// NaN
console.log(Number(10));		// 10

  • Boolean()方法将数据强制转为布尔类型 (将0、空字符、null、undefined转为false)
1
2
3
4
5
6
7
console.log(Boolean(""));		// false
console.log(Boolean("Hello"));		// true
console.log(Boolean(null));		// false
console.log(Boolean(0));		// false
console.log(Boolean(1));		// true
console.log(Boolean(314));		// true

  • String()方法将任意值强制转换为字符串，与toString()方法不同的是String()方法可以对null、undefined使用
1
2
3
4
5
6
7
console.log(String(3.14));		// 3.14
console.log(String(314));		// 314
console.log(String(true));		// true
console.log(String(false));		// false
console.log(String(null));		// null
console.log(String(undefined));		// undefined

运算符

算术运算符

运算符 描述
+ 加
- 减
* 乘
/ 除
% 取余
++ 自增
— 自减 
1
2
3
4
5
6
7
8
9
10
11
12
13
console.log(1 + 1);		// 2
console.log(6 - 1);		// 5
console.log(2 * 3);		// 6
console.log(6 / 3);		// 2
console.log(7 % 2);		// 1

var num1 = 5;
var num2 = 5;
num1--;
num2++;
console.log(num1);		// 4
console.log(num2);		// 6

赋值运算符

运算符 描述 等价
= 赋值
+= 加等于 a+=1 a = a+1
-= 减等于 a-=1 a = a-1
*= 乘等于 a*=1 a = a*1
/= 除等于 a/=1 a = a/1
%= 余等于 a%=1 a = a%1

比较运算符

运算符 描述
== 等于(值)
=== 全等(值和类型)
!= 不等于
> 大于
< 小于
>= 大于等于
<= 小于等于 
1
2
3
4
5
console.log(1 == '1');		// true
console.log(1 == 1);		// true

console.log(1 === '1');		// 类型不相等，false
console.log(1 === 1);		// true

逻辑运算符

运算符 描述
&& and 与
(两个管道符) or 或
！ not 非 
1
2
3
console.log(true && false);		// false
console.log(true || false);		// true
console.log(!true);		// false

三目运算符

运算符 描述
?: 如果…否则… 
1
2
3
// 如果?前面的条件成立，则返回:前面的值，不成立则返回:后面的值
console.log(3>2?3:5);		// 3
console.log(1>2?3:5);		// 5

控制语句

if语句

  • if语句使用的是==等值比较
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 单选择
if (条件){
    条件成立执行的代码块;
}

// 双选择
if (条件){
    条件成立执行的代码块;
}
else{
    条件不成立执行的代码块;
}

// 多选择
if (条件){
    条件成立执行的代码块;
}
else if(条件){
    条件成立执行的代码块;
}
else if(条件){
    条件成立执行的代码块;
}

switch语句

  • switch语句使用的是===全等比较
1
2
3
4
5
6
7
8
9
10
11
switch(表达式){
    case 值1:
        条件成立执行的代码块;
        break;
    case 值1:
        条件成立执行的代码块;
        break;
    default:
        所有条件不成立执行的代码块;
        break;
}

While循环

  • 当条件成立时执行循环体的代码块，直到条件不成立退出循环
1
2
3
while(条件语句){
    循环体;
}

do…while循环

  • 先执行一次循环体的代码块，再进行条件的判断，当条件成立时执行循环体的代码块，直到条件不成立退出循环
1
2
3
do {
    循环体;
}while(条件语句);

for循环

1
2
3
for(初始化语句;判断条件语句;控制条件语句){
    循环体;
}

跳出循环

1
2
break;		// 停止本层循环
continue;	// 暂停本次循环，继续下一次

数组

定义数组

语法

  1. 数组索引从0开始
  2. 数组长度可变
  3. 数组中的数据可以是任意类型
1
2
3
var 数组名 = [值, 值, 值];		// 隐式创建
var 数组名 = new Array(值, 值, 值)	// 直接实例化
var 数组名 = new Array(大小)		// 创建数组并指定长度

代码示例

1
2
3
4
5
6
7
8
9
var arr1 = [1, 2, 3];
console.log(arr1);      // [ 1, 2, 3 ]
console.log(arr1[1]);   // 2

var arr2 = new Array();
console.log(arr2);   // []

var arr3 = new Array(5);
console.log(arr3)   // [ <5 empty items> ]

基本操作

语法

  • 数组没有越界的概念，如果访问超出范围或元素未赋值，则返回undefined
1
2
3
4
5
数组名.length		// 返回数组长度
数组名.length = 值	// 定义数组新长度

数组名[索引]			// 返回指定索引的值
数组名[索引] = 值		// 修改指定索引的值

代码示例

1
2
3
4
5
6
7
8
9
var arr1 = [1, 2, 3];
console.log("数组长度 " + arr1.length);   // 数组长度 3
arr1.length = 5;    // 修改数组长度
console.log("数组长度 " + arr1.length);   // 数组长度 5

console.log(arr1[4]);   // 打印没有定义的元素返回: undefined
console.log(arr1[1]);   // 打印第2个元素返回: 2
arr1[1] = 0;            // 修改第2个元素的值为0
console.log(arr1[1]);   // 打印第2个元素返回: 0

数组遍历

普通for遍历

  • 不遍历属性
1
2
3
4
// 语法
for (var i=0;i<数组名.length;i++){
    console.log(数组名[i]);
}
1
2
3
4
5
// 代码示例
var arr2 = ['Java', 'Python', 'C'];
for (var i=0;i<arr2.length;i++){
    console.log(arr2[i]);
}

for..in遍历

  • 不遍历索引中的undefined
1
2
3
4
// 语法
for (var i in 数组名){
    console.log(数组名[i]);
}
1
2
3
4
5
// 代码示例
var arr2 = ['Java', 'Python', 'C'];
for (var i in arr2){
    console.log(arr2[i]);
}

forEach遍历

  • 不遍历属性和索引中的undefined
1
2
3
4
5
// 语法
数组名.forEach(function(值, 索引){
    console.log(值);
    console.log(索引);
})
1
2
3
4
5
// 代码示例
var arr2 = ['Java', 'Python', 'C'];
arr2.forEach(function(element, index){
    console.log(element);
})

数组方法

数组方法

方法 描述
push 添加元素到最后
unshift 添加元素到最前
pop 删除最后一个元素
shift 删除第一个元素
reverse 数组翻转
join 数组翻转成字符串(原数组不变)
indexof 数组元素索引
slice 数组切片(原数组不变)
splice 数组切片(原数组改变)
concat 数组合并

添加删除元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var arr1 = ['Java', 'Python', 'C'];

// 往数组后面添加一个元素
arr1.push("C#");
console.log(arr1);	// [ 'Java', 'Python', 'C', 'C#' ]

// 往数组前面添加一个元素
arr1.unshift("PHP");
console.log(arr1);  // [ 'PHP', 'Java', 'Python', 'C', 'C#' ]

// 删除最后一个元素
arr1.pop();
console.log(arr1);  // [ 'PHP', 'Java', 'Python', 'C' ]

// 删除第一个元素
arr1.shift();
console.log(arr1);  // [ 'Java', 'Python', 'C' ]

数组翻转

1
2
3
4
5
6
7
8
9
10
11
12
13
var arr1 = [1, 2, 3];

// 数组翻转
arr1.reverse();
console.log(arr1);	// [ 3, 2, 1 ]

// 数组翻转成字符串(默认用,连接元素)
var str1 = arr1.join();
console.log(str1);	// 3,2,1

// 数组翻转成字符串(指定用-连接元素)
var str2 = arr1.join('-');
console.log(str2);	// 3-2-1

元素索引

  • 在数组中搜索不到指定元素时，返回-1
  • 数组中如果存在多个相同元素时，返回第一个元素的索引
1
2
3
4
5
6
7
8
9
10
var arr1 = [1, 2, 3, 3, 2, 1];

var index1 = arr1.indexOf('a');
console.log(index1);	// -1

var index2 = arr1.indexOf(1);
console.log(index2);	// 0

var index3 = arr1.indexOf(3);
console.log(index3);	// 2

数组切片

  • 语法: slice(起始位置,结束位置-1)
1
2
3
4
5
6
7
8
9
10
11
12
var arr1 = [1, 2, 3, 4, 5, 6];

var arr2 = arr1.slice(1,3);    // 截取第1~2的元素
console.log(arr2);      // [ 2, 3 ]

var arr3 = arr1.slice(-1);    // 截取最后一个元素
console.log(arr3);      // [ 6 ]

var arr4 = arr1.slice(-2);    // 截取后两个元素
console.log(arr4);      // [ 5, 6 ]

console.log(arr1);      // 不会影响原数组 [ 1, 2, 3, 4, 5, 6 ]
  • 语法: splice(起始位置,结束位置)
1
2
3
4
5
var arr1 = [1, 2, 3, 4, 5, 6];

var arr2 = arr1.splice(1,3);    // 截取第1~3的元素
console.log(arr2);      // [ 2, 3, 4 ]
console.log(arr1);      // 原数组被影响 [ 1, 5, 6 ]

数组合并

1
2
// 语法(数组1元素会在前面)
var 新数组 = 数组1.concat(数组2);
1
2
3
4
5
6
7
8
9
10
// 代码示例

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];

var arr3 = arr1.concat(arr2);
console.log(arr3);     // [ 1, 2, 3, 4, 5, 6 ]

var arr4 = arr2.concat(arr1);
console.log(arr4);      // [ 4, 5, 6, 1, 2, 3 ]

函数

函数定义

  1. 函数有三种定义方法: 函数声明语句、函数定义表达式、Function构造函数
  2. JS中方法没有重载，如果出现同名则会覆盖

函数声明语句

1
2
3
4
5
6
// 声明函数
function 函数名(形参1, 形参2){
    函数代码块;
}

函数名(实参1, 实参2);		// 调用函数
1
2
3
4
5
6
7
// 该方法定义的函数具有声明提升的效果(先调用再定义)

函数名(实参1, 实参2);		// 调用函数
// 声明函数
function 函数名(形参1, 形参2){
    函数代码块;
}
1
2
3
4
5
6
7
8
9
10
11
// 代码示例
function test(){
    console.log("HelloWorld");
}

function test2(name){
    console.log("Hello" + name);
}

test();		// HelloWorld
test2("Jack");		// HelloJack

函数定义表达式

  • 该方法将一个匿名函数赋值给变量，这个匿名函数又称函数表达式
1
2
3
4
5
var 变量名 = function(形参1, 形参2){
    函数代码块;
}

变量名(实参1, 实参2);		// 调用函数
1
2
3
4
5
6
// 代码示例
var test = function(){
    console.log("HelloWorld");
}

test();		// HelloWorld

Function构造函数

1
2
3
4
5
6
var 函数名 = new Function(形参1, 形参2, 函数代码块);

// 等同于
function 函数名(形参1, 形参2){
    函数代码块;
}
1
2
3
4
5
6
7
// 代码示例
var test = new Function('console.log("HelloWorld")')
test();		// HelloWorld

var test2 = new Function('a', 'b', 'return a+b')
var result = test2(1, 2);
console.log(result);	// 3

传递参数

  • 如果函数定义了形参，但调用函数时没有传递实参，则对应的形参值为undefined

传递参数

1
2
3
4
5
6
function test(x, y){
    console.log(x+y);
}

test(); 		// NaN
test(1,2); 		// 3

指定形参默认值

1
2
3
4
// 语法
function 函数名(形参1){
	形参1 = 形参1 || 默认值
}
1
2
3
4
5
6
7
8
// 代码示例
function test(x){
    x = x || 'Hello'
    console.log(x);
}

var txt1 = test();      // Hello
var txt1 = test('Hi');  // Hi

返回值

  • 函数没有返回值时，返回undefined
  • 如果函数不需要返回值，使用return时表示结束
1
2
3
4
5
6
7
8
function test(x, y){
    return x + y;
    console.log('Hello');   // 该行不会被执行
}

test(1, 2);      // 无结果
var txt1 = test(1, 2);      // 将函数的执行结果赋值给txt1变量
console.log(txt1);  // 3

函数作用域

  • 在js中只有函数才有作用域
  • 在函数中定义变量时，如果没有加var关键词，则表示该变量为全局变量
1
2
3
4
5
6
function test(){
    a = "Hello";	// 定义全局变量
}

test()      // 要先调用该函数才会执行里面的赋值语句
console.log(a);     // 10
  • 全局变量与局部变量同名时，局部变量与全局变量是没有关联的，局部变量相当于新声明的变量
1
2
3
4
5
6
7
8
9
10
var a = 10;     // 全局变量
var b = "Hello";

function test(){
    var a = 100;        // 局部变量
    console.log(a);     // 调用局部变量a
    console.log(b);     // 调用全局变量b
}
test();      // 100 Hello
console.log(a);     // 10

内置对象

字符串对象

方法 描述
charAt(索引) 返回指定位置处的字符串
indexOf(字符串) 返回指定指定子字符串的位置，找不到返回-1
substr(m,n) 从m位置开始，截取n个字符并返回
substring(m,n) 返回从m位置开始，到n位置结束的字符
toLowerCase() 将字符串中的字符全部转为小写
toUpperCase() 将字符串中的字符全部转为大写
length 返回字符串长度 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var str1 = "abcdefg";
var str2 = "ABCdEFg";

console.log(str1.charAt(2));    // 找索引为2的字符，c
console.log(str1.indexOf("c")); // 找到字符为c的索引值，2

console.log(str1.substr(0,3));  // 截取索引0开始，共截取3个字符，abc
console.log(str1.substr(3));    // 截取索引3开始，直到全部结束的字符，defg

console.log(str1.substring(0,3));  // 截取索引0开始，到3结束的字符，abc
console.log(str1.substring(3));    // 截取索引0开始，到全部结束的字符，adefg

console.log(str2.toLowerCase());    // 将字符串转小写，abcdefg
console.log(str2.toUpperCase());    // 将字符串转大写，ABCDEFG

console.log(str1.length);        // 返回字符串长度，7

数学对象

方法 描述
Math.random() 随机数
Math.ceil() 向上取整，大于最大整数
Math.floor() 向下取整，小于最小整数 
1
2
3
4
5
console.log(Math.random());      // 随机数 0.37492874485228

var num1 = 1.00001;
console.log(Math.ceil(num1));   // 向上取整 2
console.log(Math.floor(num1));  // 向下取整 1

日期对象

获取日期

对象 描述
getFullYear() 年
getMonth() 月(0~11)
getDate() 日
getHours() 时
getMinutes() 分
getSeconds() 秒 
1
2
3
4
5
6
7
8
var date = new Date();

console.log(date.getFullYear());    // 年，2022
console.log(date.getMonth()+1);     // 月，4
console.log(date.getDate());        // 日，3
console.log(date.getHours());       // 时，15
console.log(date.getMinutes());     // 分，10
console.log(date.getSeconds());     // 秒，8

对象

  1. JS中的对象键都是字符串，值可以为字符串、数字、数组、布尔值、函数
  2. JS创建自定义对象主要通过三种方法: 字面量形式创建对象、通过new Ojbect对象创建、通过Object对象的create方法创建对象

创建对象

字面量形式创建(常用)

1
2
3
4
5
6
// 创建对象
var 对象名 = {};
var 对象名 = {键:值,键:值};

// 调用对象
对象名.键
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 代码示例

var obj = {
    'name': 'Jack',
    age: 18,
    test: function test(){
        console.log('Hello test');
    },
    courses: {
        java: 6,
        python: 10
    },
    flag: true,
    users: [
        {name: '张三', age: 20},
        {name: '李四', age: 30},
        {name: '王五'}
    ]
};

console.log(obj.name);      // Jack
obj.test();     		// Hello test
console.log(obj.courses.java);  	// 6
console.log(obj.users[0].name); 	// 张三

new Object创建

1
var 对象名 = new Object();		// 创建一个空对象
1
2
3
4
5
6
// 代码示例
var obj = new Object();
obj.user = "Jack";
obj.pass = "1234";
console.log(obj);   // { user: 'Jack', pass: '1234' }
console.log(obj.user);   // Jack

通过Object对象的create方法创建

1
2
var 对象名 = Object.create(null);		// 创建一个空对象
var 对象名 = Object.create(对象);		// 继承一个对象
1
2
3
4
5
6
7
8
var obj = Object.create(null);
obj.user = "Jack";
obj.pass = "1234";
console.log(obj);   // { user: 'Jack', pass: '1234' }
console.log(obj.user);   // Jack

var obj2 = Object.create(obj);
console.log(obj2.user);     // Jack

添加数据

  • 如果键存在则表示修改数据，不存在则表示添加数据
1
对象名.键 = 值;
1
2
3
4
5
6
7
// 代码示例

var obj = {'user':'guest'};
obj.user = 'admin';
obj.pass = '123';

console.log(obj);   // { user: 'admin', pass: '123' }

序列化与反序列化

  • 序列化将JS对象序列化为字符串，反序列化将字符串反序列化为JS对象
  • JS通过调用JSON方法，可以将对象序列化或字符串反序列化
1
2
3
4
5
// 序列化
JSON.stringify(对象);

// 反序列化
JSON.parse(json字符);
1
2
3
4
5
6
7
8
9
10
11
12
var obj1 = {'user':'admin'};        // 对象
var str1 = '{"user":"admin"}';      // 字符串(注意键值中若使用引号则必须使用双引号)

console.log(typeof obj1);   // object
console.log(typeof str1);   // string

var str2 = JSON.stringify(obj1);    // 将对象序列化为字符串
console.log(typeof str2);   // string
console.log(str2);

var obj2 = JSON.parse(str1);    // 将字符串反序列化为对象
console.log(typeof obj2);   // object

this

  • 在函数中this表示该方法所属的对象(全局对象)。若单独使用则表示全局对象
  • 谁调用函数，则this就指向谁
1
2
3
4
5
6
7
8
9
var obj = {
    name: "张三",
    age: 18,
    test: function test(){
        console.log(this.name + "今年" + this.age + "岁");
    }
}

obj.test();     // 张三今年18岁

JS事件

介绍

介绍

  1. 事件是JS应用的心脏，它与HTML元素进行交互
  2. 当HTML中使用JS时，JS可以通过某操作触发事件，如鼠标经过，鼠标点击等

作用

  1. 可以用于验证用户输入的数据
  2. 增强页面动态效果等

事件中的名词

  1. 事件源: 谁触发的事件
  2. 事件名: 触发了什么事件
  3. 事件监听: 谁管这个事情，谁监视
  4. 事件处理: 发生后怎么处理
1
2
3
闯红灯
事件源: 汽车				事件名: 闯红灯
事件监听: 摄像头、交警	事件处理: 罚款扣分

事件类型

常用事件

事件 描述
onload 当页面或图片加载完成后触发
onblur 元素失去焦点触发
onfocus 元素获得焦点触发
onclick 鼠标点击触发
onchange 用户改变域内容触发
onmouseover 鼠标移动到元素上触发
onmouseout 鼠标离开元素后触发
onkeyup 某键盘按键松开触发
onkeydown 某键盘按键按下触发

事件流

事件流指的是页面接受事件的顺序，它有事件冒泡、事件捕获

事件冒泡

  • IE的事件流叫做事件冒泡，即事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点

如果点击了div元素后，则click单击事件的执行顺序为div —> body —> html —> 文档

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>JS事件冒泡</title>
</head>

<body onload="test()">
    <div id="myDiv">点我</div>
</body>
</html>

事件捕获

  • 事件捕获是从较为不具体的节点逐级向上传播到最具体的元素，与事件冒泡相反

如果点击了div元素后，则click单击事件的执行顺序为文档 —> html —> body —> div

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>JS事件冒泡</title>
</head>

<body onload="test()">
    <div id="myDiv">点我</div>
</body>
</html>

事件处理程序

HTML事件处理程序

  • 某个元素支持的每种事件，都可以用一个相应的事件处理程序同名的HTML特征来指定
1
2
<!--语法-->
<元素名 事件类型="处理函数或方法"></元素名>
1
2
3
4
5
6
7
8
9
10
<body >
    <button type="button" onclick="alert('Hello')">点我弹窗</button>
    <button type="button" onclick="test()">点我弹窗</button>
    
    <script>
        function test(){
            alert('Hello');
        }
    </script>
</body>

DOM0级事件处理程序

  • 通过JS指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性
  • 该方法只能为同一个元素的同一个事件设定一个事件程序
  • 注意: 处理程序要放在触发元素之后，因为代码是从上往下执行的，如果放在前面会找不到需要绑定的元素
1
2
3
4
5
6
7
8
9
10
11
12
<body>
</body>
    <button id="myBtn">点我</button>
    <script>
        // 通过id属性值获取按钮对象
        var btn = document.getElementById('myBtn');
        // 给指定元素绑定点击事件
        btn.onclick = function(){
             alert('Hello');
        }
    </script>
</body>

DOM2级事件处理程序

  • DOM2级事件定义了两个方法: addEventListener()指定处理程序、removeEventListener()删除事件处理程序
  • 两个方法都接受三个参数: 要处理的事件名、事件处理程序的函数和一个布尔值
  • 最后的布尔值如果为true则表示在捕获阶段调用事件处理程序，反之则表示在冒泡阶段处理程序（一般不用去管该参数，浏览器会自己处理）
1
2
3
4
5
6
7
// 绑定处理事件语法
var 变量名 = document.getElementById('元素ID');		// 通过id属性值获取元素
        btn.addEventListener('事件类型',处理函数)	 // 绑定元素的事件类型与处理函数(可以是匿名或普通函数)


// 移除事件语法 (不能移除匿名函数)
变量名.removeEventListener('事件类型', 函数名)
1
2
3
4
5
6
7
8
9
<body>
    <button id="myBtn">点我</button>
    <script>
        var btn = document.getElementById('myBtn');
        btn.addEventListener('click',function(){
             alert('Hello');
        })
    </script>
</body>

常用事件示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>JS事件</title>
</head>
<body >
    <input type="text" id="user"><br>
    <input type="button" id="btn1" value="点我"><br>
    <select name="" id="city">
        <option value="">选择城市</option>
        <option value="xiamen">厦门</option>
        <option value="zhangzhou">漳州</option>
        <option value="quanzhou">泉州</option>
    </select>
    <p id="mouse">--鼠标放上来或离开--</p>
    
    <script>
        // 整个页面加载完成后触发
        window.onload = function(){
            console.log("页面加载完成...");
        }

        // 文本框失去焦点或获得焦点
        var user_input = document.getElementById('user');
        user_input.onblur = function(){
            console.log('文本框失去焦点');
        }
        user_input.onfocus = function(){
            console.log('文本框获得焦点');
        }

        //文本框输入内容时(按键按下或松开)
        user_input.onkeydown = function(){
            console.log("键盘按键被按下");
        }
        user_input.onkeyup = function(){
            console.log("键盘按键被松开");
        }


        // 按钮被点击 (该处演示了不定义变量也能绑定事件)
        document.getElementById('btn1').onclick = function(){
            console.log("按钮被点击");
        }

        // 用户改变域内容 (该处用于选择框)
        var city = document.getElementById('city');
        city.onchange = function(){
            console.log("下拉框值改变了");
        }

        // 鼠标悬停或离开
        var mouse = document.getElementById('mouse');
        mouse.onmouseover = function(){
            console.log('鼠标悬停在元素上');
        }
        mouse.onmouseout = function(){
            console.log('鼠标离开元素');
        }
</script>
</body>
</html>

JS-BOM对象

Window对象方法

系统对话框

方法 描述
alert 消息框
prompt 输入框
confirm 确认框 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body >
    <button type="button" onclick="alert('消息框')">消息框</button>
    <button type="button" onclick="test_prompt()">输入框</button>
    <button type="button" onclick="test_confirm()">确认框</button>
    
    <script>
        // 输入框
        function test_prompt(){
            var str1 = prompt("请输入用户名","默认值");
            console.log(str1);  // 打印输入的内容(点取消值为null)
        }

        // 确认框
        function test_confirm(){
            var flag = confirm("是否删除文件?")
            console.log(flag);
            if (flag){
                console.log("删除成功");
            }
        }
    </script>
</body>

image-20220403205413628

image-20220403205441775

image-20220403205605133

开/关窗口

方法 描述
window.open 打开窗口
window.close 关闭窗口 
1
2
3
4
5
// _blank新窗口打开		_self此窗口打开
window.open('打开的地址','打开方式');

// 只能关闭使用脚本打开的窗口(在被打开的窗口中使用)
window.close();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body >
    <button type="button" onclick="open_baidu_1()">新窗口打开百度</button>
    <button type="button" onclick="open_baidu_2()">此窗口打开百度</button>
    
    <script>
        // 打开百度(新窗口打开)
        function open_baidu_1(){
            // window.open('','_blank');
            window.open('https://www.baidu.com','_blank');
        }

        // 打开百度(此窗口打开)
        function open_baidu_2(){
            window.open('https://www.baidu.com','_self');
        }
    </script>
</body>

时间函数

方法 描述
setTimeout(函数,毫秒) 设置延时
clearTimeout() 清除延时
setInteval(函数,毫秒) 指定时间循环执行函数 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!-- 设置延时&清除延时 -->
<body >
    <button type="button" onclick="test()">点我3秒后跳转百度</button><br>
    <button type="button" onclick="init()">查看时间</button>
    <button type="button" onclick="clear_timeout()">停止查看</button>
    <h2 id="show_time"></h2>
    
    <script>
        function toBaidu(){
            window.open('https://www.baidu.com','_blank');
        }

        function test(){
            console.log("3秒后跳转...");
            var a = setTimeout(toBaidu, 3000);
        }

        // 显示时间(每秒显示一次)
        var time_id;
        function init(){
            // 获取本地时间
            var times = new Date().toLocaleTimeString();
            // 将id为show_time的元素内容设置为当前时间
            document.getElementById('show_time').innerHTML = times;
            //使用延时来更新时间
            time_id = setTimeout(init, 1000);
        }

        // 停止时间
        function clear_timeout(){
            clearTimeout(time_id);
        }
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!-- 指定时间循环执行函数&清除延时 -->
<body >
    <button type="button" onclick="show_time()">查看时间</button>
    <button type="button" onclick="clear_timeout()">停止查看</button>
    <h2 id="show_time"></h2>
    
    <script>

        // 显示时间(每秒显示一次)
        var time_id;
        function init(){
            // 获取本地时间
            var times = new Date().toLocaleTimeString();
            // 将id为show_time的元素内容设置为当前时间
            document.getElementById('show_time').innerHTML = times;
            
        }

        // 每秒执行一次init函数
        function show_time(){
            time_id = setInterval(init, 1000);
        }
        

        // 停止时间
        function clear_timeout(){
            clearTimeout(time_id);
        }

    </script>
</body>

histoty对象

histoty对象的方法

方法 描述
back() 加载历史记录列表的上一个URL
forward() 加载历史记录列表的下一个URL
go(历史位置,URL) 加载历史记录列表的指定URL

代码示例

  • 先访问页面1，然后点击去到页面2，这时候浏览记录就创建了
  • 再点击页面2的后退，就可以回到页面1，点击页面1的前进可以回到页面2
1
2
3
4
5
6
7
8
9
10
11
<!-- 页面1 -->
<body >
    <p>页面1</p>
    <a href="2.html">去到页面2</a><br>
    <button type="button" onclick="window.history.forward()">前进</button>
    <button type="button" onclick="window.history.back()">后退</button>
    
    <script>
        console.log(window.history.length)
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
<!-- 页面2 -->
<body >
    <p>页面2</p>
    <button type="button" onclick="window.history.forward()">前进</button>
    <button type="button" onclick="window.history.back()">后退</button>
    
    <script>
        console.log(window.history.length);
    </script>
</body>

localtion对象

localtion对象方法

方法属性 描述
href 设置
reload() 重新加载当前页面
replace() 用新的页面替换当前页面

代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body >

    <button type="button" onclick="open_baidu()">访问百度</button><br>
    <button type="button" onclick="open_baidu_2()">替换页面</button><br>
    <button type="button" onclick="window.location.reload()">刷新页面</button><br>
    
    <script>
        console.log(window.location.href);  // 打印当前页面的URL

        // 跳转到百度(可以点左上角后退到上一个页面)
        function open_baidu(){
            window.location.href = "https://www.baidu.com";
        }

        // 将当前页面替换为百度(不可以点左上角后退到上一个页面)
        function open_baidu_2(){
            window.location.replace("https://www.baidu.com");
        }

    </script>
</body>

JS-DOM对象

节点

  • 加载HTML页面时，浏览器会生成一个树型结构，用来表示页面的内部结构
节点类型 描述 举例
文档节点 文档本身 整个文档
元素节点 所有的html元素 a、p、div
属性节点 html元素内的属性 id、href、name
文本节点 元素内的文本 Hello
注释节点 html中的注释 <!--xx-->

获取节点

获取节点

  • 对元素进行增删改时，都要指定到一个位置，这时候就可以通过下面的方法来获取到这个位置
  • 获取到数组时可以使用[索引]来获取指定元素
方法 描述
getElementById() 根据id获取DOM对象 (取第一个)
getElementsByTagName() 根据标签获取DOM对象数组
getElementsByClassName() 根据class名获取对象数组
getElementsByName() 根据name属性获取DOM对象数组
  • 操作DOM必须等节点初始化完毕后才能执行
1
2
3
4
5
6
// 方法1: 将script标签放在</body>后

// 方法2: 等待整个页面加载完成再执行代码
window.onload = function(){
    整个页面加载完成后执行的代码;
}

代码示例

  • 如果需要获取到数组的某个元素可以通过索引来获取
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<body >
    <p id="p1" class="p11">p标签1</p>
    <p id="p1" class="p11">p标签2</p>

    <input type="checkbox" name="city" value="厦门">厦门
    <input type="checkbox" name="city" value="漳州">漳州
    <input type="checkbox" name="city" value="泉州">泉州

    <hr>
    <!-- a标签要设置href属性为javascript:void(0) 不然页面会被跳转 -->
    <a href="javascript:void(0)" onclick="test_id()">使用id获取</a><br>
    <a href="javascript:void(0)" onclick="test_tag()">使用标签名获取</a><br>
    <a href="javascript:void(0)" onclick="test_class()">使用class获取</a><br>
    <a href="javascript:void(0)" onclick="test_name()">使用name获取</a><br>

</body>
<script>
    // 使用ID获取(只获取第一个元素)
    function test_id(){
        console.log(document.getElementById('p1'));
    }

    // 使用标签名获取(返回数组)
    function test_tag(){
        console.log(document.getElementsByTagName('p'));
    }

    // 使用class获取(返回数组)
    function test_class(){
        console.log(document.getElementsByClassName('p11'));

        //获取索引为0的元素
        console.log(document.getElementsByClassName('p11')[0]);
    }
    
    // 使用name获取(返回数组)
    function test_name(){
        var city = document.getElementsByName('city');
        console.log(city);
        
        //遍历元素并获取选中的value值
        for(i=0;i<city.length;i++){
            // console.log(city[i].value);  // 打印全部value值
            if (city[i].checked){   // 判断复选框是否被选中
                console.log(city[i].value);
            }
        }
        
    }

</script>

image-20220404160358858

创建插入节点

创建节点

方法 描述
createElement() 创建新节点
createTextNode() 创建一个文本节点
innerHTML 在指定位置创建节点

插入节点

方法 描述
write() 将任意字符串插入到文档中
appendChild() 向元素中添加新子节点，作为最后一个子节点
insertBefore() 向指定节点之上插入新节点

代码示例

添加标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<body >
    <button type="button" onclick="add_para_1()">添加段落_1</button>
    <button type="button" onclick="add_para_2()">添加段落_2</button>
    <button type="button" onclick="add_para_3()">添加段落_3</button>
    
    <div id="div1"></div>
</body>
<script>

    // 添加段落(方法1)
    function add_para_1(){
        // 创建p标签
        var p = document.createElement("p");
        
        //创建文本节点
        var txt = document.createTextNode("这是一段文本_1");
        
        // 将创建的文本放入标签中
        p.appendChild(txt);

        // 获取div标签,将创建的标签写入到div标签中
        var div = document.getElementById('div1');
        div.appendChild(p);
        
    }

    // 添加段落(方法2)
    function add_para_2(){
        // 创建一个p标签
        var p = document.createElement("p");

        // 给p标签赋值
        p.innerHTML = "这是一段文本_2";

        // 获取div标签,将创建的标签写入到div标签中
        document.getElementById('div1').appendChild(p);
    }

    // 添加段落(方法3)
    function add_para_3(){
        // 定义一段文本
        var p = "<p>这是一段文本_3</p>";

        // 将文本写到div中
        document.getElementById('div1').innerHTML += p;

    }
</script>

image-20220404164824869

添加图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<body >
    <button type="button" onclick="add_img_1()">添加图片_1</button>
    <button type="button" onclick="add_img_2()">添加图片_2</button>
    <button type="button" onclick="add_img_3()">添加图片_3</button>
    
    <div id="div1"></div>
</body>
<script>
    // 添加图片(方法1)
    function add_img_1(){
        // 获取div节点
        var div = document.getElementById('div1');

        // 创建img元素
        var img = document.createElement('img');

        // 设置图片属性
        img.src = "src/1.jpg";
        img.width = 150;
        img.height = 100;

        // 将图片写到div中
        div.appendChild(img)

    }

     // 添加图片(方法2)
     function add_img_2(){
        // 获取div节点
        var div = document.getElementById('div1');

        // 创建img元素
        var img = document.createElement('img');

        // 设置图片属性
        img.setAttribute("src", "src/1.jpg");
        img.setAttribute("width", "150");
        img.setAttribute("height", "100");

        // 将图片写到div
        div.appendChild(img);

     }

     // 添加图片(方法3)
     function add_img_3(){
        // 定位到div标签
        var div = document.getElementById('div1');

        // 创建img标签的字符串
        var img = '<img src="src/1.jpg" width="150" height="100">';

        // 写入div标签
        div.innerHTML += img;
     }

</script>

image-20220404170158106

下拉框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<body >
    <button type="button" onclick="add_option_1()">添加选项_1</button>
    <button type="button" onclick="add_option_2()">添加选项_2</button>
    <button type="button" onclick="add_option_3()">添加选项_3</button>
    
    <select name="city" id="city"></select>
    

</body>
<script>
    // 给下拉框添加下拉选项(方法1)
    function add_option_1(){
        var sel = document.getElementById('city');
        var opt = document.createElement('option');
        opt.value="厦门";
        opt.innerText = "厦门";
        sel.appendChild(opt);
        
    }

    // 方法2
    function add_option_2(){
        var sel = document.getElementById('city');
        var opt = document.createElement('option');
        opt.value = "漳州";
        opt.innerText = "漳州";
        sel.options.add(opt);
    }

    // 方法3
    function add_option_3(){
        var opt = '<option value="泉州">泉州</option>';
        document.getElementById('city').innerHTML += opt;
    }

</script>

image-20220404200517447

write()方法

1
2
3
4
5
6
7
8
<body >
    <button type="button" onclick="add_h2()">添加h2标签</button>
</body>
<script>
    function add_h2(){
        document.write("<h2>Hello</h2>");
    }
</script>

insertBefore()方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
    <button type="button" onclick="add_li()">在红色前面添加</button>
    <ul>
        <li id="red">红色</li>
        <li id="blue">蓝色</li>
    </ul>

</body>
<script>
    function add_li(){
        var li = document.createElement('li');
        li.id = "pink";
        li.innerHTML = "粉色";
        document.getElementById('red').parentElement.insertBefore(li, document.getElementById('red'));
    }
</script>

间接查找节点

常用方法与属性

方法属性 描述
childNodes 返回元素的第一个子节点的数组
firstChild 返回元素的第一个子节点
lastChild 返回元素的最后一个子节点
nextSibling 返回元素的下一个兄弟节点
parentNode 返回元素的父节点
previousSibling 返回元素的上一个兄弟节点

代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<body>
    <button type="button" onclick="add_li()">在红色前面添加</button>
    <ul>
        <li id="red">红色</li>
        <li id="blue">蓝色</li>
    </ul>

</body>
<script>
    function add_li(){
        var ul = document.getElementsByTagName('ul')[0];
        // 返回元素的第一个子节点数组
        console.log(ul.childNodes);

        // 返回元素的所有子元素数组
        console.log(ul.children);

        // 返回元素的第一个子节点
        console.log(ul.firstChild);
        console.log(ul.firstElementChild);  // 标签内容

        // 返回元素的最后一个子节点
        console.log(ul.lastChild);
        console.log(ul.lastElementChild);   // 标签内容
    }
</script>

删除节点

方法 描述
removeChild() 从元素中删除子元素 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
    <button type="button" onclick="del_li()">在红色前面添加</button>
    <ul>
        <li id="red">红色</li>
        <li id="blue">蓝色</li>
    </ul>

</body>
<script>
    function del_li(){
        // 获取到需要删除的元素
        var li = document.getElementById("red");
        // 得到被删除的元素的符元素后删除元素
        li.parentElement.removeChild(li);
    }

</script>

JS表单

获取表单

常用方法

1
2
3
4
5
6
7
8
// 方法1
document.表单名称
// 方法2
document.getElementById(表单ID);
// 方法3
document.forms[表单名称];
// 方法4
document.forms[索引];

代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<body>
    <form action="" id="form1" name="form1" method="get"></form>
    <form action="" id="form2" name="form2" method="get"></form>

    <button type="button" onclick="get_form_1()">方法1</button>
    <button type="button" onclick="get_form_2()">方法2</button>
    <button type="button" onclick="get_form_3()">方法3</button>
    <button type="button" onclick="get_form_4()">方法4</button>

</body>
<script>
    // 方法1
    function get_form_1(){
        var form = document.form1;
        console.log(form);
    }

    // 方法2
    function get_form_2(){
        var form = document.getElementById('form1');
        console.log(form);
    }

    // 方法3
    function get_form_3(){
        var form = document.forms['form1'];
        console.log(form);
    }

    // 方法4
    function get_form_4(){
        var form = document.forms[0];
        console.log(form);
    }
</script>

image-20220405140101350

获取表单元素

获取元素的方法不止下面示例的，下面只是一些常用的方法

获取input元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<body>
    <form action="" id="form1" name="form1" method="get">
        姓名: <input type="text" id="uname" name="uname" value="张三"><br>
        密码: <input type="password" id="upass" name="upass" value="pass123"><br>
        <input type="hidden" id="uno" name="uno" value="隐藏域"><br>
        备注: <textarea name="remarks" id="remarks" cols="30" rows="10"></textarea><br>
        <button type="button" onclick="get_txt()">获取元素内容</button>
    </form>

</body>
<script>
    function get_txt(){
        // 使用ID获取元素
        var uname = document.getElementById('uname');
        console.log(uname.value);   // 获取value值

        // 使用表单.元素名获取元素
        var upass = document.getElementById('form1').upass;
        console.log(upass.value);

        // 使用name获取元素
        var uno = document.getElementsByName('uno')[0];
        console.log(uno.value);

        // 使用元素名获取元素
        var remarks = document.getElementsByTagName('textarea')[0];
        console.log(remarks.value);
    }
</script>

image-20220405141848350

获取单选按钮

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>
    <form action="" id="form1" name="form1" method="get">
        <input type="radio" name="city" value="厦门">厦门
        <input type="radio" name="city" value="漳州">漳州
        <input type="radio" name="city" value="泉州">泉州<br>
        <button type="button" onclick="get_txt()">获取选中元素值</button>
    </form>

</body>
<script>
    function get_txt(){
        var city = document.getElementsByName('city');
        // console.log(city[0].value + city[0].checked);   // 获取元素值与选中状态

        // 选中时checked为true,反之为false
        for(var i=0; i<city.length; i++){
            if(city[i].checked){
                console.log(city[i].value);
            }
        }
    }
</script>

image-20220405142849502

获取多选按钮

与获取单选按钮方法一样

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>
    <form action="" id="form1" name="form1" method="get">
        <input type="checkbox" name="city" value="厦门">厦门
        <input type="checkbox" name="city" value="漳州">漳州
        <input type="checkbox" name="city" value="泉州">泉州<br>
        <button type="button" onclick="get_txt()">获取选中元素值</button>
    </form>

</body>
<script>
    function get_txt(){
        var city = document.getElementsByName('city');
        // console.log(city[0].value + city[0].checked);   // 获取元素值与选中状态

        // 选中时checked为true,反之为false
        for(var i=0; i<city.length; i++){
            if(city[i].checked){
                console.log(city[i].value);
            }
        }
    }
</script>

image-20220405143008536

获取下拉选项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<body>
    <form action="" id="form1" name="form1" method="get">
        <select name="city" id="city">
            <option value="厦门">厦门</option>
            <option value="漳州">漳州</option>
            <option value="泉州">泉州</option>
        </select>
        <br>

        <button type="button" onclick="get_txt()">获取选中元素值</button>
        <button type="button" onclick="get_txt_2()">获取选中元素值_2</button>
    </form>

</body>
<script>
    // 方法1
    function get_txt(){
        var city = document.getElementById('city'); // 获取下拉框

        // 获取下拉框被选中项的索引(注意大小写)
        var opt_index = city.selectedIndex;

        // 使用索引获取到被选中的值
        console.log(city.options[opt_index].value); // value
        console.log(city.options[opt_index].text);  //文本
        
        // 获取下拉框所有选项
        // for(var i in city.options){
        //     console.log(city.options[i].value);
        // }

    }

    // 方法2
    function get_txt_2(){
        var city = document.getElementById('city'); // 获取下拉框
        console.log(city.value);
    }
    
</script>

image-20220405145238218

提交表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<body>
    <form action="" id="form1" name="form1" method="get">
        用户名: <input type="text" name="uname">

        <button type="button" onclick="push_data_1()">提交表单_方法1</button>
        <button type="button" onclick="return push_data_2()">提交表单_方法2</button>
    </form>

</body>
<script>
    // 方法1 (表单.submit()提交)
    function push_data_1(){
        // 对表单元素进行校验,元素值不为空时再提交
        var uname = document.getElementsByName('uname')[0];
        // trim()方法剔除前后空格
        if(!uname.value || uname.value.trim() == ""){
            console.log('输入数值不能为空');
        }
        else{
            // 提交表单
            document.getElementById('form1').submit();
        }
    }

    // 方法2 (函数返回true提交)
    function push_data_2(){
        var uname = document.getElementsByName('uname')[0];
        // 一定要返回true或false
        if(!uname.value || uname.value.trim() == ""){
            console.log('输入数值不能为空');
            return false;
        }
        return true;
    }
</script>

image-20220405153130202

表单校验

要求

  1. 用户名长度在2~5之间，且不能为空
  2. 密码长度为6~12之间，且不能包含用户名、不能为空
  3. 性别必须选男 (没有歧视的意思！)
  4. 爱好至少选中一项
  5. 城市必须选中一项
  6. 满足以上条件就提交表单，反之打印出原因且不能提交
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<body>
    <form action="" id="form1" name="form1" method="get">
        用户: <input type="text" name="uname"><br>
        密码: <input type="text" name="upass"><br>
        性别:
            <input type="radio" name="sex" value="男">男
            <input type="radio" name="sex" value="男">女<br>
        爱好: 
            <input type="checkbox" name="ufav" value="滑板">滑板
            <input type="checkbox" name="ufav" value="跑步">跑步
            <input type="checkbox" name="ufav" value="篮球">篮球<br>
        城市:
            <select name="city" id="city">
                <option value="-1">请选择城市</option>
                <option value="厦门">厦门</option>
                <option value="漳州">漳州</option>
                <option value="泉州">泉州</option>
            </select>
            <br><br>
        
        <button type="button" onclick="push_data()">提交表单</button>
        <button type="reset" onclick="reset_data()">重置表单</button>
    </form>
    <h3 id="error_msg"></h3>

</body>
<script>
    // 通过ID获取元素并返回
    function id_get_dom(id){
        return document.getElementById(id);
    }

    // 通过name获取元素并返回
    function name_get_dom(name){
        return document.getElementsByName(name);
    }

    // 判断传递的值是否为空(空返回true)
    function is_empty(str){
        if(str == null || str.trim() == ""){
            return true;
        }
        return false;
    }

    // 重置表单
    function reset_data(){
        // document.getElementById('form1').reset();
        id_get_dom('form1').reset();
    }

    // 提交表单
    function push_data(){
        // 验证用户名
        var uname = name_get_dom('uname')[0].value;     // 获取到用户名的值
        if(is_empty(uname)){
            id_get_dom('error_msg').innerHTML = "用户名不能为空";
            return;
        }
        if(uname.length > 5 || uname.length < 2){
            id_get_dom('error_msg').innerHTML = "用户名长度要在2~5之间";
            return;
        }

        // 验证密码
        var upass = name_get_dom('upass')[0].value;
        if(is_empty(upass)){
            id_get_dom('error_msg').innerHTML = "密码不能为空";
            return;
        }
        if(upass.length > 12 || upass.length < 6){
            id_get_dom('error_msg').innerHTML = "密码长度要在6~12之间";
            return;
        }
        if(upass.indexOf(uname) > 0){
            // 这里有个bug,如果用户名为数字,密码还是可以包含用户名
            id_get_dom('error_msg').innerHTML = "密码不能包含用户名";
            return;
        }

        // 验证性别
        var sex = name_get_dom('sex');     // 获取性别
        if(!sex[0].checked){
            id_get_dom('error_msg').innerHTML = "性别必须为男";
            return;
        }
        
        // 验证爱好
        var ufav = name_get_dom('ufav');    // 获取爱好
        var len = 0;
        for(var u in ufav){
            if(ufav[u].checked){
                len += 1;
                break;
            }
        }
        if(!len){
            id_get_dom('error_msg').innerHTML = "爱好必须选中一项";
            return;
        }

        // 验证城市
        var city = id_get_dom('city').value;
        if(city == -1){
            id_get_dom('error_msg').innerHTML = "城市必须选中一项";
            return;
        }

        id_get_dom('error_msg').innerHTML = "";     //  清空提示信息
        id_get_dom('form1').submit();       // 提交表单
       
    }
</script>

Jquery安装

下载安装

压缩版用于实际网站中，未压缩版用于测试和开发。本文中使用的是3.4.1版本，学习时建议把jquery脚本保存到本地后引用。 —> 更多官方版本 <—

安装

  • 在页面引入该脚本即可
1
<script src="xxx.js"></script>

Jquery-3.5.1

  • 微软压缩版
1
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
  • 官方压缩版
1
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  • 官方未压缩版
1
https://code.jquery.com/jquery-3.5.1.js

Jquery3.4.1

  • 微软压缩版
1
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.4.1.min.js"></script>
  • 官方压缩版
1
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  • 官方未压缩版
1
https://code.jquery.com/jquery-3.4.1.js

Jquery3.3.1

  • 字节跳动压缩版
1
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
  • 微软压缩版
1
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>
  • 官方压缩版
1
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  • 官方未压缩
1
https://code.jquery.com/jquery-3.3.1.js

Jquery对象

通过js代码获取的对象都是DOM对象，而通过Jquery获取的对象是Jquery包装集对象，简称Jquery对象。只有Jquery对象才能引用Jquery提供的方法

Dom对象

  • 通过js代码获取的对象都是DOM对象
1
2
3
4
5
6
7
8
<body>
    <div id="mydiv">HelloWorld</div>
  
    <script>
        var mydiv = document.getElementById('mydiv');
        console.log(mydiv);
    </script>
</body>

image-20220406110453582

Jquery对象

  • 通过Jquery获取的对象是Jquery包装集对象，简称Jquery对象
1
2
3
4
5
6
7
8
9
<body>
    <div id="mydiv">HelloWorld</div>
  
    <script src="js/jquery-3.4.1.js"></script>
    <script>
        var mydiv = $('#mydiv');
        console.log(mydiv);
    </script>
</body>

image-20220406110800162

对象转换

DOM对象转Jquery对象

1
2
3
// 语法
var dom对象 = document.getElementById('mydiv');	// 获取到DOM对象
var jquery对象 = $(dom对象);
1
2
3
4
5
6
7
8
9
10
<body>
    <div id="mydiv">HelloWorld</div>
  
    <script src="js/jquery-3.4.1.js"></script>
    <script>
        var mydiv = document.getElementById('mydiv');
        mydiv = $(mydiv);
        console.log(mydiv);
    </script>
</body>

Jquery对象转DOM对象

1
2
3
// 语法
var jquery对象 = $('#元素id');
var dom对象 = jquery对象[索引];
1
2
3
4
5
6
7
8
9
<body>
    <div id="mydiv">HelloWorld</div>
  
    <script src="js/jquery-3.4.1.js"></script>
    <script>
        var mydiv = $('#mydiv');
        console.log(mydiv[0]);
    </script>
</body>

Jquery选择器

基础选择器

选择器

选择器 语法
id选择器 #元素id
元素名选择器 元素名
类选择器 .class属性值
通用选择器 *
组合选择器 选择器1,选择器2,选择器3

代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<body>
    <div id="mydiv1">id选择器</div>
    <span>元素选择器</span>
    <div id="mydiv1" class="mydiv2">类选择器</div>
  
    <script src="js/jquery-3.4.1.js"></script>
    <script>
        // id选择器(只会取第一个元素)
        var div1 = $('#mydiv1');
        console.log(div1);

        // 类选择器
        var div2 = $('.mydiv2');
        console.log(div2);

        // 元素选择器
        var span1 = $('span');
        console.log(span1);

        // 组合选择器
        var all_div = $('#mydiv1, .mydiv2');    // 找到id=mydiv1或class=mydiv2
        console.log(all_div);

        // 通用选择器
        var all = $('*');
        console.log(all);
    </script>
</body>

层次选择器

选择器

选择器 语法 描述
后代选择器 父元素 指定元素 选择父元素的所有指定元素
子代选择器 父元素>指定元素 选择父元素的所有第一代指定元素
相邻选择器 元素+指定元素 选择元素的下一个指定元素(只有一个)
同辈选择器 元素~指定元素 选择元素的所有指定元素

代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<body>
    <div id="div1">div1
        <div id="div2">div2
            <div class="div3">div3</div>
            <span>span1</span>
            <span>span2</span>
        </div>
        <div>div4
            <div>div5</div>
        </div>
    </div>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        // 后代选择器 (id=div1下的所有div元素)
        // 被选中的: div2, div3, div4, div5
        console.log($('#div1 div'));

        // 子代选择器 (id=div1下的所有第一代div元素)
        // 被选中的: div2, div4
        console.log($('#div1 > div'));

        // 相邻选择器 (class=div3的下一个span元素)
        // 被选中的: span1
        console.log($('.div3 + span'));

        // 同辈选择器( class=div3的所有span元素)
        // 被选中的: span1, span2
        console.log($('.div3 ~ span'));

    </script>

表单选择器

选择器

选择器 语法
表单选择器 :input
文本框选择器 :text
密码框选择器 :password
单选框选择器 :radio
复选框选择器 :checkbox
提交按钮选择器 :submit
图像域选择器 :image
重置按钮选择器 :reset
按钮选择器 :button
文件域选择器 :file

代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<body>
    <form action="" id="form1">
        账户: <input type="text" name="uname"><br>
        密码: <input type="password" name="upass"><br>
        性别:
        <input type="radio" name="sex" value="1">男
        <input type="radio" name="sex" value="0">女<br>
        城市:
        <input type="checkbox" name="city" value="厦门">厦门
        <input type="checkbox" name="city" value="漳州">漳州
        <input type="checkbox" name="city" value="泉州">泉州<br>
        来自:
        <select name="select1" id="select1">
            <option value="厦门">厦门</option>
            <option value="漳州">漳州</option>
            <option value="泉州">泉州</option>
        </select><br>
        头像: 
        <input type="file"><br>
        <input type="image" src="src/1.jpg" width="80px" height="100px"><br>
        
        <input type="submit" value="提交">
        <input type="reset" value="重置"><br>

        <button type="submit">提交</button>
        <button type="reset">重置</button>


    </form>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        // 表单选择器 (选择所有表单元素[input, textarea, button])
        console.log($(':input'));

        // 文本框选择器
        console.log($(':text'));

        // 密码框选择器
        console.log($(':password'));

        // 单选框选择器
        console.log($(':radio'));

        // 复选框选择器
        console.log($(':checkbox'));

        // 提交按钮选择器
        console.log($(':submit'));

        // 图像域选择器
        console.log($(':image'));

        // 重置按钮选择器
        console.log($(':reset'));

        // 按钮选择器
        console.log($(':button'));

        // 文件域选择器
        console.log($(':file'));

    </script>
</body>

image-20220406160127919

Jquery-DOM操作

操作元素属性

获取属性

  • attr()方法获取返回值为布尔属性时，选中返回checked，没选中返回undefined
  • prop()方法获取返回值为布尔属性时，选中返回true，没选中返回false
  • prop()方法获取自定义属性时返回undefined
方法 描述
attr(属性名) 获取指定的属性值
prop(属性名) 获取具有true、false两个属性的值 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
    <form action="" id="form1">
        性别:
        <input type="radio" name="sex" value="1" checked="checked">男
        <input type="radio" name="sex" value="0">女<br>
    </form>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        // 获取属性值(第一个单选框)
        console.log($(':radio').attr('name'));  // attr()方法
        console.log($(':radio').prop('name'));  // prop()方法

        // 获取选中状态(第一个单选框)
        console.log($(':radio').attr('checked'));  // attr()方法 --> checked
        console.log($(':radio').prop('checked'));  // prop()方法 --> true

    </script>
</body>

设置属性

  • prop()方法设置不了自定义属性值
1
2
3
// 语法
attr(属性名, 值);
prop(属性名, 值);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
    <form action="" id="form1">
        性别:
        <input type="radio" name="sex" id="r1">男
        <input type="radio" name="sex" id="r2">女<br>
    </form>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        // 设置固有属性值
        $('#r1').attr('value', '1');  // attr()方法
        $('#r2').prop('value', '0');  // prop()方法

        // 设置自定义属性值
        $('#r1').attr('abc', 'a');  // attr()方法 --> 成功
        $('#r2').prop('abc', 'b');  // prop()方法 --> 失败

    </script>
</body>

image-20220406163527710

移除属性

方法 描述
removeAttr(‘属性名’) 移除元素属性 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
    <form action="" id="form1">
        性别:
        <input type="radio" name="sex" id="r1" value="1">男
        <input type="radio" name="sex" id="r2" value="0">女<br>
    </form>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        // 移除元素属性
        $('#r1').removeAttr('value');

    </script>
</body>

image-20220406163905148

操作元素样式

方法 描述
attr(‘class’) 获取元素class属性值 (样式名)
attr(‘class’, ‘值’) 设置元素class属性值 (样式名)
addClass(‘值’) 添加样式
css(‘样式名’,’值’) 添加具体样式
removeClass(‘class’) 移除样式名 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<head>
	<meta charset="utf-8" />
	<title>JQuery</title>
    <style>
        .red_txt {
            color: red;
        }

        .blue_txt {
            color: blue;
        }

        .big_txt {
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div id="div1" class="red_txt">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
    <div id="div4" class="red_txt">div4</div>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        // 获取元素class属性值
        console.log($('#div1').attr('class'));      // red_txt

        // 设置元素class属性值
        $('#div1').attr('class', 'blue_txt');
        console.log($('#div1').attr('class'));      // blue_txt

        // 添加样式名
        // 在原来的样式基础上添加样式，原本的样式会被保留
        // 如果出现相同样式则以样式中后定义的为准
        // (下面实际效果为蓝色, 50号字体)
        $('#div2').addClass('blue_txt');   // 由于定义样式时在red_txt前面，所以没被覆盖
        $('#div2').addClass('red_txt');
        $('#div2').addClass('big_txt');
        console.log($('#div2').attr('class'));      // blue_txt red_txt big_txt

        // 添加具体样式 (类似行内样式, 优先级高)
        // $('#div3').css('color','red');     // 设置单个样式
        $('#div3').css({    // 优先级大于嵌入式样式，所以为红色
            'color':'red',
            'font-size':'50px'
        });
        $('#div3').addClass('blue_txt');
        console.log($('#div3').attr('class'));      // blue_txt
        
        // 移除样式
        $('#div4').removeClass();
        console.log($('#div4').attr('class'))       // 空

    </script>
</body>

image-20220406193949394

操作元素内容

  • html()、text()方法针对非表单元素，val()方法针对表单元素
方法 描述
html() 获取元素的html内容
html(‘html, 内容’) 设置元素的html内容
text() 获取元素的文本内容，不包含html
text(‘text值’) 设置元素的文本内容，不包含html
val() 获取元素的value值
val(‘值’) 设置元素的value值 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"><p>Hello div3</p></div>

    <div id="div4"></div>
    <div id="div5"></div>

    用户名: <input type="text" id="uname" name="uname" value="Hello">

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        // 设置元素的html内容
        $('#div1').html('Hello div1');
        $('#div2').html('<h2>Hello div2</h2>');     // h2标签生效
    
        // 获取元素的html内容
        console.log($('#div1').html());     // Hello div1
        console.log($('#div2').html());     // <h2>Hello div2</h2>
        console.log($('#div3').html());     // <p>Hello div3</p>

        // 设置元素的文本内容
        $('#div4').text('Hello div4');
        $('#div5').text('<h2>Hello div5</h2>');      // h2标签不生效

        // 获取元素的文本内容
        console.log($('#div4').text());     // Hello div4
        console.log($('#div5').text());     // <h2>Hello div5</h2>
        console.log($('#div2').text());     // Hello div2
        console.log($('#div3').text());     // Hello div3

        // 获取表单元素的value值
        console.log($('#uname').val());     // Hello

        // 设置表单元素的value值
        $('#uname').val('admin');
        console.log($('#uname').val());     // admin

    </script>
</body>

image-20220406200134520

添加元素

  • 插入的内容可以是字符或HTML元素
  • 可以将内容替换为已经存在的元素，将该元素移动到指定位置
方法 描述
prepend(内容) 在被选元素内部开头插入内容 (子元素)
$(内容).prependTo(选择器) 将内容加入到选择器元素开头 (子元素)
append(内容) 在被选元素内部的尾部插入内容 (子元素)
$(内容).appendTo(选择器) 把内容插入到选择器元素内，默认在尾部 (子元素)
before() 在元素前插入指定内容 (同级元素)
after() 在元素后插入指定内容 (同级元素) 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<body>
    <p id="p_move_1">被移动的p元素_1</p>
    <p id="p_move_2">被移动的p元素_2</p>

    <div id="div1" style="background-color: aquamarine;">
        <span>span1</span>
    </div>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        // 前追加子元素
        $('#div1').prepend($('<p>p标签1</p>'));    // 在id=div1开头添加一个子元素p
        $('#div1').prepend('<p>p标签2</p>');       // 在id=div1开头添加一个子元素p
        $('<p>p标签3</p>').prependTo($('#div1'));  // 在id=div1开头添加一个子元素p
        $('#div1').prepend($('#p_move_1'));     // 将前面的p元素移动到id=div1前面

        // 后追加子元素
        $('#div1').append('<p>p标签4</p>');         // 在id=div1末尾添加一个子元素p
        $('<p>p标签5</p>').appendTo($('#div1'))     // 在id=div1末尾添加一个子元素p
        $('#div1').append($('#p_move_2'));  // 将前面的p元素移动到id=div1末尾
        
        // 前追加同级元素
        $('#div1').before('<p>同级元素1</p>');  // 在id=div1前面添加一个同级元素p

        // 后追加同级元素
        $('#div1').after('<p>同级元素2</p>');  // 在id=div1前后面添加一个同级元素p

    </script>
</body>

image-20220406204612392

删除元素

方法 描述
remove() 删除所选元素，包括内容与标签
empty() 清空所选元素的内容 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
    <p id="p_move_1">被移动的p元素_1</p>
    <p id="p_move_2">被移动的p元素_2</p>

    <div id="div1" style="background-color: aquamarine;">
        <span>span1</span>
    </div>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        // 删除整个元素
        $('#div1').remove();

        // 清空元素内容
        $('#p_move_1').empty();
    </script>
</body>

image-20220408105024715

遍历元素

语法

1
$(选择器).each(function(索引, DOM元素){})

代码示例

  • 有时候遍历出来的结果显示是span.a，可以刷新或换个浏览器再尝试
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
    <span class="a">Java</span>
    <span class="a">Python</span>
    <span class="a">GO</span>
    <span class="a">JS</span>


    <script src="js/jquery-3.4.1.js"></script>
    <script>
        // 获取指定元素并遍历
        $('.a').each(function(index, dom){
            console.log(index);
            console.log(dom);
        });

    </script>
</body>

image-20220408110535692

Jquery事件

加载事件

  • 类似于JS中的onLoad()事件，等待某个元素或整个页面加载完成后再执行代码
1
2
3
4
5
6
7
8
9
// 语法
$(元素).ready(function(){
    元素加载完成后执行的代码;
});

// 简写
$(function(){
    元素加载完成后执行的代码;
});

代码示例

  • 如果没有预加载则JS会先获取元素的值，这时候元素还没加载出来，所以获取不到
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<head>
	<meta charset="utf-8" />
	<title>JQuery-预加载</title>
    <script src="js/jquery-3.4.1.js"></script>
    <script>
        // 获取p标签
        console.log($('p'));

    </script>
</head>

<body>
    <p>HelloWorld</p>
</body>

image-20220408111401057

  • 等待页面的DOM结构加载完毕后再执行代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<head>
	<meta charset="utf-8" />
	<title>JQuery-预加载</title>
    <script src="js/jquery-3.4.1.js"></script>
    <script>
        // 等整个文档加载完成后，再获取p标签
        $(document).ready(function(){
            console.log($('p'));
        });

        // 简写版
        $(function(){
            console.log($('p'));
        });
    </script>
</head>

<body>
    <p>HelloWorld</p>
</body>

image-20220408111805904

绑定事件

语法

1
2
3
4
5
6
7
8
9
10
11
12
13
// bind绑定
$(元素).bind("事件类型", 绑定的函数);	// 绑定单个事件
$(元素).bind("事件类型1 事件类型2", 绑定的函数);	// 绑定多个事件单个函数
$(元素).bind("事件类型1", 绑定的函数).bind("事件类型2", 绑定的函数);	// 绑定多个事件多个函数
$(元素).bind({
    "事件类型1": 绑定函数,
    "事件类型2": 绑定函数
});	// 绑定多个事件多个函数


// 直接绑定(常用)
$(元素).事件类型(绑定的函数);		// 绑定单个事件
$(元素).事件类型1(绑定的函数).事件类型2(绑定的函数);	// 绑定多个事件多个函数

单个事件示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<body>
    <p id="p1">HelloWorld</p>
    <button type="button" id="btn1">按钮1</button>
    <button type="button" id="btn2">按钮2</button>
    <button type="button" id="btn3">按钮3</button>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        // 方法1
        $('#btn1').bind('click', function(){
            $('#p1').text("按钮1被点击了");
        });

        // 方法2 (推荐)
        $('#btn2').click(function(){
            $('#p1').text("按钮2被点击了");
        });

        // 原生JS绑定事件
        document.getElementById('btn3').onclick = function(){
            document.getElementById('p1').innerHTML = "按钮3被点击了";
        }

    </script>
</body>

多个事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<body>
    <p id="p1">HelloWorld</p>
    <button type="button" id="btn1">按钮1</button>
    <button type="button" id="btn2">按钮2</button>
    <button type="button" id="btn3">按钮3</button>
    <button type="button" id="btn4">按钮4</button>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        // 多个事件单个函数，鼠标点击或鼠标离开元素时触发
        $('#btn1').bind('click mouseout', function(){
            $('#p1').text("按钮1被触发了");
        });

        // 多个事件多个函数， 方法2
        $('#btn2').bind('click', function(){
            $('#p1').text("按钮2被点击了");
        }).bind('mouseout', function(){
            $('#p1').text("按钮2被触发了");
        })

        // 多个事件多个函数， 方法3
        $('#btn3').bind({
            'click': function(){
                $('#p1').text("按钮3被点击了");
            },
            'mouseout': function(){
                $('#p1').text("按钮3被触发了");
            },
        })

        // 方法4 (推荐)
        $('#btn4').click(function(){
            $('#p1').text("按钮4被点击了");
        }).mouseout(function(){
            $('#p1').text("按钮4被触发了");
        });

    </script>
</body>

Jquery-Ajax

异步无刷新技术，无需等待服务器返回结果还可以继续做事

.ajax方法

参数

参数 描述
type 请求方式(GET/POST)
url 请求地址
async 是否异步，默认true
data 发送的数据
dataType 预期服务器返回的数据类型
contentType 设置请求头
success 请求成功时调用的函数
error 请求失败时调用的函数 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 语法
$.ajax({
            type: "请求方式",
            url: "请求地址",
            data:{
                "参数": "值",
                "参数": "值"
            },
            dataType: "预期返回数据类型",
            success: function(data){
                // 形参data是返回的数据，该形参名可自定义
            },
            error: function(){
				
            }
        });

代码示例

js/data.txt文件内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
[
    {
        "uid": "001",
        "user": "admin",
        "pass": "123456"
    },
    {
        "uid": "002",
        "user": "guest",
        "pass": "abc123"
    },
    {
        "uid": "003",
        "user": "test",
        "pass": "test001"
    }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<body>
    <div id="div1"></div>
    <button type="button" id="btn">获取数据</button>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $('#btn').click(function(){
            $.ajax({
            type: "get",
            url: "js/data.txt",
            dataType: "json",   // 如果返回的是json格式数据则会自动封装成json对象
            success: function(data){
                console.log(data);
                // 将获取到的结果写在网页上
                var ul = $('<ul></ul>');
                for(var i in data){
                    var uid = data[i]['uid'];
                    var user = data[i]['user'];
                    var pass = data[i]['pass'];
                    
                    // 将数据写到无序列表中
                    var li = "<li>" + uid + " " + user + "</li>";
                    ul.append(li);
                }
                // 将最后的结果放到div标签
                $('#div1').append(ul);

            },
            error: function(){
                console.log("请求失败");
            }
            });
        });
        
    </script>
</body>

image-20220408213813357

.get方法

  • 这是一个比$.ajax()简单的GET请求功能，该方法不能调用请求错误时执行回调函数
  • 如果返回的结果为json格式但不是json对象，则需要对其进行返序列化操作

发送get请求

1
2
// 该方法忽略返回值，只是发送请求
$.get('请求地址');

请求且传参

1
2
3
4
5
// 该方法传递参数且忽略请求
$.get('请求地址', {
    '参数':'值',
    '参数':'值'
});

请求且获取返回值

1
2
3
$.get('请求地址', function(data){
    // 形参data为返回值，该形参名可自定义
});

请求传参且获取返回值

1
2
3
4
5
6
$.get('请求地址',  {
    '参数':'值',
    '参数':'值'
}, function(data){
    // 形参data为返回值，该形参名可自定义
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
    <button type="button" id="btn">获取数据</button>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $('#btn').click(function(){
            $.get('js/data.txt', function(data){
                // 反序列化
                var json_data = JSON.parse(data);
                console.log(json_data);
            });
        });
    </script>
</body>

image-20220408215811075

.post方法

  • $.post()方法与$.get()方法一样，将关键词get换成post即可
1
$.post('请求地址', '请求数据', 请求成功执行的函数);

.getJSON方法

  • 该方法与$.get()方法一样，将关键词get换成post即可
  • 该方法返回的数据格式一定要是JSON格式数据或JSON对象，否则无法获取数据
  • 该方法会自动将返回的JSON格式数据反序列化为JSON对象
1
$.getJSON('请求地址', '请求数据', 请求成功执行的函数);
1
2
3
4
5
6
7
8
9
10
11
12
<body>
    <button type="button" id="btn">获取数据</button>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $('#btn').click(function(){
            $.getJSON('js/data.txt', function(data){
                console.log(data);
            });
        });
    </script>
</body>

image-20220408215811075