1.DOM操作。
使用document.getElementById可以获取元素对象。
<body>
<img src="img/a.jpg" id="img1" width="500px" height="500px">
<p id="text">我是刘长吉</p>
<script>
var img = document.getElementById("img1");
img.src = "img/b.jpg"
var p = document.getElementById("text");
p.innerHTML = "我是张杰"+p.innerHTML
</script>
</body>
2.实现切图。
<body>
<img src="img/a.jpg" id = "img1" width="720" height="450">
<input type="button" value="下一张" id="next">
<script>
var btn1 = document.getElementById("next");
var img = document.getElementById("img1");
var flag = 1;
btn1.onclick = function (){
if(flag == 1){
img.src = "img/b.jpg"
flag = 2
}
else if(flag == 2){
img.src = "img/c.jpg"
flag = 3
}
else if(flag == 3){
img.src = "img/a.jpg"
flag = 1
}
}
</script>
</body>
3.BOM 浏览器对象操作。
将浏览器各个组成部分拆分成对象 组成: window 窗口对象 navigeter 浏览器对象 location 地址栏对象 history 历史记录对象 Screen 显示屏对象
//alert() 携带一个确定按钮 警告框
window.alert("aaaa")
//confirm()携带一个确定和取消按钮的提示框 确定 true 点击取消返回 false
if(confirm("您确定删除吗?")){
document.write("删除成功")
}else {
document.write("删除失败")
}
//prompt() 携带一个输入框的弹窗 返回值就是你输入的内容
var str = prompt("请输入密码")
document.write(str)
4.打开或关闭浏览器。
<body>
<input type="button" value="打开" id="btn1">
<input type="button" value="关闭" id="btn2">
<script>
/* open() 打开一个新的浏览器窗口
close() 关闭一个浏览器窗口 (谁调用我 我关闭谁)*/
//获取元素对象
var newWindow;
document.getElementById("btn1").onclick = function () {
newWindow = open("https://www.baidu.com/")
}
//获取元素对象
document.getElementById("btn2").onclick = function () {
newWindow.close()
}
</script>
</body>
5.定时器。
定时器: setTimeout() 设置一次性定时器 clearTimeout() 关闭一次性定时器 setInterval() 设置循环定时器 clearInterval() 关闭循环定时器
<body>
<script>
var st1 = setTimeout(function () {
alert("aaa")
},2000)
clearTimeout(st1)
var st2 = setInterval(function () {
alert("bbb")
},2000)
clearInterval(st2)
</script>
</body>
6.切图加循环定时器就实现了简单的轮播图。
<body>
<img src="img/a.jpg" id = "img1" width="720" height="450">
<input type="button" value="下一张" id="next" onclick="doNext()">
<script>
var img = document.getElementById("img1");
var flag = 1;
function doNext(){
if(flag == 1){
img.src = "img/b.jpg"
flag = 2
}
else if(flag == 2){
img.src = "img/c.jpg"
flag = 3
}
else if(flag == 3){
img.src = "img/a.jpg"
flag = 1
}
}
//自制定时器轮播图
setInterval(doNext,2000)
</script>
</body>
7.浏览器窗口对象。
<script>
/*
location 地址栏对象
不需要创建 直接使用 location.方法()
常用方法:
reload() 刷新页面
href:跳转资源路径
*/
location.reload()
location.href = "https://www.baidu.com/"
/*
history 历史记录对象
不需要创建 history.方法()
常用方法:
farword()前进一个历史记录
back()后退一个历史记录
go(参数) 参数为正 前进几个历史记录 为负数 后退几个历史记录
*/
history.forward()
history.go(1)
</script>
8.document 文档对象
<script>
// 1.创建 不需要创建直接使用document
// 2.方法
// document.getElementById() 根据id属性值 获取元素对象
var div1Element = document.getElementById("div1");
document.write(div1Element+"<br>")
// document.getElementsByName()根据name属性值 获取元素对象集合
var div2sElement = document.getElementsByName("div2");
document.write(div2sElement.length+"<br>")
// document.getElementsByClassName()根据class属性值 获取元素对象集合
var div3sElement = document.getElementsByClassName("div3");
document.write(div3sElement.length+"<br>")
// document.getElementsByTagName()根据标签名获取元素对象集合
var divsElement = document.getElementsByTagName("div");
document.write(divsElement.length+"<br>")
</script>
9.Element对象。
有两个方法:
removeAttribute("href"),删除元素属性。
setAttribute("href","https://www.baidu.com"),设置元素属性值。
<body>
<a href="">只是一个超链接</a>
<input type="button" id="btn1" value="删除属性">
<input type="button" id="btn2" value="设置属性">
</body>
</html>
<script>
document.getElementById("btn1").onclick = function (){
var a = document.getElementsByTagName("a")[0];
a.removeAttribute("href")
}
document.getElementById("btn2").onclick = function (){
var a = document.getElementsByTagName("a")[0];
a.setAttribute("href","https://www.baidu.com")
}
</script>