js基础2
2018-08-21 本文已影响0人
晓晓的忍儿
1.事件
1）添加事件
点击事件：onclick
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<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="div1" style="width: 200px;height: 200px;background-color: green;"></div>
</body>
</html>
<script type="text/javascript">
function test(){
console.log('这是div2号，准备完毕')
}
var odiv=document.getElementById('div1')
odiv.onclick=function (){
console.log('这是div3号，报道完毕')
}
</script>
添加事件.JPG
2)图片显隐
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>显示隐藏图片</title>
</head>
<body>
<div id="img1" style="display: none;">
<!--得到图片-->
<img src="img/q2.jpg"/>
</div>
<button class="butt" style="width: 70px;height: 35px;background-color: greenyellow;">请出席</button>
</body>
</html>
<script type="text/javascript">
var obutton=document.getElementsByClassName('butt')[0]
obutton.onclick=function (){
var odiv=document.getElementById('img1')
if (odiv.style.display=='none'){
obutton.innerHTML='请休息'
odiv.style.display='block'
obutton.style.backgroundColor='red'
}
else if(odiv.style.display=='block'){
obutton.innerHTML="请出席"
odiv.style.display='none'
obutton.style.backgroundColor='greenyellow'
}
}
</script>
出现：
3）this的用法
在匿名函数中的this就是当前对象
在onclick=demo(this) 就是当前节点
修改内容
this.innerHTML = 'xxx'
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>this的应用</title>
</head>
<body>
<div class="div2" style="width: 100px;height: 100px;background-color: goldenrod;"></div>
<!--this代表该div-->
<div style="width: 100px;height: 100px;background-color: burlywood" onclick="demo(this)"></div>
</body>
</html>
<script type="text/javascript">
var odiv=document.getElementsByClassName('div2')[0]
odiv.onclick=function (){
//this代表对象odiv
this.style.width='200px'
this.style.height='200px';
this.innerHTML='<p>秦时明月汉时关,</p><p>万里长征人未还。</p><p>但使龙城飞将在,</p><p>不教胡马度阴山。</p>'
}
function demo(obj){
console.log(obj)
obj.style.backgroundColor='red'
obj.style.height='200px'
}
</script>
4)改变背景颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>改变背景颜色</title>
</head>
<body>
<div class="div3" style="width: 200px;height: 200px;background-color: green;">
</div>
</body>
</html>
<script type="text/javascript">
var odiv=document.getElementsByClassName('div3')[0]
odiv.onclick=function(){
if (odiv.style.backgroundColor=='green'){
odiv.style.backgroundColor='red'
}
else if(odiv.style.backgroundColor=='red'){
odiv.style.backgroundColor='green'
}
}
</script>
5)表单控制
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单控制</title>
</head>
<body>
<input type="text" name="" id="ip" value="请输入用户名" />
<input type="text" name="" id="" value="请输入用户名" onfocus="clear1(this)" onblur="recover(this)"/>
</body>
</html>
<script type="text/javascript">
var oinput=document.getElementById('ip')
oinput.onfocus=function (){
if(oinput.value=='请输入用户名'){
oinput.value=''
}
}
oinput.onblur=function(){
if(oinput.value==''){
oinput.value='请输入用户名'
}
}
function clear1(obj){
if (obj.value=='请输入用户名'){
obj.value=''
}
}
function recover(obj){
if (obj.value==''){
obj.value='请输入用户名'
}
}
</script>
2.onload函数
window的事件，windows.onload = function () {} 是在整个文档加载完毕之后执行，但是自己写的onclick的点击函数不能写到onload里面，因为内部函数只能在内部使用，不能再外部使用
如果实在是想用，window.lala = function () {}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>onload函数</title>
<script type="text/javascript">
// demo() 有错
window.onload=function(){
var odiv = document.getElementById('div2')
odiv.onclick = function () {
this.style.backgroundColor = 'red'
}
}
// function demo(obj) {
// obj.style.backgroundColor = 'cyan'
// }
</script>
</head>
<body>
<div id="div2" style="width:300px; height:300px; background-color:pink" onclick="demo(this)">
</div>
</body>
</html>
<script type="text/javascript">
// function demo(obj){
// obj.style.backgroundColor='red'
// }
</script>
3.选项卡
方法一：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
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;
}
.active1{
font-size: 50px;
background-color: brown;
}
.show1{
display: block;
}
</style>
</head>
<body>
<button class="active1" 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='show1'>王 王 王 王 王 王 王 王 王 王 王 王 王 王 王 王 王</div>
<div>李 李 李 李 李 李 李 李 李 李 李 李 李 李 李 李 李 李 李 李 李 </div>
<div>张 张 张 张 张 张 张 张 张 张 张 张 张 张 张 张 张 张 张 张 张 </div>
<div>刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 </div>
</body>
</html>
<script type="text/javascript">
var obuttons=document.getElementsByTagName('button')
var adivs=document.getElementsByTagName('div')
function dudu(obj,index){
for (var i=0;i<obuttons.length;i++){
obuttons[i].className=''
adivs[i].className=''
}
obj.className='active1'
adivs[index].className='show1'
}
</script>
方法二：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
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;
}
.active2{
font-size: 50px;
background-color: brown;
}
.show2{
display: block;
}
</style>
</head>
<body>
<button class="active2">王</button>
<button >李</button>
<button >张</button>
<button >刘</button>
<div class='show2'>王 王 王 王 王 王 王 王 王 王 王 王 王 王 王 王 王</div>
<div>李 李 李 李 李 李 李 李 李 李 李 李 李 李 李 李 李 李 李 李 李 </div>
<div>张 张 张 张 张 张 张 张 张 张 张 张 张 张 张 张 张 张 张 张 张 </div>
<div>刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 </div>
</body>
</html>
<script type="text/javascript">
var obuttons=document.getElementsByTagName('button')
var adivs=document.getElementsByTagName('div')
for (var i=0;i<obuttons.length;i++){
obuttons[i].index=i
obuttons[i].onclick=function(){
for (var j=0;j<obuttons.length;j++){
obuttons[j].className=''
adivs[j].className=''
}
this.className='active2'
adivs[this.index].className='show2'
}
}
</script>
2.JPG
4.定时器
定时器：分为两种，一种是周期性定时器，一种是一次性定时器
周期性：每隔5s执行一次函数
一次性：几秒之后执行一次函数，执行完毕定时器结束
var timer = setTimeout(fn, 5000)
5000ms之后执行fn一次。然后结束
销毁定时器 clearTimeout(timer)
一次性：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时器</title>
</head>
<body>
<div id="img2">
<img src="../img/q2.jpg"/>
</div>
<button id="btn">取消定时器</button>
</body>
</html>
<script type="text/javascript">
var odiv=document.getElementById('img2')
var obutton=document.getElementById('btn')
var timer=setTimeout(function(){
odiv.style.display='none'
},5000)
obutton.onclick=function (){
clearTimeout(timer)
}
</script>
周期性：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>周期性定时器</title>
</head>
<body>
<div id="img3" style="width: 200px;height: 200px;background-color: red;">
</div>
<button id='but'>停止</button>
</body>
</html>
<script type="text/javascript">
var odiv=document.getElementById('img3')
var obutton=document.getElementById('but')
var timer=setInterval(function(){
color=odiv.style.backgroundColor
if (color=='red'){
odiv.style.backgroundColor='green'
}
else if(color=='green'){
odiv.style.backgroundColor='red'
}
},50)
obutton.onclick=function(){
clearInterval(timer)
}
</script>
计时器：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div3{
width: 100%;
height: 300px;
font-size: 300px;
background-color: pink;
text-align: center;
line-height: 300px;
}
</style>
</head>
<body>
<div id="div3">
0
</div>
</body>
</html>
<script type="text/javascript">
var odiv=document.getElementById('div3')
var timer=null
var i=0
odiv.onmouseover=function(){
timer=setInterval(function(){
i+=1
odiv.innerHTML=i
},1000)
}
odiv.onmouseout=function(){
clearInterval(timer)
}
</script>
5)获取非行内样式
IE浏览器获取非行内样式方式
obj.currentStyle['name']
火狐和谷歌获取方式
getComputedStyle(odiv, null)['width']
获取非行内样式的兼容性写法
function getStyle(obj, name) {
return obj.currentStyle ? obj.currentStyle[name] : getComputedStyle(obj, null)[name]
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div id="lala" ></div>
<input type="text" id="ip">
<button onclick="demo()">点我获取div宽度</button>
</body>
</html>
<script type="text/javascript">
var odiv=document.getElementById('lala')
function demo() {
// 获 取div的宽度,只能获取行内样式
// var kuan = odiv.style.width
// 获取非行内样式
// ie浏览器
var kuan = odiv.currentStyle['width']
// 谷歌和搜狐
// var kuan = getComputedStyle(odiv, null)['width']
// var kuan = getStyle(odiv, 'width')
// 显示到input框中
var oinput = document.getElementById('ip')
oinput.value = kuan
}
// 获取非行内样式的兼容性写法
function getStyle(obj, name) {
return obj.currentStyle ? obj.currentStyle[name] : getComputedStyle(obj, null)[name]
}
</script>
6.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() : 刷新整个页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BOM操作</title>
</head>
<body>
<button id="btn1">操作1</button>
<button id="btn2">操作2</button>
<button id="btn3">操作3</button>
<button id="btn4">操作4</button>
</body>
</html>
<script type="text/javascript">
var obutton1=document.getElementById('btn1')
var obutton2=document.getElementById('btn2')
var obutton3=document.getElementById('btn3')
var obutton4=document.getElementById('btn4')
obutton1.onclick=function(){
ret=window.confirm('请选择确定或者取消')
if (ret==true){
console.log('你点击了确定')
}
if(ret==false){
console.log('你点击了取消')
}
}
obutton2.onclick=function(){
open('http://www.baidu.com/','_self')
}
obutton3.onclick=function(){
// window.history.go(2)
window.history.back(1)
}
obutton4.onclick=function(){
console.log(location.href)
// location.href = 'http://www.baidu.com/'
location.reload()
}
</script>
7.select下拉框和oninput事件
onchange : 事件，用户点击下拉框触发
selectedIndex : 用户点击的option的下标，下标从0开始
options : osel.options 可以得到所有的option对象，这是一个数组
input框的oninput事件，只要内容改变，就会触发
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>select下拉框</title>
</head>
<body>
<select name="刺客" id="sel">
<option value="1">阿珂</option>
<option value="2">兰陵王</option>
<option value="3">孙悟空</option>
<option value="4">赵云</option>
<option value="5">李白</option>
</select>
<input type="text" id="ip">
</body>
</html>
<script type="text/javascript">
var osel=document.getElementById('sel')
var oip=document.getElementById('ip')
osel.onchange=function(){
alert(osel.options[osel.selectedIndex].innerHTML)
}
oip.oninput=function(){
console.log(this.value)
}
</script>
