七.DOM属性和操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="img/01.jpg"/>
<button disabled="disabled">点我</button>
</body>
</html>
<script type="text/javascript">
var imgNode = document.getElementsByTagName('img')[0]
//1.属性的点语法操作
//节点.属性 - 获取属性值；节点.属性 = 新值 - 修改属性的值
console.log(imgNode.src)
imgNode.title = '图片1'
var name = 'src'
//2.通过相应方法对属性进行操作
//a.获取属性
//节点.getAttribute(属性名)
var srcAttr = imgNode.getAttribute('src')
console.log(srcAttr)
//b.给属性赋值
//节点.setAttribute(属性名,值)
imgNode.setAttribute('title','无始大帝')
//c.删除属性
//节点.removeAttribute(属性)
var buttonNode = document.getElementsByTagName('button')[0]
//让按钮可以点击
buttonNode.disabled = ''
// buttonNode.removeAttribute()
</script>
八.BOM基础
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom操作</title>
</head>
<body>
<button onclick="windowAction()">打开窗口</button>
<div onclick="closeAction()" id="div1" style="height: 60px;background-color: blueviolet;width: 120px;">
</div>
</body>
</html>
<script type="text/javascript">
//1.什么是BOM - 浏览器对象模型(browser object model)
//js中提供了一个全局的window对象，用来表示当前的浏览器
//js中声明的全局变量，其实都是绑定在window对象中的属性(使用window的属性和方法的时候,前面的'windo.'可以省略)
var a = 100;//window.a = 100
console.log(a,window.a)
// alert('hello')
//2.window基本操作
//a.打开新窗口
// window.open('http://www.baidu.com')
//b.关闭窗口
// window.close()
//c.移动当前窗口
//窗口对象.moveTo(x坐标,y坐标)
function windowAction(){
myWindow = window.open('','','width=200,height=300')
myWindow.moveTo(300,300)
//d.调整窗口大小
myWindow.resizeTo(400,400)
//e.刷新(暂时看不到效果)
//true -> 强制刷新
// window.reload(true)
}
//f.获取浏览器的宽度和高度
//innerWidth/innerHeight - 浏览器显示内容部分的宽度和高度
console.log(window.innerWidth,window.innerHeight)
//outerWidth/outerHeight - 整个浏览器的宽度和高度
console.log(window.outerWidth,window.outerHeight)
//3.弹框
//a.alert(提示信息) - 弹出提示信息(带确定按钮)
// window.alert('alert弹出')
//b.confirm(提示信息) - 弹出提示信息(带确定和取消按钮),返回值是布尔,取消-false,确定-true
// result = window.confirm('confirm,是否删除?')
// console.log('======:',result)
function closeAction(){
var result = window.confirm('是否删除?')
if(!result){
return
}
var divNode = document.getElementById('div1')
divNode.remove()
}
//c.prompt(提示信息,输入框中的默认值) - 弹出一个带输入框和取消，确定按钮的提示框；
// 点取消，返回值是null；点确定返回值是输入框中输入的内容
var result = prompt('message','default')
console.log(result)
</script>
九.定时事件
<!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(函数,时间) - 隔指定的时间调用一次函数(函数只会调用一次，就像定时炸弹)
//clearTimeout(定时对象) - 停止定时
var message = '午时已到!!!!!!!!!!!!!!!!'
var timeout1 = window.setTimeout(function(){
console.log(message)
},10000)
function clearBoom(){
//
window.clearTimeout(timeout1)
console.log('没了~')
}
</script>
十.自动跳转
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
position: relative;
}
#box1{
width: 400px;
height: 200px;
background-color: aliceblue;
margin-left: auto;
margin-right: auto;
border: 2px dotted gold;
display: none;
}
#box1 p{
line-height: 70px;
margin-left: 20px;
}
#box1 font{
position: absolute;
right: 20px;
bottom: 15px;
color: green;
text-decoration: underline;
cursor: pointer;
}
</style>
</head>
<body>
<button onclick="showBox()">进入百度</button>
<div id="box1">
<p>5s后自动跳转到百度...</p>
<!--<a href="http://www.baidu.com">马上跳转</a>-->
<font onclick="jump()">马上跳转</font>
</div>
</body>
</html>
<script type="text/javascript">
var box1Node = document.getElementById('box1');
var pNode = box1Node.firstElementChild
function showBox(){
if(box1Node.style.display == 'block'){
return
}
//显示提示框
box1Node.style.display = 'block';
//开始倒计时
var time =5;
interval1 = window.setInterval(function(){
time--;
pNode.innerText = time+'s后自动跳转到百度...'
if(time==0){
//停止定时
window.clearInterval(interval1)
//打开网页
window.open('https://www.baidu.com')
//隐藏提示框
box1Node.style.display = 'none'
pNode.innerText = '5s后自动跳转到百度...'
}
},1000);
}
function jump(){
window.clearInterval(interval1)
window.open('https://www.baidu.com')
box1Node.style.display = 'none'
pNode.innerText = '5s后自动跳转到百度...'
}
</script>
十一事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#div1{
margin-left: 100px;
margin-top: 100px;
}
</style>
</head>
<body>
<div id="div1" style="width: 200px;height: 200px;background-color: blueviolet;">
</div>
<button id="btn1" onclick="alert('弹框')">弹出弹框1</button>
<button id="btn11" onclick="showAlert()">弹出弹框11</button>
<button id="btn2">改变背景颜色</button>
<button id="btn3">改变字体颜色</button>
<button id="btn4">改变样式</button>
</body>
</html>
<script type="text/javascript">
//js是事件驱动语言
//1.事件三要素(事件源、事件、事件驱动程序)
/*
* 例如：
* 小明打狗，狗嗷嗷叫！---在这个事件中狗是事件源，狗被打就是事件，狗嗷嗷叫就是事件驱动程序
* 小明打狗，他老爸就打他 ---在这个事件中狗是事件源，狗被打就是事件，小明被打是事件驱动程序
*
* 点击按钮，就弹出一个弹框 - 事件源：按钮，事件：点击，驱动程序：弹出弹框
*/
//2.绑定事件
/*
* 第一步：获取事件源
* 第二步：绑定事件
* 第三步：写驱动程序
*
*/
//a.在标签内部给事件源的事件属性赋值
//<标签 事件属性='驱动程序'></标签>
//<标签 事件属性='函数名()'></标签>-一般不这样绑定
//注意：这个时候被绑定的驱动程序如果是函数，那么这个函数中的this关键字是window
function showAlert(){
alert('弹框')
}
//b.通过节点绑定事件1
//标签节点.事件属性 = 函数
//注意：这个时候函数中的this是事件源
var btn2Node = document.getElementById('btn2')
function changeColor(){
this.style.backgroundColor = 'skyblue'
}
btn2Node.onclick = changeColor;
//c.通过节点绑定事件2
//标签节点.事件属性 = 匿名函数
//注意：这个时候函数中的this是事件源
var btn3Node = document.getElementById('btn3')
btn3Node.onclick = function(){
this.style.color = 'red'
}
//d.通过节点绑定事件3(更新)
//节点.addEventListener(事件名,函数) - 指定的节点产生指定的事件后调用指定函数
//事件名 - 字符串，去掉on
//注意：这个时候函数中的this是事件源；这种方式可以给同一节点的同一事件绑定多个驱动程序
var btn4Node = document.getElementById('btn4')
btn4Node.addEventListener('click',function(){
this.style.color = 'yellow';
});
btn3Node.addEventListener('click',function(){
this.style.backgroundColor = 'yellow';
})
//3.获取事件对象
//当事件的驱动程序是一个函数的时候，函数中可以设置一个参数,来获取当前事件的事件对象
var div1Node = document.getElementById('div1')
div1Node.onclick = function(evt){
//参数evt就是事件对象
//a.clientX/clientY - 事件产生的位置的坐标(相对浏览器的位置)
console.log(evt.clientX,evt.clientY);
console.log(evt.offsetX,evt.offsetY);
console.log(this.style.width)
if(evt.offsetX < 100){
this.style.backgroundColor = 'red'
}else{
this.style.backgroundColor = 'blue'
}
}
</script>
十二.常见事件类型
<!--
常见事件类型
1.onload - 页面加载完成对应的事件(标签加载成功)
window.onload = 函数
2.鼠标事件
onclick - 点击
onmouseover
onmouseout
3.键盘事件
onkeypress - 按下弹起
onkeydown
onkeyup
4.输入框内容改变
onchange - 输入框输入状态结束
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//1.在页面加载完成后才去获取节点
window.onload = function(){
var pNode = document.getElementById('p1')
console.log(pNode)
//点击事件
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 = '鼠标按下'
}
//鼠标弹起事件
pNode.onmouseup = function(){
this.innerText = '鼠标弹起'
}
//鼠标滚动事件
pNode.onmousewheel = function(){
this.innerText = '鼠标滚动'
console.log('鼠标滚动')
}
}
</script>
</head>
<body>
<p id="p1" style="height: 200px;">我是段落</p>
<textarea name="" rows="4" cols="100"></textarea>
<img src="img/03.jpg"/>
</body>
</html>
<script type="text/javascript">
var textareaNode = document.getElementsByTagName('textarea')[0]
textareaNode.onkeypress = function(evt){
//键盘事件对象:key属性 - 按键的值，keyCode属性 - 按键的值的编码
console.log(evt)
// alert('键盘按下')
}
textareaNode.onchange = function(evt){
alert('onchange事件')
}
</script>
网友评论