JavaScript基础入门
1、引入JavaScript
1.1 内部标签
<script>
// ...
</script>
1.2 外部引入
x.js
// ...
x.html
<script src="x.js"></script>
1.3 测试代码
2、基本语法
<!-- JavaScript严格区分大小写 -->
<script>
// 1、定义变量 --> 变量类型 变量名 = 变量值;
var x = 99;
// alert(x);
// 2、条件控制
if (x>60 && x<100){
alert("60~100")
}else{
alert("other")
}
// console.log(x) // 在浏览器控制台打印变量
/*
多行注释
*/
</script>
3、数据类型（摘要）
数值、文本、图形、音频、视频 ......
3.1 变量
var 王者荣耀 = "摆烂荣耀";
3.2 Number
js不区分小数和整数
12345 // 整数12345
12.34 // 浮点数12.34
1.2e3 // 科学计数法
-1234 // 负数
NaN // not a number
Infinity // 表示无限大
3.2.1 NaN：
-
NaN与所有数值都不相等，包括自己
-
只能通过 isNaN(NaN) 来判断这个数是否是 NaN
3.2.2 浮点数问题：
尽量避免使用浮点数进行计算，存在精度问题！！！
console.log((1/3)===(1-2/3)) // false
Math.abs(1/3-(1-2/3))<0.000000001 // true
3.3 字符串
'abc'
"abc"
3.4 布尔值
ture
false
3.5 逻辑运算符
&& // 两个都为真，结果为真
|| // 一个为真，结果为真
! // 真即假，假及真
3.6 比较运算符
=
== // 等于（值一样，类型不一样，也会判断为True）
=== // 绝对等于（值一样，类型一样，结果为True）
注：尽量避免使用 == 比较
3.7 null和undefined
-
null 空
-
undefined 未定义
3.8 数组
数值相同或不同类型的对象。
// 为了保证代码的可读性，尽量使用[]
var arr = [1,2,3,4,5,'Hello',null,true];
new Array(1,2,345,'Hello');
注：取数组下标如果越界就会 undefined
3.9 对象
对象是大括号，数组是中括号。
对象每个属性之间用逗号隔开，最后一个不需要添加
var person = person = {
name : "XXX",
age : "X",
tags : ['js','java','web','...']
}
取对象的值
person.name // 'XXX'
person.age // 'X'
4、严格检查模式
二、数据类型（详细）
1、字符串
-
正常字符串使用单引号或者双引号包裹
-
转义字符
\'
\n
\t
\u4e2d // Unicode字符（\u####）
\x41 // Ascii字符 -
多行字符串
var x =
`Hello
World
!`
-
模板字符串
let a = "World!";
let x = `Hello,${a}`; -
字符串长度
console.log(x.length) // 12
-
字符串可变性 ---> 不可变
-
大小写转换
// 注：这里是方法，不是属性
console.log(x) // Hello,World!
x.toUpperCase() // 'HELLO,WORLD!'
x.toLowerCase() // 'hello,world!' -
x.indexOf('H')
x.indexOf('H') // 0 -
substring
// [)
x.substring(3) // 'lo,World!'
x.substring(1,3) // 'el'
2、数组
Array可以包含任意数据类型，用于存储数据（如何存、如何取等方法都可以自己实现）
var arr = [1,2,3,4,5,6]; // 通过下标取值和赋值
arr[0];
arr[0] = 1;
2.1 长度
arr.lenth
注：加入给arr.lenth赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失。
2.2 indexOf
通过元素获得下标索引
arr.indexOf(3) // 2
字符串”1“和数字 1 是不同的
2.3 slice()
截取Array的一部分，返回一个新数组，类似于String的substring
2.4 尾部 push()、pop()
push：压入到尾部
pop：弹出尾部的一个元素
2.5 头部 unshift()、shift()
unshift：压入到头部
shift：弹出头部的一个元素
2.6 排序 sort
arr = ["A","C","B"]
arr.sort() // ['A', 'B', 'C']
2.7 元素反转 reverse()
arr = ['A', 'B', 'C']
arr.reverse() // ['C', 'B', 'A']
2.8 concat()
arr = ["A","B","C"]
arr.concat([1,2,3]) // ['A', 'B', 'C', 1, 2, 3]
console.log(arr) // ['A', 'B', 'C']
注：concat() 并没有修改数组，只是会返回一个新的数组
2.9 连接符 join()
arr = ["A","B","C"]
arr.join("-") // 'A-B-C'
console.log(arr) // ['A', 'B', 'C']
2.10 多维数组
arr = [[1,2],[3,4],[5,6]];
arr[1][0] // 3
3、对象
若干键值对
var 对象名 = {
属性名:属性值,
属性名:属性值,
属性名:属性值
}
// 定义了一个person对象，它有三个属性
var person = {
name:"xxx",
age:9,
email:"xxx@x.com"
}
js对象中，{......}表示一个对象，键值对描述属性xxx:xxx，多个属性之间使用逗号隔开，最后一个属性不加逗号。
JavaScript中所有的键都是字符串，值是任意对象！
3.1 对象赋值
person.name = "xxx" //" xxx"
3.2 undefined
使用一个不存在的对象属性，不会报错！undefined
person.xxx // undefined
3.3 删除属性
动态的删减属性，通过delete删除对象的属性值
delete person.name
3.4 添加属性
动态的添加，直接给新的属性添加值即可
person.xxx = "xxx"
3.5 判断属性值是否在对象中 xxx in xxx
var person = {
name:"xxx",
age:9,
email:"xxx@x.com"
}
'age' in person // true
// 继承
'toString' in person // ture
3.6 判断一个属性是否是自身拥有的 hasOwnProperty()
person.hasOwnProperty('age') // true
person.hasOwnProperty('toString') // false
4、流程控制
4.1 if判断
var age = 18;
if(age<18){ // 第一个判断
alert("'^''");
}else if(age=18){ // 第二个判断
alert("^-^");
}else{ // 否则...
alert("...");
}
4.1 while循环
避免程序死循环
var age = 18;
while(age<100){
age = age + 1;
console.log(age);
}
4.2 for循环
for(let i = 0 ; i < 100 ; i++){
console.log(i);
}
4.3 forEach循环
5.1 引入新特性
var age = [1,2,3,4,5,6,7,8,9,0];
// 函数
age.forEach(function(value){
console.log(value);
});
4.4 for...in
// for(var index in object){}
var age = [1,2,3,4,5,6,7,8,9,0];
for(var num in age){
if(age.hasOwnProperty(num)){
console.log("存在");
console.log(age[num]);
}
}
5、Map和Set
ES6 新特性
5.1 Map
var map = new Map([['Tom',100],['Jack',90],['Xxx',80]]);
var name = map.get('Tom'); // 通过key获得value
map.set('Admin',123456); // 新增或修改
map.delete("Tom"); // 删除
5.2 Set
无需不重复的集合
var set = new Set([3,1,1,1]); // Set可以去重（3, 1）
set.add(2); // 添加（3, 1, 2）
set.delete(1); // 删除（3, 2）
console.log(set.has(2)) // 是否包含某个元素（True）
6、迭代（Iterator）
ES6 新特性
6.1 遍历数组
// for of 下标
var arr = [3,4,5];
arr.name = "123";
for(let x of arr){
console.log(x);
}
// 3 4 5
// for in 下标（有BUG，尽量不要用）
var arr = [3,4,5];
arr.name = "123";
for(let x in arr){
console.log(x);
}
// 0 1 2 name
6.2 遍历Map
var map = new Map([['Tom',100],['Jack',90],['Xxx',80]]);
for(let x of map){
console.log(x);
}
6.3 遍历Set
var set = new Set([1,2,3]);
for(let x of set){
console.log(x);
}
三、函数
1、定义函数
一旦执行到return代表函数结束，返回结果；如果没有执行return，函数执行完也会返回结果，结果就是undefined。
1.1 定义方式一
// 绝对值函数
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
1.2 定义方式二
// 绝对值函数
var abs = function (x){
if(x>=0){
return x;
}else{
return -x;
}
}
1.3 调用函数
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;
}
}
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;
}
}
1.5 rest
arguments 包含所有的参数，有时候想使用多余的参数进行附加操作，需要排除已有参数。
rest 是 ES6 引入的新特性，获取除了已定义的参数之外的所有参数。
注：rest 只能写在最后面，必须用 ... 标识。
1.5.1 以前：老版本
function x(a,b){
console.log("a=>"+a);
console.log("b=>"+b);
if(arguments.length>2){
for(var i = 2; i<arguments.length; i++){
// ......
}
}
}
1.5.2 现在：ES6 新特性
function x(a,b,
2、变量的作用域
在JavaScript中，var 定义变量实际是有作用域的。
2.1 假设在函数体中声明变量，则在函数体外不可以使用
如果要实现函数体外使用函数体中声明变量，可以研究一下闭包。
function fun(){
var x = 1;
x = x + 1;
}
x = x + 2; // Uncaught ReferenceError: x is not defined
2.2 如果两个函数使用了相同的变量名，只要在函数内部，就不冲突
function funO(){
var x = 1;
x = x + 1;
}
function funT(){
var x = 'A';
x = x + 1;
}
2.3 内部函数可以访问外部函数的成员，反之则不行
function funO(){
var x = 1;
// 内部函数可以访问外部函数的成员，反之则不行
function funT(){
var y = x + 1;
}
var z = y + 1; // Uncaught ReferenceError: y is not defined
}
2.4 JavaScript中函数查找变量是从自身函数开始，由“内”向“外”查找
假设内部函数变量和外部函数变量重名，内部函数会屏蔽外部函数变量.
function funO(){
var x = 1;
function funT(){
var x = 'A';
console.log('inner'+x);
}
console.log('outer'+x);
funT(); // innerA
}
funO(); // outer1
2.5 提升变量的作用域
js执行引擎自动提升y的声明，但是不会提升y的赋值，这是JavaScript特性。
function fun(){
var x = "x" + y;
console.log(x);
var y = 'y';
} // xundefined
// 修改后
function fun(){
var y;
var x = "x" + y;
console.log(x);
y = 'y';
}
养成规范：所有变量都定义在函数的头部，便于代码维护。
function fun(){
var x = 1,
y = x + 1,
a,b,c; // undefined
// 定义后随便使用
}
2.6 全局函数
2.6.1 全局变量
x = 1;
function fun(){
console.log(x);
}
fun(); // 1
console.log(x); // 1
2.6.2 全局对象 window
var x = 'xxx';
alert(x);
alert(window.x); // 默认所有的全局变量，都会绑定在window对象下
alert() 这个函数本身也是一个 window变量。
var x = 'xxx';
window.alert(x);
var old_alert = window.alert;
window.alert = function () {};
// 发现alert()失效
window.alert("失效");
// 恢复
window.alert = old_alert;
window.alert("恢复");
JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用域范围内找到，就会向外查找，如果在全局作用域都没有找到，报错 RefrenceError。
2.6.3 规范
由于所有的全局变量都会绑定到window上，如果不同的js文件使用了相同的全局变量，就会冲突。
把自己的代码全部放入自己定义的唯一空间名字中，可降低全局命名冲入问题。
// 唯一全局变量
var Kalpa = {};
// 定义全局变量
Kalpa.name = 'Kalpa';
Kalpa.add = fun (a,b) {
return a+b;
}
2.7 局部作用域 let
function fun() {
for (var i = 0; i < 100; i++) {
console.log(i);
}
console.log(i+1); // 问题：i出了作用域还可以使用
}
ES6 let 关键字，解决局部作用域冲突问题（jQuery）。
function fun() {
for (let i = 0; i < 100; i++) {
console.log(i);
}
console.log(i+1); // Uncaught ReferenceError: i is not defined
}
建议：使用let定义局部变量。
2.8 常量 const
ES6 之前定义常量：只有全部大写字母命名的变量就是常量。
var PI = '3.14';
console.log(PI);
PI = '3'; // 可以修改常量值
console.log(PI);
ES6 引入常量关键字 const
const PI = '3.14';
console.log(PI);
PI = '3'; // Uncaught TypeError: invalid assignment to const 'PI'
console.log(PI);
3、方法
3.1 定义方法
方法就是把函数放在对象的里面，对象只有两个东西：属性和方法。
var kalpa = {
name:'kalpa',
bitrh:2000,
// 方法
age:function () {
// 今年 - 出生年份
var now = new Date().getFullYear();
return now - this.bitrh;
}
}
// 调用属性
kalpa.name
// 调用方法
kalpa.age()
另一种写法：
function getAge(){
// 今年 - 出生年份
var now = new Date().getFullYear();
return now - this.bitrh;
}
var kalpa = {
name:'kalpa',
bitrh:2000,
age:getAge
}
// kalpa.age() 22
// this默认指向调用它的对象（kalpa）
// getAge() NaN
修改后：
function getAge(){
// 今年 - 出生年份
var now = new Date().getFullYear();
return now - kalpa.bitrh;
}
var kalpa = {
name:'kalpa',
bitrh:2000,
age:getAge
}
// kalpa.age() 22
// getAge() 22
3.2 apply
在js中可以控制this指向。
function getAge(){
// 今年 - 出生年份
var now = new Date().getFullYear();
return now - this.bitrh;
}
var kalpa = {
name:'kalpa',
bitrh:2000,
age:getAge
}
getAge.apply(kalpa,[]); // this指向了kalpa，参数为空
// getAge.apply(kalpa,[]) 22
// kalpa.age() 22
// getAge() NaN
四、内部对象
typeof 123 // "number"
typeof '123' // "string"
typeof true // "boolean"
typeof NaN // "number"
typeof [] // "object"
typeof {} // "object"
typeof Math.abs // "function"
typeof undefined // "undefined"
1、Date
1.1 基本使用
var now = new Date(); // Date Fri Oct 30 2022 24:60:60 GMT+0800 (中国标准时间)
now.getFullYear(); // 年
now.getMonth(); // 月 0~11 代表月
now.getDate(); // 日
now.getDay(); // 星期
now.getHours(); // 时
now.getMinutes(); // 分
now.getSeconds(); // 秒
now.getTime(); // 时间戳 全世界统一 1970 1.1 08:00:00 GMT+0800 毫秒数
console.log(new Date(0)); // 时间戳转为时间
1.2 转换
now = new Date(0); // Date Thu Jan 01 1970 08:00:00 GMT+0800 (中国标准时间)
now.toLocaleString(); // "1970/1/1 08:00:00" 调用的是方式，不是属性
now.toGMTString(); // "Thu, 01 Jan 1970 00:00:00 GMT"
2、JSON
2.1 定义
早期，所有数据传输习惯使用 XML 文件。
-
JSON（JavaScript Object Notation, JS对象简谱）是一种轻量级的数据交换格式。
-
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
-
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
在JavaScript中，一切皆为对象，任何js支持的类型都可以使用JSON来表示（number、string...）
2.2 格式
-
对象都用 {}
-
数组都用 []
-
键值对都用 key:value
2.3 JSON字符串和JS对象的转化
var user = {
name:"kalpa",
age:18,
sex:'男'
};
// 对象转化为JSON字符串 {"name":"kalpa","age":18,"sex":"男"}
var jsonUser = JSON.stringify(user);
// JSON字符串转化为对象，参数为JSON字符串
var obj = JSON.parse('{"name":"kalpa","age":18,"sex":"男"}');
2.4 JSON和JS的区别
// JS
var obj = {a:"HelloA",b:"HelloB"};
typeof(obj) // 'object'
// JSON
var json = '{"a":"HelloA","b":"HelloB"}';
typeof(json) // 'string'
3、Ajax
-
原生JS写法 ---> xhr 异步请求
-
jQuery封装好的方法 ---> $("#name").ajax("")
-
axios请求
五、面向对象编程
1、原型对象继承
JavaScript、Java、C# ...... 面向对象；JavaScript有些区别。
-
类：模板 原型对象
-
对象：具体实例
原型继承：
var Student = {
name: "Kalpa",
age: 18,
run: function () {
console.log(this.name+" run...")
}
};
var Bird = {
fly: function () {
console.log(this.name+" fly...")
}
};
var Tom = {
name: "Tom"
};
Tom.__proto__ = Student;
// Tom.__proto__ = Bird;
Tom.name // 'Tom'
Tom.run() // Tom run...
function Student(name){
this.name = name;
};
// 给Student新增一个方法
Student.prototype.hello = function () {
alert('Hello')
};
2、Class对象继承
Class关键字，在ES6引入
2.1 定义一个类、属性和方法
// 定义一个学生的类
class Student{
constructor(name) {
this.name = name;
}
hello(){
alert('Hello')
}
}
var kalpa = new Student("kalpa");
var Tom = new Student("Tom");
kalpa.name // 'kalpa'
kalpa.hello()
2.2 继承
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 kalpa = new Student("kalpa");
var Tom = new xiaoStudent("Tom",'小学生');
Tom.name // 'Tom'
Tom.grade // '小学生'
Tom.myGrade()
本质：查看对象原型
2.3 原型链
__ proto __:
六、操作BOM对象
BOM：浏览器对象模型。
1、浏览器介绍
JavaScript和浏览器的关系：JavaScript诞生就是为了能够让它在浏览器中运行。
浏览器（内核）：
-
IE 6~11
-
Chrome
-
Safari
-
FireFox
-
Opera
第三方浏览器：
-
360浏览器
-
QQ浏览器
-
搜狗浏览器
2、window对象
window代表浏览器窗口
window.alert(9) // undefined
window.innerHeight // 360
window.innerWidth // 1536
window.outerHeight // 920
window.outerWidth // 1536
3、navigator（不建议使用）
navigator封装了浏览器的信息。
navigator.appName // 'Netscape'
navigator.appVersion // '5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36'
navigator.userAgent // 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36'
navigator.platform // 'Win32'
navigator会被人为修改，所以大多数时候不使用 navigator 对象。也不建议使用navigator对象判断和编写代码。
4、screen
screen代表屏幕尺寸
screen.width // 1536
screen.height // 960
5、location
location代表当前页面的URL信息。
host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
reload: ƒ reload() // 刷新网页
location.assign('http://www.kalpa.cc') // 设置新的地址
6、document（内容：DOM）
document代表当前的页面，HTML DOM文档树。
document.title // '新标签页'
document.title='KALPA' // 'KALPA'
获取具体的文档树节点：
<dl id="app">
<dt>JAVA</dt>
<dd>JavaSE</dd>
<dd>JavaEE</dd>
</dl>
<script>
var dl = document.getElementById('app');
</script>
获取 cookie
document.cookie // ''
劫持 cookie 原理
<script src="x.js"></script>
<!--恶意人员会获取客户端cookie上传到自己的服务器，从而窃取隐私等-->
预防方法：服务器端设置 cookie:httpOnly
7、history（不建议使用）
history.forward() // 前进
history.back() // 后退
8、BOM实操
BOM即Browser Object Model，浏览器对象模型。简单来说，它就是操作控制浏览器的一种能力、工具，比如可以获取浏览器信息，通过代码前进、后退页面，等等。
弹框就是属于BOM的范畴，弹框有三种形式：
-
alert() - 警告弹框
-
confirm() - 确认弹框
-
prompt() - 提示弹框
弹框是最基本的BOM使用形式，以下代码在控制台中键入即可：
(window.)screen - 获取浏览器屏幕信息
(window.)location.(href="http://www.baidu.com" or 是改网站的路径值) - 获取/控制用于页面URL
(window.)navigator - 获取访问者浏览器信息
(window.)open/close() - 操作浏览器窗口，打开/关闭
参考链接：https://segmentfault.com/a/1190000012575816#articleHeader14
七、操作DOM对象
DOM：文档对象模型。
1、核心
浏览器网页就是一个DOM树形结构。
-
更新：更新DOM节点
-
遍历DOM节点：得到DOM节点
-
删除：删除一个DOM节点
-
添加：添加一个DOM节点
操作一个DOM节点，就必须先获得这个DOM节点。
2、获得DOM节点
<body>
<div id="father">
<h1>标题一</h1>
<p id="p1">段落一</p>
<p class="p2">段落二</p>
</div>
<script>
// 对应CSS选择器
var father = document.getElementById('father');
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var childrens = father.children[index]; // 获取父节点下的所有子节点
// father.firstChild;
// father.lastChild;
</script>
</body>
这是原生代码，实际生产中一般使用jQuery()。
3、更新DOM节点
<div id="id"></div>
<script>
var id = document.getElementById('id');
</script>
3.1 操作文本
// 修改文本的值
id.innerText='<u>OOO</u>';
'<u>OOO</u>'
// 可以解析HTML文本标签
id.innerHTML='<u>OOO</u>';
'<u>OOO</u>'
3.2 操作CSS
// 属性使用字符串包裹
id1.style.color='red';
'red'
// 驼峰命名
id1.style.fontSize='100px';
'100px'
id1.style.padding='2em';
'2em'
4、删除DOM节点
删除节点的步骤：先获取父节点，再通过父节点删除自己。
<div id="father">
<h1>标题一</h1>
<p id="p1">段落一</p>
<p class="p2">段落二</p>
</div>
<script>
var self = document.getElementById('p1');
var father = p1.parentElement;
father.removeChild(self);
// 删除是一个动态的过程
father.removeChild(father.children[0]);
father.removeChild(father.children[1]);
father.removeChild(father.children[2]);
</script>
注意：删除节点的时候，children是在时刻变化的。
5、创建和插入DOM节点
获得了某个DOM节点，如果这个DOM是空的，就可以通过innerHTML增加一个元素，但这个DOM节点已经存在元素则会产生覆盖。
5.1 追加
<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>
5.2 创建新标签插入
<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.setAttribute('id','nweP');
newP.innerText = 'Hello,World!';
// list.appendChild(newP);
// 创建一个标签节点（通过这个属性可以设置任意的值）
var myScript = document.createElement('script');
myScript.setAttribute('type','javascript');
// list.appendChild(myScript);
// 创建一个Style标签
var myStyle = document.createElement('style'); // 创建一个空style标签
myStyle.setAttribute('type','text/css');
myStyle.innerHTML = 'body{ // 设置标签内容
document.getElementsByTagName('head')[0].appendChild(myStyle);
</script>
5.3 insertBefore
<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');
// 包含在list节点中；js：要插入的新节点；ee：插入目标ee节点前面（insertBefore(newNode,target)）
list.insertBefore(js,ee)
</script>
6、DOM实操
使用DOM替换文本
<html>
<head>
<meta charset="utf-8" />
<title>DOM替换文本</title>
</head>
<body>
<h1 id="main-heading">Kalpa</h1>
<script>
var headElement = document.getElementById("main-heading");
var newHeadText = prompt("神奇魔法变变变，随便输入点什么吧：");
headElement.innerHTML = newHeadText;
</script>
</body>
</html>
代码解读：
首先定义了一个h1标签，id为 main-heading ，其内容为 Kalpa ，该实例的目的是将 Kalpa 更换为其它文本。 在 script 标签中的代码即为实例的代码，先获取选中h1标签，通过 getElementById 来选中h1的唯一id属性值 mainheading ，并将获取的值赋给了变量 headElement ，然后调用 prompt() （BOM中的一个弹框，就是所谓的操纵浏览器），弹出一个对话框进行交互。这个 prompt() 是一个可以写入文本的弹窗，再进行确认和取消。成功的将h1的标签的内容，替换成了输入的内容。
关于DOM需要深刻理解，在XSS中有一种攻击手法就叫DOM型XSS，即修改相关的节点，展示不一样的内容。
八、操作表单
1.表单
FROM DOM树
-
文本框 TEXT
-
下拉框 < select >
-
单选框 radio
-
多选框 checkbox
-
隐藏域 hidden
-
密码框 password
-
......
表单的目的：提交信息
2.获取提交信息
<form action="#" method="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 = 'KALPA'
// 对于单选框、多选框等等固定的值，boy_radio.value只能取到当前的值
// boy_radio.checked; // 查看返回的结果是否为true ，如果为true则被选中
// girl_radio.checked = true; // 赋值
</script>
3.提交表单
MD5加密密码，优化表单
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<!--
表单绑定提交事件
onsubmit= 绑定一个提交检测函数：true、false
将这个结果返回给表单，使用 onsubmit 接收
onsubmit="return k()"
-->
<form action="http://127.0.0.1/" method="post" onsubmit="return k()">
<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 k(){
alert(0);
var uname = document.getElementById('username');
var pwd = document.getElementById('input_password');
var md5pwd = document.getElementById('md5-password');
md5pwd.value = md5(pwd.value);
// 可以校验判断表单内容，true通过提交，false阻止提交
return true;
}
</script>
九、jQuery
jQuery库中存在大量的JavaScript函数。
1、获取jQuery
2、选择器
// 原生JS，选择器少，麻烦不好记
// 标签选择器
document.getElementsByTagName();
//ID选择器
document.getElementById();
// 类选择器
document.getElementsByClassName();
// jQuery中，CSS中的选择器都可以用
$('p').click(); // 标签选择器
$('#id1').click(); // ID选择器
$('.class1').click(); // CLASS选择器
3、事件
鼠标事件、键盘事件、其它事件 ...
-
mousedown() (jQuery) // 按下
-
mousemove() (jQuery) // 移动
4、操作DOM
4.1 节点文本操作
$('#test-ul li[name=py]').text(); // 获取值
$('#test-ul li[name=py]').text('设置值'); // 设置值
$('#test-ul').html(); // 获取值
$('#test-ul').html('<u>TEST</u>'); // 设置值
4.2 CSS的操作
$('#test-ul li[name=py]').css({"background":"skyblue","color":"red"});
4.3 元素的显示和隐藏
本质：display:none;
$('#test-ul li[name=py]').show(); // 显示
$('#test-ul li[name=py]').hide(); // 隐藏
4.1 其它操作
$(window).width(); // 窗口宽度
$(window).height(); // 窗口高度
$('#test-ul li[name=py]').toggle(); // 切换显示隐藏
十、JavaScript事件
事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。
1、实例
<img src=1 onerror=alert(/xss/)>
这句话意思是使用 img 标签加载图片，src 为图片地址，但我们设置的参数为1，明显是个错误的，然后我们使用了onerror 事件，来处理这个错误，弹了个框，这个驱动的函数就是 alert() 。
2、参考事件
onabort 图像加载被中断
onblur 元素失去焦点
onchange 用户改变域的内容
onclick 鼠标点击某个对象
ondblclick 鼠标双击某个对象
onerror 当加载文档或图像时发生某个错误
onfocus 元素获得焦点
onkeydown 某个键盘的键被按下
onkeypress 某个键盘的键被按下或按住
onkeyup 某个键盘的键被松开
onload 某个页面或图像被完成加载
onmousedown 某个鼠标按键被按下
onmousemove 鼠标被移动
onmouseout 鼠标从某元素移开
onmouseover 鼠标被移到某元素之上
onmouseup 某个鼠标按键被松开
onreset 重置按钮被点击
onresize 窗口或框架被调整尺寸
onselect 文本被选定
onsubmit 提交按钮被点击
onunload 用户退出页面
参考链接：https://www.w3school.com.cn/tags/html_ref_eventattributes.asp
十一、补充
1、JSON
通俗来讲，JSON就是一种文本交换的使用形式，统一格式，在数据传输时方便轻巧，不必再为格式不同而苦恼。
-
JSON：JavaScript 对象表示法（JavaScript Object Notation）。
-
JSON 是存储和交换文本信息的语法，类似 XML。
1.2 语法
-
数据在名称/值对中
-
数据由逗号分隔
-
花括号保存对象
-
方括号保存数组
1.3 实例
1.3.1 实例一
JSON数据的书写格式为 名称/值对 ，并且他们都在双引号中，它们中间用冒号（:）分隔，如下：
"myName" : "KALPA"
这句话的意思相当于 myName="KALPA"
1.3.2 实例二
JSON对象是要在花括号中的，其中对象可以包含多个 名称/值对 ，并且它们中间使用逗号（,）分隔，比如：
{"myName":"KALPA", "myAge":"18"}
1.4 语法参考
2、JSONP
Jsonp（JSON with Padding）其实就是json的一种"使用模式"，可用于主流浏览器跨域数据访问的问题。
教程参考：
本文作者：HKalpa
本文链接：https://www.cnblogs.com/HKalpa/p/17013329.html
版权声明：本作品采用本人所有操作均在实验环境下进行，用于其它用途后果自负，作者不承担相应的后果。中国大陆许可协议进行许可。
