一.复习
<!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>