js基础3
2018-08-21 本文已影响0人
HavenYoung
一、添加事件
- 添加事件方式，见代码
- 显示隐藏图片
操作div的display属性，在block和none之间切换即可 - this使用
在匿名函数中的this就是当前对象
在onclick=demo(this) 就是当前节点
修改内容
this.innerHTML = 'xxx' - 切换背景色
表单内容控制
见代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>添加事件</title>
</head>
<body>
<div style="width:200px; height:200px; background-color:red" onclick="alert('这是一个div')"></div>
<div style="width:200px; height:200px; background-color:blue" onclick="test()"></div>
<div id="div" style="width:200px; height:200px; background-color:green"></div>
</body>
</html>
<script>
function test() {
console.log('花田里犯了错,说好,破晓前忘掉')
}
var odiv = document.getElementById('div')
// odiv.onclick = function () {
// console.log('遥远的东方有一条龙')
// }
odiv.onclick = test
</script>
二、onload函数
- window的事件，windows.onload = function () {} 是在整个文档加载完毕之后执行，但是自己写的onclick的点击函数不能写到onload里面，因为内部函数只能在内部使用，不能再外部使用
- 如果实在是想用，
window.lala = function () {}
三、选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>选项卡</title>
<style>
button {
width: 200px;
height: 100px;
font-size: 40px;
background-color: pink;
margin-left: 50px;
display: inline-block;
}
div {
width: 970px;
height: 600px;
font-size: 50px;
background-color: yellow;
margin-left: 50px;
margin-top: 50px;
display: none;
}
.active {
font-size: 50px;
background-color: blue;
}
.show {
display: block;
}
</style>
</head>
<body>
<button class="active" onclick="dudu(this, 0)">周杰伦</button>
<button onclick="dudu(this, 1)">王力宏</button>
<button onclick="dudu(this, 2)">张学友</button>
<button onclick="dudu(this, 3)">刘德华</button>
<div class="show">菊花台、千里之外、七里香、霍元甲、听妈妈的话、稻香、双节棍、简单爱</div>
<div>花田错、龙的传人、唯一</div>
<div>慢慢、吻别、一千个伤心的理由</div>
<div>谢谢你的爱、冰雨、天意、忘情水</div>
</body>
</html>
<script>
// 得到所有的button
var abuttons = document.getElementsByTagName('button')
// 得到所有的div
var adivs = document.getElementsByTagName('div')
function dudu(obj, index) {
// 先将所有的button的class属性设置为空
for (var i = 0; i < abuttons.length; i++) {
abuttons[i].className = ''
adivs[i].className = ''
}
// 给指定的button添加样式
obj.className = 'active'
// 给指定的div添加样式
adivs[index].className = 'show'
}
</script>
四、定时器
定时器：分为两种，一种是周期性定时器，一种是一次性定时器
- 周期性：每隔5s执行一次函数
- 一次性：几秒之后执行一次函数，执行完毕定时器结束
var timer = setTimeout(fn, 5000)
5000ms之后执行fn一次。然后结束 - 销毁定时器 clearTimeout(timer)
计数器
图片消失
五、获取非行内样式
- IE浏览器获取非行内样式方式
obj.currentStyle['name'] - 火狐和谷歌获取方式
getComputedStyle(odiv, null)['width'] - 获取非行内样式的兼容性写法
function getStyle(obj, name) {
return obj.currentStyle ? obj.currentStyle[name] : getComputedStyle(obj, null)[name]
}
六、BOM操作
- window.setTimeout,window.setInterval
- window.alert\window.confirm
- window.open
- window.history(back、go)
history.go(1) 去往前一个网址
history.go(2) 去往后一个网址
history.back() 倒退一个网址 - location
href : 读取得到当前的url，设置跳转到指定的url
reload() : 刷新整个页面
七、DOM操作
-
children
-
parentNode
-
firstElementChild
-
lastElementChild
-
previousElementSibling
-
nextElementSibling
-
firstChild
-
lastChild
-
previousSibling
-
nextSibling
-
tagName
-
createElement
-
removeChild
-
appendChild
-
insertBefore
-
setAttribute getAttribute
八、select下拉框和oninput事件
-
onchange : 事件，用户点击下拉框触发
-
selectedIndex : 用户点击的option的下标，下标从0开始
-
options : osel.options 可以得到所有的option对象，这是一个数组
-
input框的oninput事件，只要内容改变，就会触发
