JavaScript
JavaScript
一、前端核心分析
1.1、概述
Soc原则：关注点分离原则
Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。
HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据
网络通信 ： axios
页面跳转 ： vue-router
状态管理：vuex，解决复杂组件通信，数据共享
2.1前端三要素：
HTML（结构）：超文本标记语言，决定网页的结构和内容
CSS（表现）：层叠样式表，设定网页的表现样式
JavaScript（行为）：是一种弱类型脚本语言。其源代码不需要经过编译，而是由浏览器解释运行，用于控制网页的行为
2.2结构层（HTML）
2.3表现层（CSS）
CSS层叠样式是一门标记语言，并不是编程语言，因此不可以自定义变量，不可以引用等等，换句话说就是不具备任何语法的支持
主要缺陷：语法不够强大，无法嵌套书写，导致模块化开发中需要很多重复的选择器；没有变量和合理的样式服用机制，使得逻辑上相关的属性值必须以字面量的形式重复书虫，导致难以维护；为了解决上述问题，前端开发人员会使用一种称之为【CSS预处理器】的工具，提供CSS确实的样式层服用机制，较少冗余代码，提高样式代码的可维护性。
什么是CSS预处理器？
通俗理解：用一种专门的编程语言，进行web页面样式设计，在通过编译器转化为正常的CSS文件，以供项目使用。
常用CSS预处理器：
- SASS:基于Ruby，通过服务器处理，功能强大。解析效率较高。需要学习Ruby语言，上手难度高于LESS。
- LESS：基于Node JS,通过客户端处理，使用简单。功能比SASS简单，解析效率也低于SASS，但在实际开发中足够了，所以我们和后台人员如果需要的话，建议使用LESS。
2.4行为层（JavaScript）
JavaScript一门弱类型脚本语言，其源代码在发往客户端运行之前不需要经过编译，而是将文本格式的字符代码发送给浏览器，由浏览器解释运行。
Native 原生JS开发
原生JS开发，也就是让我们按照【ECMAScript】标准的开发方式，简称ES，特点是所有浏览器都支持。
ES5（全浏览器支持）
ES6（常用，当前主流版本：webpack打包成为ES5支持） 因为前后端使用的版本可能不一样，所以需要webpack打包，使得两个版本相互支持。
JavaScript框架
- JQuery：大家熟知的JavaScript库，优点就是简化了DOM操作，缺点就是DOM操作太频繁，影响前端性能；在前端眼里使用它仅仅是为了兼容IE6，7，8；
- Angular：Google收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用了TypeScript语法开发；对后台程序员友好，对前端程序员不太友好；
- React：Facebook 出品，一款高性能的JS前端框架；特点是提出了新概念 【虚拟DOM】用于减少真实 DOM 操作，在内存中模拟 DOM操作，有效的提升了前端渲染效率；缺点是使用复杂，因为需要额外学习一门【JSX】语言；
- Vue：一款渐进式 JavaScript 框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了 Angular（模块化）和React(虚拟 DOM) 的优点；
- Axios：前端通信框架；因为 Vue 的边界很明确，就是为了处理 DOM，所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互；当然也可以直接选择使用jQuery 提供的AJAX 通信功能；
二、前端发展史
2.1、UI框架
- Ant-Design：阿里巴巴出品，基于React的UI框架
- ElementUI、iview、ice：饿了么出品，基于Vue的UI框架
- BootStrap：Teitter推出的一个用于前端开发框架
- AmazeUI：又叫“妹子UI”，一款HTML5跨屏前端框架
2.2、JavaScript构建工具
- Babel：JS编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript
- WebPack：前端资源加载/打包工具，主要作用就是打包、压缩、合并及按序加载
注：以上知识点已将WebApp开发所需技能全部梳理完毕
2.3、三端同一
混合开发（Hybrid App）
主要目的是实现一套代码三端统一（PC、Android：.apk、iOS：.ipa）并能够调用到设备底层硬件（如：传感器、GPS、摄像头等），打包方式主要有以下两种：
云打包：HBuild -> HBuildX，DCloud 出品；API Cloud
本地打包： Cordova（前身是 PhoneGap）
微信小程序
详见微信官网，这里就是介绍一个方便微信小程序UI开发的框架：WeUI
2.4、后端技术
前端人员为了方便开发也需要掌握一定的后端技术但我们Java后台人员知道后台知识体系极其庞大复杂，所以为了方便前端人员开发后台应用，就出现了Node JS这样的技术。Node JS的作者已经声称放弃Node JS(说是架构做的不好再加上笨重的node modules，可能让作者不爽了吧)开始开发全新架构的De no
既然是后台技术，那肯定也需要框架和项目管理工具， Node JS框架及项目管理工具如下：
- Express：Node JS框架
- Koa：Express简化版
- NPM：项目综合管理工具，类似于Maven
- YARN：NPM的替代方案，类似于Maven和Gradle的关系
2.5、主流前端框架
React
特性：
-
声明式设计：React采用声明范式，可以轻松描述应用。
-
高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。
-
灵活：React可以与已知的库或框架很好地配合。
优点：
-
速度快：在UI渲染过程中，React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。
-
跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。
-
模块化：为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。
-
单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。
-
同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。
-
兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。
缺点：
React本身只是一个V而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。
Angular
是一款优秀的前端JS框架，已经被用于Google的多款产品当中。
特性：
- 良好的应用程序结构
- 双向数据绑定
- 指令
- HTML模板
- 可嵌入、注入和测试
优点：
- 模板功能强大丰富，自带了极其丰富的angular指令。
- 是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能；
- 自定义指令，自定义指令后可以在项目中多次使用。
- ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。
- angularjs是互联网巨人谷歌开发，这也意味着他有一个坚实的基础和社区支持。
缺点：
- angular 入门很容易 但深入后概念很多, 学习中较难理解.
- 文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.
- 对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.
- 指令的应用的最佳实践教程少, angular其实很灵活, 如果不看一些作者的使用原则,很容易写出 四不像的代码, 例如js中还是像jQuery的思想有很多dom操作.
- DI 依赖注入 如果代码压缩需要显示声明
是尤雨溪编写的一个构建数据驱动的Web界面的库，准确来说不是一个框架，它聚焦在V（view）视图层。
特性：
- 轻量级的框架
- 双向数据绑定
- 指令
- 插件化
优点：
- 简单：官方文档很清晰，比 Angular 简单易学。
- 快速：异步批处理方式更新 DOM。
- 组合：用解耦的、可复用的组件组合你的应用程序。
- 紧凑：~18kb min+gzip，且无依赖。
- 强大：表达式 无需声明依赖的可推导属性 (computed properties)。
- 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。
三、JavaScript（基础教程）
1、什么是JavaScript
是一种弱类型脚本语言。其源代码不需要经过编译，而是由浏览器解释运行，用于控制网页的行为
2、快速入门
2.1引入JavaScript
1、内部标签
2.外部引入
我们在js包下写了一个qq.js，所以在html可以直接外部引
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- script标签内，写JavaScript代码-->
<!-- <script>-->
<!-- alert('hello world'); //这里似乎不区分单引号和双引号-->
<!-- </script>-->
<!-- 外部引入-->
<!-- 注意script标签必须成对出现，不能单闭合-->
<script src="js/qq.js"></script>
<!-- 不用显示定义type，也默认就是-->
<script type="text/javascript"></script>
</body>
</html>
2.2基本语法入门
<script>
//1. 定义变量 变量类型 变量名 = 变量值
let num = 1;
let name="loveyourself";
alert(name);
//2.流程控制 和java一样
//console.log(name) 在浏览器的控制台打印变量！ 相当于 System.out.printf();
</script>
2.3数据类型
数值，文本，图形，音频，视频
变量
let a=1;
let name="loveyourself";
number
js不区分小数和整数，Number
123//整数123
123.1//浮点数123.1
1.123e3//科学计数法
-99//负数
NaN //not a number
Infinity // 表示无限大
字符串
‘abc’ “abc”
布尔值
true，false
逻辑运算
&& 两个都为真，结果为真
|| 一个为真，结果为真
! 真即假，假即真
比较运算符
= 赋值
== 等于（类型不一样，值一样，也会判断为true）
=== 绝对等于（类型一样，值一样，结果为true）
//这是一个JS的缺陷，坚持不要使用 == 比较
浮点数问题
console.log((1/3) === (1-2/3))//false
尽量避免使用浮点数进行运算，存在精度问题！
Math.abs(1/3-(1-2/3))<0.00000001//true
null 和 undefined
- null 为空
- undefined 未定义
数组
Java的数组必须是相同类型的对象~，JS中不需要这样
//保证代码的可读性，尽量使用[]
let arr = [1,2,3,4,5,'hello',null,true];
arr[0] -->0
arr[10] -->undefined
//取数字下标：如果越界了，就会报undefined
对象
对象是大括号[ ]，数组是中括号{ }
每个属性之间使用逗号隔开，最后一个属性不需要逗号
let person = {
name:'loveyouself',
age:3,
tags:['js','java','web','...']
}
//取对象值console.log(**person**)
//取对象属性值 console.log(**person.name**)
2.4严格检查模式
'use strict’写在JavaScript的第一行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 前提：IDEA 需要设置支持ES6语法-->
<!-- 'use strict';严格检查模式，预防JavaScript的随意性导致产生的一些问题-->
<!-- 必须写在JavaScript的第一行！-->
<!-- 局部变量建议都是用let去定义-->
</head>
<body>
</body>
<script>
'use strict';//定义局部变量用let;ES6才有let
let i=1；
</script>
</html>
3.数据类型
3.1、字符串（’ ’ or " "）
1、正常字符串我们使用 单引号**‘’**，或者双引号""包裹
2、注意转义字符 \
3、多行字符串编写
//tab 上面 esc下面那个按键 `
let msg =`hello
world
你好ya
你好 `
4、模板字符串
<script>
'use strict'; //tab 上面 esc下面那个按键 `
let name="loveyourself";
let msg=`你好呀,${name}`;
console.log(msg); //你好呀,loveyourself
</script>
5、字符串长度
console.log(msg.length)
6、字符串不可变
下面的str的内的变量可以被重新赋值，但是取出来的时候还是原来的值，表示字符串是不可变的
let str='aaa'
str[0] //'a'
str[0]=10 //虽然赋值了10 但是没有变化
str //'aaa'
7、大小写转换
//注意这里是方法，不是属性了，调用的时候要注意
str.toUpperCase();//转换为大写 'AAA'
str.toLowerCase();//转换为小写 'aaa'
8、查找子字符串的最先出现位置的索引str.indexOf( )
let str='abcde'
str.indexOf('c') //2
str.indexOf('1') //未找到 -1
9截取字符串str.substring( )
let str='abcde' //含头不含尾
str.substring(1,3) //'bc'
3.2数组（[ ]包裹）
Array可以包含任意的数据类型
let arr=[1,2,3,4,5,6];//通过下标取值和赋值
arr[0] //取值 1
arr[1]=1; //赋值 [1, 10, 3, 4, 5, 6]
数组长度 arr.length
给arr.length赋值，数组大小就会发生变化，如果赋值小（注意是缩小数组的长度），元素就会丢失；如果赋值过大，则会自动讲后面为赋值的位置设置为空（undefined）
arr.length=10 //[1, 10, 3, 4, 5, 6, 空属性 × 4]
arr.length=3 //[1, 10, 3]
arr[3] //undefined
arr.indexOf() 查找 返回索引
let arr=[1,2,3,4,5,6];
arr.indexOf(10) //1 查找10首次出现的位置
slice() 截取Array的一部分，返回一个新数组，类似于String中的substring
push（）压入到栈顶，pop（）弹出栈顶的一个元素
unshift（）：压入到底部， shift（）：弹出底部的一个元素
排序 sort（）升序
元素反转arr.reverse( ) 顺序颠倒
concat() 数组拼接 注意：并没有修改数组，只是会返回一个新的数组
连接符join( )
let arr=[1,9,2,0]
arr.join(',')//'9,2,1,0'打印拼接数组，使用特定的字符串连接
3.3对象(用｛｝包裹)
let 对象名 = { 属性名: 属性值， 属性名: 属性值， 属性名: 属性值}//定义了一个person对象，他有四个属性！
let person={
name: "loevyourself",
age:18,
email:"qq@qq.com",
score:0
}
1、对象赋值
person.age=20//{name: 'loevyourself', age: 20, email: 'qq@qq.com', score: 0}
2、使用一个不存在的对象属性！undefined
3、动态的删减属性，通过delete删除对象的属性
delete person.score//{name: 'loevyourself', age: 20, email: 'qq@qq.com'}
4、属性动态的添加，直接给新的属性赋值即可！
person.school='hbmu'//{name: 'loevyourself', age: 20, email: 'qq@qq.com', school: 'hbmu'}
5、判断属性值是否在这个对象中！'xxx 'in Object
'age' in person //true
6、判断一个属性是否是这个对象自身拥有的 hasOwnProperty()
person.hasOwnProperty('age')//true
3.4流程控制
if while 与Java中的用法相似
foreach循环
<script>
var age = [12, 3, 12];
//函数
age.forEach(function (value) {
console.log(value)
})
</script>
for( var a in Object)
//for循环只能对于数组进行遍历，却无法对对象进行遍历属性或者方法的功能
let age = [1, 2, 3, 4];
for (let num in age) {
if (age.hasOwnProperty(num)) {
console.log("存在");
console.log(age[num]);} }
//所以由for in 循环来遍历对象
var obj = {
name: 'loveyourself',
age: 18,
sing: function () {
console.log('红果果红果果红红红');
}
}//for in下标
for (var k in obj) {
console.log(obj[k]); //这种obj[k]是遍历函数的方法和属性的值
console.log(k); //k是对应的属性名，和方法名
}
3.5Map和Set
Map是一组键值对的结构，用于解决以往不能用对象作为键的问题。
let map = new Map([["tom", 100], ["jack", 90], ["haha", 80]]);
let name = map.get('tom');//通过key获得value
console.log(name);
map.set('admin', 123456);//新增或修改
map.delete("tom");//删除
console.log(map.has('admin')) //true检查元素是否存在
map.clear();//清除元素
Set：无序不重复的集合
let set=new Set([1,1,2,3])//Set(3) {1, 2, 3}
3.6、iterator
遍历数组
//通过for of（按值遍历） /for in下标
let arr = [3, 4, 5];
for (var x of arr) {
console.log(x)
}
遍历set
let set = new Set([5, 6, 7]);
for (let x of set) {
console.log(x)
}
4、函数
4.1、定义函数
方式一 function 函数名(参数)
function abc(x) {
if (x > 0) {
return x;
}
else {
return -x;
}
}//一旦执行到return代表函数结束，返回结果！如果没有执行return，函数执行完也会返回结果，结果就是undefined
方式二 var 函数名= function (参数)
var abc = function (x) {
if (x > 0) {
return x;
} else {
return -x;
}
}//function(x){…}这是一个匿名函数。但是可以吧结果赋值给abs，通过abs就可以调用函数！方式一和方式二等价！
//abs=1 //1
参数问题：javaScript可以传任意个参数，也可以不传递参数~参数进来是否存在问题？假设不存在参数，如何规避？
function abs(x) { //手动抛出异常来判断
if (typeof x != 'number') {
throw 'Not a Number';
}
if (x >= 0) {
return x;
} else {
return -x;
}
}
arguments js关键字，传进来的所有参数，构成的数组
function abs(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包含所有的参数，我们有时候想使用多余的参数来进行附加操作。需要排除已有参数~
rest它表示一个未知数量的参数作为函数中的一个数组。它不仅将额外的参数表示为数组.
function ss(a, b, ...rest) {
console.log("a=>" + a);
console.log("b=>" + b);
console.log(rest);
}//rest参数只能写在最后面，必须用…标识。
4.2、变量的作用域
局部作用域let
ES6关键字，解决局部作用域冲突问题，现建议大家都用let去定义局部变量。
function aaa() {
for(leti=0;i<100;i++){
console.log(i)
}
console.log(i+1); //Uncaught ReferenceError: i is not defined}
常量const
在ES6之后，用const定义常量
const PI = '3.14';
console.log(PI);
PI = '123'; //报错，常量不允许修改
4.3、方法
定义方法
方法就是把函数放在对象的里面，对象只有两个东西：属性和方法
var person = {
name: 'zhang';
brith: 2000;
//方法
age: function(){
var now = new Date().getFullYear();
return now - this.brith;
//this是默认指向调用它的那个对象，这里值person
}}//属性调用person.name;//方法调用，方法一定要带（）
person.age();
5、对象
5.1、Date
基本使用
var now = new Date(); //Sun May 29 2022 22:09:04 GMT+0800 (中国标准时间)
now. getFu11YearO); //年
now. getMonth(); //月0~11 代表月
now. getDate(); //日
now. getDay(); //星期几
now. getHours(); //时
now. getMinutes(); //分
now. getseconds(); //秒
now. getTimeO); //时间戳全世界统一1970 1.1 0:00:00 毫秒数
console. log(new Date(1578106175991)) //时间戳转为时间
转换
//注意，调用是一个方法，不是一一个属性!
now. toLocalestring()//'2022/5/29'
now. toGMTString()//'Sun, 29 May 2022 14:09:04 GMT'
5.2、JSON
json 是- -种轻量级的数据交换格式。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。在JavaScript -切皆为对象、任何js支持的类型都可以用JSON来表示; number, string…
格式:
-
对象都用 { }
-
数组都用 [ ]
-
所有的键值对都是用 key:value
json字符串和js对象的转换
对象转化为json字符串(json字符串每个键都用" "或’ '包围)
json字符–>js对象 JSON. parse(str);
js对象----->JSON. stringify(object)
var user = {
name :"loveyourself",
age: 18,
sex: '男'
}//对象转化为json字符串(json字符串每个键都用""或'包围)
var jsonuser = JSON. stringify(user); //输出为{"name" : "loveyourself"，"age":18,"sex" :"男"}
//json字符串转化为对象参数为json 字符串
var obj = JSON. parse(' {"name":"loveyourself" , "age" :18,"sex":"男"}');//输出为{name:"loveyourself",age:18,sex:"男"}
5.3、Ajax
- 原生的js写法 xhr异步请求
- jquery封装好的方法 $.ajax(“”)
- axios 请求
6、面向对象编程
原型对象
类：模板 原型对象
对象：具体的实例
在JavaScript这个需要大家换一下思维方式！
6.1、原型对象
当创建一个新函数时，系统会根据一组特定的规则为函数创建一个prototype属性，该属性会指向一个名为原型对象的对象，在默认情况下，该对象会自动生成一个构造函数（constructor），该构造函数是一个指向函数的指针。而在原型对象中，除了有这个构造函数，我们还可以添加其他的属性和方法。
通俗来讲就是，当我们新建一个函数A时，函数A内部会有一个属性，该属性指向一个对象（名字叫原型对象），而这个对象里面默认有一个构造函数，这个构造函数指向我们最初新建的函数A。然后，我们还可以在原型对象中添加属性和方法
//①默认情况下，构造函数是空的
function Person(){//构造函数首字母大写}//②添加属性和方法
Person.prototype.name="dp";
Person.prototype.doSomething=function(){ alert(this.name);}}
//③定义好构造函数和其他属性方法之后，就可以创建实例了
var person1=new Person();
var person2=new Person();
6.2、面向对象class继承
class关键字是在ES6引入的
//给student添加一个方法
//1、先定义一个类、属性、方法
class student {
constructor(name) {
this.name = name;
}
hello() {
alert('hello');
}
}
//使用方法
var person = new student('小明');
person.hello();
继承
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 xiaoming = new Student("xiaoming", 1);
var xiaohong = new XiaoStudent("xiaohong", 1);
查看对象的原型
7、操作BOM对象（重点）
浏览器介绍
BOM：浏览器对象模型
window代表浏览器窗口
window.alert(';')
window.innerHeight //224 窗口宽度
window.outerHeight //682 窗口宽度
Navigator 封装了浏览器的信息
大多数时候，我们不会使用navigator对象，因为会被人为修改
不建议使用这些属性来判断和编写代码
navigator.appName
//'Netscape'
navigator.appVersion
//'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.67 Safari/537.36'
navigator.userAgent
//'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.67 Safari/537.36'
navigator.platform
//'Win32'
screen
screen.height //872
location 代表当前页面的URL信息
location属性：
- 主机：host
- 当前指向的位置：href
- 协议:protocol
- 重新加载的方法：f reload() //location.reload()刷新网页(设置新的地址:location.assign(‘想要跳转的地址’))
location.host //'www.baidu.com'
location.href="https://www.baidu.com/" //跳转到Baidu
location.protocol //当前网页协议'https:'
location.reload() //刷新当前网页
location.assign('https://blog.csdn.net/weixin_46041371') //设置新的地址跳转
document
document代表当前的页面，HTML DOM文档树
- document.title 获取当前网页标题
- document.getElementById( ) 通过id获取具体的文档树节点
document.title //获取当前网页标题--"百度一下，你就知道"
<script>
var q = document.getElementById('kw');
</script>
q
//获取具体的文档树节点：<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">
document.cookie //获取cookie
//劫持cookie原理：把一段能劫持cookie的js代码放在网站上 一点开就能把你的cookie拿了
<script src='劫持cookie'></script>
<!-- 获取你的cookie上传到他的服务器 -->//服务器端可以设置cookie为httpOnly
history
history代表浏览器的历史记录
- history.back() 在当前页后退
- history.forward() 前进
8、操作DOM对象（重点）
DOM：文档对象模型
核心
浏览器网页就是一个Dom树形结构！
- 更新Dom节点
- 遍历dom节点
- 删除dom节点
- 添加dom节点
要操作一个dom节点，就必须先获得这个dom节点
获得dom节点
var q = document.getElementById('su');
操作文本
q.innerText=''修改文本的值q.innerHTML=''可以解析HTML文本标签
操作JS
q.innerText = 'loveyourself' //innerText方法修改文本内容
q.innerHTML = '<strong>123</strong>' //innerHTML解析HTML超文本的 ,可以修改样式
q.style.color = 'red' //style.什么：style方法修改css样式。即可以在js里操作修改样式
q.style.padding = '2em' //属性使用字符串包裹
删除节点
删除节点的步骤： 先获取父节点，通过父节点删除自己
<div>
<h1>标题一</h1>
<p id='p1'>p1</p>
<p class='p2'>p2</p>
</div>
<script>
var self = document.getElementById('p1');
var father = p1.parentElement; //找到p1的父节点
father.removeChild(p1);//通过父节点使用removechild删掉自己（只有标记为id选择器的节点才可以删除)
//删除是一个动态的过程,以下这种是不合适的，因为删除是动态变化的，[0]删除后，以前要删除的[1]变成了现在的[0]
father.removeChild(father.children[0]);
father.removeChild(father.children[1]);;
father.removeChild(father.children[2]);
</script>
注意：删除多个节点时，children是时刻变化的，不能直接father.removechild(father.children[0])这样从第一个索引开始删!
插入节点
我们获得了某个dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个dom节点以及存在元素了，就不能这么干了，因为会产生覆盖，这个时候就使用追加节点的方法：
<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.append(js); //在list节点下追加子节点
</script>
创建一个新的标签
<script>
var js = document.getElementById('js');
var list = document.getElementById('list');
//第一个方法：通过js创建一个新节点
var a = document.createElement('div')
//创建一个p标签
a.id = 'new';
a.innerText = 'hello';
//在这个标签上输入文本
list.appendchild(a);
//在父节点下加进去
//用第二种方法创建一个有自己属性的标签节点
var myScript = document.creatElement('script');//创建一个script标签节点
myScript.setAttribute('type', 'text/javascript'); /*setAttribute方法加入属性和属性值。第一个参数为属性名，第二个参数为属性值。生成效果为<script type='text/javascript'></sript>*/
//可以创建一个style标签
var myStyle = document.createElement('style'); //创建了一个 空style标签
myStyle.setAttribute('type', 'text/css');
myStyle.innerHTML = 'body{background-color: chartreuse;}';
//设置标签内容
document.getElementsByTagName('head')[0].appendChild(myStyle) //在父节点追加这个style标签
</script>
insertBefore 在前面插入节点
var ee = document. getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById( 'list');//要包含的节点. insertBefore(newNode, targetNode)
list.insertBefore(js,ee); //在list节点中（list是父节点），在ee节点前加入目标节点js
9、操作表单
表单是什么 form DOM 树
- 文本框 text
- 下拉框 < select >
- 单选框 radio
- 多选框 checkbox
- 隐藏框 hidden
- 密码框 password
- …
表单的目的：提交信息
获得要提交的信息
<body>
<form action='#' method="post">
<p> <span>用户名：</span>
<input type="text" id="username">
</p>
<p>
<span>性别</span>
<input type="radio" name="sex" value="man" id="boy">男
<input type="radio" name="sex" value="women" id="girl">女
</p>
</form>
</body>
<script>
var input_text = document.getElementById('username') //得到文本框的值
input_text.value //获取文本框的值
input_text.value = '222' //修改文本框的值
var boy_radio = document.getElementById('boy')
var girl_radio = document.getElementById('girl') //对于单选框、多选框等固定的
boy_radio.value//获取当前的值
boy_radio.checked; //看返回的结果，是否为true，如果为true则被选中
girl_radio.checked = true; //赋值
</script>
提交表单 。 md5加密密码，表单优化’’
<head>
<!-- 首先要导入MD5这个工具包 -->
<script src="https://cdn . bootcss . com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!-- action属性是提交到的位置 method是提交方式 -->
<form action="/login" method="post">
<p> <span>用户名: </span>
<input type="text" id="username" name="username">
</p>
<P> <span>密码: </span>
<input type="password" id="password" name="password">
</p>
<!--绑定事件onclick被点击。按钮提交事件aaa()-->
<button type="submit" onclick="aaa()">提交</button>
</form>
</body>
<script>
function aaa() {
var uname = document.getElementById('username');
var pwd = document.getElementById('password');
alert(uname.value)
alert(pwd.value + '加密前')
//MD5算法把pwd变成乱码，用这个方法会在前端把密码加长 用户体验感不好
pwd.value = md5(pwd.value);
alert(pwd.value + 'MD5加密后')
}
</script>
表单提交，MD5加密优化版οnsubmit=“return function()”
<!-- 使用form提交事件aaa()οnsubmit=绑定一个检测的函数，返回true或false
将这个结果返回给表单，使用onsubmit接收
οnsubmit="return aaa()" -->
<form action="/login" 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">
<button type="submit">submit</button>
</form>
<script>
function aaa() {
alert('提交事件');
var uname = document.getElementById('username');
var pwd = document.getElementById("input-password");
//通过隐藏去提交
var md5pwd = document.getElementById('md5-password');
md5pwd.value = md5(pwd.value);
//可以校验判断表中内容，true就是通过提交，false, 阻止提交
alert(md5pwd.value)
return true;
}</script>
10、jQuery
jQuery库，里面存在大量的JavaScript函数
获取jQuery
使用时导入包或者jQuery的cdn网址（
jq使用的公式：$(selector).action() 这个selector选择器就是css的选择器.action是事件
选择器
原生的js选择器的种类有：
-
标签选择器：document.getElementByTagName()
-
id选择器： document.getElementById()
-
类选择器： document.getElementByClassName()
jq选择器有（CSS中的选择器他全部都可以使用）
- 标签选择器：$(‘p’).click();
- id选择器：$(‘#id1’).click();
- class选择器：$(‘.class1’).click()
（jQuery）文档工具站： https://jquery.cuishifeng.cn/
测试：
<body>
<a href="" id="test_jquery">点我</a>
</body>
<script>
// 使用js语法
var id = document.getElementById('test_jquery')
id.click(function () { alert('jQuery'); })
// 使用jq语法
$('#test_jquery').click(function () {
alert('jQuery');
})
</script>
事件
有鼠标事件、键盘事件、其他事件
<body>
<!-- 要求：获取鼠标当前的一个坐标 -->
mouse:<span id="mouseMove"></span>
<div id="divMove" style="height:200px;width:200px;background-color:gray;">
在这里移动鼠标试试</div>
</body>
<script> // 当前网页元素加载完毕之后，响应事件
// $(document).ready(function(){
//document默认是文档，ready默认是加载完
// }) // 上面这行的简写
$(function () {
$('#divMove').mousemove(function (e) {
//获取了divMove的鼠标移动的坐标
$('#mouseMove').text('x:' + e.pageX + 'Y:' + e.pageY)
//在mouseMove这个span里显示鼠标移动的坐标
})
});
</script>
操作DOM
节点文本操作 --$(‘selector’).text();
<body>
<ul id="test_ul">
<li class="js">JavaScript</li>
<li name="python">Python</li>
</ul>
</body>
<script> //拿到这个标签的文本，
$('#test_ul li[name=python]').text();
//修改这个标签的文本
$('#test_ul li[name=python]').text('222');
//修改样式
$('#test_ul').html('');
</script>
css的操作 --$(‘selector’).css(“属性”, “值”);
$('#test_ul li[name=python').css("color", "red"); //使用键值对来表示属性和属性值
$('#test_ul li[name=python').css("font-size", "22px");
元素的显示和隐藏：本质display:none;
$('#test_ul li[name=python]').hide()//隐藏
$('#test_ul li[name=python]').show()//展示
$.ajax({
url: "url", //请求的url地址
dataType: "json", //返回格式为json
async: true,//请求是否异步，默认为异步，这也是ajax重要特性
data: { "id": "value" }, //参数值
type: "POST", //请求方式
beforeSend: function () {
//请求前的处理
},
success: function (req) {
//请求成功时处理
},
complete: function () {
//请求完成的处理
},
error: function () {
//请求出错处理
}
});
四、推荐学习网站及方法
网站
方法
1、如何巩固JS（看jquery源码，看游戏源码！）
2、巩固HTML。CSS（扒网站，全部down下来没然后对应修改效果）
扫一扫
4220
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
