js使用:
1.关闭页面(close):
2.打开页面:
3.警告框(alert):
4.确认框(confirm):
可是调节高度宽度。
例子:
<button id="bt1">关闭页面</button>
<button id="bt2" onclick="b()">打开百度</button>
<script>
//可省略
//对话框
// let str= prompt('请输入姓名:')
// //警告框
// alert(str)
// //确认框
// let flag=confirm('是否删除?')
// alert(flag)
function a(){
//关闭页面
close()
}
document.querySelector('#bt1').onclick=a
function b(){
open('a.html','新的页面','height=500px,left:300px,top:300px')
}
</script>
2.跳转,前进,后退,刷新页面
跳转:
<a href="../day11/2.html">跳转</a>
前进后退:
<button>前进</button>
<button>后退</button>
<a href="3.html">aaaaa</a>
<script>
function a() {
history.forward()
// history.go(1)
}
function b() {
history.back()
// history.go(-1)
}
document.querySelector('button:nth-child(1)').onclick=a
document.querySelector('button:nth-child(2)').onclick=b
</script>
刷新页面:
<script>
document.write('端口号'+location.host+'<br>' )
document.write('端口号'+location.hostname+'<br>' )
document.write('端口号'+location.href+'<br>' )
function a(){
location.reload()//相当于刷新页面
}
function b(){
location.replace('2.html')
}
</script>
document用法:
<h2 class="bbb">document</h2>
<h2 class="bbb">document</h2>
<h2 id="aaa">adfghh</h2>
<h2 id="aaa">asdfght</h2>
<ul>
<li>222</li>
<li>13</li>
<li>43</li>
<li>we</li>
<li>sd</li>
</ul>
1,通过id获取元素,获取的是单个元素
document.getElementById('aaa').style.backgroundColor = 'blue'
2.通过class获取元素,获取到的是一个伪数组
document.getElementsByClassName('bbb')[0].style.backgroundColor = 'red'
3.通过标签名获取元素,获取到的是一个伪数组
// document.getElementsByTagName('li')[0].style.backgroundColor='green'
let lis = document.getElementsByTagName('li')
for (let i = 0; i < lis.length; i++) {
document.getElementsByTagName('li')[i].style.color = 'green'
}
4.通过选择器进行获取,只获取一个
document.querySelector('li').style.backgroundColor = 'yellow'
5.获取所有,伪数组
let li2 = document.querySelectorAll('li')
for (let i = 0;i<li2.length; i++) {
document.querySelectorAll('li')[i].style.fontSize = '30px'
}
6.写入文本
document.write('<h2>hello word!</h2>')