JavaScript学习笔记

最新推荐文章于 2024-05-21 19:09:41 发布

形而上学·不行退学

最新推荐文章于 2024-05-21 19:09:41 发布

阅读量208

点赞数

分类专栏： HTML+CSS+JSP前端学习文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/weixin_51808237/article/details/129105432

版权

HTML+CSS+JSP前端学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

1、什么是JavaScript
- 1.1、概述
- 1.2、历史
2、快速入门
- 2.2、引入JavaScript
- - 2.3.1、内部引入
  - 2.3.2、外部引入
- 2.2、基本语法入门
- - 2.2.1、入门语法
  - 2.2.2、浏览器必备调试须知
- 2.3、数据类型
- 2.4、严格检查模式
3、数据类型
- 3.1、字符串
- 3.2、数组
- 3.3、对象
- 3.4、流程控制
- 3.5、Map和Set
- 3.6、iterator
4、函数
- 4.1、定义函数
- 4.2、变量的作用域
- 4.3、方法
- - 4.3.1、定义方法
  - 4.3.2、apply
5、内部对象
- 5.1、Date
- - 5.1.1、基本使用
  - 5.1.2、转换
- 5.2、JSON
- - 5.2.1、JSON是什么
- 5.3、Ajex
6、面向对象编程
- 6.1、原型对象
- 6.2、class对象
- 6.3、原型链（相当于继承）
7、操作BOM对象
- 7.1、浏览器介绍
- 7.2、window
- 7.3、Navigator
- 7.4、screen
- 7.4、location（重要）
- 7.5、document
- 7.6、history
8、操作DOM对象（重点）
- 8.1、核心
- 8.2、获得dom节点
- 8.3、更新节点
- - 8.3.1、操作文本
  - 8.3.2、操作CSS
- 8.4、删除节点
- 8.5、插入节点
9、操作表单（验证）
- 9.1、表单是什么form DOM树
- 9.2、获得要提交的信息
- 9.3、提交表单
10、Qjuery
- 10.1、获取
- 10.2、选择器
- 10.3、事件
- 10.4、操作DOM
11、后记
- 11.1、小技巧

1、什么是JavaScript

1.1、概述

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

1.2、历史

参考：https://blog.csdn.net/kese7952/article/details/79357868
ECMAScript它可以理解为是JavaScript的一个标准最新版本已经到es6版本~
但是大部分浏览器还只停留在支持es5代码上！
开发环境–线上环境，版本不一致

2、快速入门

2.2、引入JavaScript

2.3.1、内部引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--script标签内，写JavaScript代码-->
    <script>
        alert("Hello World!");
    </script>
</head>
<body>

</body>
</html>

2.3.2、外部引入

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

</body>
</html>

//js.js
alert("Hello World!");

在这里插入图片描述

2.2、基本语法入门

2.2.1、入门语法

定义变量 var 变量名 = 变量值
条件控制与Java相同
console.log（score）在浏览器的控制台打印变量！
多行注释
JavaScript严格区分大小写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
      //1. 定义变量 var 变量名 = 变量值
      var score = 71;
      // alert(score);
      // 2.条件控制与Java相同
      if(score>60 && score<70){
        alert("60~70");
      }else if(score>70 && score<80){
        alert("70~80");
      }else{
        alert("other");
      }
      // 3.console.log（score）在浏览器的控制台打印变量！System.out.println（）；
      console.log(score);
      
      // 4.多行注释
      /**
       * 
       * gsf
       */
	// 5.JavaScript严格区分大小写
    </script>
</head>
<body>

</body>
</html>

2.2.2、浏览器必备调试须知

Elements：元素，爬取网站用
Console：控制台，调试JS用
Sources：源码，打断点用
Network：网络，抓包用
Application：应用，查看网站Coockies用

2.3、数据类型

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

2.3.1、number

js不区分小数和整数，Number

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

2.3.2、字符串

‘abc’ “abc”

2.3.3、布尔值

true,false

2.3.4、逻辑运算

&&	// 与
|| 	// 或
!	// 非

2.3.5、比较运算符

=	// 赋值
==	// 等于（类型不一样结果一样也会判断为true），例如1=='1'
===	// 绝对等于（类型一样，值一样，结果true）

NaN===NaN，这个与所有的数值都不相等，包括自己
只能通过isNaN（NaN）来判断这个数是否是NaN
浮点数问题：

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

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

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

2.3.6、null 和undefined

null 空
undefined 未定义

2.3.7、数组

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

//保证代码的可读性，尽量使用[]
var arr=[1,2,3,4,5,'hello',null,true];

new Array(1,12,3,4,4,5,'hel1o');

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

undefined

2.3.8、对象

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

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

取对象的值

person.name
>"qinjiang"
person.age
>3

2.4、严格检查模式

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

// 未使用严格检查模式测试代码
<script>
    // 'use strict';
    //全局变量
    i=1;
</script>

在这里插入图片描述

// 使用严格检查模式测试代码
<script>
    'use strict';
    //局部变量
    i=1;
</script>

在这里插入图片描述

开启ES6的方法

在这里插入图片描述

3、数据类型

3.1、字符串

正常字符串我们使用单引号，或者双引号包裹
注意转义字符的使用

\'
\n
\t
\u4e2d	\u####Unicode字符
\×41	Asc11字符

多行字符串编写：使用反引号包裹

//tab上面esc键下面的`
var msg=
	`he11o
world
你好ya
你好`

模板字符串

//tab 上面esc键下面
let name="qinjiang";
let age=3;
let msg=`你好呀，${name}`

字符串长度

str.length

字符串的可变性，不可变
大小写转换

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

字符属于字符串中的第几位

student.indexOf("t")

取子串substring

// 前闭后开
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

长度

arr.length

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

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

arr.indexof(2)
1

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

**slice()**截取Array的一部分，返回一个新数组，类似于String中的substring，前闭后开
push（），pop（）针对尾部

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

unshift（），shift（）针对头部

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

排序 sort()

(3)["B","c","A"]
arr.sort()
(3)["A","B","c"]

元素反转 reverse()

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

追加元素concat()

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

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

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

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

多维数组

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

3.3、对象

将若干键值对封装起来

var 对象名={
	属性名:属性值,
	属性名:属性值,
	属性名:属性值
}
// 定义了一个person对象，它有四个属性！
var person={
	name:"kuangshen",
	age:3,
	emai1:"247367430qq.com",
	score:0
}

Js中对象，{…}表示一个对象，键值对描述属性xxxx:xxxx，多个属性之间使用逗号隔开，最后一个属性不加逗号！
JavaScript中的所有的键都是字符串，值是任意对象！

对象赋值

person.name="qinjiang"
"qinjiang"
person.name
"qinjiang"

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

person.haha 
undefined

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

delete person.name 
true 
person

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

person.haha="haha"
"haha"
person

判断属性值是否在这个对象中！xxxin xxx！

'age' in person	// 自身属性
true
'tostring' in person// 继承属性
true

判断一个属性是否是这个对象自身拥有的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~");
}e1se{	//否则，，
	alert("kuwa~");

while循环，避免程序死循环

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

for循环

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

forEach 循环

5.1引入的

var age=[12，3，12，3，12，3，12，31，23，123];
//函数
age.forEach(function(value){
	console.log(value)
})

for…in

//for(var index in object){}
for(var num in age){
	if(age.hasOwnProperty(num)){
		console.log("存在")
		console.log(age[num])
	}
}

3.5、Map和Set

Map 对象保存键值对，并且能够记住键的原始插入顺序。任何值（对象或者基本类型）都可以作为一个键或一个值。

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

Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。
Set对象是值的集合，你可以按照插入的顺序迭代它的元素。Set 中的元素只会出现一次，即 Set 中的元素是唯一的。

set.add(2);					//添加！
set.delete(1);				//删除！
console.log(set.has(3));	//是否包含某个元素！

3.6、iterator

ES6新特性

遍历数组

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

遍历map

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

遍历set

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

4、函数

4.1、定义函数

4.1.1、定义方式一

绝对值函数示例

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

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

4.1.2、定义方式二

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

function（x）{……}这是一个匿名函数。但是可以把结果赋值给abs，通过abs就可以调用函数！
方式一和方式二等价！

4.1.3、调用函数

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;
		}
	}
}

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

4.1.5、rest

以前的方案

if(arguments.length>2){
	for(var 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、变量的作用域

4.2.1、var定义变量各种情况下的作用域

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

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

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

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

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

function qj2(){
	var x='A';
	 x=x+1;
}

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

function qj(){
	var x=1;
	//内部函数可以访问外部函数的成员，反之则不行
	function qj2(){
		var y=x+1;	//2
	}
	var z=y+1;		//uncaught ReferenceError:y is not defined

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

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

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

4.2.2、提升变量的作用域

function qj(){
	var x="x"+y; 
	console.log(x); 
	var y='y';
}	//结果：xundefined

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

以上代码等价于以下代码

function qj2(){
	var y; 

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

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

规范写法是先声名定义所有用到的变量后再使用

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

4.2.3、全局函数

全局变量

// 全局变量
x=1;

function f() {
	console.log(x);
}
f();			// 1
console.log(x);	// 1

在这里插入图片描述

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

var x='xxx';
alert(x);
alert(window.x);//两者一样的效果，都会弹出xxx弹窗

alert（）这个函数本身也是一个window变量；

// 本函数将window.alert函数临时赋值给old_alert，
// 又将function ()赋值给window.alert，
// 发现window.alert失效后，将old_alert赋值回window.alert
// window.alert恢复原功能，
// 进一步证明了alert（）这个函数本身也是一个`window`变量；
var x='xxx';
window.alert(x);
var old_alert=window.alert;
//o1d_alert(x);
window.alert=function (){

};
//发现alert（）失效了
window.alert(123);
//恢复
window.alert=old_alert;
window.alert(456);
// 结果：先后弹出xxx和456两个弹窗

4.2.4、规范

由于我们所有的全局变量都会绑定到我们的window上。如果不同的js文件，使用了相同的全局变量，冲突~>如果能够减少冲突？

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

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

4.2.5、局部作用域let

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

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去定义局部作用域的变量；

4.2.6、常量const

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

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

在ES6引入了常量关键字const

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

4.3、方法

4.3.1、定义方法

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

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

this.代表什么？拆开上面的代码看看。

function getAge(){
	//今年-出生的年
	var now=new Date().getFullYear();
	return now-this.bitrh;
}
var kuangshen={
	name:'秦疆',
	bitrh:2000,
	age:getAge
}
//kuangshen.age()	ok
//getAge()			NaN

调用kuangshen.age()能够正确执行，但调用getAge()出现NaN，原因是this指向调用它的那个对象，kuangshen.age()中右age属性，所以能够正确执行，但是，getAge()指向window，没有age属性，所以不能正确执行。
this是无法指向的，是默认指向调用它的那个对象；

4.3.2、apply

在js中可以控制this 指向！

getAge.apply(指向的对象名,[参数列表，可为空]);

function getAge(){
	//今年-出生的年
	var now=new Date().getFullYear();
	return now-this.bitrh;
}
var kuangshen={
	name:'秦疆',
	bitrh:2000,
	age:getAge
};
//kuangshen.age() 				ok 
getAge.apply(kuangshen,[]);	//this，指向了kuangshen，参数为空

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

5.1.1、基本使用

var now=new Date();	//sat Jan 04 2020 10：47：06 GMT+0800（中国标准时间）
now.getFullYear();	//年
now.getMonth();		//月0~11代表月
now.getoate();		//日
now.getDay();		//星期几
now.getHours();		//时
now.getMinutes();	//分
now.getSeconds();	//秒
now.getTime();		//时间戳全世界统一19701.10：00：00毫秒数

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

5.1.2、转换

now=new Date(1578106175991)
// Sat Jan 04 2020 10：49：35 GMT+0800（中国标准时间）

now.toLocalestring()
// "2020/1/4上午10：49：35"

now.toGMTstring()
// "Sat，04 Jan 2020 02：49：35 GMT"

now.toLocalestring					// 报错
f toLocalestring() {[native code]}	// 注意，调用是一个方式，不是一个属性！

5.2、JSON

5.2.1、JSON是什么

早期，所有数据传输习惯使用XML文件！
- JSONJavaScript Object Notation，JS对象简谱）是一种轻量级的数据交换格式。
- 简洁和清晰的层次结构使得JSON成为理想的数据交换语言。
- 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
在JavaScript一切皆为对象、任何js支持的类型都可以JSON来表示；格式：
- 对象都用{}
- 数组都用[]
- 所有的键值对都是用key:value
JSON字符串和JS对象的转化

var user={
	name:"qinjiang",
	age:3,
	sex:'男'
}

//对象转化为json字符串{"name"："qinjiang"，"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、Ajex

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

6、面向对象编程

6.1、原型对象

javascript、Java、c#。。。。面向对象；javascript有些区别！

类：模板
对象：具体的实例

在JavaScript这个需要换一下思维方式！
对象的原型相当于父类，但是可以随意指向更换：

var student= {
    name: "qinjiang",
    age: 3,
    run: function () {
        console.log(this.name + "run....");
    }
};

var xiaoming={
    name:"xiaoming"
};

// // 原型对象
// xiaoming.__proto__=student;
// console.log(xiaoming);

var Bird={
    fly:function(){
        console.log(this.name+"fly...");
    }
};

//小明的原型是Bird
xiaoming.__proto__=Bird;
console.log(xiaoming)

在这里插入图片描述

定义一个类（不建议）

function student(name){
	this.name=name;
}

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

6.2、class对象

class关键字，是在ES6引入

定义一个类，属性，方法

//定义一个学生的类
class student{
	constructor(name){
		this.name=name;
	}

	hello(){
		alert('he11o')
	}
}

var xiaoming=new student("xiaoming");
var xiaohong=new student("xiaohong");

继承extends

class student{
	constructor(name){
		this.name=name;
	}

	hello(){
		alert('he11o')
	}
}

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);

6.3、原型链（相当于继承）

参考（了解即可）：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

7、操作BOM对象

7.1、浏览器介绍

JavaScript和浏览器关系？
JavaScript 诞生就是为了能够让他在浏览器中运行！
BOM：浏览器对象模型

内核
- IE6~11
- Chrome
- Safari
- FireFox
三方
- QQ浏览器
- 360浏览器

7.2、window

window代表浏览器窗口

window.alert(1)
undefined 
window.innerHeight
258
window.innerWidth
919
window.outerHeight
994
window.outerWidth
919

7.3、Navigator

Navigator，封装了浏览器的信息

navigator.appName
"Netscape"

navigator.appversion
"5.0(windows NT 10.0; wow64) Applewebkit/537.36(KHTML, like cecko)Chrome/63.0.3239.132 safari/537.36"

navigator.userAgent
"Mozi11a/5.0(windows NT 10.0; wow64) Applewebkit/537.36(KHTML, like Gecko) Chrome/63.0.3239.132 safari/537.36"

navigator.platform
"win32"

大多数时候，我们不会使用navigator对象，因为会被人为修改！
不建议使用这些属性来判断和编写代码

7.4、screen

代表屏幕尺寸

screen.width
1920 px

screen.height
1080 px

7.4、location（重要）

location代表当前页面的URL信息

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

7.5、document

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
"__guid=111872281.88375976493059340.1578110638877.133;monitor_count=1"

劫持cookie原理
www.taobao.com

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

解决方案：服务器端可以设置 cookie:httpOnly

7.6、history

history代表浏览器的历史记录

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

8、操作DOM对象（重点）

8.1、核心

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

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

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

8.2、获得dom节点

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

//father.firstchild
//father.1astchild

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

8.3、更新节点

<div id="id1">
</div>

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

8.3.1、操作文本

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

8.3.2、操作CSS

id1.style.color='yellow'; 	// 属性使用字符串包裹
id1.style.fontSize='20px'; 	// - 转 驼峰命名问题
id1.style.padding='2em';

在这里插入图片描述

8.4、删除节点

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

<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)
	// 结果：p1标签被删除
</script>

删除是一个动态的过程，以下代码运行出错，因为当删除children[0]后，只剩下两个子元素，删除children[1]相当于删除此刻的第二个子元素，再删除children[2]时由于此时只有一个子元素，所以会报错

//删除是一个动态的过程；
father.removechild(father.children[0])
father.removechild(father.children[1])
father.removechild(father.children[2])

8.5、插入节点

我们获得了某个Dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素了，我们就不能这么干了！会产生覆盖

8.5.1、追加

list.appendChild(js);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<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>
</body>
</html>

在这里插入图片描述

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

document.createElement('p');

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<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');

    //通过Js创建一个新的节点
    var newP=document.createElement('p');//创建一个p标签
    newP.id='newp';
    newP.innerText='Hello,kuangshen';

    //list.appendChild(newP);
</script>
</body>
</html>

在这里插入图片描述

myscript.setAttribute是万能写法，可以插入CSS

//创建一个标签节点
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);

在这里插入图片描述

8.5.3、insertBefore

insertBefore(newNode,targetNode)

<body>
<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、操作表单（验证）

9.1、表单是什么form DOM树

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

表单的目的：提交信息

9.2、获得要提交的信息

<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="women"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='123'
    //对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值
    boy_radio.checked;//查看返回的结果，是否为true，如果为true，则被选中~

    girl_radio.checked=true;//赋值
</script>
</body>

在这里插入图片描述

9.3、提交表单

提交表单后，对密码按照MD5算法进行加密，明文密码没有name被隐藏，不会被捕获，只有密文会被捕获。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../JavaScript-MD5-master/js/md5.min.js"></script>
</head>
<body>
<form action="https://www.baidu.com/"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">提交</button>
</form>

<script>
    function aaa() {
        var uname=document.getElementById('username');
        var pwd=document.getElementById('input-password');
        var md5pwd=document.getElementById('md5-password');
        md5pwd.value=md5(pwd.value);
        return true;
    }
</script>

</body>
</html>

在这里插入图片描述

10、Qjuery

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

使用公式：

$(selector).action()

10.1、获取

从CDN官网下载库文件或引用在线库

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

10.2、选择器

// 原生Js，选择器少，麻烦不好记
// 标签
document.getElementsByTagName();	//id 
document.getElementById();			//类
document.getElementsByClassName();	//jQuery css 中的选择器它全部都能用！
$('p').click();			//标签选择器
$('#id1').click();		//id选择器
$('.class1').click()	//class选择器

文档工具站可以查阅：https://jquery.cuishifeng.cn/

10.3、事件

包括鼠标事件、键盘事件和其他事件
鼠标事件例如：
活动鼠标获取坐标程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-2.1.1.min.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>
    //当网页元素加我完毕之后，响应事件
    $(function(){
        $('#divMove').mousemove(function(e){
            $('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
        })
    });
</script>

</body>
</html>

在这里插入图片描述

10.4、操作DOM

节点文本操作

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

CSS的操作

$('# test-u1 1i[ name=python]'). css({"color","red"})

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

$('# test-u1 1i[ name=python]').show()
$('# test-u1 1i[ name=python]').hide()

11、后记

11.1、小技巧

如果巩固JS（看jQuery源码，看游戏源码！）
巩固HTML。CSS（扒网站，全部down下来，然后对应修改看效果~）

看到我的博客，你一定是一个爱学习的孩子，期待你的点赞关注！

形而上学·不行退学

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记

JavaScript学习笔记（完整）
复制链接

扫一扫

专栏目录