文章目录
- 91 DOM
- 92 事件
- 93 文档的加载
- 94 DOM查询(1)
- 95 图片切换的练习
91 DOM
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"><style>
</style>
</head>
<body><button id="btn">一个按钮</button><script type="text/javascript">console.log(document); var btn = document.getElementById("btn");console.log(btn); btn.innerHTML = "I'm button";</script>
</body>
</html>
92 事件
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"><style>
</style>
</head>
<body><button id="btn" onclick="alert('别点我');">我是一个按钮（单击）</button><button id="btn" ondblclick="alert('别点我');">我是一个按钮（双击）</button><button id="btn" onmousemove="alert('别点我');">我是一个按钮（鼠标移动）</button><script type="text/javascript">var btn = document.getElementById("btn");btn.onclick = function(){alert("你还点");};</script>
</body>
</html>
93 文档的加载
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"> <script type="text/javascript"> var btn = document.getElementById("btn");btn.onclick = function(){alert("hello");};console.log(btn); window.onload = function(){var btn = document.getElementById("btn");btn.onclick = function(){alert("hello");};console.log(btn);};</script>
</head>
<body>
<button id="btn" onclick="alert('别点我');">我是一个按钮（单击）</button>
<script type="text/javascript">var btn = document.getElementById("btn");btn.onclick = function(){alert("hello");};console.log(btn); </script>
</body>
</html>
94 DOM查询(1)
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"> <script type="text/javascript">window.onload = function(){var btn01 = document.getElementById("btn01");btn01.onclick = function(){var bj = document.getElementById("bj");alert(bj.innerHTML);};var btn02 = document.getElementById("btn02");btn02.onclick = function(){var lis = document.getElementsByTagName("li");for(var i = 0; i < lis.length; i++){alert(lis[i].innerHTML);} };var btn03 = document.getElementById("btn03");btn03.onclick = function(){var inputs = document.getElementsByName("gender");for(var i = 0; i < inputs.length; i++){alert(inputs[i].className);}}; }; </script>
</head>
<body><div id="total"><div class="inner"><p>你喜欢哪个城市</p><ul id="city"><li id="bj">北京</li><li>上海</li><li>成都</li><li>深圳</li></ul><br><p>你喜欢哪款游戏</p><ul id="game"><li id="cj">绝地求生</li><li>王者荣耀</li><li>金铲铲</li><li>保卫萝卜</li></ul><br><p>你收集的操作系统是</p><ul id="phone"><li id="android">Android</li><li>IOS</li><li>鸿蒙</li></ul> </div> <div class=""inner>gender:<input type="radio" name="gender" value="male"/>Male<input type="radio" name="gender" value="female"/>Female</div></div> <div id="btnList"> <div><button id="btn01">查找#bj节点</button></div><div><button id="btn02">查找所有li节点</button></div><div><button id="btn03">查找name=gender的所有节点</button></div></div>
</body>
</html>
95 图片切换的练习
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">window.onload = function(){var pre = document.getElementById("pre");var next = document.getElementById("next");var img = document.getElementsByTagName("img")[0];var imgArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg"];var index = 0;var infor = document.getElementById("infor"); pre.onclick = function(){index--;if(index < 0){index = imgArr.length - 1;}img.src = imgArr[index];infor.innerHTML = "一共" + imgArr.length + "张图片，当前是第" + (index + 1) + "张";};next.onclick = function(){index++;if(index > imgArr.length - 1){index = 0;}img.src = imgArr[index];infor.innerHTML = "一共" + imgArr.length + "张图片，当前是第" + (index + 1) + "张";}; };
</script>
<style type="text/css">* {margin: 0;padding: 0;}img {width: 400px;padding: 30px;}#outer {width: 500px;margin: 50px auto;padding: 10px;background-color: grey;text-align: center;}
</style>
</head>
<body><div id="outer"><p id="infor">一共4张图片，当前是第1张</p><img src="img/1.jpg" alt="古风"/><button id="pre">上一张</button><button id="next">下一张</button></div>
</body>
</html>
