day46 bom dom
BOM和DOM
定义
BOM是指浏览器对象模型，它使js有能力与浏览器进行‘对话’
DOM是指文档对象模型，通过它，可以访问HTML文档的所有元素
BOM
BOM对象中，window关键字可以不写
window对象
| window方法 | 功能 |
|---|---|
| window.innerHeight | 浏览器窗口的内部高度 |
| window.innerWidth | 浏览器窗口的内部宽度 |
| window.open() | 打开新的窗口 |
| window.close() | 关闭当前窗口 |
window.open('http'.'','width=400px;heigth=800px,top=200px,left='200px')
window.close()
window子对象
navigator(了解即可)
浏览器对象，通过这个对象可以判定用户所使用的的浏览器，包括浏览器相关信息
navigator.appName //Web浏览器全称
navigator.appVersion //Web浏览器厂商和版本的详细字符串
navigator.userAgent //客户端绝大部分信息
navigator.platform //浏览器运行所在的操作系统
screen对象（了解即可）
屏幕对象，不常用
screen.availWidth //可用的屏幕宽度
screen.availHeight //可用的屏幕高度
history对象（了解即可）
浏览历史对象
window.history //对象包含浏览器的历史
history.forward() //前进一页
history.back() //后退一页
location对象
window.location //用于获得当前页面的地址（URL），并把浏览器重定向到新的页面
location.href //获取href
location.href='URL' //跳转到指定页面
location.reload() //重新加载页面
弹出框
可以在js中创建三种详细框：警告框、确认框、提示框
警告框
警告框经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确认按钮才能继续进行操作。
语法：
alert('你看到了吗')
确认框（了解即可）
确认框用于使用户可以验证或者接受某些信息。当确认框出现后，用户需要点击确认或者取消按钮才能继续进行操作。如果用户点击确认，那么返回值为true。如果用户点击取消，那么返回值为false
语法：
confirm('你确定吗')
提示框（了解即可）
提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操作。如果用户点击确认，那么返回值为true。如果用户点击取消，那么返回值为false
语法：
prompt('请在下方输入','你的答案')
prompt('请在下方输入')
计时相关
通过js可以在一定时间贱内之后执行代码，而不是在函数被调用后立即执行。称为计时事件
setTimeout()
设置从当前起多少毫秒起执行
语法：
var t=setTimeout('js语句',毫秒)
clearTimeout()
取消setTimeout的设置
语法：
clearTimeout(setTimeout_variable)
setInterval()
按照指定的周期（以毫秒级）来重复调用函数或计算表达式
语法：
var t=setInterval('js语句'，时间间隔毫秒)
clearInterval()
取消setInterval的设置
语法：
clearInterval(setInterval_variable)
<script>
// function f() {
// alert('hello body')
// }
// function f1() {
// var t=setTimeout(f,3000)
// function f2() {
// clearTimeout(t)
// }
// setTimeout(f2,6000)
// }
// f1()
function f() {
alert('hello body')
}
function f1() {
var t=setInterval(f,3000)
function f2() {
clearInterval(t)
}
setTimeout(f2,6000)
}
f1()
</script>
DOM
HTML DOM树
DOM标准规定HTML文档中的每个成分都是节点（node）：
文档节点（document对象）：代表整个文档
元素节点（element对象）：代表一个元素
文本节点（text对象）：代表元素（标签）中的文本
属性节点（attribute对象）：代表一个属性，元素（标签）才有属性
注释是注释节点（comment对象）
js可以通过DOM创建动态的HTML：
js能够改变页面中的所有HTML元素
js能够改变页面中所有的HTML属性
js能够改变页面中所有的css样式
js能够对页面中所有事件做出反应
查找标签
直接查找
document.getElementById //根据id获取标签 获取的直接是对象本身
document.getElementsByClassName //根据class属性获取 获取的是数组不是对象本身
document.getElementsByTagName //根据标签名获取标签合集 获取的是数组不是对象本身
间接查找
parentElement //父节点标签元素
children //所有子标签
firstElementChild //第一个子标签元素
lastElementChild //最后一个子标签元素
nextElementSibling //下一个兄弟标签元素
previousElementSibling //上一个兄弟标签
var pEle=document.getElementById('p1')
pEle.parentElement
document.getElementsByTagName('span')[0]
节点操作
创建节点
语法：
document.createElement(标签名)
添加节点
语法：
somenode.appendChild(newnode) //追加一个子节点（作为最后的子节点）
somenode.insertBefort(newnode,某个节点) //吧增加的节点放到摸个节点前面
删除节点
语法：
somenode.removeChild(要删除的节点) //获得要删除的元素，通过父元素调用该方法删除。
替换节点
语法:
somenode.replaceChild(newnode,某个节点)
属性节点
var divEle=document.getElementById('d1')//获取文本节点的值
divEle.innerText
divEle.innerHTML
var divEle=document.getElementById('d1')//设置文本值
divEle.innerText='1'
divEle.innerHtml='<p>2</p>'
attribute操作
var divEle=document.getElementById('d1')
divEle.setAttribute('age','18')
divEle.getAttribute('age')
divEle.removeAttribute('age')
//自带的属性还可以直接
imgEle.src=''
var imgEle=document.createElement('img')//创建节点
imgEle.src='111.jpg'//添加属性
imgEle.setAttribute('username','jason')//自定义属性
dEle.append(imgEle)//添加节点
aEle.innerText='点我'//设置文本值
dEle.insertBefore(aEle,imgEle)//指定位置添加元素
dEle.innerHTML='<h1>jdjdj</h1>'//设置文本值 HTML识别代码
获取值操作
语法：
elementBode.value //适用于以下标签 input select（多选不适用） textarea
class的操作
className //获取所有样式类名,字符串
classList//获取所有样式类名，数组
classList.remove(cls) //删除指定类
classList.add(cls) //添加类
classList.contains(cls) //存在返回true，否则返回false
classList.toggle(cls) //存在就删除，否则添加
var divEle=document.getElementsByTagName('div')[0]
divEle.classList
divEle.classList.remove('bg_red')
divEle.classList.add('bg_red')
divEle.classList.contains('c1')
divEle.classList.toggle('bg_red')
指定css操作
obj.style.backgroundColor='red'
1.对于没有中横线的css属性一般直接使用style.属性名即可
obj.style.margin
obj.style.width
obj.style.left
obj.style.position
2.对含有中横线的css属性，将中横线后面的第一个字母换成大写即可
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily
事件
事件：当符合某个条件，自动触发的动作 响应
onclick //当用户点击某个对象时调用的事件句柄
ondblclick //当用户双击某个对象时调用的事件句柄
onfocus //元素获得焦点
onblur //元素失去焦点
onchange //域的内容被改变
onkeydown //某个键盘按键被按下去
onkeypress //某个键盘按键被按下并松开
onkeyup //某个键盘按键被松开
onload //一张页面或一副图像完成加载
onmousedown //鼠标按钮被按下
onmouseseout //鼠标被移动
onmouseout //鼠标从某元素移开
onmouseover //鼠标移动某元素之上
onselect //在文本框中文本被选中时发生
onsubmit //确认按钮被点击，使用的对象是form
js绑定事件的方式
方式1 不推荐使用
<div id="d1" onclick="changeColor(this);">点我</div>
<script>
function changeColor(ths) {
ths.style.backgroundColor="green";
}
</script>
方式2
function func() {
alert('我被点击了')
}
var i1Ele = document.getElementById('d1');
i1Ele.onclick = function () {
// i1Ele标签被点击之后 你能做的事
func()
}
如何解决js代码报错:
方式1：
利用onload等待某个对象加载完毕之后再执行
window.onload=function(){
}
方式2：
直接将js代码写在body最下面
jQuery
类似于python后端的模块，帮你封装了一些简易的操作（有点像ORM)
语法结构
jQuery('选择器').action(属性)
$('选择器').action(属性)
如何使用jQuery
必须先导入才能使用
查找标签
基本选择器
$('#id') //id选择器
$('tagName') //标签选择器
$('.className') //class选择器
$('div.c1') //找到有c1 class类的div标签
$('*') //所有元素选择器
$('#id,.className,tagName') //组合选择器
层级选择器
$('x y') //x的所有所有后代y
$('x>y') //x的所有儿子y
$('x+y') //找到所有紧挨着在x后面的y
$('x~y') //x之后所有的兄弟y
$('p')
$('p').css('color','green')
$('#d1')
$('div span')
