尚马JavaScript 6月3日

BOM浏览器对象模型

window对象 当前页面对象 可以省略不写

history对象 历史记录对象  history.back();后退
history.forward(); 前进
location对象
地址栏
location.href  控制地址栏跳转
location.reload() 刷新页面
document对象
文档对象(DOM树)
常用方法
open("url","窗口名","设置参数")  打开新窗口
close()                         关闭指定窗口
taskid=setInterval("函数",毫秒数)        定时反复执行
taskid=setTimeout("函数",毫秒数)         定时执行一次
clearTimeout(taskid)                    清除timeout
clearInterval(taskid)                    清除interval

 文档对象模型（dom树）

元素操作属性和方法

document.getElementById("mytext")通过id获取元素  唯一
document.getElementsByTagName("input")通过标签名获取元素 元素集合  数组
document.getElementsByClassName("myBtn")通过class名选取元素 数组
document.getElementByName("hobby")  通过name属性选取元素数组 也可以通过层结构查找元素
document.getElementById("btns").getElementsByTagName("input")  如果还有元素不想要  
可以读取属性  排除掉某些元素
查找节点
childNodes                取全部子节点
children                  取全部元素子节点
firstChild                第一个子节点
firstElementChild         第一个元素子节点
lastChild                 最后一个子节点
lastElementChild          最后一个元素子节点
previousElementChild      上一个同级节点
nextElementSibling        下一个同级节点
parentNode                父节点

属性操作属性和方法

元素.属性                              读
元素.属性=xxx                          写
元素.getAttribute("属性名")            读
元素.setAttribute("属性名","属性值")    写

value                                 表单元素的值
innerHTML                             双标签中的内容 可以解析html标签
innerText                             双标签中的内容 纯文本
checked                               选中
src                                   图片地址
type                                  表单元素类型
disabled                              禁用

动态dom操作方法

document.createElement("元素名")        创建元素
document.getElementById("myul").appendChild(newEle) 把元素添加给某个元素的子元素中
document.getElementById("myul").insertBefore(newEle,docunment.getElementById("myli"))
                                         把元素添加给某个元素的子元素中在指定元素之前
document.getElementById("myul").removeChild(document.getElementById("myul").lastElement(Child))删除指定元素

动态table操作

table对象.rows 行数组

row对象.cells  单元格数组

table对象.rows[idx].cells[idx]

let newTr=document.getElementById("myTable").insertRow(idx)           添加行
let newTd=newTr.insertCell(idx)                                       添加单元格
newTd.innerHTML                                                       设置单元格内容

简化dom操作

利用innerHTML可以解析HTML标签的特性 可以替换或添加元素 

 js常用对象及相关方法

String对象

Indexof()             查找指定字符
lastIndexof()         从后查找
subString(起,止)    截取字符串 substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。
Substr(起,个数)     截取字符串 substring() 方法用于提取字符串中介于两个指定下标之间的字符
Split()               分割
toUppercase()         转大写
toLowercase()         转小写
replace(old,new)      替换字符

Math对象

Math.ceil(myNum)            向上取整
Math.floor(myNum)           向下取整
Math.round(myNum)           四舍五入
Math.abs(myNum)             绝对值
Math.floor(Math.random()*5+1);//随机数   取的自定义范围  [0,1]

 

 Date对象

new Date()                  当前日期片段
new Date("2022-02-03 06:06:06")自定义日期
nowDate.getFullYear()       年
nowDate.getMonth()+1        月
nowDate.getDate()           日
nowDate.getDay()			星期
nowDate.getHours()			时
nowDate.getMinutes()		分
nowDate.getSeconds()		秒
nowDate.getTime()           到现在的毫秒数

Array对象

js中数组不定长 可以扩容 也可以放任意类型数据

Join()  通过特定字符拼成字符串
Sort()  排序
Push()  尾部添加元素
Pop()   尾部删除元素
Shift() 头部删除元素
Unshift() 头部添加元素
splice(索引,个数,替换的元素....) 不写第三个参数  可以删除元素

 

 JSON格式

js对象标记 简单的对象格式

{'key':value,'key':value}值的部分 字符串 数字 bloean值 也可以放数组json对象函数

标准json格式  key上必须带引号 有前后端传递 用标准格式

{"sid":13,"sname":"张三","sclass":"法外狂徒"}

简写json格式  key上不带引号  前端使用

{sid:13,sname:"张三",sclass:"法外狂徒"}

json格式常用方法

JSON.parse() 把标准json格式字符串  转成json对象
JSON.stringify() 把json对象  转成标准json格式字符串