JavaScript
1. 什么是JavaScript
1.1 、概述
- JavaScript是一门世界上最流行的脚本语言
- JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为 开发Web页面的脚本语言而出名，但是它也被 用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且 支持面向对象、命令式和声明式（如函数式编 程）风格。
- 一个合格的后端人员，必须精通JavaScript
1.2 历史
- 历史相关链接: https://www.w3school.com.cn/js/pro_js_history.asp.
- ECMAScript它可以理解为是JavaScript的一个标准
- 最新版本已经到es6版本
- 但是大部分浏览器还只停留在支持es5代码上！
- 开发环境–线上环境，版本不一致
2. 快速入门
2.1 引入JavaScript
-
内部标签写js语言,注释也是 //。
<script> alert('hello word'); //弹窗标签 </script>通常script双标签写在的头部 或者 标签的尾部，但是不能写在标签之外
-
外部引入方式
在项目目录中创建一个js文件，把要写的js代码写在其中，文件中不需要写标签
<script src="js/qj.js"></script> <!-- type 属性，不用显示写，默认也是text/javascript--> <script type="text/javascript"></script> -
测试
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 内部引入 script 标签内 写js代码--> <script> alert('hello'); </script> <!-- 引入外部文件 注意是双标签，不能用 自闭和标签--> <!-- script标签必须成对 出现--> <script src="js/qj.js"></script> <!-- type 属性，不用显示写，默认也是text/javascript--> <script type="text/javascript"></script> </head> <body> </body> </html>
2.2 基本语法入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
// 1.定义变量 变量类型 变量名 = 变量值;
// 2.语句以分号结尾
// js中没有 变量类型都是用var定义，变量值是什么类型就是什么类型
var num =1 ; // int
var name = "hello word"; // string
var score = 75;
// 3.多行注释 和java一样
/*
*
* */
// 4. 控制语句
if (score>60 && score<70){
alert("60-70");
}else if (score>70 && score<80){
alert("70 - 80");
}else {
alert("other");
}
//console.log(score) 在浏览器的控制台打印变量 类似java中 sout
</script>
<body>
</body>
</html>
浏览器调试
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q1ROovV7-1633962944604)(C:\Users\ZYH\Desktop\tp\1629624110.png)]
2.3 数据类型
Js和java一样是严格区分大小写的一个语言
数值、文本、图形、音频、视频
变量
var num = 1;
数值
java数值类型为Number，并且不区分小数和整数
123 // 整数
123.1 // 小数
1.2323e3 // 科学计数法
-9 // 负数
NaN // Not a Number 表示不是数字类型
Infinity //表示无限大，当一个数值类型变量的值超越了js变量的极限就会定义为无限大
字符串
‘abc’ “abc”
布尔值
true false
逻辑运算符
&& 两个为真，结果为真
|| 一个为真，结果为真
！ 真即假，假即真
比较运算符
= // 赋值
== // 等于 （类型不一样，值一样，也会判断为true 例如 1=='1'）
=== // 绝对等于（类型一样，值也一样，才会判断为true）
这是一个JS的缺陷，坚持不要使用==运算符进行比较
注意：
-
NaN === NaN，为false 因为NaN表示不是一个数值，与所有的数值都不相等，包括自己。
-
只能通过isNaN(NaN) 来判断这个数是否为NaN
浮点数问题：
console.log((1/3)===(1-2/3)); // false
不相等的原因是 计算机无法存储 无限不循环小数 ，所以1/3 会损失精度
尽量避免使用浮点数进行运算，存在精度问题！，通过abs绝对值函数，在取极限进行判断是否相等
Math.abs(1/3-(1-2/3))<0.00000001
null和undefined
- null 空
- undefined 未定义
数组
java中的数组必须是相同类型的对象，而js中不需要
//保证代码的可读性，尽量使用[]
var arr = [1,2,3,4,5,'hello',null,true];
console.log(arr[0]); // 取值
new Array(1,2,3,4,5,'hello');
取数组下标：如果越界了，就会
undefined //未定义 ，java中报错数组越界
对象
对象是大括号，数组是中括号~~
每个属性之间使用逗号隔开，最后一个不需要添加
//Person person = new Person(1,2,3,4,5);
var person = {
name:"liu",
age:5,
tags:['js','java','web','...']
}
取对象值
person.name
"liu"
person.age
5
2.4 严格检查模式
-
需要IDEA中支持ES6语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
前提：IDEA 需要支持ES6 语法
'use strict'; 严格检查模式，预防JavaScript的随意性导致的一些问题
必须写在JavaScript的第一行！
局部变量建议都使用let定义
-->
<script>
'use strict';
a=1; //全局变量，JavaScript中不要定义全局变量
// 使用严格检查模式后不允许定义全局变量。会报错
let i=1;
// ES6 let 定义局部变量
</script>
</head>
<body>
</body>
</html>
3. 数据类型
3.1 字符串
-
正常的字符串我们使用单引号或者双引号包裹。
-
注意转义字符 \
console.log('a\t\xt1\t\u4e2d\nb'); \' 代表是字符串 \n 换行 \t Tab \u4e2d \u#### Unicode字符 \x41 Asc11字符 -
多行字符串编写
//tab 上面esc下面的按键
var msg1 =
`hello
word
你好呀
你好；`;
console.log(msg1);
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vxbTgRmg-1633962944614)(C:\Users\ZYH\Desktop\tp\1629639031(1)].png)
-
模板字符串
let name = 'Andy'; let age = 12; var msg = `你好呀，${name}`; console.log(msg);``中不在需要用+拼接字符串直接 ${变量名}就可以拼接字符串，是模板字符串
-
字符串长度
str.lengthvar student = "zhangsan"; console.log(student.length); -
字符串的可变性-----不可变
console.log(str[1]=1); VM264:1 1 undefined console.log(str); VM329:1 student undefined -
大小写转换
//注意，这里是方法，不是属性了 console.log(student.toUpperCase()) ; //转换成大写 console.log(student.toLowerCase()) ; //转换成小写 -
获取单个字符下标索引
console.log(str.indexOf('u')); -
截取字符串[)
//原则是根据下标开始也就是从0开始； //遵循前包后不包的原则 console.log(str.substring(1)); //截取下标为1的字符到最后最后一个字符 console.log(str.substring(1,4)); //截取下标为1的字符到下标为4的字符， 包括1不包括4
3.2 数组
-
js中Array数组可以存放任何类型的值，不一定是同一个类型的。
var arr = [1,2,'3',4,5]; arr[0]=1;- 数组长度
arr.length注意：数组的长度是可以改变的，给arr.length赋值，数组大小就会发生变化，如果赋值小于当前长度，数组元素会丢失，如果大于当前数组长度就会存在空置，其类型是undefined
- indexOf()，通过元素获取下标索引
arr.indexOf('3'); 2字符串的’1’和数字1是不同的
- slice()截取Array的一部分，返回一个新数组，类似与substring，[ )原则,原字符串不会改变
arr.slice(5) (3) [7, "1", "2"] arr (8) [1, 2, 4, 5, 6, 7, "1", "2"] arr.slice(1,6) (5) [2, 4, 5, 6, 7]- push() 和 pop() 在数组尾部压入一个字符和弹出一个字符
arr (8) [1, 2, 4, 5, 6, 7, "1", "2"] arr.push('a') 9 arr (9) [1, 2, 4, 5, 6, 7, "1", "2","a"] arr.pop() "a"- unshift()和shift() 在数组头部压入一个字符和弹出一个字符
arr.unshift('a') 7 arr (7) ["a", 1, 2, 4, 5, 6, 7] arr.shift() "a"- 排序 sort()
arr (3) ["C", "B", "A"] arr.sort() (3) ["A", "B", "C"]- concat()在数组后边拼接元素，返回一个新数组，并且原数组不会改变
arr.concat(1,2,3) (6) ["C", "B", "A", 1, 2, 3] arr (3) ["C", "B", "A"]- join()用字符把数组的元素连接到一起返回一个字符串
arr.sort() (3) ["A", "B", "C"] arr.join('-') "A-B-C"- 元素反转 reverse（）
arr (3) ["A", "B", "C"] arr.reverse() (3) ["C", "B", "A"]- 多维数组
arr = [[1,2],['3',3],['a','a']] (3) [Array(2), Array(2), Array(2)] 0: (2) [1, 2] 1: (2) ["3", 3] 2: (2) ["a", "a"] length: 3 __proto__: Array(0) arr[1][1] 38112598
3.3 对象
若干个键值对
var 对象名 = {
属性名:属性值,
属性名:属性值,
属性名:属性值
}
js中的对象，{…}表示一个对象，键值对描述属性 xxxx:xxxx, 多个属性之间使用逗号隔开，最后一个不用加逗号！
JavaScript中队友的键都是字符串，值是任意对象。
-
对象赋值
person.name="zzzz" "zzzz" person {name: "zzzz", age: 3, email: "123345@163.com", score: 0} -
使用一个不存在的对象属性，不会报错！ undefined
person.hah undefined -
动态的删减属性，通过delete删除对象的属性
delete person.age true person {name: "zzzz", email: "123345@163.com", score: 0} -
动态的添加属性，直接给新属性赋值就可以
person.haha='a' "a" person {name: "zzzz", email: "123345@163.com", score: 0, haha: "a"} -
判断这个属性值是否在对象中
'haha' in person true 'age' in person false -
判断一个属性是否是这个对象自身拥有的 hasOwnProperty
person.hasOwnProperty('toString') false
3.4 流程控制
-
条件语句 if
var num = 3; if (num>5){ console.log("大于5"); }else if (num<3){ console.log("小于3"); }else { console.log(num); } -
while() 循环语句
while (num<100){ console.log(num); num++; } do { num++; }while (num<100){ num++; console.log(num); } -
for 循环语句
for (let i=0 ; i<100;i++){ console.log(i); } -
forEach 循环
var age = [12,3,5,6,78,435,345,7,87,4,4,7,82,56]; age.forEach(function (value) { console.log(value); }); -
for in 循环
// for(var index in object){} var age = [12,3,5,6,78,435,345,7,87,4,4,7,82,56]; for (var num in age){ if (age.hasOwnProperty(num)){ console.log(age[num]); } } index num 为数组索引
3.5 Map和Set
//ES6 新特性 map和set集合
var map = new Map([["li",11],["xin",22],["dong",33]]);
var name = map.get("li"); //取值
console.log(name);
map.set("admin",45); //新增
map.set("li",776); //修改
map.delete("li"); //删除
//Set 无须不重复的集合
var set = new Set([3,2,2,2,2,2]); //自动去重
set.add(6); //添加一个值
set.delete(6); // 删除一个值
console.log(set.has(3)); // 判断这个值是否在集合中
3.6 iterator
es6 新特性
遍历数组
//通过 for in 下标 或者 for of
var arr = [3,4,5]
for(var x of arr){
console.log(x);
}
遍历map
var map = new Map([["li",11],["xin",22],["dong",33]]);
for(var x of map){
console.log(x);
}
遍历set
var set = new Set([3,2,2,2,2,2]);
for(var x of set){
console.log(x);
}
4. 函数
4.1 函数定义
方式一-定义函数
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
一旦执行到return 代表函数结束，返回结果！
如果函数中没有return 执行完会返回undefined
方式二-定义函数
var abs = function (x) {
if(x>=0){
return x;
}else{
return -x;
}
}
function(…) {} 是匿名函数，可以把结果赋值给 abs，然后通过abs调用函数。
调用函数
abs(10) //10
abs(-10) //-10
参数问题：JavaScript可以传递任意参数，也可以不传递参数·
不传递参数的时候 会返回 NaN,但是我们可以定义异常来处理这种情况以及传递的参数不是一个number的情况
var abs = function (x) {
if (typeof x!== 'number'){
throw 'Not a Number';
}
if(x>=0){
return x;
}else{
return -x;
}
}
arguments
当传递多个参数时，可以用 arguments 来获取参数列表，arguments是一个JS免费赠送的关键字；
代表，传递进来的所有的参数，是一个数组！
var abs = function (x) {
console.log("x==>" + x);
for (let i =0 ; i<arguments.length;i++){
console.log(arguments[i]);
}
if(x>=0){
return x;
}else{
return -x;
}
}
问题：arguments包含所有的参数，我们有时候想使用多余的参数进行附加操作，需要排除已有的参数~
rest
以前
if(arguments.length > 2){
//....
}
ES6 引入的新特性，获取除了已经定义的参数之外的所有参数~
var abs = function (x,b,...rest) {
console.log("x==>" + x);
console.log("b==>" + b);
console.log(rest);
}
abs(1,2,2,2,2,2,2,2)
x==>1
b==>2
(6) [2, 2, 2, 2, 2, 2]0: 21: 22: 23: 24: 25: 2length: 6__proto__: Array(0)
undefined
4.2 变量的作用域
在javascript中，var定义变量实际是有作用域的。
假设在函数体中声明，则在函数体外不可以使用~
function t1() {
var x= 1;
x = x+1;
}
//在函数体内声明的变量，函数体外不可以用
// x= x+2; //ReferenceError: x is not defined
如果两个函数使用了相同的变量名，只要在函数内部，就不冲突
function t2() {
var x =1;
x= x+1;
console.log(x);
}
function t3() {
var x = 2;
x =x+1;
console.log(x);
}
t2();t3();
// 如果两个函数使用了相同的变量名，只要在函数内部则互不冲突。
内部函数可以访问外部函数的成员，反之则不行
function t4() {
var x=1;
function t41() {
var y =x+1; //内部函数可以调用外部变量
console.log(y);
}
t41();
// var z =y+1; //外部函数不能调用内部函数变量
// console.log(z);
}
t4();
内部函数变量和外部函数的变量，重名
//当内部函数变量名字与外部函数变量名字重名的时候
function t5() {
var x = 1;
function t51() {
var x = 'A';
console.log("inner"+x); //innerA
}
t51();
console.log("outer"+x); //outer1
}
t5();
//假设在JavaScript中函数查找从自身函数开始，由内向外寻找，假设外部存在与内部函数变量命相同的变量，内部函数则屏蔽外部相同名称的变量。
提升变量的作用域
function t6() {
//相当于系统自动 写入了 var y
var x = 'x' + y; //xundefined
console.log(x);
var y ='y';
}
t6();
//结果： x is not defined
//说明： js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值；
function t62() {
var y;
var x = 'x' + y; //xundefined
console.log(x);
var y ='y';
}
// 这个是JavaScript建立之初就存在的特性，养成规范；所有的变量定义都放在函数的头部，不要乱发，便于代码维护；
function t63(){
var x = 1,
y = x + 1,
z,i,a; // undefined
//之后随意用
}
全局变量
//全局对象window，写在<script>标签的变量，默认所有的全局变量都会自动绑定在window对象下
var x = 'xxx';
alert(x);
alert(window.x);
//alert 为全局变量也是绑定在window对象下的
// 相当与var alert = function(){}
var alert_old = window.alert;
alert_old(x); //代替alert
window.alert =function () {
}
alert(123); //alert 会失效
window.alert = alert_old;
window.alert(456); //alert恢复
ES6 新特性
- let 定义局部变量
function t7() {
for (var i = 0; i < 100; i++) {
console.log(i);
}
console.log(i+10); //在for 外边也可以访问
}
t7();
function t71() {
for (let i = 0; i <10 ; i++) {
console.log("i="+i);
}
console.log(i); // 用let 定义局部变量则 外边访问不到。
}
t71();
- const 定义常量，在ES6之前 都是约定大写变量为常量，这样的约束并不合理，很容易造成修改,所以改es5的代码不能随意更改大写名称的变量
function t8() {
const r = "111"; //常量只能在定义处修改值，其他处不能修改;
}
4.3 方法
定义方法
方法就是把函数放在对象里，对象只有两个东西：属性和方法。
var zdx = {
name : "zhangyuhang",
bitrh: 2000,
age: function () {
var now = new Date().getFullYear();
return now- this.bitrh;
}
}
//属性调用
person.name;
//方法调用，方法一定要带（）
person.age();
apply方法
apply方法是可以控制this指向的，该方法有两个参数，第一个是getArg要使用的是那个对象，第二个是数组
function getAge(){
var now = new Date().getFullYear();
return now - this.brith;
}
getAge.apply(zdx,[]); //this指向了zdx，参数为空
5. 内部对象
内部对象
typeof 1
"number"
typeof 1.1
"number"
typeof NaN //NaN 代表 Not a Number 但是也是number类型
"number"
typeof '1'
"string"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"
5.1 、Date
var now = new Date(); // Wed Sep 08 2021 21:43:57 GMT+0800 (中国标准时间)
now.getFullYear(); // 年
now.getMonth(); //月 0-11 代表月
now.getDate(); //日
now.getDay(); //星期几
now.getHours(); //小时
now.getMinutes(); //分钟
now.getSeconds(); //秒
//时间戳为1970.1.1 0：00：00 到现在的毫秒数
now.getTime(); //获取时间戳 1631108637804
//时间戳转换为Date
console.log(new Date(1631108637804));
//Wed Sep 08 2021 21:43:57 GMT+0800 (中国标准时间)
5.2 Json 对象
早期，所有数据传输习惯使用XML文件!
JSONlavaScript Object Notation, JS对象简谱)是- -种轻量级的数据交换格式。
简洁和清晰的层次结构使得JSON成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
在JavaScript -切皆为对象、任何js支持的类型都可以用JSON来表示; number, string…
格式:
对象都用{}
数组都用[]
所有的键值对都是用key:value
json 字符串 和js对象互相转换
var zdx = {
name : "zdx",
age : 4
}
//对象转换为json
var zdxJson = JSON.stringify(zdx);
//JSON转换成json对象
var use = JSON.parse('{"name":"zd","age":"2"}');
很多人搞不清楚 JSON 和js对象的区别
var obj = {name:'zzz',age:'3'};
var json = '{"a":"hello","b":"b"}';
6.面向对象编程
6.1、什么是面向对象
JavaScript、Java、C#…面向对象；
JavaScript有些区别！
- 类：模板
- 对象：具体的实例
类是实体的抽象
在JavaScript 这个需要大家转换一下思考方式
//模板
var Student = {
name : "student",
age : 3,
run : function () {
console.log(this.name + "run....");
}
}
var xiaoming = {
name: "xiaming",
}
//把小明的原型指向Student
xiaoming.__proto__=Student;
var Bird = {
fly:function () {
console.log(this.name + "fly....");
}
}
//把小明的原型指向Bird
xiaoming.__proto__=Bird;
// 小明从学生变成了鸟
class继承
class关键字，是在ES6引入的
class Student{
constructor(name) {
this.name = name;
}
hello(){
alert('hello');
}
}
var xiaoming = new Student('xiaoming');
var xiaohong = new Student('xiaohong');
继承
class xiaoStudent extends Student{
constructor(name,age) {
super(name);
this.age = age;
}
mygrade(){
alert('我是一个小学生');
}
}
var xiaoStudent1 = new xiaoStudent('zhang',1);
原型链
在Javascript中每一个函数都有一个prototype属性指向函数的原型对象，Object指向Object
__ proto __指向原型对象
7. 操作BOM对象（重点）
B/S 架构：浏览器服务器
B:browser,S:server
BOM: browser Object Model 浏览器对象模型
浏览器内核：
- IE 6-11
- Chrome
- Safari
- Firefox
- Opera
三方
- QQ浏览器
- 360浏览器
window 对象
window代表浏览器窗口
window.alert(1)
undefined
window.innerHeight
355
window.innerWidth
767
window.outerHeight
831
window.outerWidth
782
//用浏览器窗口对象获取 窗口的内外高度和宽度
Navigator 封装了浏览器信息
Navigator 封装了浏览器信息
navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.71 Safari/537.36'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.71 Safari/537.36'
navigator.platform
'Win32'
大多时候我们不会使用navigator对象因为会被修改。
不建议使用这些属性来判断和编写代码。
screen 代表屏幕对象
代表屏幕尺寸
screen.width
1536 px
screen.height
864 px
location (重要) 定位
location 代表当前页面的URL信息
host: "www.baidu.com" 主机
href: "https://www.baidu.com/" 链接
protocol: "https:" 协议
reload: ? reload() // 刷新网页
//设置新的地址，这样访问百度就会跳到新的地址。
location.assign('https://www.csdn.net/')
document (重要) 文档对象
document 代表当前页面 ，HTML DOM 文档树
document.title
'百度一下，你就知道'
document.title='aaaa'
'aaaa'
获取具体的文档树节点
<dl id="app">
<dt>Java</dt>
<dt>JavaSE</dt>
<dt>JavaEE</dt>
</dl>
<script>
var dl = document.getElementById('app');
</script>
获取网页cookie
document.cookie
'BIDUPSID=39ED3B037D56FE8061C51F3A4FBFBEFD; PSTM=1628389088; BAIDUID=39ED3B037D56FE80C3DE2CB255D29F5D:FG=1; BD_UPN=12314753; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598; H_PS_PSSID=34649_34439_34067_31660_34711_34525_34584_34505_34707_34578_26350_34761_34424_34691_34673; BAIDUID_BFESS=39ED3B037D56FE80C3DE2CB255D29F5D:FG=1; delPer=0; BD_CK_SAM=1; PSINO=1; COOKIE_SESSION=7_3_9_9_4_7_0_0_9_7_0_0_2663_8_0_0_1633698288_1633695615_1633782197%7C9%230_3_1633695593%7C1; BD_HOME=1; BA_HECTOR=2ha5a521a1a0a00lq91gm35id0r'
劫持cookie 的原理
www.xxx.com
<scrpit src = "aa.js"></scrpit>
<!--当你访问这个网站时会植入一个叫aa的js代码，如果这个js获取你的cookie然后通过Ajax请求到他的服务器这样隐私就泄露了-->
尽量不要把cookie暴露出来
在服务器端设置 cookie：httponly 来保护cookie
history (不建议使用)
history 代表浏览器的历史纪录
history.back() //后退
history.forward() //前进
8.操作DOM对象
核心
浏览器网页就是一个Dom树形结构
- 更新：更新Dom节点
- 遍历dom节点：得到Dom节点
- 删除：删除一个Dom节点
- 添加：添加一个新的dom节点
要操作一个Dom节点，就必须要先获得这个Dom节点
获得dom节点
//通过标签选择器 来获取页面节点
var h1 = document.getElementsByTagName('h1');
//通过id选择器来获取页面节点
var p1 = document.getElementById('p1');
//通过class选择器来获取页面节点
var p2 = document.getElementsByClassName('p2');
var father =document.getElementById('father');
//获取父节点下的所有子节点
var childrens = father.children;
//获取父节点下的第一个子节点
father.firstElementChild
//获取父节点的最后一个子节点
father.lastElementChild
//获取节点的相邻节点
father.nextElementSibling
更新节点
<body>
<div id="id1"></div>
</body>
<script>
var id1 = document.getElementById('id1');
</script>
操纵文本
id1.innerHTML='<h1>aaa</h1>'’id1.innerText='aaaaaaaaaaaa'
操作css
id1.style.fontSize='89px'id1.style.color='red'id1.style.padding='22px'id1.style.padding='99px'
删除节点
删除节点必须通过父节点删除子节点，因为没有节点可以删除自己。
<body>
<div id="father">
<h1>h1</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
</body>
<script>
//通过class选择器来获取页面节点
var child = document.getElementById('p1');
//获取子节点的父节点
var father =child.parentElement;
//删除父节点
father.removeChild(child);
//删除节点是一个动态的过程，每删除一个节点数组下标就会向前变化一个。
father.removeChild(father.children[0])
father.removeChild(father.children[1])
father.removeChild(father.children[2])
</script>
插入节点
我们获取某个Dom节点，假设这个节点时空的，我们通过innerHTML就可以增加一个元素了，但这这个Dom节点已经存在元素了，我们就不能通过innerHTML来增加节点了，因为会覆盖原有的节点。
追加节点
<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')
list = document.getElementById('list');
//把js追加到list下
list.appendChild(js); //追加：相当于剪切
</script>
创建一个新的节点
<script>
//创建一个新的节点
var newP = document.createElement('p');
newP.id="newP";
newP.innerText='helloNEWP';
list.appendChild(newP); // 追加节点
//创建一个标签节点
var myScript = document.createElement('style');
myScript.setAttribute('type','text/javascript'); //写入属性
list.appendChild(myScript);
//添加css样式
// var body = document.getElementsByTagName('body')[0];
// body.setAttribute('style','background-color: greenyellow');
//添加css样式
var myStyle = document.createElement('style');
myStyle.setAttribute('type','text/css');
myStyle.innerHTML='body{background-color: yellow}';
var haad =document.getElementsByTagName('head')[0];
haad.appendChild(myStyle);
</script>
在某一个节点前插入一个节点
<script>
var js = document.getElementById('js')
list = document.getElementById('list')
ee = document.getElementById('ee');
//在ee前面插入一个节点
list.insertBefore(js,ee);
</script>
9. 操作表单（验证）
<form action="" method="get">
<p>
<span>用户名：</span><input type="text" id="username">
</p>
<p>
<span>性别：</span>
<input type="radio" name="sex" value="man" id="man">男
<input type="radio" name="sex" value="women" id="women">女
</p>
</form>
<script>
var user_text = document.getElementById('username');
var man = document.getElementById('man');
var women = document.getElementById('women');
man.checked=true; //被选中则为true
</script>
user_text.value
''
user_text.value
'12354'
user_text.value='zhasngd' //修改输入框的值
'zhasngd'
man.checked=false
false
women.checked=true
true
提交表单 MD5加密密码 ,表单级别提交onsubmit
<script src="http://cdn.bootcss.com/blueimp-md5/1.1.0/js/md5.min.js"></script>
<!--
onsubmit = 绑定一个提交检测的函数， true or false
将这个结果返回给表单，使用onsubmit 接收
onsubmit = "return aaa()"
-->
<form action="https://www.baidu.com/" method="post" onsubmit="return aaa()">
<p>
<span>用户名：</span><input type="text" name="username" id="username"/>
</p>
<p>
<span>密 码：</span><input type="password" id="password"/>
</p>
<!-- 通过隐藏域进行提交MD5加密的密码-->
<input type="hidden" name="password" id="md5_password">
<button type="submit" >提交</button>
</form>
<script type="text/javascript">
function aaa() {
var username = document.getElementById('username')
passowrd = document.getElementById('password')
md5pass = document.getElementById('md5_password')
;
//MD5对密码进行加密
md5pass.value=md5(passowrd.value);
//通过onsubmit提交 false不可以提交 返回true可以提交
return false;
}
</script>
10、jQuery
jQuery 是一个JavaScript库 里边有大量的JavaScript函数
公式 😒(‘选择器’).actio();
获取jQuery
-
下载到本地导入到项目中
-
直接引入cdn
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
初体验
<a href="" id="test_jquery">点我</a>
<script type="text/javascript">
//原生获取节点
document.getElementById('test_jquery');
//juqery 获取节点 公式 :$('选择器').actio(); 这里的选择器就是css选择器
$('#test_jquery').click(function () {
window.alert("a被点击了")
});
</script>
选择器
<script>
//原生js
document.getElementById(); // id选择器
document.getElementsByTagName(); //标签选择器
document.getElementsByClassName(); //类选择器
//jquery
$('#id1').click(); //id选择器
$('p').click(); //标签选择器
$('.class').click(); //类选择器
</script>
事件
<style>
#mouseMove {
height: 500px;
width: 400px;
border: 1px solid red;
}
</style>
<body>
mouse: <span id="mouse"></span>
<div id="mouseMove">鼠标在这里移动试试</div>
<script type="text/javascript">
//当页面加载完后执行事件为 $(document).read(function () {}) 简写成 $()
$(
$('#mouseMove').mousemove(function (e) {
$('#mouse').text('x:'+e.pageX+'y:'+e.pageY);
})
);
</script>
</body>
操作dom
<body>
<ul id="ul">
<li name="javascript">JavaScript</li>
<li name="java">java</li>
</ul>
<script type="text/javascript">
//操作文本
$('#ul li[name=java]').text(); //获取值
$('#ul li[name=java]').text('12312312'); //修改值
//添加html
$('#ul li[name=java]').html(); //获取值
// $('#ul li[name=java]').html('<li>hhh</li>'); //添加元素
//操作css
$('#ul li[name=java]').css({'color':'red'}); //括号是键值对可以写多个
//显示和隐藏
$('#ul li[name=java]').hide(); //隐藏
$('#ul li[name=java]').show(); //显示
</script>