一、属性操作
<body>
<p id="p1">我是段落<a id="a1" href="https://www.baidu.com">必读</a></p>
<img src="img/luffy.jpg"/>
</body>
1.节点属性的增删改查
a.查
1.节点.属性
标签相关属性:
innerHTML
作用：获取标签内容(包含双标签内容中的其他标签和文件)
innerText
作用：标签中的文本内容
href,src,text,value,id等,根据标签属性直接获取
注意:标签中的class属性在节点中对应的是className
alert(pNode.innerHTML)
alert(pNode.innerText)
alert(aNode.href)
alert(imgNode.src)
样式相关属性:
可以通过style来获取样式相关属性
aNode.style.color //获取字体颜色
aNode.style.display //获取display的值
2.节点.getAttributse(属性名)
alert(aNode.getAttribute('href'))
alert(aNode.getAttribute('style'))
b.改、增
1.节点.属性 = 新值
imgNode.src = 'img/aaa.ico'
imgNode.title = '路飞'
pNode.style.color = 'rgb(255, 0, 0)'
pNode.ytIndex = 0 //添加属性
alert(pNode.ytIndex)
2.节点.setAttribute(属性名, 新值)
注意：inner相关的无效
imgNode.setAttribute('src', 'img/jd_logo.ico')
c.删
节点.removeAttribute(属性名)
imgNode.removeAttribute('src')
二、BOM操作
1.BOM
解释：浏览器对象模型(browser object model)
js提供了一个全局的对象window -> 浏览器
js中声明的所有的全局变量其实都是添加给window的属性
var a = 100
console.log(a, window.a)
2.基本操作
a.open()
作用：打开一个新的窗口
输出：返回被打开的窗口对应的对象
语法：
open() - 空白窗口
open(url) - 在新窗口打开指定网页
open(url,'','width=300,height=200')
说明：打开新的窗口并且设置窗口的宽度和高度
newWindow = window.open('01车牌号限行案例.html','', 'width=300,height=200')
b.moveTo(x,y)
作用：移动窗口
newWindow.moveTo(100, 100)
**c.resizeTo(x,y)
作用：设置窗口的大小
newWindow.resizeTo(500, 600)
d.浏览的宽高
inner是内容的宽度和高度
outer是浏览器的宽度和高度
console.log('=====:',newWindow.innerWidth, newWindow.innerHeight)
console.log('!!!!!:',newWindow.outerWidth, newWindow.outerHeight)
3.弹框
a.alert(提示信息)
说明：提示框，只有提示信息和确定按钮
b.confirm(提示信息)
说明：提示框，有确定和取消按钮
返回值：返回是布尔值，true->点击确定，false->点击取消
result = confirm('是否确定删除?')
console.log(result)
c.prompt
说明：提示框，有一个输入框，一个确定按钮和取消按钮;
返回值：返回值是字符串，点击确定返回值是输入框中的内容，点击取消返回值是null
result = prompt('提示信息', '输入框中的默认值')
console.log(result)
三、计时事件
<p id="p1">5</p>
1.定时器
a.开启定时器
1.setInterval(函数,时间)
作用：每隔指定的时间调用一次指定的函数
返回值：定时器对象
2.setTimeout(函数,时间)
作用：隔指定时间后调用一次指定函数
注意：函数只会调用一次，相当于定时炸弹
说明：
函数 - 可以是函数名，也可以是匿名函数
时间 - 单位是毫秒
b.停止定时
clearInterval(定时器对象)
作用：停止指定的定时器
clearTimeout(定时器对象)
作用：停止指定的定时器
函数传递方式
//方案一：先声明函数，在传递函数
function timeAction(){
console.log('aaa')
}
timer1 = setInterval(timeAction, 1000)
//方案二: 直接传递匿名函数
timer2 = setInterval(function(){
console.log('bbb')
},1000)
timer22 = setTimeout(function(){
console.log('时间到!')
},5000)
//练习：数字递增
num = 5
pNode = document.getElementById('p1')
timer3 = setInterval(function(){
num--
pNode.innerText = num
if(num == 0){
//停止定时
clearInterval(timer3)
}
},1000)
四、事件绑定
<style type="text/css">
#box1{
width: 150px;
height: 150px;
background-color: lawngreen;
}
</style>
<body>
<button onclick="alert('按钮点击')">按钮0</button>
<button onclick="buttonAction()">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>
<div id="box1">
</div>
</body>
1.事件三要素: 事件源、事件、事件驱动程序
示例：
小明打狗，狗咬他 -- 事件源：狗 事件：打狗 事件驱动程序: 狗咬他
小明打狗，他爸打他 -- 事件源：狗 事件：打狗 事件驱动程序: 他爸打他
点击按钮，跳转到其他页面 -- 事件源: 按钮 事件:点击按钮 事件驱动程序:跳转到其他页面
2.绑定事件
a.直接通过标签绑定事件
1.直接在事件对应的属性里写js代码
2.直接在事件对应的属性里写调用函数,这个函数中的this是window
function buttonAction(){
console.log(this)
}
b.通过节点绑定事件
给节点的事件属性赋函数或者匿名函数
//函数中this就是事件源(当前被点击的按钮)
btnNode2 = document.getElementById('btn2')
//给点击事件绑定函数
btnNode2.onclick = buttonAction
//给鼠标进入事件绑定函数
btnNode2.onmouseover = function(){
this.style.fontSize = '30px'
}
btnNode2.onmouseover = function(evt){
this.style.color = 'red'
}
c.通过节点绑定事件
节点.addEventListener(事件名, 事件驱动程序)
事件名: 去掉事件名前面的on, 例如onclick -> click
这种方式绑定事件，可以给同一个事件源的同一个事件绑定不同的驱动程序
this是事件源, evt是事件对象
btnNode3 = document.getElementById('btn3')
btnNode3.addEventListener('click', function(evt){
console.log(this)
//alert('按钮3被点击')
this.style.color = 'red'
})
btnNode3.addEventListener('click', function(evt){
console.log(evt)
this.style.fontSize = '30px'
})
驱动程序中的evt参数,代表事件对象
boxNode1 = document.getElementById('box1')
boxNode1.addEventListener('click', function(evt){
if(evt.offsetX <= 75){
this.style.backgroundColor = 'red'
}else{
this.style.backgroundColor = 'yellow'
}
})
补充：js中的随机数
console.log(Math.random()) //随机数0-1(小数)
console.log(parseInt(Math.random()*255)) //0-100的整数
console.log(parseInt(Math.random()*90+10)) //10-100的整数
事件冒泡和事件捕获
事件冒泡：子标签上产生的事件会传递给父标签
事件捕获：让事件不在传递给父标签，即阻止事件冒泡
语法：事件.stopPropagation()
<div id="div1">
<div id="div2">
<div id="div3">
</div>
</div>
</div>
//获取节点
divNode1 = document.getElementById('div1')
divNode2 = document.getElementById('div2')
divNode3 = document.getElementById('div3')
//绑定事件
divNode1.addEventListener('click', function(){
alert('div1被点击')
})
divNode2.addEventListener('click', function(evt){
alert('div2被点击')
evt.stopPropagation()
})
divNode3.addEventListener('click', function(evt){
alert('div3被点击')
//让evt事件对象不传递个当期标签的父标签
evt.stopPropagation()
})
