-
javaScript基础
🍓书写位置
- 📌行内样式：需要依赖行为（不推荐）
- 🍁
a标签：书写在href属性上
href="javascript: alert('Hello world!');" - 🍁非
a标签：书写在行为属性上
onclick="javascript: alert('Hello Mike!')"
- 🍁
- 📌内嵌式：不需要依赖任何行为，页面打开直接执行
- 📌外链式：不需要依赖任何行为，页面打开直接执行
📝案例：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>javaScript书写位置title> <script src="./js/demo.js">script> head> <body> <a href="javascript: alert('Hello world!');">点我一下a> <div onclick="javascript: alert('Hello Mike!')">点我一下div> <script> //内嵌式 alert('Hello Nancy!') script> body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
🍓输出
//弹出层输出 alert('Hello world!') //控制台输出 console.log('Hello Tom!') //页面输出 document.write('Hello Mike!')- 1
- 2
- 3
- 4
- 5
- 6
🍓数据类型
javaScript数据类型：- 📌基本数据类型：
- 🍁数值类型(
number)：- 🌷整数
- 🌷小数
- 🌷科学计数法
- 🌷十六进制
- 🌷八进制
- 🌷二进制
- 🍁字符串类型(
string)：使用双引号或者单引号包裹 - 🍁布尔类型(
boolean)：- 🌷true
- 🌷false
- 🍁空类型：
- 🌷
null (object) - 🌷
undefined(undefined)
- 🌷
- 🍁数值类型(
- 📌对象数据类型
详见《javaScript面向对象》
获取数据类型的函数：
获取数据的基本类型：typeof
📝基础数据类型案例：// 整数 number var num1 = 1; var num2 = -1; // 小数 number var num3 = 0.5 var num4 = -0.5; // 科学计数法 number var num5 = 2e5; //2 * 10^5 // 十六进制 number var num6 = 0x001; // 八进制 number var num7 = 0o001; // 二进制 number var num8 = 0b001; // 字符串 string var str1 = 'Hello world!'; var str2 = "Hello Tom!"; // 布尔类型 boolean var flag1 = true; var flag2 = false; // 空类型 var a1 = null; var a2 = undefined; console.log(typeof a2);- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
📝对象数据类型案例：
定义对象： var obj = {} 对象的操作： 增 增加一个key： 方式一：obj.hobby = 'play footBall' 方式二：obj['hobby'] = 'play footBall' 删 删除一个key： 方式一：delete obj.hobby 方式二：delete obj['hobby'] 改 根据key修改值： 方式一：obj.sex = 'girl' 方式二：obj['sex'] = 'girl' 查 根据key查询值： 方式一：obj.sex 方式二：obj['sex']- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
🍓数据类型转换
- 📌转换为数字：
- 🍁
Number(var)如果转换失败，返回NaN - 🍁
parseInt(var)可以转换以数字开头的字符串，遇到小数直接抹去小数位，如果转换失败，返回NaN - 🍁
parseFloat(var)可以转换以数字开头的字符串，如果转换失败，返回NaN
- 🍁
- 📌转换字符串：
- 🍁
String(var) - 🍁
var.toString()
- 🍁
- 📌转换boolean
- 🍁
Boolean(var)0、NaN、''、undefined、null转换为boolean时为false
- 🍁
🍓运算符
- 📌算术运算符：
+、-、*、/、% - 📌赋值运算符：
=、+=、-=、*=、/=、%= - 📌比较运算符：
>、<、>=、<=、==、===、!=、!== - 📌逻辑运算符：
&&、||、! - 📌自增自减运算符：
++、--
🍓条件分支语句
if(){} else {} if(){} else if(){} else{} switch(){ case 选项1: 代码内容 break; case 选项2: 代码内容 break; default: 默认内容 }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
🍓循环语句
while(){ } do { } while() for(;;)- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
🍓函数
- 📌定义函数
function 函数名(形参) { xxx return xxx; }- 1
- 2
- 3
- 4
- 📌调用函数
函数名(实参) - 📌函数可以嵌套，即函数中可以继续定义函数
- 📌函数的内部隐藏对象：
arguments，类型数组，里面的函数的形参
🍓数组
- 📌创建数组
var arr = [1, 2, 3, 4]; - 📌数组的操作：
- 🍁获取数组的长度：
arr.length - 🍁修改数组长度：
arr.length = 3 - 🍁清空数组：
arr.length = 0 - 🍁根据下标输出值：
arr[2] - 🍁根据下标设置值：
arr[2] = 5;
- 🍁获取数组的长度：
- 📌遍历数组：
for(var i = 0; i < arr.length; i++) { console.log(arr[i]) }- 1
- 2
- 3
- 📌数组常用的方法：
- 🍁
arr.push(val)
作用： 向数组的末尾添加成员
返回值： 为数组的最新长度 - 🍁
arr.pop()
作用： 删除数组的最后一个数据
返回值： 被删除的数据 - 🍁
arr.unshift(val)
作用： 向数组的最前面添加成员
返回值： 为数组的最新长度 - 🍁
arr.shift()
作用： 删除数组最前面的一个数据
返回值： 被删除的数据 - 🍁
arr.reverse()
作用： 将数组反转
返回值： 返回新数组 - 🍁
arr.splice(起始索引(默认值0),删除个数(默认值0)，要插入的数据(默认值空))
作用： 从指定索引开始删除数组中指定个数的数据，然后插入新的数据
返回值： 被删除的数据作为一个新数组返回 - 🍁
arr.sort(function(a, b) {return a - b})
arr.sort(function(a, b) {return b - a})
作用： 将数组进行排序
返回值： 返回排序好的新数组 - 🍁
arr.join(连接符)
作用： 将数组使用连接符拼接成一个字符串
返回值： 返回拼接的字符串 - 🍁
arr.concat(arr2)
作用： 将数组与其他数组拼接在一起
返回值： 返回拼接的新数组 - 🍁
arr.slice(开始索引（默认值0）,结束索引（默认值数组长度）)
作用： 截取数组中的一段数据
返回值： 返回被截取的数据的新数组 - 🍁
arr.indexof(val)
作用： 返回val的第一次出现的索引，没有返回-1 - 🍁
arr.forEarch(function(item,index,arr){})
作用： 遍历数组
函数：
item：数组遍历的当前成员
index：数组遍历的当前索引
arr：原始数组 - 🍁
arr.map(function(item,index,arr){})
作用： 对数组中的每个成员进行加工，映射成一个新的数组
返回值： 返回加工后映射的新数组 - 🍁
arr.filter(function(item,index,arr){return true})
作用： 对数组中的每个成员进行条件过滤，过滤出新的数组
返回值： 返回过滤后的新数组 - 🍁
arr.every(function(item,index,arr){return true})
作用： 判断数组的每一项是不是都满足条件
返回值： 返回boolean值 - 🍁
arr.some(function(item,index,arr){return true})
作用： 判断数组是不是有一项可以满足条件
返回值： 返回boolean值
- 🍁
🍓字符串
字符串的索引从0开始计数
字符串常用的方法：- 📌
str.charAt(index)
作用： 获取对应索引位置的字符
返回值： 对应索引位置的字符 - 📌
str.toLowerCase()
作用： 字符串转小写
返回值： 返回新的小写字符串 - 📌
str.toUpperCase()
作用： 字符串转大写
返回值： 返回新的大写字符串 - 📌
str.replace(str1, str2)
作用： 将字符串中第一个匹配str1的位置替换为str2
返回值： 返回替换后新的字符串 - 📌
str.trim()
作用： 去除字符串两端空格
返回值： 返回去除两端空格后的字符串 - 📌
str.split(分隔符)
作用： 按照分隔符拆分字符串
返回值： 返回拆分后的字符串数组 - 📌
str.substr(startIndex, count)
作用： 从startIndex索引开始截取count个数的字符
返回值： 返回截取出来的字符串 - 📌
str.substring(startIndex, endIndex) - 📌
str.slice(startIndex, endIndex)
作用： 从startIndex索引开始截取到endIndex索引
返回值： 返回截取出来的字符串
🍓数字
数字常用的方法：
- 📌
Math.random()
作用： 获取[0, 1)之间的随机小数
返回值： 返回[0, 1)之间的随机小数 - 📌
Math.round(num)
作用： 对num进行四舍五入取整
返回值： 返回四舍五入后的整数 - 📌
Math.ceil(num)
作用： 对num进行向上取整
返回值： 向上取整后的整数 - 📌
Math.floor(num)
作用： 对num进行向下取整
返回值： 向下取整后的整数 - 📌
Math.pow(底数， 指数)
作用： 取幂计算
返回值： 返回取幂计算后的结果 - 📌
Math.sqrt(num)
作用： 对num进行二次根运算
返回值： 返回二次根运算的结果 - 📌
Math.abs(num)
作用： 对num取绝对值
返回值： 返回绝对值结果 - 📌
Math.max(num1, num2, num3,...numn)
作用： 对一堆数组中的数字取最大值
返回值： 返回最大值 - 📌
Math.min(num1, num2, num3,...numn)
作用： 对一堆数组中的数字取最小值
返回值： 返回最小值 - 📌
Math.PI
作用： 返回一个近似π的值
🍓时间
- 📌时间对象的创建：
- 🍁创建当前时间对象
var time = new Date() - 🍁创建指定时间节点的时间对象
var time = new Date(year, month, day, hour, min, second)
- 🍁创建当前时间对象
- 📌时间常用的方法：
- 🍁获取：
- 🌷
time.getFullYear()
作用： 获取时间对象中的年份信息 - 🌷
time.getMonth()
作用： 获取时间对象中的月份信息 - 🌷
time.getDate()
作用： 获取时间对象中的日期信息 - 🌷
time.getHours()
作用： 获取时间对象中的小时信息 - 🌷
time.getMinutes()
作用： 获取时间对象中的分钟信息 - 🌷
time.getSeconds()
作用： 获取时间对象中的秒钟信息 - 🌷
time.getDay()
作用： 获取时间对象中的星期信息，0-6表示周日到周六 - 🌷
time.getTime()
作用： 获取时间对象中的时间戳
- 🌷
- 🍁设置：
- 🌷
time.setFullYear(year)
作用： 设置时间对象中的年份信息 - 🌷
time.setMonth(month)
作用： 设置时间对象中的月份信息 - 🌷
time.setDate(date)
作用： 设置时间对象中的日期信息 - 🌷
time.setHours(hour)
作用： 设置时间对象中的小时信息 - 🌷
time.setMinutes(min)
作用： 设置时间对象中的分钟信息 - 🌷
time.setSeconds(second)
作用： 设置时间对象中的秒钟信息 - 🌷
time.setTime(times)
作用： 设置时间对象中的时间戳
- 🌷
- 🍁获取：
🍓BOM操作
- 📌
window对象为浏览器隐藏对象，可以省略 - 📌获取浏览器窗口尺寸：
窗口可视宽度：window.innerWidth
窗口可视高度：window.innerHeight - 📌浏览器弹出层：
window.alert('提示信息')：提示弹出框，无返回值，单纯提示
window.confirm('询问信息')：询问弹出框，有返回值，返回boolean
window.prompt('输入提示信息')：输入提示弹出框，有返回值，返回用户输入的内容 - 📌开启和关闭：
window.open(地址)：打开一个新的页签访问该地址
window.close()：关闭当前页签 - 📌浏览器常见事件：
- 🍁资源加载完毕事件：
window.onload = function(){} - 🍁可视尺寸改变事件：
window.onresize = function(){} - 🍁滚动条位置改变事件：
window.onscroll = function(){}- 🌷浏览器滚动的高度(存在兼容问题)：
document.documentElement.scrollTop
document.body.scrollTop - 🌷浏览器滚动的宽度(存在兼容问题)：
document.documentElement.scrollLeft
document.body.scrollLeft - 🌷设置浏览器滚动条滚动到：
window.scrollTo(left, top) window.scrollTo({ left:xx, top:xx, behavior:'smooth' })- 1
- 2
- 3
- 4
- 5
- 6
- 🌷浏览器滚动的高度(存在兼容问题)：
- 🍁资源加载完毕事件：
- 📌浏览器历史记录操作：
回退页面：window.history.back()
前进页面：window.history.forward()
🍓定时器
备注：
time是毫秒值- 📌间隔定时器：按照间断时间重复去执行
语法：setInterval(fun, time)
返回值： 表示当前window下定时器的索引，从1开始计数 - 📌延时定时器：按照延时时间去执行一次
语法：setTimeout(fun, time)
返回值： 表示当前window下定时器的索引，从1开始计数 - 📌关闭定时器：
clearInterval(定时器索引)
clearTimeout(定时器索引)
注意： 这两种关闭方法都可以关闭任何定时器，不区分定时器种类
🍓DOM操作
- 📌获取元素对象：
- 🍁
document.getElementById('id')
作用： 根据id获取元素
返回值： 如果有就返回元素，否则返回null - 🍁
document.getElementsByClassName('class')
作用： 根据class类名获取元素
返回值： 返回元素数组，否则返回空数组 - 🍁
document.getElementsByTagName('标签名')
作用： 根据标签名获取元素
返回值： 返回元素数组，否则返回空数组 - 🍁
document.querySelector('选择器')
作用： 根据选择器匹配元素
返回值： 返回第一个匹配到的元素，否则返回null - 🍁
document.querySelectorAll('选择器')
作用： 根据选择器匹配元素
返回值： 返回元素数组，否则返回空数组
- 🍁
- 📌操作元素内容（开标签和闭标签之间的内容）：
- 🍁元素.
innerText
作用： 获取元素内容（不含HTML标签的内容） - 🍁元素.
innerText = ''
作用： 修改元素内容 - 🍁元素.
innerHTML
作用： 获取超文本内容（含HTML标签的内容） - 🍁元素.
innerHTML = ''
作用： 修改元素内容
- 🍁元素.
- 📌操作元素属性
- 🍁原生属性：
- 元素.属性名
作用： 获取元素属性的值 - 元素.属性名 = ‘’
作用： 修改元素属性的值
- 元素.属性名
- 🍁自定义属性：
元素.getAttribute('属性名')
作用： 获取元素属性的值元素.setAttribute('属性名', '属性值')
作用： 给元素添加新的自定义属性并设置值元素.removeAttribute('属性名')
作用： 移除元素的某个自定义属性
- 🍁原生属性：
- 📌操作元素类名（因为
class属于关键字，所以不能作为原生属性名，只能以className作为原生属性名）：- 🍁
元素.className
作用： 获取元素的类型 - 🍁
元素.className = ''
作用： 修改元素的类名
- 🍁
- 📌操作元素行内样式：
- 🍁
元素.style.样式名
作用： 获取元素的样式值 - 🍁
元素.style.样式名 = ''
作用： 修改元素的样式（注意：有些样式比如background-color，在CSS中是带中横线的，但是到js中需要去掉中横线）
- 🍁
- 📌操作元素非行内样式：
window.getComputedStyle(元素).样式名
作用： 获取元素的样式值（宝库行内样式也能获取） - 📌创建节点：
document.createElement('标签名')
作用： 创建一个指定的标签节点
返回值： 返回创建的标签元素 - 📌插入节点：
- 🍁
父节点.appendChild(节点)
作用： 向父节点中插入一个节点作为子节点，并且放在父节点中子节点的最后 - 🍁
父节点.insertBefore(需要插入的节点, 目标子节点)
作用： 向父节点中的目标子节点前面插入需要插入的节点
- 🍁
- 📌删除节点：
父节点.removeChild(子节点)
作用： 从父节点中删除该子节点
节点.remove()
作用： 节点自己删除自己 - 📌替换节点：
父节点.replaceChild(换上节点， 换下节点)
作用： 将父节点中的子节点换下节点替换成换上节点 - 📌节点克隆：
节点.cloneNode(是否克隆后代节点)
作用： 克隆一个和自己一样的节点
返回值： 返回克隆后的新节点 - 📌获取元素的尺寸
- 🍁
元素.offsetHeight
元素.offsetWidth
尺寸包括： 内容大小 + 内边距 +border - 🍁
元素.clientHieght
元素.clientWidth
尺寸包括： 内容大小 + 内边距
- 🍁
🍓事件
- 📌语法：
给元素绑定事件：
元素.on事件类型 = 事件处理函数 - 📌事件类型：
- 🍁鼠标事件：
- 🌷鼠标单击：
click - 🌷鼠标双击：
dblclick - 🌷左键单击：
contextmenu - 🌷鼠标按下：
mousedown - 🌷鼠标抬起：
mouseup - 🌷鼠标移动：
mousemove - 🌷鼠标移入：
mouseover - 🌷鼠标移出：
mouseout - 🌷鼠标移入：
mouseenter - 🌷鼠标移出：
mouseleave
- 🌷鼠标单击：
- 🍁键盘事件：
- 🌷键盘按下：
keydown - 🌷键盘抬起：
keyup - 🌷键盘键入：
keypress
- 🌷键盘按下：
- 🍁浏览器事件：
- 🌷资源加载完毕：
load - 🌷滚动：
scroll - 🌷尺寸改变：
resize
- 🌷资源加载完毕：
- 🍁触摸事件：
- 🌷触摸开始：
touchstart - 🌷触摸结束：
touchend - 🌷触摸移动：
touchmove
- 🌷触摸开始：
- 🍁表单事件：
- 🌷聚焦：
focus - 🌷失焦：
blue - 🌷改变：
change - 🌷输入：
input - 🌷提交：
submit - 🌷重置：
reset
- 🌷聚焦：
- 🍁鼠标事件：
- 📌事件对象：
- 🍁鼠标事件：
- 🌷
offsetX和offsetY（相对于触发事件的元素） - 🌷
clientX和clientY（相对于浏览器可视窗口） - 🌷
pageX和pageY（相对于页面文档流）
- 🌷
- 🍁键盘事件：
- 🌷
keyCode：获取当前操作的键盘码值
- 🌷
- 🍁鼠标事件：
- 📌事件传播：
- 🍁浏览器响应事件机制：
浏览器窗口最先知道事件的发生
捕获阶段：从window开始，按照层级结构传递到目标元素
目标阶段：目标元素准确触发事件并执行行为
冒泡阶段：从目标元素开始，按照层级结构一直向上传递，一直传递到window，本次事件传播结束 - 🍁阻止事件传播：
事件对象.stopPropagation()
- 🍁浏览器响应事件机制：
- 📌事件委托：
根据事件冒泡特性，将事件绑定到自己父级结构的某一层
- 📌行内样式：需要依赖行为（不推荐）
-
相关阅读:
io模型初探
【Pytorch with fastai】第 17 章 ：基础神经网络
C语言程序设计-8 函 数
编程老手如何在autojs和冰狐智能辅助之间选择？
Lombok好用是好用，就是容易踩坑，这份避坑指南请查收
k8s-master 高可用
07_整合spring boot
基于 CNN-GRU 的菇房多点温湿度预测方法研究 学习记录
nrf9160做主控连接阿里云（mqtt_simple例程）——附MQTT协议浅解
python SCPClient 远程文件 到 本地
- 原文地址：https://blog.csdn.net/qq_34191426/article/details/134222124
