Web
脚本语言
JS
- ES（语法）
- BOM（对象模型）
- DOM（文档对象模型）
代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="bar">bar</button>
<input type="text" value="HQSY" id="input">
<div><p>p</p></div>
<div id="div">
<p>p<br></p>
<p>p</p>
<p>p</p>
</div>
<h1 class="foo">h1</h1>
<input type="text" name="inputFoo">
<a href="" id="a">超链接</a>
<div id="InDiv"></div>
<table>
<tr></tr>
</table>
<input type="text" id="keycode">
<button id="request">发出请求</button>
<script type="text/javascript"> // type（告诉浏览器这是一个JavaScript脚本，可省略）
var foo = 1 // 定义一个函数作用域的变量
window.alert('Hello World!') // window为浏览器内置的一个预加载对象（alert：弹窗提示）
let bar = document.getElementById('bar') // document为整个页面源码的一个对象（getElementById：通过ID拿到指定标签，let：定义一个块级作用域的变量）
// JS中的每个标签都是一个对象，通过';'分隔代码（省略则一行只能写一条代码）
bar.addEventListener('click', function () { // 花括号里的叫块级作用域
window.alert('bar')
bar.style.display = 'none' // 样式变化
})
/*
1. addEventListener
· 添加一个事件监听器
1. click
· 鼠标点击时
2. mouseover
· 鼠标悬停时
3. mouseout
· 鼠标脱离悬停状态
4. mousemove
· 鼠标每移动一像素
5. keypress
· 一次完整的键盘按键敲击
6. keydown
· 按下键盘按键
7. keyup
· 松开键盘按键
8. load
· 页面资源全部加载完毕
*/
// bar.removeEventListener('click', 函数名字)（removeEventListener：移除指定事件监听器，不能移除匿名函数）
if (1) {
console.log('if') // 控制台打印输出（console：浏览器内置的控制台调试对象）
} else {
console.log('else')
}
if (1) {
console.log('if')
} else if (1) {
console.log('else if')
}
do {
console.log('do')
} while (1 > 2)
let foo01 = (100 % 4 === 0 && 100 % 100 !== 0) || (100 % 400 === 0)
// ==、!=：有底层自动类型转换比较，===、!==：无底层自动类型转换比较
let bar01 = foo01 ? 'True' : 'False'
console.log(bar01)
window.confirm('确定?') // 弹出一个确认框
window.prompt('请输入：') // 弹出一个输入框
let ran = Math.random() // 产生一个[0,1)之间的随机数（Math：数学对象）
const Hoo = 1 // 定义一个常量（值不会变化的量）
let ty = typeof Hoo
console.log(ty) // 判断数据类型
let no = typeof null
console.log(no) // 返回值为object（历史遗留的底层BUG）
let c = undefined // 未定义的变量
let d = [2, 1, 3] // 一组数组
d.push(4) // 追加元素
d.length // 返回字符串或数组的元素个数
d.splice(2, 1, 6) // 移除1个下标为2的元素并补上元素6
d.sort(function (x, y) { // 排除规则（sort：数据排序，如果省略规则默认以字符进行排序）
return x - y
})
// d.sort((x, y) => x - y)（箭头函数，匿名函数）
let e = Symbol() // 符号
let f = Number(Math.random()) * 6 + 1
switch (f) {
case 1:
console.log('1')
break
case 2:
console.log('2')
break
default:
console.log('HQSY')
}
let g = [1, 2, 3]
for (let i = 0; i < g.length; i += 1) {
let num = g[i]
document.write(`<p class="foo">${num}</p>`) // write：往文档中写入指定内容（使用反引号以使用占位符、折行、实体替换符）
}
g.forEach(item => console.log(item)) // 循环遍历
function hoo(item) {
console.log(item)
}
g.forEach(item => {
hoo && hoo(item) // 防止undefined
})
let DT = new Date() // 创建一个时间对象
let DT01 = DT.getFullYear() // 拿到年份
let DT02 = DT.getMonth() + 1 // 拿到月份（0 ~ 11）
let DT03 = DT.getDate() // 拿到日期
let DT04 = DT.getHours() // 拿到小时
let DT05 = DT.getMinutes() // 拿到分钟
let DT06 = DT.getSeconds() // 拿到秒
let DT07 = DT.getDay() // 拿到星期（0 ~ 6）
bar.textContent = 'HQSY' // 修改标签里有关文本的内容（纯文本，会省略掉标签）
let list01 = []
window.setInterval(() => {
list01.push(1)
if (list01.length <= 3) {
console.log(list01)
}
}, 3000) // 每隔3秒钟执行一次函数（毫秒）
let re = /\d+/ // 创建匹配条件
// let re = new RegExp('\d+') // RegExp：创建匹配条件
if (re.test('1024')) { // test：是否匹配正则
console.log('匹配成功')
}
let re01 = /\d+/g
// let re01 = new RegExp('\d+','g')
re.exec('1024') // exec：返回一个正则匹配的字符串（返回值：Array或null，无论是否带'g'，只返回一个结果）
'1024'.match(re) // match：返回多个正则匹配的字符串（返回值：Array或null，带'g'返回多个，不带'g'只返回一个）
'1024'.matchAll(re01) // 返回多个结果的迭代器（返回值：迭代器，需要带'g'）
'1024'.search(re) // 返回一个匹配结果的下标（返回值：正整数或-1）
'2024'.replace('20', '10') // 替换一次指定的字符串
'1024'.replace(re, 'HQSY') // 替换匹配正则的字符串
'10|24'.split('|', 1) // 拆分字符串（'|'：分隔符，1：拆分次数）
let UserInput = document.getElementById('input').value.trim() // value：获取用户输入的内容，trim：去掉两边空格
console.log(UserInput)
/*
1. 正则表达式
· 在指定字符前加上'\'以防止转译
2. 搜索范围
· g（全局）
· i（不区分大小写）
· m（多行）
· s（允许'.'匹配换行符）
· u（使用'Unicode'码模式）
· y（从目标字符串的当前位置开始）
*/
const MyClass = { // 对象表达式（创建对象的字面量语法）
name: '黑崎时雨', // 属性
age: 24,
eat: function () {
alert(`${this.name}今年${this.age}岁了`)
}
}
MyClass.eat && MyClass.eat()
function Fun01(name, age) { // 构造器函数
this.name = name // 属性（一般把属性放在里面，方法独立在外）
this.age = age
// this.eat = function () {
// alert(`${this.name}今年${this.age}岁了`)
// }
}
let fun02 = new Fun01('黑崎时雨', 24)
// fun02.eat && fun02.eat()
Fun01.prototype.eat = function () { // prototype：原型对象
alert(`${this.name}今年${this.age}岁了`)
}
fun02.eat && fun02.eat()
class Foo {
constructor(name, age) { // constructor：创建类属性
this.name = name // 属性
this.age = age
}
eat() { // 方法
alert(`${this.name}今年${this.age}岁了`)
}
}
let Foo01 = new Foo('黑崎时雨', 24) // 创建对象
Foo01.eat && Foo01.eat() // 调用对象方法
const TN = document.getElementsByTagName('div')[0].firstChild // 拿到所有指定的标签（返回值：Array，[0]：只拿取第一个标签）
// firstChild：拿到指定标签下的第一个子标签（如果有回车则只会取到回车文本）
const CN = document.getElementsByClassName('foo')[0] // 拿到所有指定类名的标签（返回值：Array）
const Name = document.getElementsByName('inputFoo') // 拿到所有指定元素名称的标签（返回值：Array）
const BID = document.getElementById('div').children[0] // children：拿到指定标签下的所有子标签（不会拿到回车）
const QS = document.querySelector('#div > p').previousSibling.nextSibling // querySelector：通过选择器拿到一个指定标签
// previousSibling：拿到指定标签的前兄弟标签（会取到回车），nextSibling：拿到指定标签的后兄弟标签（会取到回车）
const QA = document.querySelectorAll('#div > p')[0].parentNode // querySelectorAll：通过选择器拿到所有指定的同名标签
// parentNode：拿到指定标签的父标签
const ES = document.getElementById('div').previousElementSibling.nextElementSibling
// previousElementSibling：拿到指定标签的前兄弟标签（不会取到回车），nextElementSibling：拿到指定标签的后兄弟标签（不会取到回车）
// 遍历下标归零方法：foo %= bar.length
let abc = window.setInterval(() => {
console.log('abc')
}, 1000)
clearInterval(abc) // clearInterval：清除定时器
// foo.MyBool = !foo.MyBool（功能取反）
// hoo.style.backgroundColor = foo.MyBool?'red':'green'（JS动态修改样式）
/*
1. 使用var定义块级变量后（特别是循环）
· 当代码被加载时，循环已经全部执行完毕（导致变量的值不正确）
2. 用let定义块级变量后，就没有这个问题
· ES旧版本没有let的BUG
// 以前版本的解决办法：使用回调函数（绑定事件时传入的函数称之为回调函数，不触发事件时函数永远不会执行）
var MyList = document.getElementById('div').children
for (var i = 0; i < MyList.length; i += 1) {
MyList[i].addEventListener('click', function (evt) { // evt：发生事件时传入的参数对象
evt.target.style.backgroundColor = 'red' // target：事件源
})
}
*/
let MyHTML = document.getElementById('div').innerHTML = `<p>HQSY</p><p>HQSY</p><p>HQSY</p>`
// innerHTML：修改HTML内容（包含文本）
let MyText = document.getElementById('div').firstChild.innerText = 'foo' // innerText：修改纯文本内容（包含标签）
const MyP = document.querySelector('#div')
let MyChild = MyP.removeChild(MyP.firstChild) // 删除指定标签下的子标签
console.log(MyChild) // 删除成功则返回对应标签，否则返回null
const Mya = document.getElementById('a')
Mya.addEventListener('click', (evt)=>{
evt.preventDefault() // preventDefault：取消事件的默认行为
})
const InDiv = document.getElementById('InDiv')
const InP = document.createElement('p') // createElement：创建一个指定标签对象
InP.textContent = 'foo'
InDiv.appendChild(InP) // appendChild：在指定标签中创建一个指定的子代标签（追加）
const Td = document.createElement('td')
Td.textContent = 'bar'
const Table = document.getElementsByTagName('table')[0]
Table.insertBefore(Td, Table.firstChild) // insertBefore：在指定标签中的指定位置添加指定标签
const Input = document.getElementById('input')
Input.focus() // focus：指定标签获得鼠标焦点
Input.blur() // blur：指定标签失去鼠标焦点
const KeyCode = document.getElementById('keycode')
KeyCode.addEventListener('keypress', (evt) => {
if (evt.key === 'Enter') { // key：键盘按键名称
console.log('Enter')
}
})
/*
1. 异步加载
· 向后台服务器发起获得数据的请求（无阻塞）
2. 局部刷新
· DOM操作对页面元素进行改变
3. 同步加载
· 向后台服务器发起获得数据的请求（有阻塞）
*/
const XML = new XMLHttpRequest() // XMLHttpRequest：异步请求对象
const RQ = document.getElementById('request')
RQ.addEventListener('click', () =>{
XML.open('get', '', true) // open：向指定服务器发送指定请求并返回数据（请求类型 请求URL 是否异步请求）
XML.send(null) // send：发送请求（null：不需要数据体，post请求的时候一定要写数据体）
let ok = null
XML.addEventListener('readystatechange', () => { // readystatechange：状态改变时
if (XML.readyState === 4) { // readyState：请求状态（0：请求未初始化，1：连上了，2：请求已被接收，3：请求处理中，4：请求完成）
if (XML.status === 200 && ok === null) { // status：服务器状态码（2开头：成功，4开头：失败）
ok = 1
window.alert(XML.responseText) // responseText：拿到相应对象的文本
} else {
console.error(`重复获取或请求状态码${XML.status}`)
}
} else {
console.log(`本地状态码${XML.readyState}`)
}
})
})
/*
let MyJSON = JSON.parse(XML.responseText) // 解析字符串，转换为JSON对象（如果字符串不符合JSON格式，那么会转换失败报错）
Ajax请求不需要重载页面，就可以获取指定的数据（分为JSON、XML数据类型）
*/
</script>
<script src=""></script> <!-- src：引入外部js文件 -->
<!--
1. Number
· 任意类型转换为数字（Number包括整型和浮点型）
2. parseInt
· 字符串转换为整型
3. parseFloat
· 字符串转换为浮点型
4. String
· 任意类型转换为字符串
5. Boolean
· 任意类型转换为布尔型
6. 简单数据类型
· String
· Number
· Boolean
· undefined
· Symbol
· null
7. 复杂数据类型
· object
-->
</body>
</html>
jQuery
- 概念
- 第三方辅助开发的JS库
- 符号（对象函数）
- $
代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="button01">按钮01</button>
<button id="button02">按钮02</button>
<p id="p01">p01</p>
<p id="p02">p02</p>
<p id="p03">p03</p>
<p id="p04">p04<button>p04</button></p>
<p id="p05">p05</p>
<p id="p06">p06</p>
<p id="p07">p07</p>
<table id="table">
<tr id="tr">
<td id="td01">td01</td>
<td>td02</td>
<td id="td03">td03</td>
</tr>
</table>
<input type="text" value="input" id="input">
<button id="button03">按钮03<span>span</span></button>
<input type="text" id="in">
<script src="../jQuery/jquery.min.js"></script> <!-- 导入外部JS -->
<script>
$('#button01').on('click', () => { // on：添加事件监听器（可接收事件对象evt）
alert('Hello World!')
$('#button01').off('click') // off：移除事件监听器
})
$('#button02').one('click', () => alert('Hello World!')) // one：事件监听器触发一次就会失效
$('#p01').css('color', 'red') // css：读写样式（一个实参：读样式，两个实参：写样式）
$('#p02').empty() // empty：清空指定标签的HTML内容（包括文本）
$('#p03').remove() // remove：删除指定标签
let Mytext = $('#p04').text() // text：获取修改指定标签的纯文本内容（不包含标签，无实参：读内容，有实参：写内容）
// let Mytext = $('#p04').text('HQSY') // 修改包含的HTML（包括标签）
console.log(Mytext)
let MyHTML = $('#p05').html() // html：获取修改标签的HTML内容（包含标签，无实参：读内容，有实参：写内容）
// let MyHTML = $('#p05').html('p05<button>p05</button>') // 修改包含的HTML（包括标签）
console.log(MyHTML)
$('#p06').fadeOut(3000).fadeIn(3000) // fadeOut：淡出（单位：ms），fadeIn：淡入（单位：ms）
$(document).ready(() => console.log('页面结构加载完毕')) // ready：当页面HTML文件加载完毕时触发的事件
$(window).on('load', () => console.log('页面资源全部加载完毕')) // load：当页面资源全部加载完成时触发的事件
// $(evt.target) // 原生JS转换为jQuery对象
/*
// 规范化代码（防止全局变量，原生JS尽量不要与jQuery代码混着写）
window.addEventListener('load', () => {})
+function () {}() // +：定义及时调用函数（否则不会被调用）
(() => {})()
$(document).ready(() => {})
$(() => {})
*/
$('#p04 > button').parent() // parent：拿到指定标签对象的父标签
$('#p07').remove() // remove：删除指定标签对象
$('#button03').on('click', () => alert('button03'))
$('#button03 > span').on('click', (evt) => {
alert('span')
evt.stopPropagation() // stopPropagation：防止事件冒泡到父事件
})
/*
// '$'函数的用法
1. 函数的参数是一个匿名函数或箭头函数（页面加载完毕后执行的回调函数）
· $(() => {$('').on('click', () => {})})
2. 函数的参数是一个选择器（样式表，获取页面元素，得到一个jQuery对象）
· $('')
3. 函数的参数是一个标签字符串（创建一个新的元素，并获得对应的jQuery对象）
· $('<li>')
4. 函数的参数是一个原生JS对象（返回原生JS对象对应的jQuery对象）
· $(evt.target)
*/
// $('#td03').prev() // prev：返回一个标签对象的前兄弟标签
// $('#td03').prevAll() // prevAll：返回全部标签对象的前兄弟标签
// $('#td01').prevUntil('#td03') // prevUntil：返回两个标签对象之间的所有兄弟标签
// $('#input').val().trim() // val：拿到标签对象的值（用户输入的内容），trim：去掉前后空格
// $('#td01').append(`<td>td</td>`) // append：标签对象下追加后兄弟标签
// $('#td01').prepend(`<td>td</td>`) // append：标签对象上追加前兄弟标签
console.log($('#td01').get(0)) // get：拿到标签对象的DOM元素
// $('#input').on('focus', () => {}) // focus：标签对象获得焦点时发生的事件
// $('#input').on('blur', () => {}) // blur：标签对象失去焦点时发生的事件
$.getJSON('', (json) => { // getJSON：向指定服务器发送get请求，并返回JSON数据对象（拿到的直接是json对象）
console.log(json) // 内容必须符合JSON格式
})
$('#in').attr('value', 'test') // attr：向指定标签对象添加属性
$.ajax({
'url': '', // 请求的URL
'type': '', // 请求的类型
'data': {}, // 请求的数据
'datatype': '', // 请求的数据类型格式
'headers': {}, // 请求头
'success': (json) => {}, // 请求成功后的操作
'error': (json) => {} // 请求失败后的操作
})
</script>
</body>
</html>