Javascript详解

阅读数：次 2020-12-12

原创字数统计: 5.7k字 | 预计阅读时长≈ 25分钟

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。本文章根据自己学习 B 站狂神的 javascript 教程整理而成。

什么是 JavaScript

概述

JavaScript 是一门世界上最流行的脚本语言

一个合格的后端人员，必须要精通JavaScript

测试JavaScript语法，可以在浏览器控制台中写

历史

https://blog.csdn.net/kese7952/article/details/79357868

ECMAScript它可以理解为是 JavaScript 的一个标准

最新版本已经到 es6 版本

但是大部分浏览器还只停留在支持 es5 代码上！

开发环境—线上环境，版本不一致

快速入门

引入 JavaScript

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>我的第一个JavaScript程序</title>
    <!--第一种方式：script标签内写JavaScript代码-->
    <!-- <script>
        alert("hello,world")
    </script>-->

    <!--第二种方式：外部引入。  外部编写js文件，然后引入-->
    <!--注意：此处的标签必须成对出现，不能写成<script src="" />，否则无效-->
    <script src="js/qj.js"></script>

    <!--不用显示定义type，也默认就是text/javascript-->
    <script type="text/javascript"></script>
  </head>
  <body>
    <!--也可以写在这里-->
  </body>
</html>

基本语法入门

先去idea中把JavaScript语法版本改成es6

浏览器必会调试须知（F12）：

语法和java差不多，后面细说。

数据类型快速入门

number

js 不区分小数和整数，Number

123 //整数123
123.1 //浮点数123.1
1.123e3 - // 科学计数法
  99 //负数
NaN //not a number 不是数字
Infinity //表示无限大

字符串

‘abc’ 、“abc”

布尔值

true，false

逻辑运算

1
2
3

&& #两个都为真，结果为真
|| #一个为真，结果为真
!  #真即假，假即真

比较运算符（重要）

=
==  //等于（类型不一样，值一样，也会判断为true）
===  //绝对等于（类型一样，值一样，结果为true）
//这是一个js的缺陷，坚持不要使用 == 比较

须知：

NaN 与所有的数值都不相等，包括自己

只能通过isNaN(NaN)来判断这个数是否是NaN

浮点数问题：

1	console.log(1 / 3 === 1 - 2 / 3) //false

尽量避免用浮点数进行运算，存在精度问题！！

1	Math.abs(1 / 3 - (1 - 2 / 3)) < 0.00000001 //勉强算它相等

null和undefined

null：空

undefined：未定义

数组

//保证代码的可读性，尽量使用[]这种方式
var arr = [1, 2, 'hello', null, true]

new Array(1, 2, 'hello', null, true)

//取数组下标：如果越界了，就会  undefined

对象

对象是大括号，数组是中括号

var person = {
  name: 'jinggege',
  age: 23,
  tags: ['java', 'javascript', 'javaweb'],
}
//每个属性之间使用逗号隔开，最后一个不需要添加
//取对象的值
person.name
person.age

严格检查模式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>严格检查模式</title>
    <!--
    前提：IDEA需要设置支持es6语法
    use strict：严格检查模式 预防 JavaScript 的随意性产生的一些问题
    必须写在 JavaScript 的第一行
    局部变量建议都是用 let 去定义
    -->
    <script>
      'use strict'
      let i = 1 //es6  let
    </script>
  </head>
  <body></body>
</html>

数据类型详解

字符串

1、正常字符串我们使用单引号或者双引号包裹

*2、注意转义字符 \ *

\'
\n   // 换行
\t 	 // tab
\u4e2d //\u####  Unicode字符   中
\x41    //Ascll字符

3、多行字符编写

使用 tab 上面的那个键 ``

let msg = `
    你好
    兄弟
    你在哪
    `

4、模板字符串

1
2
3

let name = 'jinggege'
let msg = `你好呀，${name}`
console.log(msg)

5、字符串长度

1	console.log(str.length)

6、字符串不可变

7、大小写转换

1
2
3

//注意这里是方法，不是属性
student.toUpperCase()
student.toLowerCase()

8、获取指定字符下标

1	console.log(student.indexOf('t'))

9、substring

1
2
3

//  [)
console.log('student'.substring(1)) //从第一个字符串截取到最后一个字符串
console.log('student'.substring(1, 3)) //[1,3)

数组

Array 可以包含任意的数据类型

1	let arr = [1, 2, 3, 4, 5, 6, 'hello', true] //推荐使用中括号定义

1、长度

1	arr.length

注意：假如给 arr.length 赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失

2、indexOf()

通过元素获得下标索引

let arr = [1, 2, 3, 4, 5, 6, '1', true]
console.log(arr.indexOf(2))
1

console.log(arr.indexOf(1))
0
console.log(arr.indexOf('1'))
6
//字符串"1"和数字1是不同的

3、slice()

截取 Array 的一部分，返回一个新数组，类似于 String 中的 substring

1	arr.slice(1, 5)

4、push()，pop()

push()，从数组末尾添加，即压入到尾部

pop()，从数组末尾弹出元素

5、unshift()，shift()

unshift()，压入到头部

shift()，弹出头部的一个元素

6、sort() 排序

1
2
3

Array(3)[('B', 'C', 'A')]
arr.sort()
Array(3)[('A', 'B', 'C')]

7、reverse() 元素反转

1
2
3

Array(3)[('A', 'B', 'C')]
arr.reverse()
Array(3)[('C', 'B', 'A')]

8、concat() 拼接

注意事项：concat() 并没有修改数组，只是会返回一个新数组

9、join() 连接符

打印拼接数组，使用特定的字符串连接

10、多维数组

数组是用来存储数据的，要知道（如何存，如何取）

对象

若干个键值对

let 对象名 = {
    属性名：属性值，
    属性名：属性值，
    属性名：属性值
}

//定义了一个person对象，它有3个属性
let person = {
    name: "jingege",
    age: 23,
    score: 100
};

//js中的对象 {....}表示一个对象，键值对描述属性 xxx:xxx，多个属性之间用逗号分开，最后一个属性不加逗号

1、对象赋值

2、使用一个不存在的对象属性，不会报错

1 2	person.height undefined

3、动态地删减属性，通过 delete 删除对象的属性

4、动态地添加，直接给新的属性添加值即可

5、判断属性是否在这个对象中

'age' in person
true
//继承
'toString' in person
true

6、判断一个属性时候是这个对象自身拥有的，hasOwnProperty

流程控制

1 2	'use strict' let ages = [23, 25, 24, 26]

if 条件

while 循环

for 循环

for (let i = 0; i < ages.length; i++) {
  console.log(ages[i])
}

//索引
for (let num in ages) {
  //不建议使用for in，建议使用for of
  console.log(ages[num])
}

forEach 循环

5.1 引入的

1
2
3

ages.forEach(function (value) {
  console.log(value)
})

Map 和 Set

ES6 的新特性~~

Map：

var map = new Map([
  ['tom', 100],
  ['jack', 90],
  ['haha', 80],
]) //多维数组
var name = map.get('tom') //通过key获得value
map.set('admin', 123456) //新增或者修改
console.log(name)
console.log(map)
map.delete('tom') //删除

Set：无序不重复的集合

var set = new Set([1,2,3,3,3,3,3])//set可以去重
console.log(set)
set.add(4) //添加
set.delete(2)//删除
set.has(3)//是否包含某个元素

iterator

ES6 新特性

let ages = [23, 24, 25, 26]
for (let age of ages) {
  console.log(age)
}

遍历 map

var map = new Map([
  ['tom', 100],
  ['jack', 90],
  ['haha', 80],
]) //多维数组
for (let x of map) {
  console.log(x)
}

遍历 set

var set = new Set([1, 2, 3])
for (let x of set) {
  console.log(x)
}

函数

定义函数

定义方式一

//定义一个绝对值函数
function abs(x) {
  if (x >= 0) {
    return x
  } else {
    return -x
  }
}
//一旦执行到return代表函数结束，返回结果！
//如果没有执行return，函数执行完也会返回结果，结果就是undefined

定义方式二

let abs = function (x) {
	......
}
//function (x) {......}这是一个匿名函数，但是可以把结果赋值给变量，通过变量就可以调用函数

方式一和方式二等价。

调用函数

1 2	abs(10) //10 abs(-10) //10

参数问题：JavaScript 可以传任意个参数，也可以不传递参数~

参数进来是否存在的问题？

假设不存在参数，如何规避？

let abs = function (x) {
  //手动抛出异常
  if (typeof x !== 'number') {
    throw 'Not a Number'
  }
  if (x >= 0) {
    return x
  } else {
    return -x
  }
}

argumen ts

arguments是一个 JS 免费赠送的关键字！

代表传递进来的所有的参数，是一个数组！

问题：arguments 包含所有的参数，我们有时候想使用多余的参数来进行附加操作。需要排除已有的参数~

rest

ES6 引入的新特性，获取除了已定义的参数之外的所有参数~

function aaa(a, b, ...rest) {
  console.log('a->' + a)
  console.log('b->' + b)
  console.log(rest)
}

rest参数只能写在最后面，必须用 ... 标识

变量作用域

在 JavaScript 中，var 定义的变量实际是有作用域的。

假设在函数体中声明，则在函数体外不可以使用~ （非要想实现的话，后面可以研究一下闭包）

function xxx() {
  var x = 1
  x = x + 1
}
x = x + 2 //Uncaught ReferenceError: x is not define
//如果两个函数使用了相同的变量名，只要在函数内部，就不冲突

/内部函数可以访问外部函数的成员，反之则不行

function f1() {
  var x = 1
  //内部函数可以访问外部函数的成员，反之则不行
  function f2() {
    var y = x + 1 // 2
  }
  var z = y + 1 //Uncaught ReferenceError: y is not defined
}

假设，内部函数变量和外部函数变量重名！

function f1() {
  var x = 1

  function f2() {
    var x = 'A'
    console.log('inner' + x) //innerA
  }

  console.log('outer' + x) //outer1
  f2()
}
f1()
//假设在JavaScript中函数查找变量从自身函数开始，由内向外查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。

提升变量的作用域

function qj() {
  var x = 'x' + y
  console.log(x) //xundefined
  var y = 'y'
}
//说明js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值，等价与以下：
function qj() {
  var y

  var x = 'x' + y
  console.log(x) //xundefined
  var y = 'y'
}

这个是在 JavaScript 建立之初就存在的特性。

养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码维护

function f() {
  var x = 1,
    y = x + 1,
    z,
    i
  //之后随意用
}

全局函数

//全局变量
var x = 1
function f() {
  console.log(x)
}
f()
console.log(x)

全局对象 window

1
2
3

var x = 'xxx'
alert(x)
alert(window.x) //默认所有的全局变量，都会自动绑定在window对象下

alert()这个函数本身也是一个window变量

var x = 'xxx'
window.alert(x)
var old_alert = window.alert
// old_alert(x);
window.alert = function () {}
//发现alert() 失效了
window.alert(123)

//恢复
window.alert = old_alert
window.alert(456)

JavaScript 实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错ReferenceError

规范

由于我们所有的全局变量都会绑定到我们的 window 上。如果不同的 js 文件，使用了相同的全局变量，就会冲突

如何减少冲突？

//唯一全局变量
var jingApp = {}

//定义全局变量
jingApp.name = 'jingge'
jingApp.add = function (a, b) {
  return a + b
}

把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题~

比如 jQuery 就是这么干的

局部作用域 let

function f() {
  for (var i = 0; i < 100; i++) {
    console.log(i)
  }
  console.log(i + 1) //问题？ i出了这个作用域还可以使用
}
f()

ES6 let关键字，解决局部作用域冲突问题

function f() {
  for (let i = 0; i < 100; i++) {
    console.log(i)
  }
  console.log(i + 1) //问题？ i出了这个作用域还可以使用
}
f()

建议都是用 let 去定义局部作用域的变量

常量 const

在 ES6 之前，怎么定义常量：只有用全部大写字母命名的变量就是常量。没用！还是可以改变的！

在 ES6 引入了常量关键字 const

const PI = 3.14 //只读变量
console.log(PI)
PI = 123 //报错 Uncaught TypeError: invalid assignment to const 'PI'
console.log(PI)

方法

定义方法

方法就是把函数放在对象里面，对象只有两个东西：属性和方法

var jingge = {
  name: 'jingge',
  birth: 1997,
  age: function () {
    var now = new Date().getFullYear()
    return now - this.birth
  },
}
//属性
jingge.name
//方法，一定要带 ()
jingge.age()

this 代表什么？拆开上面的代码看看！

function getAge() {
  var now = new Date().getFullYear()
  return now - this.birth
}

var jingge = {
  name: 'jingge',
  birth: 1997,
  age: getAge,
}

//jingge.age()   23
//getAge()  NaN

this 是无法指向的，默认指向调用它的那个对象

apply

在 js 中可以控制 this 指向，所有对象都有这个方法

1	getAge.apply(jingge, [])

内部对象

标准对象

typeof 123 //"number"
typeof '123' //"string"
typeof true //"boolean"
typeof NaN //"number"
typeof [] //"object"
typeof {} //"object"
typeof undefined //"undefined"
typeof null //"object"
typeof Math.abs //"undefined"

Date

var now = new Date() //Sun Dec 13 2020 13:32:16 GMT+0800 (中国标准时间)
now.getFullYear() //年
now.getMonth() //月  0~11代表月份
now.getDate() //日
now.getDay() //星期几
now.getHours() //时
now.getMinutes() //分
now.getSeconds() //秒
now.getTime() //时间戳 全世界统一  1970 1.1 0:00:00
console.log(new Date(1607837769376)) //时间戳转为时间
console.log(now.toLocaleString()) //2020/12/13 下午1:39:55

JSON

json 是什么

早期，所有数据传输习惯使用 xml 文件。

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。

简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。

易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在 JavaScript 一切皆为对象，任何 js 支持的类型都可以用 JSON 来表示

格式：

对象都用 {}

数组都用 []

所有的键值对，都使用 key:value

JSON 字符串和 JS 对象的转化

//对象
var user = {
  name: 'lijing',
  age: 23,
  sex: '男',
}

//对象转化为json字符串
var jsonUser = JSON.stringify(user) // {"name":"lijing","age":23,"sex":"男"}
//json字符串转化为对象，参数为json字符串
var obj = JSON.parse('{"name":"lijing","age":23,"sex":"男"}')

很多人搞不清楚，JSON 和 JS 对象的区别

1 2	var obj = { a: 'helloa', b: 'hellob' } var json = '{"a":"helloa","b":"hellob"}'

Ajax

原生的 js 写法 xhr 异步请求

jQuery 封装好的方法 $.ajax(…)

axios 请求

面向对象编程

什么是面向对象

JavaScript、Java、C#……面向对象，JavaScript 有些区别

类：模板

对象：具体的实例

在 JavaScript 需要换一下思维方式！

原型：

var user = {
  name: 'user',
  age: 23,
  run: function () {
    console.log(this.name + ' run...')
  },
}

var jinggege = {
  name: 'jinggege',
}

//jinggege.run()//Uncaught TypeError: jinggege.run is not a function

//原型对象，相当是个父类
jinggege.__proto__ = user
jinggege.run() //jinggege run...

class 继承

以前的写法：

function Student(name) {
  this.name = name
}
//js万物皆对象，这里的函数也是一个对象，函数才有prototype
//给Student新增一个方法
Student.prototype.hello = function () {
  alert('hello')
}
new Student().hello()

class关键字，是在 ES6 引入的

1、定义一个类：属性、方法

//ES6之后
//定义一个学生的类
class Student {
  constructor(name) {
    this.name = name
  }

  hello() {
    alert(this.name + ',hello')
  }
}

var lijing = new Student('lijing')
var lihui = new Student('lihui')
lijing.hello()
lihui.hello()

2、继承

class Student {
  constructor(name) {
    this.name = name
  }

  hello() {
    alert(this.name + ',hello')
  }
}

//继承
class XiaoStudent extends Student {
  constructor(name, grade) {
    super()
    this.grade = grade
  }

  myGrade() {
    alert('我是一名小学生')
  }
}

var lijing = new Student('lijing')
var lihui = new Student('lihui')
lijing.hello()
lihui.hello()
var xiaohong = new XiaoStudent('xiaohong', 1)
xiaohong.myGrade()

本质：查看对象原型

原型链

__proto__

操作 BOM 对象（重点）

浏览器介绍

JavaScript 和浏览器关系？

JavaScript 诞生就是为了能够让它在浏览器中运行！

BOM：浏览器对象模型

window（重要）

window 代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
145
window.innerWidth
1564
window.outerHeight
860
window.outerWidth
1579

Navigator（不建议使用）

Navigator 封装了浏览器的信息

navigator.appName
;('Netscape')
navigator.appVersion
;('5.0 (Windows)')
navigator.userAgent
;('Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:83.0) Gecko/20100101 Firefox/83.0')
navigator.platform
;('Win32')

大多数情况我们不会使用 Navigator对象，因为会被人为修改！

不建议使用这些属性来判断和编写代码！

screen

代表屏幕尺寸

screen.height
1800
screen.width
3200

location（重要）

location 代表页面的 URL 信息

host: "www.baidu.com" //主机
href: "https://www.baidu.com/" //地址
protocol: "https:" //协议
reload: function reload() //刷新网页
//设置新的地址
location.assign("http://xiaojinggege.gitee.io/")

document

document 代表当前的页面，HTML DOM 文档树

document.title
;('百度一下，你就知道')
document.title = '晶哥哥'
;('晶哥哥')

获取具体的文档树结点

获取 cookie

1	document.cookie

劫持 cookie 原理

1 2	<script src="xx.js"></script> <!--恶意人员，获取你的cookie上传到他的服务器-->

服务器端可以设置 cookie：httpOnly，保证安全性

history

1 2	history.back() //后退 history.forward() //前进

操作 DOM 对象（重点）

DOM：文档对象模型

核心

浏览器网页就是一个 dom 树形结构！

更新：更新 dm 节点

遍历 dom 节点：得到 dom 节点

删除：删除一 dom 节点

添加：添加一个新的节点

要操作一个dom节点，就必须要先获得这个dom节点

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>获得dom节点</title>
  </head>
  <body>
    <div id="father">
      <h1>标题一</h1>
      <p id="p1">p1</p>
      <p class="p2">p2</p>
    </div>

    <script>
      //对应css选择器
      var h1 = document.getElementsByTagName('h1')
      var p1 = document.getElementById('p1')
      var p2 = document.getElementsByClassName('p2')
      var father = document.getElementById('father')
      var childrens = father.children //获取父节点下的所有子节点
      // father.firstChild
      // father.lastChild
    </script>
  </body>
</html>

这是原生代码，之后我们尽量都是使用 jQuery

更新节点

<div id="id1"></div>
<script>
  var id1 = document.getElementById('id1')
</script>

操作文本：

1 2	id1.innerText = '123' id1.innerHTML = '<h1>lijing</h1>'

操作 js：

1
2
3

id1.style.color = 'red'
id1.style.fontSize = '100px' // _ 转 驼峰命名问题
id1.style.padding = '2em'

删除节点

删除节点的步骤：先获取父节点，再通过父节点删除自己

<div id="father">
  <h1>标题一</h1>
  <p id="p1">p1</p>
  <p class="p2">p2</p>
</div>

<script>
  var p1 = document.getElementById('p1')
  var father = p1.parentElement //获取父节点
  father.removeChild(p1)

  //删除是一个动态的过程
  father.removeChild(father.children[0])
  father.removeChild(father.children[0])
  father.removeChild(father.children[0])
</script>

注意：删除多个节点的时候，children 是在时刻变化的，删除节点的时候一定要注意！

插入结点

我们获得了某个 dom 节点，假设，这个 dom 节点是空的，我们通过 innerHTML 就可以增加一个元素了。

如果这个 dom 节点已经存在元素了，我们就不能这么干了，因为会覆盖。

追加：

<p id="js">javascript</p>
<div id="list">
  <p>javase</p>
  <p>javaee</p>
  <p>javame</p>
</div>

<script>
  var js = document.getElementById('js')
  var list = document.getElementById('list')
  list.appendChild(js) //追加到后面
</script>

效果：

创建一个新的标签，实现插入

<script>
  var js = document.getElementById('js')
  var list = document.getElementById('list')
  // list.append(js) //追加到后面
  //通过js创建一个新的节点
  var newP = document.createElement('p') //创建一个p标签
  newP.id = 'newP'
  newP.innerText = 'hello,jinggege'
  list.appendChild(newP)

  //创建一个标签节点，通过这个属性，可以设置任意的值
  var myScript = document.createElement('script')
  myScript.setAttribute('type', 'text/javascript')
  list.appendChild(myScript)

  //返回值是个集合
  var body = document.getElementsByTagName('body')
  body[0].style.backgroundColor = 'red'
</script>

insertBefore

var js = document.getElementById('js')
var ee = document.getElementById('ee')
var list = document.getElementById('list')
//将js插入到ee前面   insertBefore(newNode,targetNode)
list.insertBefore(js, ee)

操作表单（验证）

表单是什么 form DOM 树的一个节点

文本框 text

下拉框 select

单选框 radio

多选框 checkbox

隐藏域 hidden

密码框 password

……

表单的目的：提交信息

表单绑定提交事件：

<form action="" method="post" onsubmit="return f()"></form>

<script>
  function f(){
      ...
  }
</script>

jQuery（简单讲解）

jQuery 库，里面存在大量的 JavaScript 函数

引入及简单使用

去猫云搜索相关版本：https://www.bootcdn.cn/jquery/

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>初识jQuery</title>
    <!--cdn引入-->
    <!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>-->
    <!--外部引入-->
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
  </head>
  <body>
    <!-- 公式：$(selector).action() -->
    <a href="" id="test_jquery">点我</a>
    <script>
      //选择器就是css的选择器
      $('#test_jquery').click(function () {
        alert('hello,jquery')
      })
    </script>
  </body>
</html>

选择器

查看 jQuery 中文文档：https://jquery.cuishifeng.cn/

根据文档学习！！！

//原生js，选择器少，麻烦不好记
//标签
document.getElementsByTagName()
//id
document.getElementById()
//类
document.getElementsByClassName()

//jQuery css中的选择器他全部都能用
$('p').click() //标签选择器
$('#id1').click() //id选择器
$('.class1').click() //class选择器

事件

鼠标事件，键盘事件，其他事件

鼠标事件

$('#xxx').mousedown()
$('#xxx').mousemove()
$('#xxx').mouseenter()
$('#xxx').mouseleave()
$('#xxx').mouseout()
$('#xxx').mouseover
$('#xxx').mouseup()

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>事件</title>
    <script src="js/jquery-3.4.1.js"></script>
    <style>
      #divMove {
        width: 500px;
        height: 500px;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <!--要求：获取鼠标当前的一个坐标-->
    mouse：<span id="mouseMove"></span>
    <div id="divMove">在这里移动鼠标试试</div>
    <script>
      /* $('#xxx').mousedown()
     $('#xxx').mousemove()
     $('#xxx').mouseenter()
     $('#xxx').mouseleave()
     $('#xxx').mouseout()
     $('#xxx').mouseover
     $('#xxx').mouseup()*/
      $(document).ready(function () {})
      //简写
      //当网页元素加载完毕之后，响应事件
      $(function () {
        $('#divMove').mousemove(function (e) {
          $('#mouseMove').text('x:' + e.pageX + ' y:' + e.pageY)
        })
      })
    </script>
  </body>
</html>

其他事件根据文档学习！！！

操作 dom

节点文本操作

$('#test-ul li[name=python]').text() // 获得值
$('#test-ul li[name=python]').text('123') // 设置值
$('#test-ul').html() // 获得值
$('#test-ul').html('<strong>hello</strong>') // 设置值

css 操作

//将所有段落字体设为红色
$('p').css('color', 'red')
//将所有段落的字体颜色设为红色并且背景为蓝色
$('p').css({ color: '#ff0011', background: 'blue' })

元素的显示和隐藏

本质：display : none

1 2	$('#test-ul').show() //显示 $('#test-ul').hide() //隐藏

娱乐测试

1
2
3

$(window).width()
$(window).height()
$('#test-ul').toggle() //显示就变为隐藏，隐藏就变为显示

ajax

查看文档https://jquery.cuishifeng.cn/，根据文档学习！！

小技巧

如何巩固 JS（看 jQuery 源码，看游戏源码）

巩固 HTML，CSS（扒网站，全部 down 下来，然后对应修改看效果）

本文作者： LiJing
发布时间： 2020-12-12
最后更新： 2024-06-24
本文标题： Javascript详解
本文链接： https://blog-yilia.xiaojingge.com/posts/499a487a.html
版权声明： 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处！