javaScript
来源：互联网 发布：java软件工程师证书 编辑：程序博客网 时间：2024/04/28 07:23
JavaScript基础
属性选择
//DOM文档对象模型 根元素 html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>问候JavaScript他大爷</title>
<script type="text/javascript">
alert("JavaScript大爷，你好！");//浏览器上解释执行弹框
document.write("JavaScript大爷，你好啊！");//document 文档对象可以在页面上直接写
</script>
</head>
<body>
</body>
</html>
7 透明度
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>fadeTo()方法</title>
<script src="js/jquery-1.11.0.min.js"></script>
<style type="text/css"></style>
</head>
<body>
<p><img src="img/two.jpg" /></p>
<p>
<select id="sel">
<option value="0.2">0.2</option>
<option value="0.4">0.4</option>
<option value="0.6">0.6</option>
<option value="0.8">0.8</option>
<option value="1" selected="selected">1</option>
</select>
</p>
<script type="text/javascript">
$(function(){
$("#sel").change(function(){
var opacity=$(this).val();
$("img").fadeTo(3000,opacity);
});
});
</script>
</body>
</html>
8 滑入滑出动画
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滑入滑出动画</title>
<script src="js/jquery-1.11.0.min.js"></script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 12px;
}
ul {
list-style: none;
}
a{
text-decoration:none;
}
ul.firstMenu{
height:25px;
border:1px solid #ccc;
width:400px;
margin:12px auto;
}
ul.firstMenu li{
float:left;
padding:0px 8px;
heigth:25px;
line-height:25px;
}
ul.firstMenu li.secondLi{
position:relative; /*下级菜单的绝对定位以父容器为参考点*/
cursor:hand;
}
ul.firstMenu li ul{
border:1px solid #666;
border-top:none;
width:100px;
position:absolute;
display:none;
}
ul.firstMenu li ul li{
float:none;
height:18px;
}
</style>
</head>
<body>
<div id="menu">
<ul class="firstMenu">
<li><a href="#">购物车</a></li>
<li>|</li>
<li class="secondLi">我的当当
<ul>
<li><a href="#">我的订单</a></li>
<li><a href="#">我的收藏</a></li>
<li><a href="#">我的余额</a></li>
</ul>
</li>
<li>|</li>
<li><a href="#">手机当当</a></li>
<li>|</li>
<li><a href="#">企业采购</a></li>
<li>|</li>
<li><a href="#">自助服务</a></li>
</ul>
</div>
<script type="text/javascript">
$(function(){
$(".secondLi").hover(function(){
$(".secondLi ul").slideDown(1000);
},function(){
$(".secondLi ul").slideUp(1000);
});
});
</script>
</body>
</html>
方法2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滑入滑出动画</title>
<script src="js/jquery-1.11.0.min.js"></script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 12px;
}
ul {
list-style: none;
}
a{
text-decoration:none;
}
ul.firstMenu{
height:25px;
border:1px solid #ccc;
width:400px;
margin:12px auto;
}
ul.firstMenu li{
float:left;
padding:0px 8px;
heigth:25px;
line-height:25px;
}
ul.firstMenu li.secondLi{
position:relative; /*下级菜单的绝对定位以父容器为参考点*/
cursor:hand;
}
ul.firstMenu li ul{
border:1px solid #666;
border-top:none;
width:100px;
position:absolute;
display:none;
}
ul.firstMenu li ul li{
float:none;
height:18px;
}
</style>
</head>
<body>
<div id="menu">
<ul class="firstMenu">
<li><a href="#">购物车</a></li>
<li>|</li>
<li class="secondLi">我的当当
<ul>
<li><a href="#">我的订单</a></li>
<li><a href="#">我的收藏</a></li>
<li><a href="#">我的余额</a></li>
</ul>
</li>
<li>|</li>
<li><a href="#">手机当当</a></li>
<li>|</li>
<li><a href="#">企业采购</a></li>
<li>|</li>
<li><a href="#">自助服务</a></li>
</ul>
</div>
<script type="text/javascript">
$(function(){
$(".secondLi").click(function(){
$(".secondLi ul").slideToggle(1000);
});
});
</script>
</body>
</html>
变量类型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript引入方式</title>
<script type="text/javascript">
alert("头部");
</script>
</head>
<body>
<!-- <script type="text/javascript" src="myJs.js" charset="gbk"></script> -->
<script type="text/javascript" src="myJs.js"></script>
<script type="text/javascript">
alert("身体");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript注释</title>
</head>
<body>
<script type="text/javascript">
// document.write("a<br/>");
/*document.write("b<br/>");
document.write("c<br/>");*/
document.write("d<br/>");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript变量</title>
</head>
<body>
<script type="text/javascript">
var a ; // 定义变量a
a=1; // 给变量a赋值
document.write("a="+a+"<br/>");
a="我是字符串";
document.write("a="+a+"<br/>");
var b="你好啊";
document.write("b="+b+"<br/>");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript基本数据类型</title>
</head>
<body>
<script type="text/javascript">
var a=1;
document.write("数值类型a="+a+"<br/>");
var b=1.2;
document.write("数值类型b="+b+"<br/>");
var c='我是人';
document.write("字符串类型c="+c+"<br/>");
var d=false;
document.write("布尔类型d="+d+"<br/>");
var e; // 表示变量不含有值
document.write("e="+e+"<br/>");
var f="你好";
document.write("f="+f+"<br/>");
f=null; // 变量置空
document.write("f="+f+"<br/>");
</script>
</body>
</html>
1 JS点击事件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>显示和隐藏动画</title>
<script src="js/jquery-1.11.0.min.js"></script>
<style type="text/css">
img{
display:none;
}
</style>
</head>
<body>
<p><img src="img/two.jpg" id="pic"/></p>
<input type="button" value="显示" id="btn" />
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
if($(this).val()=="显示"){
$("#pic").show("slow",function(){
$(this).css({"border":"1px solid #ccc","padding":"5px"});
} );
$(this).val("隐藏")
}else{
$("#pic").hide("slow");
$(this).val("显示");
}
});
});
</script>
</body>
</html>
2 队列中的动画
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
div{
border:1px solid #069;
width:50px;
height:50px;
font-size:13px;
padding:5px;
}
</style>
<script src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
$("div").click(function(){ //div块单击事件
$(this).animate({height:100},"slow") //第1列
.animate({width:100},"slow")//第2列
.animate({height:50},"slow")//第3列
.animate({width:50},"slow");//第4列
});
});
</script>
</head>
<body>
<div>队列中的动画</div>
</body>
</html>
3 下拉显示菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滑入滑出动画</title>
<script src="js/jquery-1.11.0.min.js"></script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 12px;
}
ul {
list-style: none;
}
a{
text-decoration:none;
}
ul.firstMenu{
height:25px;
border:1px solid #ccc;
width:400px;
margin:12px auto;
}
ul.firstMenu li{
float:left;
padding:0px 8px;
heigth:25px;
line-height:25px;
}
ul.firstMenu li.secondLi{
position:relative; /*下级菜单的绝对定位以父容器的左上角为参考点*/
cursor:hand;
}
ul.firstMenu li ul{
border:1px solid #666;
border-top:none;
width:100px;
position:absolute;
display:none;
}
ul.firstMenu li ul li{
float:none;
height:18px;
}
</style>
</head>
<body>
<div id="menu">
<ul class="firstMenu">
<li><a href="#">购物车</a></li>
<li>|</li>
<li class="secondLi">我的当当
<ul>
<li><a href="#">我的订单</a></li>
<li><a href="#">我的收藏</a></li>
<li><a href="#">我的余额</a></li>
</ul>
</li>
<li>|</li>
<li><a href="#">手机当当</a></li>
<li>|</li>
<li><a href="#">企业采购</a></li>
<li>|</li>
<li><a href="#">自助服务</a></li>
</ul>
</div>
<script type="text/javascript">
$(function(){
$(".secondLi").hover(function(){
$(".secondLi ul").stop().slideDown(1000);
},function(){
$(".secondLi ul").stop().slideUp(1000);
});
});
</script>
</body>
</html>
4 菜单显示列表
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>伸缩菜单</title>
<script src="js/jquery-1.11.0.min.js"></script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 12px;
}
div#menu{
margin:30px;
width: 100px;
}
ul {
list-style: none;
}
ul li {
height: 30px;
line-height: 40px;
text-align:center;
border: 1px solid #93D6C5;
border-bottom: none;
}
ul li a{
text-decoration:none;
}
ul li.title {
background-color: #F90;
}
ul li.lastItem{
background-image:url(img/up.jpg);
background-position:center top;
background-repeat:no-repeat;
cursor:pointer;
border:none;
border-top:1px solid #93D6C5;
}
ul li.down{
background-image:url(img/down.jpg);
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li class="title">商品服务分类</li>
<li><a href="#">鞋包配饰</a></li>
<li><a href="#">运动户外</a></li>
<li><a href="#">珠宝手表</a></li>
<li><a href="#">手机数码</a></li>
<li><a href="#">家电办公</a></li>
<li><a href="#">护肤彩妆</a></li>
<li><a href="#">母婴用品</a></li>
<li><a href="#">家纺居家</a></li>
<li class="lastItem"></li>
</ul>
</div>
<script type="text/javascript">
$(function(){
$("#menu li.lastItem").click(function(){
//切换菜单
$("#menu li:gt(5):not(:last)").toggle();
//切换底部箭头方向
$(this).toggleClass("down");
});
});
</script>
</body>
</html>
5 图片淡入淡出
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>淡入和淡出动画</title>
<script src="js/jquery-1.11.0.min.js"></script>
<style type="text/css">
img{
display:none;
}
</style>
</head>
<body>
<p><img src="img/two.jpg" id="pic"/></p>
<input type="button" value="淡入" id="btn" />
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
if($(this).val()=="淡入"){
$("#pic").fadeIn("slow",function(){
$(this).css({"border":"1px solid #ccc","padding":"5px"});
} );
$(this).val("淡出");
}else{
$("#pic").fadeOut("slow");
$(this).val("淡入");
}
});
});
</script>
</body>
</html>
6 菜单渐入显示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>显示隐藏动画</title>
<script src="js/jquery-1.11.0.min.js"></script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 12px;
}
div#menu{
margin:30px;
width: 100px;
}
ul {
list-style: none;
}
ul li {
height: 30px;
line-height: 40px;
text-align:center;
border: 1px solid #93D6C5;
border-bottom: none;
}
ul li a{
text-decoration:none;
}
ul li.title {
background-color: #F90;
}
ul li.lastItem{
background-image:url(img/up.jpg);
background-position:center top;
background-repeat:no-repeat;
cursor:pointer;
border:none;
border-top:1px solid #93D6C5;
}
ul li.down{
background-image:url(img/down.jpg);
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li class="title">商品服务分类</li>
<li><a href="#">鞋包配饰</a></li>
<li><a href="#">运动户外</a></li>
<li><a href="#">珠宝手表</a></li>
<li><a href="#">手机数码</a></li>
<li><a href="#">家电办公</a></li>
<li><a href="#">护肤彩妆</a></li>
<li><a href="#">母婴用品</a></li>
<li><a href="#">家纺居家</a></li>
<li class="lastItem"></li>
</ul>
</div>
<script type="text/javascript">
$(function(){
$("#menu li.lastItem").click(function(){
//切换菜单
$("#menu li:gt(5):not(:last)").fadeToggle();
//更换底部箭头方向
$(this).toggleClass("down");
});
});
</script>
</body>
</html>
JS基本语法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>算术运算符</title>
</head>
<body>
<script type="text/javascript">
var x=10,y=4;
document.write("x="+x+",y="+y+"<br/>");
document.write("x+y="+(x+y)+"<br/>");
document.write("x-y="+(x-y)+"<br/>");
document.write("x*y="+(x*y)+"<br/>");
document.write("x/y="+(x/y)+"<br/>");
document.write("x%y="+(x%y)+"<br/>");
document.write("x++="+(x++)+"<br/>");
document.write("x="+x+"<br/>");
document.write("++y="+(++y)+"<br/>");
document.write("y="+y+"<br/>");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>赋值运算符</title>
</head>
<body>
<script type="text/javascript">
var x=10,y=4;
document.write("x="+x+",y="+y+"<br/>");
x=10;y=4;
document.write("x="+x+"<br/>");
x=10;y=4;
document.write("x+=y,x="+(x+=y)+"<br/>");
x=10;y=4;
document.write("x-=y,x="+(x-=y)+"<br/>");
x=10;y=4;
document.write("x*=y,x="+(x*=y)+"<br/>");
x=10;y=4;
document.write("x/=y,x="+(x/=y)+"<br/>");
x=10;y=4;
document.write("x%=y,x="+(x%=y)+"<br/>");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>比较运算符</title>
</head>
<body>
<script type="text/javascript">
var x=10,y=4;
document.write("x="+x+",y="+y+"<br/>");
document.write("x==10,结果"+(x==10)+"<br/>");
document.write("x=='10',结果"+(x=='10')+"<br/>");
document.write("x===10,结果"+(x===10)+"<br/>");
document.write("x==='10',结果"+(x==='10')+"<br/>");
document.write("x!=10,结果"+(x!=10)+"<br/>");
document.write("x!='10',结果"+(x!='10')+"<br/>");
document.write("x!==10,结果"+(x!==10)+"<br/>");
document.write("x!=='10',结果"+(x!=='10')+"<br/>");
document.write("x>y,结果"+(x>y)+"<br/>");
document.write("x<y,结果"+(x<y)+"<br/>");
document.write("x>=y,结果"+(x>=y)+"<br/>");
document.write("x<=y,结果"+(x<=y)+"<br/>");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>逻辑运算符</title>
</head>
<body>
<script type="text/javascript">
var x=10,y=4;
document.write("x="+x+",y="+y+"<br/>");
document.write("(x<11&&y>5),结果"+(x<11&&y>5)+"<br/>");
document.write("(x<11||y>5),结果"+(x<11||y>5)+"<br/>");
document.write("!(x<11),结果"+!(x<11)+"<br/>");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三目运算符</title>
</head>
<body>
<script type="text/javascript">
var x=10,y=4;
document.write("x="+x+",y="+y+"<br/>");
document.write("(x>y?x:y),结果"+(x>y?x:y)+"<br/>");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字符串连接“+”</title>
</head>
<body>
<script type="text/javascript">
var x=10,y='4';
document.write("x="+x+",y="+y+"<br/>");
document.write("(x+y),结果"+(x+y)+"<br/>");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>if...else语句；</title>
</head>
<body>
<script type="text/javascript">
var a=1;
if(a>2){
alert("a>2");
}else{
alert("a<=2");
}
var month=6;
if(month>=1&&month<=3){
alert("春天");
}else if(month>=4&&month<=6){
alert("夏天");
}else if(month>=7&&month<=9){
alert("秋天");
}else if(month>=10&&month<=12){
alert("冬天");
}else{
alert("逆天了");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>switch语句；</title>
</head>
<body>
<script type="text/javascript">
var d=6;
switch(d){
case 1:alert("周一");break;
case 2:alert("周二");break;
case 3:alert("周三");break;
case 4:alert("周四");break;
case 5:alert("周五");break;
case 6:alert("周六");break;
case 7:alert("周日");break;
default:alert("逆天了");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>for循环语句；</title>
</head>
<body>
<script type="text/javascript">
for(var i=0;i<10;i++){
document.write("i="+i+"<br/>");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>while/do..while语句；</title>
</head>
<body>
<script type="text/javascript">
var i=0;
while(i<10){
document.write("i="+i+"<br/>");
i++;
}
var j=0;
do{
document.write("j="+j+"<br/>");
j++;
}while(j<10);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript函数；</title>
</head>
<body>
<script type="text/javascript">
function fun1(){
alert("我的第一个方法");
}
function fun2(param1){
alert(param1);
}
function fun3(param1,param2){
alert(param1+" "+param2);
}
function fun4(param1,param2){
return param1+" "+param2;
}
// fun1();
// fun2("fuck");
// fun3("fuck","you");
var result=fun4("fuck","you");
alert(result);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Break VS Continue</title>
</head>
<body>
<script type="text/javascript">
document.write("break;<br/>");
for(var i=0;i<10;i++){
if(i==5){
break;//1,2,3,4
}
document.write("i="+i+"<br/>");
}
document.write("<hr/>");
document.write("continue;<br/>");
for(var j=0;j<10;j++){
if(j==5){
continue;
}
document.write("j="+j+"<br/>");
}
</script>
</body>
</html>
JS动画
9 自定义动画
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自定义动画</title>
<script src="js/jquery-1.11.0.min.js"></script>
</head>
<body>
<img src="img/tmac.jpg" />
<script type="text/javascript">
$(function(){
$("img").click(function(){
$(this).animate({"width":"180px","height":"180px"},"slow");
});
});
</script>
</body>
</html>
10 滑动动画
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自定义动画</title>
<script src="js/jquery-1.11.0.min.js"></script>
<style type="text/css">
img{
position:absolute;
top:0px;
left:0px;
}
</style>
</head>
<body>
<img src="img/tmac.jpg" />
<script type="text/javascript">
$(function(){
$("img").click(function(){
$(this).animate({
"left":"+=100px",
"top":"+=100px",
"opacity":"0.5"},3000);
});
});
</script>
</body>
</html>
11 图片上下轮播
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>利用自定义动画切换图片</title>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
ul {
list-style: none;
}
#main {
margin:20px;
width:350px;
height:300px;
overflow:hidden;
position:relative;
}
#imgarea li {
width:350px;
height:300px;
}
#imgarea img{
border:none;
}
#imgID{
position:absolute;
left:5px;
bottom:5px;
z-index:100;
}
#imgID li{
float: left;
color: #069;
text-align: center;
line-height: 16px;
width: 16px;
height: 16px;
font-family: Arial;
font-size: 12px;
cursor: pointer;
overflow: hidden;
margin: 3px 1px;
border: 1px solid #069;
background-color: #fff;
}
#imgID li.active{
color: #fff;
line-height: 16px;
width: 16px;
height: 16px;
font-size: 14px;
margin: 3px 1px;
border: 1px solid #069;
background-color: #069;
font-weight: bold;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.0.min.js">
</script>
<script type="text/javascript">
function turnPics() {
var index = 0; //当前播放图片的索引
var stop = false; //标识是否是手动播放，默认false表示自动播放
var $pagesLis = $("#main").find("#imgID li");//保存组织编号的li
$pagesLis.eq(index).addClass("active")
.siblings()//兄弟元素
.removeClass("active");
var mainDivh = $("div#main").height(); //获取div的高度
setInterval(function () { //自动播放
if (stop) return;
index++;
if (index == $pagesLis.length) {
index = 0;//从头播放
}
$("ul#imgarea")
.stop(true, true) //清空动画序列，立即完成正在执行的动画
.animate({"marginTop":-mainDivh*index},1000);
$pagesLis.eq(index)
.addClass("active")
.siblings()
.removeClass("active");
}, 3000);
$pagesLis.mouseover(function () { //控制手动播放
stop = true; //自动轮播结束
index = $pagesLis.index($(this)); ///光标移入的编号
$("ul#imgarea")
.stop(true, true) //清空动画序列，立即完成正在执行的动画
.animate({ "marginTop": -mainDivh * index }, 1000);
$(this).addClass("active")
.siblings()
.removeClass("active");
}).mouseout(function () {
stop = false;
});
}
$(function () {
turnPics(); //轮播
});
</script>
</head>
<body>
<div id="main" >
<ul id="imgarea" >
<li><a href="#"><img src="img/list1.jpg" width="350" height="300"/></a></li>
<li><a href="#"><img src="img/list2.jpg" width="350" height="300"/></a></li>
<li><a href="#"><img src="img/list3.jpg" width="350" height="300"/></a></li>
<li><a href="#"><img src="img/list4.jpg" width="350" height="300"/></a></li>
</ul>
<ul id="imgID" >
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
</html>
12 图片左右轮播
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>����</title>
<link type="text/css" rel="stylesheet" href="css/imgPlay.css" />
<style type="text/css">
body {font-size:12px; color:#222; background:#f0f0f0;}
img {border:0px;}
#divImgs{margin: 10px auto;}
</style>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/imgPlay.js"></script>
<script type="text/javascript">
$(function(){
$.imgPlay("#divImgs");
});
</script>
</head>
<body>
<div id="divImgs" class="imgPlay">
<ul>
<li><a href="#" target="_blank"><img src="img/food1.jpg" /></a></li>
<li><a href="#" target="_blank"><img src="img/food2.jpg" /></a></li>
<li><a href="#" target="_blank"><img src="img/food3.jpg" /></a></li>
<li><a href="#" target="_blank"><img src="img/food4.jpg" /></a></li>
<li><a href="#" target="_blank"><img src="img/food5.jpg" /></a></li>
</ul>
</div>
</body>
</html>
imgplay.css
$(function(){
//参数为包含ul li img的层对象
jQuery.imgPlay = function(obj){
var objW = $(obj).width();//显示区域的宽
var objH = $(obj).height();//显示区域的高
var imgCount = $(obj).find("li").length;//获取图片个数
var index = 0;//当前索引
var imgTimer; //图片轮播对象
//动态添加下标
var $imgNum = $("<div class='imgNum'></div>");
for (var i = 0; i < imgCount; i++) {
$imgNum.append("<span>"+(i+1)+"</span>");
}
$(obj).append($imgNum);
//下标添加结束
//给下标添加鼠标移入事件
$(obj).find("span").mouseenter(function(){
var index = $(this).index();
imgShow(index);
});
//添加结束
//改变UL的宽度，让LI在同一行
$(obj).children("ul").css("width",objW*imgCount);
//图片轮播效果
$(obj).hover(
function(){
clearInterval(imgTimer);
},
function(){
imgTimer = setInterval(function(){
imgShow(index);
index++;
if(index == imgCount) {
index = 0;
}
},2000);
}
);
//开启轮播效果
$(obj).trigger("mouseout");
//显示指定index的图片和右下角数字
function imgShow(index){
//根据index值计算ul元素要移动到的left值
var nowLeft = -index*objW;
//改变对应下标样式
$(obj).find("span").removeClass("on");
$(obj).find("span").eq(index).addClass("on");
//停止之前的动画效果
$(obj).children("ul").stop(true,false);
//通过animate()调整ul元素滚动到计算出的position
$(obj).children("ul").animate({"left":nowLeft},300);
}
};
});
点击
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript处理DOM事件</title>
<script type="text/javascript">
function fuck(){
alert("点我干嘛？");
}
</script>
</head>
<body>
<input type="button" value="点我一下" onclick="fuck()"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript操作DOM节点</title>
<script type="text/javascript">
function modifyDOM(){
document.getElementById("txt").innerHTML="用户名：";//font容器
document.getElementById("userName").value="Jack";//input 非容器 value
}
function addDOM(){
var para=document.createElement("p");//节点p
var node=document.createTextNode("...前...");
var para2=document.createElement("p");
var node2=document.createTextNode("...后...");
para.appendChild(node);//文本节点添加到p标签里
para2.appendChild(node2);
var parent=document.getElementById("parent");
var son1=document.getElementById("son1");
parent.insertBefore(para, son1);//插入的节点 在某个节点前面插入
parent.appendChild(para2);
}
function removeDOM(){
var parent=document.getElementById("parent");
var son1=document.getElementById("son1");
parent.removeChild(son1);
}
</script>
</head>
<body>
<div id="parent">
<div id="son1">
<font id="txt">:</font><input type="text" id="userName" name="userName"/>
</div>
</div>
<input type="button" value="修改DOM节点" onclick="modifyDOM()"/>
<input type="button" value="添加DOM节点" onclick="addDOM()"/>
<input type="button" value="删除DOM节点" onclick="removeDOM()"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript修改DOM节点CSS样式</title>
<script type="text/javascript">
function modifyDOMCSS(){
document.getElementById("gril").style.color="red";
}
</script>
</head>
<body>
<p id="gril">女程序猿</p>
<input type="button" value="修改DOM节点样式" onclick="modifyDOMCSS()"/>
</body>
</html>
1 Dom编程入门
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<a href="#">标题1</a>
<a href="#">标题2</a>
<a href="#">标题3</a>
<input type="button" onClick="writeUrl()" value="设置a标的地址"/>
</body>
<script type="text/javascript">
/*
DOM(Document Object Model) 文档对象模型
一个html页面被浏览器加载的时候，浏览器就会对整个html页面上的所有标签都会创建一个对应的
对象进行描述，我在浏览器上看到的信息只不过就是这些html对象的属性信息而已。我们只要能找到
对应的对象操作对象的属性，则可以改变浏览器当前显示的内容。
var allNodes = document.all; //获取html文件中的所有标签节点 。
for(var i = 0; i<allNodes.length ; i++){
alert(allNodes[i].nodeName);//标签的名字 nodeName;
}
*/
function writeUrl(){
var links = document.links; // 获取文档中含有href的属性的标签。
for(var i = 0; i<links.length ; i++){
links[i].href = "http://www.itcast.cn";
}
}
</script>
</html>
2 根据html标签属性找节点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
/*
通过html元素的标签属性找节点。
document.getElementById("html元素的id")
document.getElementsByTagName("标签名")
document.getElementsByName("html元素的name")
*/
function showText(){
var inputNode = document.getElementById("userName"); //根据ID属性值找元素
inputNode.value = "设置好了文本";
}
//InnerHTml是用于设置标签体的内容的。 value是用于设置标签的value属性值.
function showImage(){
var images = document.getElementsByTagName("img"); //根据标签名获取所有的标签对象。
for(var i = 0 ; i<images.length ; i++){
images[i].src = "33.jpg";
images[i].width="100";
images[i].height="100";
}
}
function showDiv(){
var divs = document.getElementsByName("info"); //根据标签的name属性值取找对应的标签，返回的是一个数组。
for(var i = 0 ; i<divs.length ; i++){
divs[i].innerHTML = "哈哈".fontcolor("red");
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<input type="text" id="userName" value="请输入用户名..." /><input type="button" onclick="showText()" value="设置文本"/>
<hr/>
<img src="" />
<img src="" />
<img src="" />
<input type="button" onclick="showImage()" value="显示图片"/>
<hr/>
<div name="info"></div>
<div name="info"></div>
<div name="info"></div>
<input type="button" onclick="showDiv()" value="设置div内容"/>
</body>
</html>
3 根据属性找标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function checkAll(allNode){
//找到所有的的选项
var items = document.getElementsByName("item");
//找到全选按钮的对象
//var allNode = document.getElementsByName("all")[0];
for(var i = 0 ; i<items.length ; i++){
items[i].checked = allNode.checked;
}
}
function getSum(){
var items = document.getElementsByName("item");
var sum = 0;
for(var i = 0 ; i<items.length ; i++){
if(items[i].checked){
sum += parseInt(items[i].value);
}
}
var spanNode = document.getElementById("sumid");
spanNode.innerHTML = (" ¥"+sum).fontcolor("green");
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div>商品列表</div>
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="1800" />笔记本电脑1800元<br />
<input type="checkbox" name="item" value="300" />笔记本电脑300元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="all" onclick="checkAll(this)" /> 全选<br />
<input type="button" value="总金额：" onclick="getSum()" /><span id="sumid"></span>
</body>
</html>
4 通过关系找标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body><input type="text" id="userName"/><img src="user.png" />
</body>
<script type="text/javascript">
/*
通过关系(父子关系、兄弟关系)找标签。
parentNode 获取当前元素的父节点。
childNodes 获取当前元素的所有下一级子元素。
firstChild 获取当前节点的第一个子节点。
lastChild 获取当前节点的最后一个子节点。
------------------------------------------------------------
nextSibling 获取当前节点的下一个节点。（兄节点）
previousSibling获取当前节点的上一个节点。（弟节点）
我们可以通过标签的类型进行判断筛选：
文本节点的类型： 3
注释的节点类型： 8
标签节点的类型： 1
*/
var bodyNode = document.getElementsByTagName("body")[0];
/*
查看父节点。
var parentNode = bodyNode.parentNode;
alert("父节点的名称："+parentNode.nodeName);
//找子节点:childNodes 获取所有的子节点，返回的是一个数 组。 注意： 获取子节点的时 候是包括了空文本或者是注释。
var children = bodyNode.childNodes;
for(var i = 0 ; i<children.length ; i++){
//if(children[i].nodeType==1){
alert("节点的名字："+children[i].nodeName+" 对象的类型:"+children[i].nodeType);
//}
}
alert("第一个子节点："+bodyNode.firstChild.nodeName);
alert("最后一个子节点："+bodyNode.lastChild.nodeName);
//找兄弟节点
*/
var inputNode = document.getElementById("userName");
alert("下个兄弟节点："+inputNode.nextSibling.nodeName); //下一个兄弟节点。
alert("上一个兄弟节点："+inputNode.previousSibling.nodeName);
</script>
</html>
5 创建节点，插入节点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
/*
创建字节入插入节点、设置节点的属性。
document.createElement("标签名")创建新元素节点
elt.setAttribute("属性名", "属性值")设置属性
elt.appendChild(e)添加元素到elt中最后的位置
*/
var num = 1;
function add(){
var inputNode = document.createElement("input"); //创建一个指定标签名字的节点。
//setAttribute:设置节点的属性
inputNode.setAttribute("type","button");
inputNode.setAttribute("value","按钮"+num);
num++;
var bodyNode = document.getElementsByTagName("body")[0];
bodyNode.appendChild(inputNode); //appendChild 添加子节点。
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<input type="button" onclick="add()" value="添加"/>
</body>
</html>
6 增加附件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
/*
创建字节入插入节点、设置节点的属性。
document.createElement("标签名")创建新元素节点
elt.setAttribute("属性名", "属性值")设置属性
elt.appendChild(e)添加元素到elt中最后的位置
*/
var num = 1;
function add(){
var inputNode = document.createElement("input"); //创建一个指定标签名字的节点。
//setAttribute:设置节点的属性
inputNode.setAttribute("type","button");
inputNode.setAttribute("value","按钮"+num);
num++;
var bodyNode = document.getElementsByTagName("body")[0];
bodyNode.appendChild(inputNode); //appendChild 添加子节点。
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<input type="button" onclick="add()" value="添加"/>
</body>
</html>
动态添加属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript对象</title>
</head>
<body>
<script type="text/javascript">
/* function speak(something){
alert(something);
} */
/* var p=new Object();
p.name="Jack"; // 动态的添加属性
p.func=speak; // 动态的添加方法
alert(p.name);
p.func("Hello,Hello,大家好！"); */
/* delete p.name;
alert(p.name);
delete p.func;//p已经不是方法了
p.func("Hello,Hello,大家好！"); */
/* p.name=undefined;
p.func=undefined;
alert(p.name);
p.func("Hello,Hello,大家好！"); */
function person(name,age){//基于原型
this.name2=name;
this.age2=age;
function speak(something){
alert(something);
}
this.func=speak;
}
var p1=new person("Jack",12);
alert(p1.name2);
p1.func("Hello,EveryOne!");
</script>
</body>
</html>
JavaScript组成
ECMAScript：JavaScript语法核心。
DOM：文档对象模型（Document Object Model），提供访问和操作网页内容的方法和接口。
BOM：浏览器对象模型（Browser Object Model），提供与浏览器交互的方法和接口。
JavaScript中有五种简单数据类型，也称为基本数据类型，分别是undefined、null、boolean、number和string。另外还有一种复杂数据类型——object对象类型。JavaScript是基于对象的语言，这意味着程序员既可使用系统自定义的对象，也可使用自己创建的对象。
1 文档的结构和遍历
ParaentNode 获取该节点的父节点
ChildNodes 获取该节点的子节点数组
FirstChild 获取该节点的第一个子节点
LastChild 获取该节点的最后一个子节点
NextSibing 获取该节点的下一个兄弟节点
PreviousSibing 获取该节点上的一个兄弟节点
一般地，节点至少拥有nodeType nodeName nodeValue这三个基本属性吗，节点的类型不同，这三个属性的值也不相同
NodeType属性类型分别对应1到12的常数值
NodeType 节点的类型
1 元素节点 2 属性节点 3 文本节点 4CDATA节点 5 实体引用名节点 6 实体名称节点 7处理指令节点 8注释节点 9文档节点 10文档类型节点 11 文档片段节点 12 DTD声明节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function(){
var str = window.document.getElementById("div1");
var node =str.firstChild;
alert(node.nodeValue);
}
</script>
</head>
<body>
<div id="div1">
111
<p id="p1">
我是一个p标签
</p>
<p id="p2">
我是第二个p标签
</p>
</div>
</body>
</html>
2 作为元素树的文档
firstElementChild 第一个元素节点
lastElementChild 最后一个子元素节点
childElementCount 子节点元素的数量
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload =function(){
var node = document.getElementById("div1")//获取id为div1的元素对象
var node1 = node.firstElementChild;
var node2= node.lastElementChild;
alert(node.childElementCount);//输出2 div1一共有2个子节点（不包括文档）
alert(node1.innerHTML)//输出我是一个p标签
alert(node2.innerHTML)//输出我是二个p标签
alert(node2.previousElementSibling.innerHTML)//输出我是一个标签
alert(node1.nextElementSibling.innerHTML)//我是第二个p标签
}
Alert
</script>
</head>
<body>
<div id="div1">
111
<p id="p1">
我是一个p标签
</p>
<p id="p2">
我是第二个p标签
</p>
</div>
</body>
</html>
3 javascript操作标准HTML属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function fun1(){
document.getElementById("img1").src = "img/IMG_7611.PNG";//通过点击图片来改变图片
}
</script>
</head>
<body>
<div id="div1">
<p id="p1" class="class1">
<img src="img/IMG_7612.png" alt="这是一张图片" id="img1" onclick="fun1()"/>
</p>
</div>
</body>
</html>
非标准html属性
getAttribute（）；
setAttribute（）；
两个方法都不要理会HTML中的保留字，保留字就是参数像那么class，name等
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function fun1(){
document.getElementById("img1").setAttribute("src","img/IMG_7611.PNG")
alert(document.getElementById("img1").getAttribute("class"))
}
</script>
</head>
<body>
<div id="div1">
<img src="img/IMG_7612.png" alt="选择一张图片" id="img1" class="imgClass" onclick="fun1()"/>
</div>
</body>
</html>
4 节点属性
Attribute属性
Document.getElementById（“img1“）[0];// 注意通过索引访问时根据标签的属性
Document.getElementById（“img1“）[0].src//输出src对应的值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function fun1(){
alert(document.getElementById("img1").attributes[0].name)//输出onclick
alert(document.getElementById("img1").attributes.src.value)//输出src对应的值
document.getElementById("img1").attributes.src.value="img/IMG_7611.PNG"
}
</script>
</head>
<body>
<div id="div1">
<img src="img/IMG_7612.png" alt="这是一张图片" id="img1" class="imgClass" onclick="fun1()" />
</div>
</body>
</html>
五搜索的内容
innerText ，textContent
innerText 和textContent的区别：
当文本为空时innerText输出的是“”textContent输出的是undefined
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function(){
alert(document.getElementById("p1").innerText);
alert(document.getElementById("p1").textContent);
document.getElementById("p1").textContent="我是p1，textContent改变我"//设置文档text
alert(document.getElementById("p2").textContent)
alert(document.getElementById("p2").innerHTML)//innerHTML从对象起始位置到终止位置全部内容，包括html标签 而innerText它去除html标签
}
</script>
</head>
<body>
<div id="div1">
<p id="p1">
我是一个p标签
</p>
<p id="p2">
我是第二个p标签
</p>
</div>
</body>
</html>
6 创建，插入，删除节点
Document。CreateTextNode（）创建一个文本节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function(){
var textNode = document.createTextNode("<p>我是第一个javascript新建节点</P>");
document.getElementById("div1").appendChild(textNode)
}
</script>
</head>
<body>
<div id="div1">
<p id="p1">我是第一个p</p>
<p id="p2">我是第二个p</p>
</div>
</body>
</html>
Document.creatElement（）；//创建一个元素节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function(){
var pNode = document.createElement("p");
pNode.textContent = "新建一个p节点"
document.getElementById("div1").appendChild(pNode)
}
</script>
</head>
<body>
<div id="div1">
<p id="p1">我是第一个p</p>
<p id="p2">我是第二个p</p>
</div>
</body>
</html>
AppendChild（）//将一个节点插入到调用节点的最后面
InsertBefore（）//两个参数，第一个参数为准备插入的节点，第二个指明在那个节点前面如不写参数将和appendChild（）一样
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function (){
var pNode = document.createElement("p");
pNode.textContent = "insertBefore插入的节点"
var pNode2 = document.createElement("p")
pNode2.textContent="appendChild插入的节点";
document.getElementById("div1").appendChild(pNode2)
document.getElementById("div1").insertBefore(pNode,document.getElementById("p1"))
}
</script>
</head>
<body>
<div id="div1">
<p id="p1">我是第一个p</p>
<p id="p2">我是第二个p</p>
</div>
</body>
</html>
7删除和替换节点
RemoveChild（）；//用父元素调用，删除一个节点
ReplaceChild（）；里面两个参数，第一参数为新的元素，第二个参数为被替换的元素，由父元素调用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function(){
document.getElementById("div1").removeChild(document.getElementById("p1"))
}
</script>
</head>
<body>
<div id="div1">
<p id="p1">我是第一个p</p>
<p id="p2">我是第二个p</p>
</div>
</body>
</html>
替换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function(){
/*document.getElementById("div1").removeChild(document.getElementById("p1"))*/
var div1 = document.getElementById("div1");
var span1 = document.createElement("span")
span1.textContent = "我是替换的";
div1.replaceChild(span1,document.getElementById("p1"))
}
</script>
</head>
<body>
<div id="div1">
<p id="p1">我是第一个p</p>
<p id="p2">我是第二个p</p>
</div>
</body>
</html>
8 通过javascript操作css
通过元素的style属性可以随意的读取设置CSS样式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function(){
alert(document.getElementById("div1").style.backgroundColor);
document.getElementById("div1").style.backgroundColor="yellow"
}
</script>
</head>
<body>
<div id="div1" style="width: 100px;height: 100px;background-color: red;"></div>
</body>
</html>
9 数据类型
–typeof操作符
由于JavaScript是弱类型的，因此需要一种手段来检测给定变量的数据类型，typeof就是负责提供这方面信息的操作符
var message = "hi";
document.write(typeof message); //string
var name;
document.write(typeof name); //undefined
var age = 35.5;
document.write(typeof age); //number
var obj = new Date();
document.write(typeof obj);//object
–undefined
对未初始化的变量及未声明的变量使用typeof运算符均会返回undefined。
<script type="text/javascript">
var name;
document.write(typeof name); //undefined
document.write(typeof address); //undefined
</script>
name是未初始化，address是未声明，所以输出两个“undefined”。
–null
null是空类型，表示一个变量已经有值，但值为空对象，使用typeof检测时会返回object。
<script type="text/javascript">
var obj=null;
document.write(typeof obj);
</script>
–boolean
boolean是布尔类型，也称真假类型。这个类型有两个标准值：true(真)和false(假)。布尔值用来表示一个逻辑表达式的结果，通常用做判断处理。
<script type="text/javascript">
var flag=1<2;
document.write(typeof flag); //boolean
</script>
–number
在c#语言中，小数和整数会被分别存储在不同的类型中。但在JavaScript中，整数、小数都是number。
<script type="text/javascript">
var num1=12,num2=12.3;
document.write(typeof num1);//number
document.write(typeof num2);//number
</script>
–string
string是字符串类型，这是程序中使用最广的一种类型。字符串是使用单引号或双引号引起来的若干字符。
<script type="text/javascript">
var myName='Cidy';
document.write(typeof myName);//string
</script>
–string
JavaScript不区分单引号或者双引号，但应避免出现引号不匹配的情况，如：var str=’hello” 或者var str=”hello”。
防止出现这类情况最好的办法是先写一对引号，再写中间的内容。
如果想在字符串内使用单/双引号作为字符的话，应注意不要与字符串的开始和结束的引号发生冲突，如：
var info=“he said ”what time is it“”; 这是一个错误的字符串格式，避免这种情况最好的方法就是使用单/双引号混合，改正：var info=‘he said “what time is it”’;
10 javaScript的流程控制语句
–选择结构
检测变量name是否赋值，否则就对它进行赋值操作
<script type="text/javascript">
var name;
if(typeof name=="undefined"){
name="中国";
}
document.write("名称是："+name);
</script>
可以使用if(typeof name==“undefined”) 判断变量name是否赋值，如果返回true，则name没有赋值；反之，name有值。
求变量x的绝对值：
<script type="text/javascript">
var x=-4,y;
if(x>0){
y=x;
}else{
y=-x;
}
document.write(x+'的绝对值是：'+y);
</script>
根据小时数，在页面上输出不同的问候语：
Date是JavaScript的内置对象，通过它可以获取时间，Data对象的getHours()方法可以返回系统的小时数
<script type="text/javascript">
var time=new Date(); //创建Date对象
var hour=time.getHours(); //当前小时
if(hour<=11){
document.write("good morning");
}else if(hour<=18){
document.write("good afternoon");
}else{
document.write("good night");
}
</script>
根据星期，在页面上输出是工作日还是休息日。
switch后的条件表达式结果一旦碰到与之匹配的case，就会执行该case后的语句，如果没有break语句，继续后面case下的代码。
<script type="text/javascript">
var time=new Date();
var week=time.getDay();
switch(week){
case 1:
case 2:
case 3:
case 4:
case 5:document.write("工作日");break;
default:document.write("休息日");break;
}
</script>
11 javascript循环语句
while（条件表达式）{
语句或语句块
}
如果一开始就检测到条件表达式的结果是false，则{}中的代码一次都不执行，即循环的次数是0。如果条件表达式的结果始终是true，称为死循环，应当避免这种情况。
输出摄氏温度与华氏温度的对照表，要求从摄氏温度0度到250度，每隔20度为一项，对照表中的条目不超过10条。转换关系：华氏温度 = 摄氏温度 * 9 / 5.0 + 32。
<script type="text/javascript">
var f; // 华氏
var c = 0; // 摄氏
var count = 1; // 条目
while(count <= 10 && c <= 250){
f = c * 9 / 5.0 + 32; // 转换
document.write("<tr><td>"+c+"</td><td>"+f+"</td></tr>");
c = c + 20;
count++;
}
</script>
do-while语句的功能和while语句差不多，只不过它是在执行完第一次循环之后才检测条件表达式的值，这意味着包含在{}的代码至少要被执行一次。
输出5的阶乘（阶乘指从1乘以2乘以3乘以4一直乘到所要求的数。例如所要求的数是5,则阶乘式是1*2*3*4*5，得到的积是120，120就是5的阶乘）。
<script type="text/javascript">
var i=1;
var num=1;
do{
i++;
num=num*i;
}while(i<5);
document.write("i="+i+",num="+num);
</script>
for(初始化表达式;循环条件表达式;循环后的操作表达式){
语句或语句块
}
由于JavaScript中不存在块级作用域，因此也可以在外部访问到在循环内部定义的变量，和之前学的c#语言不同。
用for改造“输出摄氏温度与华氏温度对照表”的案例。
<script type="text/javascript">
var f; // 华氏
for(var c=0,count=1;count <= 10 && c <= 250;c=c+20,count++){
f = c * 9 / 5.0 + 32; // 转换
document.write("<tr><td>"+c+"</td><td>"+f+"</td></tr>");
}
</script>
break与continue：
只有循环条件表达式的值为false时，循环语句才能结束循环，如果想提前中断循环，可以在循环体语句块中添加break语句。在循环体中添加continue语句，就跳过本次循环要执行的剩余语句，然后开始下一次循环。
1~20之间的偶数相加，输出累加和大于30的当前数
<script type="text/javascript">
var i=1;
var sum=0;
while(i<=20){
if(i%2!=0)
{
i++;
continue; //是奇数就结束本次循环，开始下一次循环
}
sum=sum+i;
if(sum>30)
{
document.write("当加到："+i+"时，累加和已经超过30");
break; //累加和超过30，跳出循环
}
i++;
}
</script>
12 函数定义与调用
•定义函数有以下几个规则：
1. 使用function关键字，function后是函数名，同c#语言不同，不必说明返回值的类型。
2. 函数的命名规则与变量名的命名规则相同。
3. 函数名后的()，可以包含若干参数，也可以选择不带任何参数。
4. 最后是一对{}，包含具体实现特定功能的若干语句。
function getArea(width,height){
var result=width*height ;
document.write("面积为："+result);
}
参数width、height表示使用此函数时，要传递所求的长方形的宽度和高度值
在<head>中嵌套<script>标签，在<script></script>中定义一个名为getArea的函数，并且包含有两个名为width和height的参数分别用来传入宽度和高度的值。在函数体内，定义一个名为result的变量，用来保存面积，最后函数将计算结果输出到页面显示给浏览者。参数可以为多个，多个参数要使用逗号分隔
•调用函数
函数是不会自动执行的，因此定义好函数后，就可以在适当的时候进行调用。调用一个函数的方法是使用函数名称，并且在函数名后用括号包含所需要传入的参数值。调用函数的语句也需要放置在<script>和</script>里。
•函数的参数
对于函数外部的语句来说，函数内部语句是不可见的，这时就需要一种沟通机制，参数就是它们沟通的桥梁。通过参数，外部语句可以传递不同的数据给函数处理，参数也是一种变量，但这种变量只能被函数体内的语句使用，并在函数被调用时赋值，通常它们被称为形式参数。在创建getArea函数时，声明了形式参数width和height，函数内部的语句都可以使用width和height，但目前它们是没有值的，它们的值取决于调用函数时给它们传递的值，称为实参。
•JavaScript中的参数声明不需要关键字var，但参数的命名与变量命名规则相同。
下面介绍JavaScript中函数参数的特殊性：
（1）函数声明了参数，调用时也可以不传递参数，这在c#中是会出现编译错误的。
（2）不管函数声明时有多少个参数，调用函数时可以传递若干个参数值给函数，并且实际传递的参数值还可以在函数内部获得
•显示各公司的人数和总工资
function getTotal(){
var count;//人数
var sum = 0;//总工资
count=arguments.length;// 该方法的参数集合，类似于数组
for (var i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
document.writeln('总人数是：'+count+',总工资是：'+sum);
}
调用函数：
<body>
<h2> A公司：
<script type="text/javascript">
getTotal(2000,4000,4800,6000);
</script>
</h2>
<h2> B公司：
<script type="text/javascript">
getTotal(24000,11000,18500,6000,8000);
</script>
</h2>
</body>
•函数的返回值
函数的参数是外部语句对函数内部语句的信息传递，函数的返回值刚好相反，能够将一个结果返回给外部语句使用。实现函数返回值的语句是return,语法如下所示
以上语句在函数体内需要返回值时使用，执行到return这条语句后，函数就停止执行。在调用函数时，可以把返回值赋值给变量，如下面的语句
return 返回值; var result=函数(参数);
有返回值的函数：
//创建有返回值的函数
function getArea(width,height){
var result=width*height
return result;
}
<h2>宽度是：3，高度是：4的长方形面积是：
<script type="text/javascript">
//调用有返回值的函数
var area=getArea(3,4); document.write(area);
</script>
</h2>
–使用匿名函数求长方形面积。
<body>
<script type="text/javascript">
var area=function (width,height){
document.write("面积是："+width*height);
};
area(3,4);
</script>
</body>
字符串与日期
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript字符串对象</title>
</head>
<body>
<script type="text/javascript">
var s1="实例化字符串方式一";
var s2=new String("实例化字符串abc方式二");
document.write(s1+"<br/>");
document.write(s2+"<br/>");
document.write(s2+" 的长度是："+s2.length+" <br/>");
document.write(s2.indexOf("abc", 0)+"<br/>");
document.write(s2.replace("abc", "java1234")+"<br/>");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript日期对象</title>
</head>
<body>
<script type="text/javascript">
var date=new Date();
document.write(date.getTime()+"<br/>");//1970 1 1 毫秒
document.write(date.getFullYear()+"<br/>");
document.write((date.getMonth()+1)+"<br/>");
document.write(date.getDate()+"<br/>");
var today=date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日";
document.write(today+"<br/>");
document.write(date.getHours()+"<br/>");
document.write(date.getMinutes()+"<br/>");
document.write(date.getSeconds()+"<br/>");
today=date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日 "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
document.write(today+"<br/>");
var day=date.getDay();//星期几
var week;
switch(day){
case 0:week="星期日";break;
case 1:week="星期一";break;
case 2:week="星期二";break;
case 3:week="星期三";break;
case 4:week="星期四";break;
case 5:week="星期五";break;
case 6:week="星期六";break;
}
document.write(week+"<br/>");
today=date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日 "+week+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
document.write(today+"<br/>");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript数组</title>
</head>
<body>
<script type="text/javascript">
var arr=new Array();
var arr2=new Array(3);
arr[0]="jack";
arr[1]="marry";
arr[2]="tom";
arr[3]="lucy";
arr[4]="june";
arr2[0]=2;
arr2[1]=1;
arr2[2]=5;
for(var i=0;i<arr.length;i++){
document.write(arr[i]+"<br/>");
}
document.write("<hr/>");
var o;
for(o in arr2){
document.write(o+" "+arr2[o]+"<br/>");
}
document.write("<hr/>");
document.write("sort()"+arr.sort()+"<br/>");
document.write("sort()"+arr2.sort()+"<br/>");
document.write("<hr/>");
document.write("join()"+arr.join()+"<br/>");//数组元素组合成字符串
document.write("join()"+arr2.join(".")+"<br/>");
document.write("<hr/>");
document.write("concat()"+arr.concat(arr2)+"<br/>");//合并数组元素
document.write("<hr/>");
document.write("reverse()"+arr.reverse()+"<br/>");
</script>
</body>
</html>
1 数组基本属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//数组直接量形式创建数组
var arr=[];//空数组
var arr1=[1,2,3,4,5,6];
var arr2=[1,2.3,true,false,null,undefined,[1,2,3],{x:1,y:2}];
var x=1;
var arr3=[x,x*3,x+2,x+3];
console.log(arr3);
var arr4=[1,,3];//[1,undefined,3]
// alert(arr4);
console.log(arr4.length);
var arr5=[,,];
console.log(arr5.length);
//通过构造函数Array()创建数组
var a=new Array();//[]
var a=new Array(5);
console.log(a.length);
var a=new Array(1,2,'king',false,2.3,null);//[1,2,'king',false,2.3,null]
console.log(a);
var arr=[1,2,3,4];
console.log(arr[0]);//1
console.log(arr[3]);//4
arr[0]='king';
console.log(arr);
arr[5]='hello maizi';
console.log(arr);
var x=2;
console.log(arr[x]);
arr[arr[x]]=333;
console.log(arr);
var obj={};
obj[0]='a';
obj[1]='b';
console.log(obj);
// console.log(obj.length);
var arr=[];
arr[0]='a';
arr[1]='b';
arr[-123]='c';
arr[2.3]='d';
arr[null]='e';
arr[false]='f';
arr[undefined]='g';
arr['name']='h';
console.log(arr);
console.log(arr.length);
var arr=new Array(10);
arr=[];
arr[100]='abc';
console.log(arr.length);
var arr=[1,2,3,4,5,6,7,8];
arr.length=3;
console.log(arr);
arr.length=0;
console.log(arr);
arr.length=5;
console.log(arr);
var arr=[1,2,3];
Object.defineProperty(arr,'length',{
writable:false
});
console.log(arr.length);
arr.length=10;
console.log(arr.length);
</script>
</body>
</html>
2 数组定义
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var arr=[];
arr[0]='a';
arr[1]='b';
arr.push('c');
arr.push('d','e','f',12,34);
console.log(arr);
var res=arr.pop();
console.log(res);
console.log(arr);
arr.unshift(1,2,3,4,5);
console.log(arr);
res=arr.shift();
console.log(res);
console.log(arr);
var arr=['a','b','c','d'];
delete arr[0];
console.log(arr);
console.log(arr.length);
</script>
</body>
</html>
3 运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var arr=['a','b','c','d','e'];
for(var i=0,len=arr.length;i<len;i++){
console.log(arr[i]);
}
var arr1=[];
arr1[12]='x';
arr1[23]='y';
arr1[55]='z';
for(var i in arr1){
console.log(arr1[i]);
}
for(var i in arr1){
if(arr.hasOwnProperty(i)){
console.log(arr1[i]);
}
}
var arr2=[1,2,3,4,5,6];
arr2.forEach(function(x){
console.log(x);
});
function Test(element,index,array){
console.log('要处理的数组为：'+array);
console.log('索引：'+index+"--值为："+element);
}
arr2.forEach(Test);
</script>
</body>
</html>
4 数组中常用的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//数组中常用方法
var arr=['a','b','c','d'];
var res=arr.join();
res=arr.join(',');
res=arr.join('');
console.log(res);
res=arr.reverse();
console.log(res);
var arr=['a','b','c','A','B','C'];
arr.sort();
console.log(arr);
var arr=[1,2,11,20,3,15];
arr.sort();
console.log(arr);
arr.sort(function(a,b){
return a-b;
});
arr.sort(function(a,b){
return b-a;
});
console.log(arr);
var users=[
{name:'king',age:12},
{name:'queen',age:32},
{name:'zhangsan',age:54},
{name:'rose',age:66},
];
users.sort(function(a,b){
if(a.name>b.name)return 1;
if(a.name<b.name)return -1;
return 0;
});
// console.log(users);
for(var i in users){
console.log(users[i]['name']);
}
var arr=[1,2,3];
res=arr.concat(4,5,6);
res=arr.concat([4,5,6]);
res=arr.concat([4,5,6],[7,8,9]);
res=arr.concat([11,[12,[33]]]);
console.log(res);
var arr=['a','b','c','d','e','f','g','h'];
res=arr.slice(0,3);
res=arr.slice(2,-3);
res=arr.slice(4);
res=arr.slice(-5,-2);
console.log(res);
var arr=['a','b','c','d','e','f','g','h'];
res=arr.splice(0,1);//['a'];
res=arr.splice(5);
res=arr.splice(0,2,'!','?','%');
console.log(res);
console.log(arr);
var arr=[1,2,3,4,5,6];
res=arr.map(function(x){
return x*x;
});
console.log(res);
var arr=['a!','b!','c','d!','e'];
res=arr.map(Trans);
function Trans(x){
return x.replace(/!/g,'?').toUpperCase();
}
console.log(res);
var arr=[1,3,4,5,5,623,4,345,4367,null,undefined,false,true,''];
res=arr.filter(function(x){
return x<=10;
});
res=arr.filter(function(x){
return x%2==0;
});
res=arr.filter(function(x){
return x!==undefined && x!=null;
});
console.log(res);
var arr=[1,2,3,4,5];
res=arr.reduce(function(a,b){
return a+b;
});
res=arr.reduce(function(a,b){
return a+b;
},10);
console.log(res);
var age=[12,34,55,66,28,19];
res=age.every(function(x){
return x>=18;
});
res=age.some(function(x){
return x>=19;
});
console.log(res);
var arr=['a','b','c','d','e','a','bv','a'];
res=arr.indexOf('a');//0
res=arr.indexOf('A');//-1
res=arr.indexOf('a',2);
res=arr.lastIndexOf('a');
console.log(res);
console.log(Array.isArray(arr));
console.log(Array.isArray([]));
console.log(Array.isArray({}));
var arr=['a','b','c','d','e','a','bv','a'];
console.log(arr.toString());
console.log(arr.join());
</script>
</body>
</html>
5 数组遍历
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function foreach(a,f,t){
try{
a.forEach(f,t);
}catch(e){
if(e===foreach.break){
return ;
}else{
throw e;
}
}
}
foreach.break=new Error('stop Iteration');
var arr=['a','b','c','d'];
alert(foreach(arr,foreach.break));
</script>
</body>
</html>
6 两个函数传递给目标函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function sum(a,b){
return a()+b();
}
function test1(){
return 1;
}
function test2(){
return 2;
}
//将两个函数传递给目标函数
// alert(sum(test1,test2));
//也可以胜利test1和test2函数，使用匿名函数的形式
//alert(sum(function(){return 1;},function(){return 2;}));
//我们将函数A传递给函数B，由函数B来执行A时，A就成了一个回调函数callback
//functions；如果此时A还是一个匿名函数，我们就称它为匿名回调函数。
</script>
</body>
</html>
7 setup
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// (function(name){
// alert('hello '+name+'!');
// })('king');
// function a(param){
// function b(theinput){
// return theinput*2;
// }
// return 'the result is'+b(param);
// }
// alert(b(2));
//function a(){
// alert('A!');
// return function(){
// alert('B');
// };
//}
//a()();
//var newFunc=a();
//newFunc();
//function a(){
// alert("aaaa");
// return a=function(){
// alert('BBBB');
// };
//}
//a=a();
//a();
//var a=(function(){
// function someSetup(){
// var setup='done';
// }
// function actualWork(){
// alert('worky-king');
// }
// someSetup();
// return actualWork;
//})();
//function a(){
// alert('A');
// a=function(){
// alert('B');
// };
//}
//a();
//a();
var a=function(){
function someSetup(){
var setup='done';
}
function actualWord(){
alert('workwork');
}
someSetup();
return actualWord;
}();
a();
</script>
</body>
</html>
8 closures
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/*
1.闭包就是能够读取其他函数内部变量的函数。
由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，
因此可以把闭包简单理解成“定义在一个函数内部的函数”。
所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
2.闭包的用途：
一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
function f1(){
var n=999;
nAdd=function(){n+=1}
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); // 999
nAdd();
result(); // 1000
在这段代码中，result实际上就是闭包f2函数。
它一共运行了两次，第一次的值是999，第二次的值是1000。
这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。
为什么会这样呢？
原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，
而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，
被垃圾回收机制（garbage collection）回收。
这段代码中另一个值得注意的地方，就是“nAdd=function(){n+=1}”这一行，
首先在nAdd前面没有使用var关键字，因此 nAdd是一个全局变量，而不是局部变量。
其次，nAdd的值是一个匿名函数（anonymous function），
而这个匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，
可以在函数外部对函数内部的局部变量进行操作。
--------------------------------------------------------------------------------------------------------
五、使用闭包的注意点
1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，
否则会造成网页的性能问题，在IE中可能导致内存泄露。
解决方法是，在退出函数之前，将不使用的局部变量全部删除。
2）闭包会在父函数外部，改变父函数内部变量的值。
所以，如果你把父函数当作对象（object）使用，
把闭包当作它的公用方法（Public Method），
把内部变量当作它的私有属性（private value），这时一定要小心，不要随便
改变父函数内部变量的值。
*/
// var a=1;
// function test(){
// var b=2;
// return a;
// }
// alert(test());
// alert(b);
// var a=1;
// function test(){
// var b=2;
// function test1(){
// var c=3;
// alert(b);
// alert(a);
// }
// test1();
// }
// alert(test());
// function f1(){
// var a=1;
// return f2();
// }
// function f2(){
// return a;
// }
// alert(f1());
// var a=5;
// alert(f1());
// a=213;
// alert(f1());
// delete a;
// alert(f1());
// function f(){
// var b='b';
// return function(){
// return b;
// }
// }
//// alert(b);
// var n=f();
// alert(n());
//var n;
//function f(){
// var b='b';
// n=function(){
// return b;
// };
//}
//alert(f());
//alert(n());
//function f(arg){
// var n=function(){
// return arg;
// };
// arg++;
// return n;
//}
//var m=f(123);
//alert(m());
//function f(){
// var a=[];
// var i;
// for(i=0;i<3;i++){
// a[i]=function(){
// return i;
// }
// }
// return a;
//}
//var test=f();
//alert(test[0]());
//alert(test[1]());
//alert(test[2]());
//function f(){
// var a=[];
// var i;
// for(i=0;i<3;i++){
// a[i]=(function(x){
// return function(){
// return x;
// }
// })(i);
// }
// return a;
//}
//var test=f();
//alert(test[0]());
//alert(test[1]());
//alert(test[2]());
function setup(x){
var i=0;
return function(){
return x[i++];
};
}
var next=setup(['a','b','c']);
alert(next());
alert(next());
alert(next());
</script>
</body>
</html>
9 formValidator
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="doAction.php" method='post' onsubmit='return check(this)'>
用户名： <input type="text" name="username" id="username" /><br />
密码： <input type="password" name="password" id="password" /> <br />
邮箱： <input type="text" name="email" id="email" /><br />
<input type="submit" value="注册" />
</form>
<script type="text/javascript">
function check(form){
var username=document.getElementById("username").value;
if(!/^[0-9a-zA-Z_]+$/.test(username)){
alert('用户名不符合规范');
return false;
}
var password=document.getElementById("password").value;
if(/^[\s\n\r\t]*$/.test(password)){
alert('密码不能为空');
return false;
}
var email=document.getElementById("email").value;
if(!/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(email)){
alert('非法邮箱');
return false;
}
}
</script>
</body>
</html>
window对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript全局函数</title>
</head>
<body>
<script type="text/javascript">
var str="1+2+3";
alert(eval(str));//全局变量直接写，执行结果
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript window对象常用方法及事件</title>
<script type="text/javascript">
/* window.onload=function(){
alert("文档加载完毕了");
} */
function init(){
alert("文档加载完毕了");
}
window.onresize=function(){
alert("窗体大小发生了变化！");
}
</script>
</head>
<body onload="init()">
<script type="text/javascript">
window.alert("window对象的alert方法");
function dzt(){
alert("5秒后屌炸天");
}
function setDateTime(){
var date=new Date();
var day=date.getDay();
var week;
switch(day){
case 0:week="星期日";break;
case 1:week="星期一";break;
case 2:week="星期二";break;
case 3:week="星期三";break;
case 4:week="星期四";break;
case 5:week="星期五";break;
case 6:week="星期六";break;
}
var today=date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日 "+week+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
document.getElementById("today").innerHTML=today;
}
window.setTimeout("dzt()", 5000);//5秒后执行
window.setInterval("setDateTime()", 1000);//执行多次
window.open("http://www.java1234.com");
</script>
<div id="today"></div>
</body>
1 keys
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var arr=['a','b','c'];
console.log(Object.keys(arr));
var obj={
0:'d',
1:'e',
2:'f'
};
console.log(Object.keys(obj));
var obj1=Object.create({},{
getFoo:{
value:function(){
return this.foo;
}
}
});
obj1.foo=123;
console.log(Object.keys(obj1));
//如果想获取一个对象的所有属性，包括不可枚举的，Object.getOwnPropertyNames()
console.log(Object.getOwnPropertyNames(arr));
console.log(Object.getOwnPropertyNames(obj));
console.log(Object.getOwnPropertyNames(obj1));
</script>
</body>
</html>
2 getOwnPropertyDwacriptor
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var obj={get foo(){return 123;}};
console.log(Object.getOwnPropertyDescriptor(obj,'foo'));
obj={
name:'king',
age:12
};
console.log(Object.getOwnPropertyDescriptor(obj,'name'));
obj={};
Object.defineProperty(obj,'test',{
value:'this is a test',
writable:false,
enumerable:false,
configurable:true
});
console.log(Object.getOwnPropertyDescriptor(obj,'test'));
var obj1={x:1};
var obj2=Object.create(obj1);
console.log(Object.getOwnPropertyDescriptor(obj2,'x'));
console.log(Object.getPrototypeOf(obj2)==obj1);
//constructor
var obj3=new Object;
console.log(obj3.constructor==Object);
var arr1=new Array;
console.log(arr1.constructor==Array);
var n=new Number(324);
console.log(n.constructor==Number);
function Test(){
}
var f=new Test();
console.log(f.constructor);
console.log(f.toString());
Test.prototype.toString=function(){
return '这是自定义的toString方法';
}
console.log(f.toString());
var toString=Object.prototype.toString;
console.log(toString.call(new Date));
console.log(toString.call(new String));
console.log(toString.call(Math));
console.log(toString.call(undefined));
console.log(toString.call(null));
var obj={x:1};
console.log(obj.valueOf());
</script>
</body>
</html>
3 number
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var n=Number('123.123');
console.log(n);
console.log(typeof n);
var n=new Number('123.123');
console.log(n);
console.log(typeof n);
console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);
console.log(Number.NaN);
console.log(Number.NEGATIVE_INFINITY);
console.log(Number.POSITIVE_INFINITY);
console.log(Number.isNaN(NaN));
console.log(Number.isNaN(Number.NaN));
console.log(Number.isNaN(0/0));
console.log(Number.isNaN('NaN'));
console.log(Number.isNaN(''));
console.log(Number.isNaN('123'));
console.log(Number.isNaN(true));
console.log(Number.isNaN(undefined));
console.log(Number.isNaN(' '));
var n=12345.6789;
console.log(n.toFixed());
console.log(n.toFixed(1));
console.log(n.toFixed(2));
console.log(n.toFixed(6));
console.log(1.23e+20.toFixed(2));
console.log(1.23e-20.toFixed(2));
console.log(2.45.toFixed(1));
var n=77.1234;
console.log(n.toExponential());
console.log(n.toExponential(2));
console.log(n.toExponential(4));
var n=5.1234567;
console.log(n.toPrecision());
console.log(n.toPrecision(1));
console.log(n.toPrecision(2));
console.log(n.toPrecision(5));
console.log((1234.567).toPrecision(2));
var n=new Number(255);
console.log(n.toString());
console.log(n.toString(10));
console.log(n.toString(16));
console.log(n.toString(2));
//测试布尔对象
var b=new Boolean();
console.log(typeof b);
console.log(b.valueOf());
console.log(typeof b.valueOf());
var b=new Boolean(0);
b=new Boolean(-0);
b=new Boolean(null);
b=new Boolean(false);
b=new Boolean(undefined);
b=new Boolean('');
b=new Boolean('false');
console.log(b);
var b=Boolean('test');
console.log(b);
</script>
</body>
</html>
4 string
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var str='king';
console.log(typeof str);
var strObj=new String('king');
console.log(typeof strObj);
console.log(strObj[0]);
console.log(strObj.length);
console.log(strObj.valueOf());
console.log(strObj.toString());
console.log("maizi"[0]);
console.log("helloworld".length);
var str=String('1234');
str=String(true);
str=String({x:1});
str=String(null);
console.log(str);
var str='king';
//charAt()根据下标返回指定的字符
console.log(str.charAt(0));
console.log(str.charAt(1));
console.log(str.charAt(2));
console.log(str.charAt(3));
console.log(str.charAt(10));
var str='abcdef';
//charCodeAt():返回指定字符的ASCII码值
console.log(str.charCodeAt(0));
console.log(str.charCodeAt(100));
console.log(str.charCodeAt(-123));
//fromCharCode():根据指定的ASCII放回对应的字符
console.log(String.fromCharCode(97));
console.log(String.fromCharCode(65,66,67));
//concat()：连接字符串
var str='hello ';
console.log(str.concat('world'));
console.log(str.concat('world ','!'));
//字符串搜索相关
var str='this is a test';
console.log(str.indexOf('t'));
console.log(str.indexOf('is'));
console.log(str.indexOf('Is'));
console.log(str.indexOf('i'));//2
console.log(str.indexOf('i',3));//5
//通过indexOf()可以统计一个字符在指定字符串中出现的次数
var str='sssssdlkfjlwk34jlksdfjlksjdlf234';
var count=0;
var pos=str.indexOf('s');
while(pos!=-1){
count++;
pos=str.indexOf('s',pos+1);
}
console.log(count);
//lastIndexOf():最后一次出现的位置
var str='this is a test';
console.log(str.indexOf('is'));
console.log(str.lastIndexOf('is'));
//比较两个字符串
console.log('a'.localeCompare('z'));//-1
console.log('z'.localeCompare('a'));//1
console.log('a'.localeCompare('a'));//0
console.log('b'.localeCompare('B'));//1
//match():找到一个或多个正则表达式的结果
var str='this is a test of king show time';
var re=/IS/i;
console.log(str.match(re));
var str='QWERTYUIOPASDFGHJKLZXCVBNMqwertyuioasdfghjkzxcvbnm';
console.log(str.match(/[a-f]/ig));
//search():根据正则表达式进行搜索
var str='this is a test';
console.log(str.search(/is/));
console.log(str.search(/IS/));
console.log(str.search(/IS/i));
var str='this is a test';
var newStr=str.replace(/IS/ig,'!');
console.log(newStr);
var str="2015-09-26";
var newStr=str.replace(/(\d{4})-(\d{2})-(\d{2})/,"$2/$3/$1");
console.log(newStr);
var str="2015-09-25";
var newStr=str.replace(/(\d{4})-(\d{2})-(\d{2})/,func);
function func(match,d1,d2,d3){
return [d2,d3,d1].join('/');
}
console.log(newStr);
//截取字符串
var str='abcdef';
console.log(str.slice(2));
console.log(str.slice(0,2));
console.log(str.slice(-3));
console.log(str.slice(-4,-2));
console.log(str.slice(0,-1));
console.log(str.substr(3));
console.log(str.substr(0,4));
//split()将字符串拆分成数组
var str='2015-08-12';
var arr=str.split('-');
console.log(arr);
var str='a b c d e f';
var arr=str.split(' ');
console.log(arr);
arr=str.split(' ',2);
console.log(arr);
//字符串大小写相关
console.log("KING".toLowerCase());
console.log("KING".toLocaleLowerCase());
console.log('maizi'.toUpperCase());
console.log('maizi'.toLocaleUpperCase());
//trim()
var str=' abc ';
alert("!"+str+"!");
alert("!"+str.trim()+"!");
//产生锚点
var str="this is a test";
document.body.innerHTML=str.anchor('contents_anchor');
//产生链接
var title='this is of king show time';
var url='http://phpfamily.org';
document.write('Click Me to Visit My Blog'+title.link(url));
</script>
</body>
</html>
5 function
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function Test(){}
console.log(Test.constructor);
function Test1(x,y,z){
return x+y+z;
}
console.log(Test1.length);
function A(){
return A.caller;
}
function B(){
return A();
}
console.log(B());
console.log(A());
function Test2(){
return arguments;
}
console.log(Test2(1,2,3,34,'a',5,6,6,7));
//callee属性，这个属性引用的诗当前被嗲用的函数对象
function f(){
return arguments.callee;
}
console.log(f());
// (
// function(count){
// if(count<=3){
// alert(count);
// arguments.callee(++count);
// }
// }
// )(0);
function f1(a,b,c){
return a+b+c;
}
console.log(f1.toString());
console.log(f1.valueOf());
var obj={
name:'king',
say: function(somebody){
return 'Hello '+somebody+' this is '+this.name;
}
};
console.log(obj.say('queen'));
var obj1={
name:'maizi'
};
console.log(obj.say.call(obj1,'js'));
var obj2={
calc: function(x,y,z){
return x+y+z;
}
};
console.log(obj2.calc.call(null,1,2,3));
console.log(obj2.calc.apply({},[3,4,5]));
</script>
</body>
</html>
6 Math
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
console.log(Math.E);
console.log(Math.PI);
console.log(Math.abs(-12));
console.log(Math.ceil(12.3));
console.log(Math.floor(14.8));
console.log(Math.round(1234.5678,2));
console.log(Math.pow(2,3));
console.log(Math.sqrt(4));
console.log(Math.random());
console.log(Math.max(12,3423,45345,6435655345));
console.log(Math.min(-234,23,2346,324536));
</script>
</body>
</html>
7 date
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var d=new Date();
console.log(d);
var d=new Date(138578123456);
console.log(d);
var d=new Date(2015,10,3);
console.log(d);
var d=new Date(15,0);
console.log(d);
var d=new Date(2013,13,2);
console.log(d);
console.log(Date.now());
console.log(new Date(1443282345451));
console.log(Date.parse("Sat, 26 Sep 2015 15:46:03 GMT"));
console.log(Date.parse("Aug 9,2015"));
console.log(Date.UTC(2015,09,01,0,0,0));
var d=new Date("2015-09-26 12:23:34");
console.log(d.getDate());
console.log(d.getDay());
console.log(d.getFullYear());
console.log(d.getMonth());
console.log(d.getHours());
console.log(d.getMinutes());
console.log(d.getSeconds());
console.log(d.getMilliseconds());
console.log(d.getTime());
d.setDate('11');
console.log(d);
d.setFullYear('2016');
console.log(d);
d.setMonth('2');
console.log(d);
d.setHours('15');
d.setMinutes('46');
d.setSeconds('55');
console.log(d);
d.setTime(1443241414000);
console.log(d.getTime());
console.log(d.toString());
console.log(d.valueOf());
console.log(d.toJSON());
d=new Date('2015-09-26T04:23:34.000Z');
console.log(d);
</script>
</body>
</html>
8 RegExp
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var patt=new RegExp("javascript");
var res=patt.test('this is javascript course');
console.log(res);
patt=/javascript/;
patt=/JavaScript/i;
res=patt.test("this is javascript show time");
console.log(res);
//[]
res=/[abc]/.test('lue');
res=/[^abc]/.test('lue');
res=/[0-9]/.test('this is a test');
res=/[a-z]/.test('234235453245');
res=/php|javascript|ios/i.test('PHP');
console.log(res);
//元字符
res=/./.test('\n');
res=/./.test('this is a test');
res=/\w/.test('hello maizi')//[a-zA-Z0-9]
res=/\w/.test('!#@');
res=/\W/.test('!#%');//[^a-zA-Z0-9]
res=/\s/.test('hello world');
res=/\S/.test(' ');
res=/\bg/.test('good');
res=/o\b/.test('good');
res=/d\b/.test('good');
res=/o\B/.test('good');
console.log(res);
//量词
res=/o+/.test('google');
res=/o*/.test('google');
res=/o?/.test('google');
res=/o{2}/.test('goooogle');
res=/o{1,3}/.test('goooogle');
res=/^k/.test('king');
res=/i$/.test('mai');
res=/o(?=w)/.test('helloworld');
res=/o(?!w)/.test('helloworld');
res=/\d/.test('aajkldsfj');//[0-9]
res=/\D/.test('sdfkjllsdfj');//[^0-9]
console.log(res);
res=/is/i.exec('this is a test');
console.log(res);
console.log(res[0]);
var str='this is a test hello maizi hello world';
var patt=/i/ig;
var myArr;
while((myArr=patt.exec(str))!==null){
var msg='找到了'+myArr[0]+'!';
msg+='下一个匹配从'+patt.lastIndex;
console.log(msg);
}
var str='this is a test';
res=str.match(/IS/i);
console.log(res);
res=str.match(/IS/ig);
console.log(res);
res=str.search(/is/i);
console.log(res);
var str1=str.replace(/is/ig,'!');
console.log(str1);
var str='2015-09-27';
res=str.replace(/(\d{4})-(\d{2})-(\d{2})/,'$2/$3/$1');
console.log(res);
str='Hello Maizi Edu';
res=str.replace(/[A-Z]/g,func);
function func(match){
return 'king_'+match.toLowerCase();
}
console.log(res);
res=str.split(/\s+/);
console.log(res);
</script>
</body>
</html>
9 error
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// try{
// notExists();
// }catch(e){
// alert(e.name+":"+e.message);
// }
// alert('this is a test');
// try{
// var n=2;
// if(n==0){
// throw new Error('0不能当做除数');
// }else{
// alert(4/n);
// }
// }catch(e){
// alert(e.name+":"+e.message);
// }finally{
// alert('我总是被调用');
// }
// try{
// notExits();
// }catch(e){
// if(e instanceof EvalError){
// alert("Eval错误"+e.message);
// }else if(e instanceof RangeError){
// alert("Range错误"+e.message);
// }else if(e instanceof TypeError){
// alert("Type错误"+e.message);
// }else if(e instanceof ReferenceError){
// alert("Reference错误"+e.message);
// }else{
// alert('其它错误');
// }
// }
function MyError(msg){
this.name='MyError';
this.message=msg||'默认的自定义的错误信息';
}
MyError.prototype=Object.create(Error.prototype);
MyError.prototype.constructor=MyError;
try{
throw new MyError();
}catch(e){
console.log(e.name+":"+e.message);
}
try{
throw new MyError('测试自定义的错误信息');
}catch(e){
console.log(e.name+":"+e.message);
}
</script>
</body>
</html>
10 compareObj
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var o1={x:1};
var o2={x:1};
console.log(o1==o2);
var o3={x:1};
var o4=o3;
o4.x=123;
console.log(o4.x);
console.log(o3.x);
function f(o){
o.x=55;
}
f(o3);
console.log(o4.x);
console.log(o3===o4)
</script>
</body>
</html>
11 prototype
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function foo(a,b){
return a*b;
}
console.log(foo.length);
console.log(foo.constructor);
console.log(foo.prototype);
foo.prototype={};
function Product(name,color){
this.name=name;
this.color=color;
this.whatAreYou=function(){
return 'this is a '+this.color+' '+this.name;
};
}
// Product.prototye.price=200;
// Product.prototye.rating=3;
// Product.prototye.getInfo=function(){
// return "等级："+this.rating+"--价钱："+this.price;
// }
Product.prototype={
price:6888,
memory:64,
getInfo: function(){
return "内存："+this.memory+"--价钱："+this.price;
}
};
var p1=new Product('iphone6','玫瑰金');
console.log(p1.name);
console.log(p1.color);
console.log(p1.whatAreYou());
console.log(p1.price);
console.log(p1.memory);
console.log(p1.getInfo());
Product.prototype.get=function(what){
return this[what];
}
console.log(p1.get('price'));
console.log(p1.get('name'));
Product.prototype.getInfo=function(){
return 'memory：'+Product.prototype.memory;
}
var p2=new Product('MacBookPro','土豪金');
Product.prototype.price=14888;
Product.prototype.memory=256;
console.log(p2.getInfo());
console.log(p2.memory);
console.log(p2.toString());
</script>
</body>
</html>
12 property
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function Product(name){
this.name=name;
}
Product.prototype.name='音响';
var p1=new Product('相机');
console.log(p1.name);
delete p1.name;
console.log(p1.name);
p1.name='手机';
console.log(p1.name);
var obj={
username:'king',
age:12,
addr:'北京',
email:'382771946@qq.com'
};
for(var i in obj){
console.log(obj[i]);
}
function Product(name,color){
this.name=name;
this.color=color;
this.someMethod=function(){
return 'this is a test';
}
}
Product.prototype.price=1234;
Product.prototype.memory=32;
var p1=new Product('苹果手机','白色');
for(var p in p1){
console.log(p);
}
for(var p in p1){
if(p1.hasOwnProperty(p)){
console.log(p);
}
}
var monkey={
hair:true,
feeds:'香蕉',
breathes:'air'
};
function Human(name){
this.name=name;
}
Human.prototype=monkey;
var person1=new Human('king');
console.log(person1.name);
console.log(monkey.isPrototypeOf(person1));
var person2=new Human('queen');
person2.feeds='火锅';
person2.learn='Js课程';
console.log(person2.learn);
console.log(person2.feeds);
console.log(person2.name);
console.log(person2.breathes);
person2.constructor='this is a test';
console.log(person2.__proto__);
console.log(person2.constructor);
monkey.test='hello maizi';
console.log(person2.test);
console.log(typeof person2.__proto__);
console.log(typeof person2.prototype);
</script>
</body>
</html>
</html>
- Javascript
- JavaScript
- javascript
- javascript
- javascript
- javascript
- javascript
- JavaScript
- javascript
- JavaScript
- Javascript
- javascript
- javascript
- JavaScript
- javascript
- javascript
- JavaScript
- javascript
- Oil Deposits 石油储藏HDU
- 被大家“说烂”的快速原型设计其实是这样的
- swift_036（Swift之第三方库SwiftyJSON篇）
- bzoj 1997: [Hnoi2010]Planar
- 系统动画和自定义动画冲突
- javaScript
- Xcode Provisioning Profiles Path
- 使用net start mysql启动数据库发生错误及解决办法
- Git常用指令
- 百度定位之Failed to extract native libraries
- Android学习之TabLayout和ViewPager
- 记https请求时证书、公钥、私钥、加密的各种问题
- URL中的保留和不安全字符
- Android开发学习之路--Android Studio项目目录结构简介
