一、基础入门
1、引入JavaScript
1.1 内部标签
<script>
// ...
</script>
1.2 外部引入
x.js
// ...
x.html
<script src="x.js"></script>
1.3 测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<!-- script标签内，写JavaScript代码 -->
<!-- <script>
alert('Hello, world');
</script> -->
<!-- 外部引入 -->
<!-- <script src="x.js"></script> -->
<!-- 不定义type，默认是javascript -->
<script type="text/javascript">
alert('Hello, world');
</script>
</head>
<body>
<!-- 这里也可以放script标签 -->
</body>
</html>
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、严格检查模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>XXX</title>
<!--
前提：TEDA需要设置支持ES6语法
'use strict'; // 严格检查模式，预防JavaScript的随意性导致产生的一些问题
必须要写在JavaScript的第一行！
局部变量建议使用 let 定义
-->
<script>
'use strict';
// 全局变量
x = 1;
// ES6 let
let i = 1;
</script>
</head>
<body>
</body>
</html>
二、数据类型（详细）
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:"[email protected]"
}
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:"[email protected]"
}
'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,...rest){
console.log("a=>"+a);
console.log("b=>"+b);
console.log(rest);
}
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() // 后退
七、操作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{background-color:green}'; // 设置标签内容
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>
八、操作表单
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Kalpa</title>
<!--CDN引入-->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!--本地引入-->
<!--<script src="本地jQuery文件路径"></script>-->
</head>
<body>
<!--
公式 ： $(selector).action()
$(选择器).(动作)
-->
<a href="#" id="test-jquery">Click Me</a>
<script>
// 选择器就是CSS的选择器
$('#test-jquery').click(function () {
alert('Hello,jQuery!');
})
</script>
</body>
</html>
2、选择器
// 原生JS，选择器少，麻烦不好记
// 标签选择器
document.getElementsByTagName();
//ID选择器
document.getElementById();
// 类选择器
document.getElementsByClassName();
// jQuery中，CSS中的选择器都可以用
$('p').click(); // 标签选择器
$('#id1').click(); // ID选择器
$('.class1').click(); // CLASS选择器
3、事件
鼠标事件、键盘事件、其它事件 ...
-
mousedown() (jQuery) // 按下
-
mousemove() (jQuery) // 移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Kalpa</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
#divMove{
width: 520px;
height: 521px;
border: 1px solid skyblue;
}
</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>
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(); // 窗口宽度标签：function,console,log,JavaScript,基础,name,var,document,入门 From： https://www.cnblogs.com/HKalpa/p/17013329.html
$(window).height(); // 窗口高度
$('#test-ul li[name=py]').toggle(); // 切换显示隐藏