一.复习
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script type="text/javascript">var str = prompt("请输出任意的内容:");str = str.split("").reverse().join("");alert(str);</script></head><body></body>
</html>
二.正则表达式
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">var reg = /a{3}/;reg = /(ab){3}/;reg = /b{3}/;reg = /ab{1,3}c/;reg = /ab{3,}c/;reg = /ab+c/;reg = /ab*c/;reg = /ab?c/;reg = /^a/; reg = /a$/; reg = /^a$/;var phoneStr = "13067890123";var phoneReg = /^1[3-9][0-9]{9}$/;console.log(phoneReg.test(phoneStr));</script></head><body></body>
</html>
三.正则表达式
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">var reg = /\./;reg = /\\/;reg = new RegExp("\\.");reg = new RegExp("\\\\");reg = /\w/;reg = /\W/;reg = /\d/;reg = /\D/;reg = /\s/;reg = /\S/;reg = /\bchild\b/;var str = " he llo ";console.log(str);str = str.replace(/^\s*|\s*$/g,"");console.log(str);</script></head><body></body>
</html>
四.邮件的正则
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;var email = "abc.hello@163.com";console.log(emailReg.test(email));</script></head><body></body>
</html>
五.DOM
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><button id="btn">我是一个按钮</button><script type="text/javascript">var btn = document.getElementById("btn");btn.innerHTML = "I'm Button";</script></body>
</html>
六.事件
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--我们可以在事件对应的属性中设置一些js代码，这样当事件被触发时，这些代码将会执行这种写法我们称为结构和行为耦合，不方便维护，不推荐使用 --><!--<button id="btn" onmousemove="alert('讨厌，你点我干嘛！');">我是一个按钮</button>--><button id="btn">我是一个按钮</button><script type="text/javascript">var btn = document.getElementById("btn");btn.onclick = function(){alert("你还点~~~");};</script></body>
</html>
七.文档的加载
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">window.onload = function(){var btn = document.getElementById("btn");btn.onclick = function(){alert("hello");};};</script></head><body><button id="btn">点我一下</button><!--<script type="text/javascript">var btn = document.getElementById("btn");btn.onclick = function(){alert("hello");};</script>--></body>
</html>
八.DOM查询
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><link rel="stylesheet" type="text/css" href="style/css.css" /><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><br><p>你喜欢哪款单机游戏?</p><ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><br /><br /><p>你手机的操作系统是?</p><ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul></div><div class="inner">gender:<input class="hello" type="radio" name="gender" value="male"/>Male<input class="hello" type="radio" name="gender" value="female"/>Female<br><br>name:<input type="text" name="name" id="username" value="abcde"/></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><button id="btn04">查找#city下所有li节点</button></div><div><button id="btn05">返回#city的所有子节点</button></div><div><button id="btn06">返回#phone的第一个子节点</button></div><div><button id="btn07">返回#bj的父节点</button></div><div><button id="btn08">返回#android的前一个兄弟节点</button></div><div><button id="btn09">返回#username的value属性值</button></div><div><button id="btn10">设置#username的value属性值</button></div><div><button id="btn11">返回#bj的文本值</button></div></div></body>
</html>
九.练习
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}#outer{width: 500px;margin: 50px auto;padding: 10px;background-color: greenyellow;text-align: center;}</style><script type="text/javascript">window.onload = function(){var prev = document.getElementById("prev");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" ,"img/5.jpg"];var index = 0;var info = document.getElementById("info");info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";prev.onclick = function(){index--;if(index < 0){index = imgArr.length - 1;}img.src = imgArr[index];info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";};next.onclick = function(){index++;if(index > imgArr.length - 1){index = 0;}img.src = imgArr[index];info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";};};</script></head><body><div id="outer"><p id="info"></p><img src="img/1.jpg" alt="冰棍" /><button id="prev">上一张</button><button id="next">下一张</button></div></body>
</html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
