7.1 属性操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="img/a1.jpg"/>
<button disabled="disabled">电脑不了</button>
</body>
</html>
<script type="text/javascript">
var imgNode = document.getElementsByTagName('img')[0]
1.属性点语法操作
节点.属性：获取属性值
节点.属性=新值：修改属性值
var name = 'src'
imgNode.title = '图片1'
2.通过相应方法对属性进行操作
节点.getAttribute(属性名)：获取节点该属性名对应的值
a.获取属性
// var srcAttr = imgNode.getAttribute('src')
var srcAttr = imgNode.getAttribute(name)
console.log((srcAttr)) // "img/a1.jpg"
b.给属性赋值
节点.setAttribute(属性名)：修改节点该属性名对应的值
imgNode.setAttribute('title','帅哥250')
c.删除属性；如：<button disabled="disabled">电脑不了</button>
通过删除按钮disabled属性来控制按钮是否可用
var buttonNode = document.getElementsByTagName('button')[0]
//删除disable属性让按钮可用
buttonNode.removeAttribute('disabled')
// buttonNode.disabled = '' 部分浏览器版本可这样让按钮可用
</script>
7.2 BOM基础
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom操作</title>
</head>
<body>
<button onclick="windowAction()">打开窗口</button>
<button onclick="windowMove()">移动窗口</button>
</body>
</html>
<script type="text/javascript">
1.什么是BOM：浏览器对象模型（browser object model）
js中提供了一个全局的window，用来表示当前浏览器
js中声明的全局变量，其实都是绑定在window对象中的属性
所以，在使用window属性和方法时，前面的‘window.’可以不写
var a = 100;
console.log(a===window.a) // true
// alert('我没写window.哦')
2.window基本操作
a.打开新窗口：不需要点击即可跳转
// window.open('http://www.baidu.com')
b.关闭窗口
// window.close()
c.移动窗口
window.moveTo(200,200)
function windowAction(){
mywindow = window.open('','','width=200,height=300')
mywindow.focus()
}
function windowMove(){
mywindow.moveTo(1000,300)
d.调整窗口大小
mywindow.resizeTo(400,400)
e.强制刷新
window.reload(true)
}
f.获取浏览器用于显示内容部分的宽和高
console.log(window.innerWidth,window.innerHeight)
g.获取整个浏览器的宽和高
console.log(window.outerWidth,window.outerHeight)
3.弹框
a.alert(提示信息):弹出提示信息(带确定按钮)
window.alert('alert弹出')
b.confirm(提示信息):弹出提示信息(带确定和取消按钮),返回值是布尔
result = window.confirm('confirm,是否删除?')
console.log('===',result)
c.window.prompt('提示信息', '输入框显示的默认值'):弹出一个带输入框和取消确定按钮的提示框,点 取消 返回值是null,点 确定 返回值是输入框中的内容..
var result = window.prompt('提示信息', '输入框显示的默认值')
console.log(result)
</script>
7.3 定时事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id='time'>0</p>
<button onclick="clearBoom()">拆炸弹！</button>
</body>
</html>
<script type="text/javascript">
1.setInterval(函数,时间):每隔指定的时间调用一次函数,时间单位是毫秒,返回一个定时对象
clearInterval(定时对象):停止指定定时对象
1000毫秒=1秒
var pNode = document.getElementById("time")
var num = 0
var interval1 = window.setInterval(function(){
//这里的代码每隔1秒会执行一次
num ++
// console.log(num)
pNode.innerText = num
if(num==10){
//满足条件，停止对应对象
window.clearInterval(interval1)
}
},
1000)
2.setTimeout(函数，时间)：隔指定的时间调用一次函数
window.clearTimeout(定时对象)
函数只会调用一次，类似定时炸弹
var message = '&&&&&&&&爆炸&&&&&&&&'
var timeout1 = window.setTimeout(function(){
console.log(message)
},3000)
function clearBoom(){
window.clearTimeout(timeout1)
}
//
</script>
7.4 事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
position: relative;
}
#div1{
margin-top:200px ;
margin-left: 100px;
}
</style>
</head>
<body>
<div id="div1" style="width: 200px;height: 300px;background-color: red;">
</div>
<a href="https://www.cnblogs.com/jiangxiaobo/p/6593584.html">
event相关属性说明
</a>
<!--a.在标签内部给事件源的事件属性赋值-->
<button id="b1" onclick=alert('弹框')>弹出弹框</button>
<button id="b11" onclick="showAlert()">弹出弹框2</button>
<button id="b2">改变背景颜色</button>
<button id="b3">改变字体颜色</button>
<button id="b4">改变样式</button>
</body>
</html>
<script type="text/javascript">
js是事件驱动语言
1.事件3要素（事件源、事件、事件驱动的程序）
例如：
小明打狗，狗嗷嗷叫。：本 事件中狗是事件源，狗被打就是事件，狗嗷嗷叫就是事件驱动的程序。
小明打狗，他老爸就打他。：本 事件中狗是事件源，狗被打就是事件，小明被打就是事件驱动的程序。
点击按钮，就弹出一个弹框：事件源是按钮，事件是点击按钮，事件驱动的程序就是弹出弹框
2.绑定事件
第一步：获取事件源
第二步：绑定事件
第三步：写驱动程序a.在标签内部给事件源的事件属性赋值
<标签 事件属性=‘驱动程序’></标签>
<标签 事件属性=‘函数名（）’></标签>：一般不这样绑定
注意：这个时候被绑定的驱动程序如果是函数，那么这个函数中this关键字是指代window的。
function showAlert(){
console.log(this)
}
b.通过节点绑定事件1
标签节点.事件属性 = 函数
注意：此时函数中的this就是事件源
var b2Node = document.getElementById('b2')
function changeColor(){
console.log(this) // b2Node
// b2Node.style.backgroundColor = 'yellow'
this.style.backgroundColor = 'yellow'
}
b2Node.onclick = changeColor
c.通过节点绑定事件2
标签节点.事件属性 = 匿名函数
var b3Node = document.getElementById('b3')
b3Node.onclick = function(){
console.log(this) // b3Node
this.style.color = 'yellow'
// this.style.backgroundColor = 'red'
}
d.通过节点绑定事件3
节点.addEventListener(事件名，函数)：指定的节点产生指定的事件后调用指定的函数
事件名：字符串，去掉on
注意：这个时候函数中的this就是事件源，这种方式可以给同一个事件绑定多个驱动程序
var b4Node = document.getElementById('b4')
b4Node.addEventListener('click',
function(){
console.log(this) // b4Node
this.style.color = 'red'
})
b3Node.addEventListener('click',
function(){
this.style.backgroundColor = 'red'
})
3.获取事件对象
当事件驱动程序是一个函数时，这个函数中可以设置一个参数来获取当前事件中的事件对象
var div1Node = document.getElementById('div1')
div1Node.onclick = function(evt){
//参数evt就是事件对象
a.(evt.clientX,evt.clientY):事件产生的位置的坐标，相对浏览器内容部分
console.log(evt.clientX,evt.clientY)
console.log(evt.offsetX,evt.offsetY)
if(evt.offsetX<100){
this.style.backgroundColor = 'black'
}else{
this.style.backgroundColor = 'yellow'
}
}
4.常见的事件类型
</script>
7.5 常见事件类型
常见事件类型
1.onload：页面加载完成对应的事件(标签加载成功)
window.onload：函数
2.鼠标事件
onclick:鼠标点击事件
onmoseover
...
3.键盘事件
onkeypress - 键盘按下弹起
onkeydown
onkeyup
4.输入框内容改变事件
onchange：输入框输入状态结束（光标消失）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//1.在页面加载完成后才去获取节点
window.onload = function(){
//这样js代码就不会取到null
var pNode = document.getElementById('p1')
//点击事件
pNode.onclick = function(){
alert('被电击')
}
//鼠标进入事件
pNode.onmouseover = function(){
this.innerText = '鼠标进入'
this.style.backgroundColor = 'red'
}
//鼠标移出事件
pNode.onmouseout = function(){
this.innerText = '鼠标移出'
this.style.backgroundColor = 'white'
}
//鼠标按下事件
pNode.onmousedown = function(){
this.innerText = '鼠标按下'
this.style.backgroundColor = 'white'
}
//鼠标弹起事件
pNode.onmouseup = function(){
this.innerText = '鼠标弹起'
this.style.backgroundColor = 'white'
}
//鼠标弹起事件
pNode.onmousewheel = function(){
this.innerText = '鼠标滚轮'
this.style.backgroundColor = 'white'
}
pNode.onkeypress = function(){
alert('键盘按下')
}
}
</script>
</head>
<body>
<p id='p1' style="height: 200px;">我是段落</p>
<textarea name="" rows="4" cols=""></textarea>
</body>
</html>
<script type="text/javascript">
var textareaNode = document.getElementsByTagName('textarea')[0]
textareaNode.onkeypress = function(evt){
//键盘事件对象：key属性：按键的值，keycode属性：按键值的编码
// console.log(evt)
// d = evt.keyCode
// if(d>=97 && d <= 122){
// d -= 32
// }
// textareaNode.innerText = String.fromCharCode(d)
}
textareaNode.onchange = function(evt){
alert('onchange事件')
}
</script>
网友评论