前期前端学习常用命令之JS/JQ
目录
1 BOM操作
2 JS数据类型及变量
3 JS运算符
4 流程控制语句：
4.1 分支语句
4.1.1 if语句
4.1.2 switch-case语句
4.2 循环语句
4.2.1 for语句
4.2.2 white语句
4.3 其他语句
5 数组
6 对象
7 函数
8 本地存储
9 JSON
10 正则判断
11 验证码
12 DOM操作
13 事件
13.1 e
14 选项卡及下拉框显示
15 定时器
16 时间戳
17 冒泡排序
18 变量转参
19 JQ
19.1 JQ选择器
19.1.1 基本选择器
19.1.2 过滤选择器
19.1.3 层次选择器
19.2 JQ方法
19.2.1 常用
19.2.2 动画
1 BOM操作
window.location.reload() //页面刷新
window.location.herf = "网址" //页面跳转
window.open("网址") //新增页面后跳转
document.write("文字内容"); //页面打印，但会重新刷新页面
window.alert("文字内容"); //弹出警告框
alert("文字内容"); //弹出警告框
console.log("文字内容"); //控制台顶标题显示（控制台F12）
var 变量 = confirm("文字内容") //弹出确认框，变量为真确认，假取消
prompt("文字显示内容","默认数据")//弹框输入数据2 JS数据类型及变量
var 变量名 = 变量值；//定义变量名且赋值为变量值
typeof(变量名); //导出变量类型
const 常量名 = 常量值; //声明为一个常量,声明之后无法修改
let 变量名 = 变量值；//定义一个一次性变量，循环结束后变量无效3 JS运算符
1.算数运算符：+ - * / %(取余) ++（加一） --（减一）
2.比较（条件）运算符：
-
== < > >= <= !=(不等于)
-
!== (严格类型不相等) ===(严格类型相等)
-
空 == undefined
3.逻辑运算符：且 && 或 || 非 ！
4.赋值运算符： = 拓展赋值运算符（结合运算符） += -= *= /= %=
5.三目表达式：布尔计算式 ? 真值 : 假值
6.位运算符（用二进制数字进行运算的符号）
取与/位与 & 取或/位或 | 取反 ！ 位异 ^ 非位 ~
优先级运算符：( )
4 流程控制语句：
4.1 分支语句
4.1.1 if语句
if (条件){}
else if(条件2){
条件2真值
}else if(条件3){
条件3真值
｝...
else{
假值
}if可以嵌套...
4.1.2 switch-case语句
switch(数值或变量或布尔){
case 值1:
//当变量等于值1的时候，执行的代码
break;
case 值2:
//当变量等于值2的时候，执行的代码
break;
//。。。。。
default:
//默认执行的代码
}-
break去掉后会继续执行下一个执行代码，直到结束
-
case和default是同个级别，位置放置不受限制，但习惯放最后；
-
括号里面可以写可以写变量，或者布尔等等...
-
switch是判断变量和值"全等于"才能符合执行命令
4.2 循环语句
4.2.1 for语句
for(初始化变量;变量范围;增量)｛
for(初始变量;条件表达式;末尾循环体){
中间循环体内容1
}
中间循环体内容2
｝
for(变量 in 数组){}4.2.2 white语句
while(条件){
当条件为true时执行的程序
}
do white循环，for in循环.....
break; // 在循环体中直接退出循环,一般在循环体中填写4.3 其他语句
document.write("
"); //打印网页换行
document.write(` 长串标签 `) //打印跨行标签内容，并且配合js
return; //将求出来的变量，从函数中返回/提取出去，并且终止函数
continue; // 调过当次循环，直接进行下一次5 数组
var 数组名 = [值1,值2,值3...] // 创建含数据的数组赋值名称
数组名[下标值] //控制台打印数组内下标值对应内容
数组名.length // 一般在for里使用，数组长度
数组名.push(值)//数组最后添加数据
数组名.pop() //删除数组最后一个数据
数组名.shift() //删除数组第一个数据
数组名.unshift(值) // 在数组前方（第一个）添加数据
数组名.splice(下标位置,删除数量,添加元素1,添加元素2.....)//添加/删除元素，删除数量未填写即为下标位置至结束
数组名.Object.keys() //获取数组的自定义下标6 对象
对象.prototype.公共属性/方法 = 属性值/function(){} //添加对象公用属性/方法
delete 对象.属性/方法 // 删除对象公用属性/方法
//监视对象的属性的方法
Object.defineProperty(对象变量名,'对象属性名',{
get:function(){},//获取属性时运行
set:function(){},//修改属性时运行
})7 函数
function 函数名(形参){函数内容} //自定义函数
parseInt(值) //转换为整数，小数点直接抹零
parseFloat(值) //转换为单精度浮点小数，但十进制转换成二进制的小数会出问题
isNaN(值)//判断数值是否为非数字或字符串类型的数字（ture非数字，false是数字）
Math.pow(数值 , 次方) //计算数值次方
Math.random() //产生一个 [0,1)之间的随机数，括号内不填写
Math.round(数值) //取整（四舍五入）
Math.ceil(数值) //向上取整
数值.toFixed(需要保留小数数量) //强制，保留几位小数（四舍五入），但toFixed后为字符串
number(数值) //判断是否为数字，如果有非数字包含则会无法识别
string.indexOf("字符串值",开始检索数值) //查找字符串取值位置（0-length），开始检索未填则从首字符开始,在则返回所在字符串下标；不在则返回-1
delete 对象名.对象属性 //删除对象中的属性
string.trim() //去除字符串中的空格8 本地存储
localStorage.setItem("密钥","密钥值") //设置本地存储密钥及密钥值
localStorage.getItem("密钥"） //提取本地存储密钥对应密钥值
localStorage.removeItem("密钥") //删除单个本地存储
localStorage.clear() //删除所有本地存储密钥（慎用）
sessionStorage......() //临时存储，用法与本地存储相同9 JSON
JSON.stringify(对象名称) //利用JSON将对象转为字符串
JSON.parse(字符串名称) //利用JSON将字符串转变为原来的格式10 正则判断
/^[判断范围]{判断位置数字1,判断位置数字2}$/ //正则表达式，开头结尾符号限制内容仅有判断范围，ASCⅡ表查找
字符串名.match(正则表达式) //对字符串使用正则判断，错误即为空
/^[\u4e00-\u9fa5]$/ //中文
/^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/ //手机号11 验证码
字符串[parseInt(Math.random() * 字符串.length) //随机生成字符串(0和10的概率最小)
字符串.toUpperCase() //将字符串均改为大写
字符串.toLowerCase() //将字符串均改为小写12 DOM操作
查找
document.getElementsById("ID名称") // 查找id名获取元素，双标签对象
document.getElementById("ID名称").value // 获取id内value或填写框内的内容
document.getElementsByClassName("类名称") // 查找类名，并以数组模式含双标签对象
getElementsByTagName("标签名称")// 根据标签查找元素，并以数组模式含双标签对象
DOM查找结果.parentNode //查找结果的父级元素
DOM查找结果.children //查找结果的子级元素
DOM查找结果.previousElementSibling //查找结果的前一个节点
DOM查找结果.nextElementSibling //查找结果的后一个节点
DOM查找结果.selectedIndex //获取选择框内的索引
DOM查找结果.removeChild()//删除子级元素
addEventListen().....?操作
DOM查找结果.innerHTML //返回表格行的开始和结束标签之间的 HTML，通常指双标签内的东西
DOM查找结果.style.样式属性 = "属性值" //修改对应id或类下的样式，驼峰式填写
DOM查找结果.innerText() //删除所有子节点，并将其替换为包含指定字符串的单个文本节点
父级ID或类或标签名称.removeChild(子级名称) //删除子级内容
原id名称.id = "新id名称" //原id名称修改为新id名称
原id名称.className = "新类名称" //修改类名
document.createElement("标签名称") //创建标签节点，可直接诶创建节点修改类或ID名
DOM查找结果.appendChild(DOM创建节点名称) // 在查找结果下追加创建节点13 事件
| 事件 | 描述 |
|---|---|
| onclick | 用户点击 HTML 元素 |
| onmouseover | 鼠标指针移动到指定的元素上时发生 |
| onmouseout | 用户从一个 HTML 元素上移开鼠标时发生 |
| onmouseenter | 当鼠标指针移动到元素上时触发（含元素子级） |
| onmouseleave | 当鼠标指针移出元素时触发（含元素子级） |
| onkeydown | 某个键盘按键被按下 |
| onkeypress | 某个键盘按键被按下并松开 |
| onkeyup | 某个键盘按键被松开 |
| onfocus | 元素获取焦点时触发 |
| onblur | 元素失去焦点时触发 |
| ondblclick | 双击鼠标触发 |
| animationend | 在 CSS 动画完成后触发 |
事件的属性
| 属性 | 值 | 说明 |
|---|---|---|
| screen | 数值 | 相对于相对于电脑屏幕间的坐标 |
| client | 数值 | 浏览器可视区域的坐标 |
| offset | 数值 | 相对于父级的定位 |
| page | 数值 | 相对于整个页面的定位 |
| keyCode | 数值 | 键盘按键对应数字 |
| keyCode | 37 | 键盘按键左 |
| keyCode | 38 | 键盘按键上 |
| keyCode | 39 | 键盘按键右 |
| keyCode | 40 | 键盘按键下 |
| keyCode | 74 | J |
13.1 e
function(e)/function(event)
e.stopPropagation()//阻止事件冒泡
e.preventDefault()//阻止默认事件 或 return flase
e.target.属性 //事件目标的对应属性14 选项卡及下拉框显示
标签名.setAttribute("属性名称", 属性值) //设置自定义属性
标签名.getAttribute("属性名称") //提取自定义属性15 定时器
setTimeout(function(){},时间长度) //时间长度为ms，间隔时间后只执行一次函数
setInterval(function(){},时间长度) //时间长度为ms，间隔时间后重复执行函数
setInterval("函数名称()",时间长度)
clearTimeout(定时器名称) //清除执行只执行一次的定时器
clearInterval(定时器名称) //清除重复执行的定时器16 时间戳
Date.parse(date) //从1970年开始到现在时间的毫秒数
new Date()//完整的当下时间，含时区月份等
date.toLocaleString() //根据本地时间格式，把 Date 对象转换为字符串。
date.getFullYear() //获取现在时间，单位为年
date.getTime() // 返回 1970 年 1 月 1 日至今的毫秒数。
date.valueOf() // 返回 Date 对象的原始值（毫秒数）
date.getHours() //返回 Date 对象的小时 (0 ~ 23)。17 冒泡排序
for (var i = 0; i < Ary.length - 1; i++) {
for (var j = 0; j< Ary.length - 1; j++) {
if (Ary[j] < Ary[j + 1]) {
var index = Ary[j]
Ary[j] = Ary[b + 1]
Ary[j + 1] = index
}
}
}18 变量转参
对象.方法.call(对象2,参数1，参数2) //将对象的参数修改为对象2，一个个传参，用作函数调用时
对象.方法.apply(对象2,[参数1，参数2]) //将对象的参数修改为对象2，用数组传参，用作函数调用时
对象.方法.bind(对象2) //将对象的参数修改为对象2，立即执行，用作事件函数绑定时
对象.on(事件,function()) //在被选元素及子元素上添加一个或多个事件处理程序
标签.scrollTop = 标签.scrollHeight //滚动条保持最底部19 JQ
19.1 JQ选择器
19.1.1 基本选择器
| 选择器 | 选择器类型 |
|---|---|
| #标签id名称 | ID选择器 |
| * | 全选选择器 |
| .标签类名称 | 类选择器 |
| 标签名称 | 标签选择器 |
| 元素1,元素2 | 并集选择器 |
| 元素1.元素2 | 交际选择器 |
| 元素1>元素2 | 子代选择器 |
| 元素1 元素2 | 后代选择器 |
19.1.2 过滤选择器
位置过滤
| 选择器 | 说明 |
|---|---|
| 标签:first | 获取第一个标签元素 |
| 标签:last | 获取最后一个标签元素 |
| 标签:eq(索引号) | 获取到标签元素中，选择对应索引号的元素，索引0开始 |
| 标签:odd | 获取到标签元素中，索引号为奇数的元素 |
| 标签:even | 获取到标签元素中，索引号为偶数的元素 |
表单过滤
| 选择器 | 说明 |
|---|---|
| :password | 匹配所有密码框 |
| :text | 匹配所有的单行文本框 |
| :button | 匹配所有按钮 |
| :radio | 匹配所有单选按钮 |
| :checkbox | 匹配所有复选框 |
属性过滤(查找)
| 选择器 | 说明 |
|---|---|
| 标签[属性=‘值‘] | 匹配对应属性值等于属性的对应标签 |
19.1.3 层次选择器
| .语法 | 说明 |
|---|---|
| parent() | 查找父级 |
| children("标签") | 最近一级子集 |
| find("标签") | 相当于后代选择器 |
| parents("标签") | 查找祖辈父级 |
| siblings("标签") | 查找兄弟节点，不包括自己本身 |
| nextAll() | 查找当前元素之后的所有同辈元素 |
| next("标签") | 查找当前元素之后的同辈元素 |
| prevAll() | 查找当前元素之前的所有同辈元素 |
| prev("标签") | 查找当前元素之前的同辈元素 |
| eq(索引号) | 相当于 标签:eq(索引号) |
19.2 JQ方法
19.2.1 常用
| .方法（函数） | 说明 |
|---|---|
| hasClass("类名") | 检查当前元素是否含有某个特定的类，有则为true |
| addClass('类名') | 添加类 |
| removeClass('类名') | 删除类 |
| toggleClass('类名') | 切换类或删除类 |
| hide('选择器') | 隐藏元素 |
| click() | 点击 |
| index() | 获取标签所在索引号 |
| val() | 同.value |
| html() | 同.innerHTML |
| text() | 同.innerText |
| attr('属性','属性值') | 设置或返回被选元素的属性和值（DOM） |
| removeAttr('属性' '属性2') | 移除的一个或多个属性 |
| prop('属性','属性值') | 设置或返回被选元素的属性和值(JS对象) |
| each() | 每个匹配元素规定要运行的函数 |
| append("追加文本") | 在被选元素内的结尾插入内容 |
| appendTo("元素") | 被选元素的结尾插入 HTML 元素 |
| preappend("追加文本") | 在被选元素内的前面插入内容 |
| after("追加文本") | 被选元素后插入指定的内容 |
| before("追加文本") | 被选元素前插入指定的内容 |
| empty() | 清空 |
| remove() | 移除本身及其后代 |
19.2.2 动画
| .方法（函数） | |
|---|---|
| show([speed],[easing],[fn]) | 显示隐藏的被选元素 |
| hide([speed],[easing],[fn]) | 隐藏元素 |
| toggle([speed],[easing],[fn]) | 切换隐藏/显示效果 |
| slideDown([speed],[easing],[fn]) | 下拉滑动 |
| slideUp([speed],[easing],[fn]) | 上拉滑动 |
| slideToggle([speed],[easing],[fn]) | 上拉滑动或下拉滑动 |
| hover([over],out) | 事件切换,，只填一个函数经过离开均触发函数 |
| fadeIn() | 进入显影 |
| fadeout() | 离开显影 |
| animate('样式',毫秒数) | 自定义动画 |
| clone() | 克隆标签 |
| 参数 | 说明 |
|---|---|
| speed | 单位为毫秒，为显示速度需要耗费的时间，或slow、normal、fast |
| easing | 切换效果，默认swing，可用linear |
| fn | 动画完成时执行的函数，每个元素执行一次 |
| over | 鼠标移到元素上要触发的函数（mouseenter） |
| out | 鼠标移出元素上要触发的函数（mouseleave） |