JavaScript
1. 概述
JavaScript是目前最流行的脚本语言，在你的手机，电脑等交互逻辑都是通过JavaScript实现的
重要性：一个合格的后端人员，必须要精通JavaScript
ECMAScript是一种语言标准，JavaScript是网景公司对ECMAScript标准的一种实现。
最新版本已经到es6版本，但是大部分浏览器还只停留在支持es5代码上
导致：开发环境---线上环境，版本不一致
2. 快速入门
2.1 引入JavaScript
内部标签引入：
<script>
alert("hello world");
</script>
外部引入：
外部文件代码：
alert("hello world");
引入文件：
<script src="js/abc.js"></script>
<!--不用显式定义type，默认就是javascript 所以下行代码写不写都可-->
<script type="text/javascript"></script>
2.2 基本语法入门
浏览器必备调试须知：
Elements：元素 左边是html代码 右边styles是css代码
Console：控制台 console.log() 在浏览器的控制台打印变量 相当于Java中的 System.out.println()
Sources：来源 可以打断点进行查看运行过程
NetWork：网络请求
Application：相当于web里面的数据库 可以存一些简单的数据保存在网页里面
2.3 数据类型
数值、文本、图形、音频、视频......
变量：
var name = "zcc";
number:
js不区分小数和整数，Number
1 //整数1
1.1 //浮点数1.1
-1 //负数-1
NaN //not a number
Infinity //表示无限大
字符串：
'abc' "abc"
布尔值：
true false
运算逻辑：
&& 与 两个都为真，结果为真
|| 或 两个都为假，结果为假
! 非 真即假 假即真
比较运算符：
=
== 等于（类型不一样，值一样 也会判断为true）
=== 绝对等于（类型一样，值一样 结果为true）
这是一个js的缺陷，坚持不要使用==比较
须知：
-
NaN===NaN，结果为false NaN与所有的数值都不相等，包括自己
-
只能通过isNaN(NaN)来判断这个数是否是NaN
浮点数问题：
console.log((1/3)===(1-2/3))
>false
上方比较的两边都是无线不循环小数，应尽量避免使用浮点数进行运算，存在精度问题
null和undefined：
-
null 空
-
undefined 未定义
数组：
Java的数值必须是相同类型的对象，JS中不需要这样：
var arr=[1,2,5,'s',"超",null,true];
console.log(arr[4])
>超
//取数组下标，如果越界了，不报错 输出undefined
console.log(arr[10])
>undefined
对象：
对象是大括号，数组是中括号
每个属性之间用英文逗号隔开，最后一个不需要添加
var zcc={
name: "常超",
age: 18,
hobby:["code","study","sleep","play","eat"]
}
//取对象的值
zcc.hobby
>['code', 'study', 'sleep', 'play', 'eat']
2.4 严格检查模式
ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。
let 声明的变量只在 let 命令所在的代码块内有效。const 声明一个只读的常量，一旦声明，常量的值就不能改变。
3. 数据类型
3.1 字符串
-
正常字符串我们使用单引号或者双引号包裹
-
注意转义字符\
\' \
\n 换行
\t 相当于tab键
\u4e2d（中） \u#### Unicode字符
\x41（A） Ascll字符 -
多行字符串编写
//tab键上面 esc键下面的 包裹起来 可以写多行字符串
let msg=`
常超
18
boy
` -
模板字符串
let name="常超"
let age=18
let sex="boy"
let msg=`你好，我的名字是${name},性别${sex},今年${age}`
console.log(msg)
>你好，我的名字是常超,性别boy,今年18
${} //类似于正则表达式 -
字符串长度
let str="hello"
console.log(str.length)
>5 -
字符串的不可变性
str[0]=1
>1
console.log(str)
>hello -
大小写转换
//注意 这里是方法 不是属性了
console.log(str.toUpperCase())
>HELLO
let k="ABC"
console.log(k.toLocaleLowerCase())
>abc -
获取字符串处于第几位
console.log(k.indexOf("B"))
>1 -
截取字符串指定区间内容
let str="hello"
console.log(str.substring(1)) //第1个字符到最后
>ello
console.log(str.substring(1,3)) //第1个到第3个之间 包含第1个
>el
[) //左边包含 右边不包含
3.2 数组
Array可以包含任意的数据类型
let arr=[1,5,6,8,9] //通过下标取值和赋值
arr[0];
arr[0]=10;
-
长度
arr.length
>5注意：加了给arr.length赋值，数组大小会发生变化，如果赋值过小，会造成元素丢失
arr.length=10
>10
arr
>(10) [1, 5, 6, 8, 9, empty × 5]
arr.length=3
>3
arr
>(3) [1, 5, 6] -
indexOf() 通过元素获得下标索引
arr
>(3) [1, 5, 6]
arr.indexOf(5)
>1注意 ：字符串的“1”和数字1是不同的
-
slice() 截取Array的一部分，返回一个新数组，类似String中的substring
arr
>(3) [1, 5, 6]
arr.slice(1,2)
>[5]
arr
>(3) [1, 5, 6] -
push() pop() 尾部
arr
>(3) [1, 5, 6]
arr.push("1")
>4
arr
>(4) [1, 5, 6, '1'] //push:压入到尾部
arr
>(4) [1, 5, 6, '1']
arr.pop()
>'1'
arr
>(3) [1, 5, 6] //pop:弹出尾部的一个元素 -
unshift() shift() 头部
arr
>(3) [1, 5, 6]
arr.unshift(123)
>4
arr
>(4) [123, 1, 5, 6] //unshift():压入到头部
arr
>(4) [123, 1, 5, 6]
arr.shift()
>123
arr
>(3) [1, 5, 6] //shift():弹出头部的一个元素 -
排序：sort()
arr
>(4) ['D', 'A', 'B', 'C']
arr.sort()
>(4) ['A', 'B', 'C', 'D'] -
元素反转：reverse()
arr
>(4) ['A', 'B', 'C', 'D']
arr.reverse()
>(4) ['D', 'C', 'B', 'A'] -
concat()
arr
>(4) ['D', 'C', 'B', 'A']
arr.concat(1,2,3)
>(7) ['D', 'C', 'B', 'A', 1, 2, 3]
arr
>(4) ['D', 'C', 'B', 'A']注意：concat() 并没有修改数组，只是会返回一个新的数组
-
连接符join
打印拼接数组，使用特定的字符串连接
arr
>(4) ['D', 'C', 'B', 'A']
arr.join("-")
>'D-C-B-A' -
多维数组
arr=[[1,9],[2,8],["3","7"]]
arr[1][1]
>8
数组：重点就是如何存取数据，方法都可以自己实现
3.3 对象
若干个键值对
let 对象名={
属性名:属性值,
属性名:属性值,
属性名:属性值
}
//定义了一个person对象，他有三个属性
let person ={
name:"张三",
sex:"男",
age:18
}
js中对象，{......}表示一个对象，键值对描述属性值 xxxx:xxxx,多个属性之间用逗号隔开，最后一个属性不用加逗号
注意：JavaScript中所有的键都是字符串，值是任意对象
-
对象赋值
person
>{name: '张三', sex: '男', age: 18}
person.age=8
>8
person
>{name: '张三', sex: '男', age: 8} -
使用一个不存在的对象属性 不会报错，输出undefined
person
>{name: '张三', sex: '男', age: 8}
person.abc
>undefined -
动态的删减属性，通过delete可删除对象的属性
delete person.age
>true
person
>{name: '张三', sex: '男'} -
动态的添加属性，直接给新的属性添加值即可
person
>{name: '张三', sex: '男'}
person.age=6
>6
person
>{name: '张三', sex: '男', age: 6} -
判断属性值是否在这个对象中 xxx in xxx
'name' in person
>true
//有继承关系
'toString' in person
>true -
判断一个属性是否是这个对象自身拥有的 用
person.hasOwnProperty('toString')
>false
person.hasOwnProperty('name')
>true
3.4 流程控制
if判断：
let score=90;
if (score>60){
alert("及格");
}else {
alert("不及格");
}
while循环，应避免程序死循环
let score=9;
while (score<100){
score+=1;
console.log(score)
}
for循环：
for (let i = 0; i <50 ; i++) {
console.log(i)
}
数组遍历：
//forEach循环
let arr=[12,56,8,89,5,8,9,99]
arr.forEach(function (e) {
console.log(e)
})
//也可 直接arr.forof
for (let number of arr) {
console.log(number)
}
3.5 Map和Set
ES6的新特性
Map：
//ES6 Map
let map=new Map([["tom",90],["jack",85],["张三",100]])
let tomScore=map.get("tom"); //通过key来获得value
map.set("李四",70); //新增或者修改
map.set("tom",80);
map.delete("jack"); //删除
map
>Map(3) {'tom' => 80, '张三' => 100, '李四' => 70}
Set：无序不重复集合
let set=new Set([1,8,9,6,3,6,9]); //{1, 8, 9, 6, 3}
set.add(2); //添加
set.delete(1); //删除
console.log(set.has(6)); //判断是否包含某个元素
3.6 intrable迭代
为了统一集合类型，ES6标准引入了新的iterable类型，Array、Map和Set都属于iterable类型。
具有iterable类型的集合可以通过新的for ... of循环来遍历。
遍历数组：
let arr=new Array(["张三","李四","王五"]);
for (let arrElement of arr) {
console.log(arrElement)
}
遍历map:
let map=new Map([["tom",90],["jack",85],["张三",100]])
for (let x of map) {
console.log(x)
}
遍历set：
let set=new Set([1,8,9,6,3,6,9]); //{1, 8, 9, 6, 3}
for (let number of set) {
console.log(number)
}
4. 函数
4.1 定义函数
定义方式一
举例：绝对值函数
function jdz(x) {
if (x>=0){
return x;
}else {
return -x;
}
}
jdz(-1)
>1
jdz(2)
>2
定义方式二
var jdz02=function (y) {
if (y>=0){
return y;
}else {
return -y;
}
}
jdz02(-1)
>1
jdz02(0)
>0
一旦执行到return，代表函数结束，返回结果
如果没有执行return，函数执行完也会返回结果，结果就是undefined
方式1和方式2等价
参数问题：JavaScript可以传递任意个参数，也可以不传递参数
参数进来存在的问题：
-
假设不存在参数，如何规避
function jdz(x) {
//手动抛出异常
if (typeof x!=='number'){
throw "Not a number"
}
if (x>=0){
return x;
}else {
return -x;
}
} -
arguments包含所有的参数，我们有时候想使用多余的参数进行附加操作，需要排除已有参数
arguments是一个JS免费赠送的关键字代表，传递进来的所有参数 都是一个数组
var jdz02=function (y) {
for (var i=0;i<arguments.length;i++){
console.log(arguments[i])
}
if (y>=0){
return y;
}else {
return -y;
}
}问题解决：使用
rest以前：
function cx(x) {
if (arguments.length>2){
for (let i = 0; i < arguments.length; i++) {
//..... console.log(arguments[i])
}
}
}ES6引入的新特性，获取除了已经定义的参数之外的所有参数
function f(a,b,注意：rest参数只能写在最后面，必须用...标识
4.2 变量的作用域
在JavaScript中，var定义变量实际是有作用域的
假设在函数体内声明，则在函数体外不可以使用（非要想实现的话，后面可以研究下闭包）
function aaa() {
var a=1;
console.log(a); //1
}
aaa();
console.log(a); //Uncaught ReferenceError: a is not defined
如果两个函数使用了相同的变量名，只要在函数内部，就不冲突
function aaa() {
var a=1;
console.log(a); //1
}
function bbb() {
var a=2;
console.log(a); //2
}
内部函数可以访问外部函数的成员，反之则不行
function ccc() {
var c=1;
function ddd() {
var d=c+1;
console.log(d)
}
ddd(); //2
console.log(c) //1
var dd=d+1
console.log(dd) //d is not defined
}
假设内部函数变量和外部函数变量，重名
function eee() {
var e=2;
function fff() {
var e=1;
console.log(e)
}
fff() //1
console.log(e) //2
}
在JavaScript中，函数查找变量从自身函数开始，由“内”向“外”查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量
提升变量的作用域
function ggg() {
var g=2-f;
console.log(g)
var f=1 //NaN undefined
}
说明：js执行引擎，自动提升了f的声明，但是不会提升变量f的赋值，相当于：
function ggg() {
var f;
var g=2-f;
console.log(g)
f=1
}
这个是在JavaScript建立之初就存在的特性，我们应养成规范，所有的变量定义都放在函数的头部，不能乱放，便于代码维护
全局函数
function hhh() {
var h=1;
function iii() {
console.log(h)
}
iii(); //1
console.log(h) //1
}
全局对象：window
var x="666"
alert(x)
alert(window.x) //默认所有的全局变量，都会自动的绑定在window对象下
//弹出两个666
alert() 这个函数本身也是一个window变量
var x="666"
window.alert(x)
var old_alert=window.alert;
old_alert(x)
window.alert=function () {
}
window.alert(123) //发现这个alert失效了
//恢复
window.alert=old_alert;
window.alert(798)
JavaScript实际上只有一个全局作用域，任何变量（函数也可以被视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，就会报错ReferenceError
规范
由于我们所有的全局变量都会绑定到window上，如果不同的js文件，使用了相同的全局变量，就会有冲突，那么如何减少冲突？
//定义唯一的全局变量
var ZccApp={};
//定义全局变量
ZccApp.name="zcc";
ZccApp.add=function (a,b) {
return a+b;
}
console.log(ZccApp.name)
>zcc
undefined
console.log(ZccApp.add(5,7))
>12
把自己的代码全部放在自己定义的唯一空间名字中，降低全局命名冲突的问题
jQuery就是这么做的
局部作用域let
function f() {
for (var i = 0; i < 20; i++) {
console.log(i) //0~19
}
console.log(i) //20
//问题 i出了作用域还能使用，显然是不可以的
ES6 let关键字，解决了局部作用域的冲突问题
function f() {
for (let i = 0; i < 20; i++) {
console.log(i) //0~19
}
console.log(i) //Uncaught ReferenceError: i is not defined
}
建议还是都用let去定义局部作用域的变量
常量 const
在ES6之前，定义常量：只有用全部大写字母命名的变量就是常量，建议不要修改这样的值
var PI=3.14;
console.log(PI) //3.14
PI=1.43
console.log(PI) //1.43
//显然是有问题的
在ES6引入了常量关键字const
const PI=3.14;
console.log(PI) //3.14
PI=1.43
console.log(PI) //Assignment to constant variable.
4.3 方法
定义方法
方法就是把函数放在对象里面，对象只有两个东西：属性和方法
var people={
name:"张三",
brith:2006,
age:function () {
//今年-出生年
var now=new Date().getFullYear();
return now-this.brith;
}
}
//属性
console.log(people.name)
>张三
//方法 带上()
console.log(people.age())
>16
this代表什么，拆开看一下
function getAge() {
//今年-出生年
var now=new Date().getFullYear();
return now-this.brith;
}
var people={
name:"张三",
brith:2006,
age:getAge
}
console.log(people.age()); //16 表明this指向people
console.log(getAge()); //NaN 这个this是调用的window的birth，window没有birth
this是无法指向的，默认指向调用它的哪个对象
apply
但是在js中通过apply可以控制this的指向
function getAge() {
//今年-出生年
var now=new Date().getFullYear();
return now-this.brith;
}
var people={
name:"张三",
brith:2006,
age:getAge
}
var student={
name:"李四",
brith:2009,
age:getAge
}
getAge.apply(student,[]);//this,指向了people，参数为空
>13
5. 内部对象
标准对象
//typeof 可以查对象类型
typeof 1.5
'number'
typeof "张三"
'string'
typeof true
'boolean'
typeof NaN
'number'
typeof []
'object'
typeof {}
'object'
typeof Math.abs
'function'
typeof undefined
'undefined'
5.1 Date
基本使用
var time=new Date()
time //具体时间
time.getFullYear() //年
time.getMonth() //月 外国人是0~11月
time.getDate() //日
time.getDay() //周几
time.getHours() //几时
time.getMinutes() //几分
time.getSeconds() //几秒
time.getTime() //时间戳 全世界统一 1970 1.1 0:00:00 毫秒数
转换
now=new Date(1650371078050) //时间戳转换为时间
new
>Tue Apr 19 2022 20:24:38 GMT+0800 (中国标准时间)
now.toLocaleString()
>'2022/4/19 20:24:38'
now.toGMTString()
>'Tue, 19 Apr 2022 12:24:38 GMT'
5.2 json
JSON是什么？
-
JSON(JavaScript Object Notation ，JS对象简谱)是一种轻量级的数据交互格式
-
简洁和清晰的层次结构是的JSON成为理想的数据交互语言
-
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率
在JavaScript中，一切皆为对象，所以js支持的类型都可以用JSON来表示
JSON格式：
-
对象都用{}
-
数组都用[]
-
所有的键值对都是用key:value
JSON和对象之间的转换：
var user={
name:"张三",
age:15,
sex:"男"
}
//对象转换为JSON字符串
var JSONUser=JSON.stringify(user) //'{"name":"张三","age":15,"sex":"男"}'
//JSON字符串转换为对象
var UserJSON=JSON.parse('{"name":"张三","age":15,"sex":"男"}') //成功转换为对象
区别：
name:"张三",age:15,sex:"男" //对象
{"name":"张三","age":15,"sex":"男"} //字符串
6. 面向对象编程
6.1 原型
ES6之前这么做的：原型
var student={
name: "张三",
age: 18,
run: function () {
console.log(this.name+"run........")
}
}
var zcc={
name: "zcc"
}
//原型对象：zcc的原型是student
zcc.__proto__=student
6.2 class继承
class关键字，是在ES6引入的
定义一个属性、方法：
class Student{
constructor(name) {
this.name=name
}
hello(){
alert("hello")
}
}
var zcc=new Student("zcc")
继承：
//定义一个学生的类
class Student{
constructor(name) {
this.name=name
}
hello(){
alert("hello")
}
}
//学生的继承类
class SmallStudent extends Student{
constructor(name,age) {
super(name);
this.age=age
}
myGrade(){
alert("我是小学生")
}
}
var zcc=new Student("zcc")
var ls=new SmallStudent("ls",18)
7. 操作BOM对象
浏览器对象
JavaScript诞生就是为了能够让他在浏览器上运行
BOM：浏览器对象模型
内核浏览器：IE、Chrome、Safari、FireFox
三方：QQ浏览器 360浏览器
window（重要）
window代表 浏览器窗口
window.alert("你好")
undefined
//获取浏览器的窗口大小
window.innerHeight
150
window.innerWidth
978
window.outerHeight
730
window.outerWidth
993
Navigator（不建议使用）
Navigator 封装了浏览器的信息
navigator.appName //浏览器的名字
'Netscape'
navigator.appVersion //浏览器的版本和使用信息
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36'
navigator.userAgent //用户代理
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36'
navigator.platform //平台
'Win32'
大多数情况下，不使用navigator对象，因为会被人为修改
不建议使用这种属性来判断和编写代码
screen
screen ：代表屏幕尺寸
screen.width //浏览器的宽度
1536
screen.height //浏览器的高度
864
location（重要）
location代表当前页面的url信息
location.host //返回当前URL的主机名和端口
'www.baidu.com'
location.href //返回当前页完整的url
'https://www.baidu.com/'
location.protocol //返回当前页的协议
'https:'
location.reload() //刷新页面
//加载一个新的文档
location.assign("https://www.cnblogs.com/zccjy/")
document（内容：DOM）
document代表当前的页面 HTML、DOM文档树
document.title
'百度一下，你就知道'
document.title="zcc"
'zcc'
获取具体的文档书数节点
<dl id="app">
<dt>Java</dt>
<dd>JavaSE</dd>
<dd>JavaEE</dd>
</dl>
<script>
var dl=document.getElementById("app")
</script>
获取cookie：
cookie: 某些网站为了辨别用户身份，进行Session跟踪而储存在用户本地终端上的数据（通常经过加密），由用户客户端计算机暂时或永久保存的信息
document.cookie
劫持cookie原理：
<script src="a.js"></script>
<!--恶意人员：获取你的cookie上传到它的服务器-->
安全措施：服务器端可以设置cookie：httpOnly
history
history代表浏览器的历史记录：
history.back() //回退
history.forward() //前进
8. 操作DOM对象
核心
浏览器网页就是一个Dom(文档对象模型)树形结构,
-
更新：更新Dom节点
-
遍历Dom节点：得到Dom节点
-
删除：删除一个Dom节点
-
添加：添加一个新的节点
要操作一个Dom节点，就必须要先获得这个Dom节点。
获得dom节点
//对应 css 选择器
var h1= document.getElementsByTagName("h1");
var p1=document.getElementById("p1");
p1.children; //获得所有子节点
var ul1=document.getElementsByClassName("ul1");
更新节点
<div id="div1">
</div>
<script>
var div1=document.getElementById('div1')
</script>
//操作文本
div1.innerText="666" //修改文本的值
div1.innerHTML="<strong>666<strong/>" //解析HTML文本标签
//操作css 属性使用字符串包裹 遵循驼峰命名
div1.style.color="red"
div1.style.fontSize="300px"
删除节点
删除节点的步骤：
-
先获取父节点
-
在通过父节点删除自己
<div>
<p id="p1">段落1</p>
<p>段落2</p>
<p>段落3</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])
//最后还有 段落2
</script>
注意：若通过下标方式删除多个children时，要注意，下标是一直变化的
插入节点
我们获得了某个Dom节点，假设这个Dom节点是空的，我们通过innerHTML就可以增加一个元素，但是如果这个Dom节点已经存在元素了，就会产生覆盖，导致之前的元素就没了。
追加元素：
<body>
<p id="Java">Java</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>
<script>
var Java=document.getElementById('Java');
var list=document.getElementById('list');
list.appendChild(Java); //放一个已经存在的节点
</script>
</body>
创建一个新的标签，实现插入
第一种方法：
<body>
<p id="Java">Java</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>
<script>
var list=document.getElementById("list");
var newP=document.createElement('p'); //创建一个p标签
//1. 设置id
newP.id='newP'
newP.innerText="666";
list.appendChild(newP);
//2. 也可以直接设置属性和对应的值 这样方便
var ppp=document.createElement('p')
ppp.setAttribute('id','pp')
ppp.innerText="888"
list.appendChild(ppp)
var body=document.getElementById("bb")
body.setAttribute('style','</script>
</body>
在一个节点的前面插入一个节点：
<body id="bb">
<p id="Java">Java</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>
<script>
var six=document.createElement("p")
six.setAttribute("id","six")
six.innerText="666"
var ee=document.getElementById("ee")
var list=document.getElementById("list")
list.insertBefore(six,ee)
</script>
</body>
9. 操作表单（验证）
表单是什么 ？ form DOM树
-
文本框 text
-
密码框 password
-
下拉框 < select >
-
单选框 radio
-
多选框 checkbox
-
隐藏域 hidden
-
.......
表单的目的：提交信息
获得表单提交的信息：
<body>
<form action="post">
<span>用户名：</span> <input type="text" name="username" id="yhm"><br>
<span>性 别：</span>
<input type="radio" name="sex" value="boy" id="nan">男
<input type="radio" name="sex" value="girl" id="nv">女
</form>
<script>
var username=document.getElementById("yhm")
//获得输入的值
username.value
//修改、设置输入的值
username.value="超神"
var nan=document.getElementById("nan")
var nv=document.getElementById("nv")
//如果是获得单选框、多选框提交的值，用value是不行的，需要：
//判断是否选中了它 如果结果为true 则为选中
nan.checked
//也可以设置它
nv.checked="true"
</script>
</body>
验证提交信息 密码MD5加密 (最全) 重点
10. jQuery
jQuery库，里面存在大量的JavaScript函数。
如何获取jQuery库，两种方法：
jQuery事件
鼠标事件、键盘事件、其他事件
演示以鼠标事件为例。其他的可看文档https://jquery.cuishifeng.cn/index.html
$().mousedown() //鼠标按下
$().mousemove() //鼠标移动
jQuery操作dom
节点文本操作：
$("#java li[id=ee]").text() //获得值
$("#java li[id=ee]").text("666") //设置值
$("#java li[id=ee]").html() //获得值
$("#java li[id=ee]").html("<strong>666</strong>") //设置值
css的操作：
$("#java li[id=ee]").css({"color":"red"})
元素的显示和隐藏：本质上：display:none
$("#java li[id=ee]").show() //显示
$("#java li[id=ee]").hide() //隐藏
学习小技巧
-
如果巩固js （1. 看jQuery源码 2. 看游戏源码）
-
巩固HTML CSS（扒网站 需要模仿的网站：审查元素——>一步步的删除，只留下有用的 然后down下来）
layer 弹窗组件
