BOM,DOM

Posted 2022-10-13 pangqian

BOM和DOM
BOM浏览器对象模型
window.open(url,‘‘,‘width=400px,height=400px‘)
window.opener() 子页面能够直接通过该方法调用父页面中的函数
window.close()

window.location.href 获取当前网页所在的url
window.location.href = url 当前跳转到指定的url
通常是结合ajax一起使用

定时器相关
setTimeOut
clearTimeOut


setInterval
clearInterval
定时器示例

弹出框
alert
confirm
prompt


DOM文档对象模型
DOM树的概念

如何查找标签
基本选择器
document.getElementById 标签对象本身
document.getElementsByClassName 数组
document.getElementsByTagName 数组

如何操作标签
变量名如果指代的是一个标签那么推荐书写格式为 xxxEle
如果指代的是一个jQuery对象那么建议在变量名前面加上一个$
eg:p标签
pEle
$pEle

节点操作
document.createElement(‘标签名‘)

appendChild
父标签.insertBefore(新创建的标签,本来就有的标签)


设置标签属性
自定义属性:setAtrribute():既可以设自定义的也可以设默认
默认属性:直接标签.属性名设置


获取值
.value


innerText:文本 不识别标签的
innerhtml:文本标签 识别


classList.remove() >>> removeClass()
classList.add() >>> addClass()
classList.contains >>> hasClass()
classList.toggle >>> toggleClass()
开关灯示例



css操作
style.color
style.fontSize


js绑定事件
js代码书写位置
1.window.onload
2.推荐写在body内最下方 引入外部文件亦是如此

开关灯示例
xxxEle.事件名 = function()
// 事件代码

点击事件 onclick

input框获取/失去焦点
onfocus
onblur

计时器


省市联动



jQuery
类库

$() jQuery()

$(选择器).action(参数)

基本选择器

后代选择器

属性选择器

原生js对象和jQuery对象转换
jQuery对象就类似于是一个数组 里面是一个个的标签对象(原生的js对象)

$(原生的js对象) >>> jQuery对象