javascript的基本语法:
1,弱类型的语言
2,是面向对象和面向过程的
3,作用:表单的验证,网页的动画
4,嵌入到html 中
--<script type="text/javascript"></script>
---js文件
--<script type="text/javascript" src=" XXX.js"></script>
------------------------------------------------------------------------
javascript的语法知识:
1,区分大小写
2,单行注释://
多行注释:/**/
3, 变量:
---声明:var
---数据类型:
--原始类型:数字,字符串,布尔值、null和undefined
---对象类型:数组和函数
注意:parseInt("3")
typeof(str) //显示类型
4,运算符:
=== :全等于
!==:全不等于
注意:0 的值是false;其他的值都为true;
==: 数值相等
===:数据类型和数值都相同
!!:逻辑或
eval("2+2") : 表达式的计算
XXX? XX:XX
var a =prompt("请输入第一个数",0); //prompt(): 输入数字
进制的转换:
var data =10;
var newData=data.toString(2);
//转换成二进制
分支语句的例子:
switch(base){
case 2:
case 8:
case 16:
result=data.toString(base);break;
default:
result="<font color:'red'>非法</font>";
}
----------------------------------------------------------------
funciton函数名(参数1,参数2,){语句}
变量的作用域是花括号。同名的变量以小范围为准,全局变量是公用的。
参数的变量是局部的变量。
注意:函数的高级写法,函数也是一种数据类型:
var f= function(x){return x*x};
格式:var 变量名=function(参数){语句;};
------------------------------------------------------------------------
递归算法:
--代码简单,但是效率低
--递归是在内部调用自己
--写递归首先是找到结束的条件,然后找到怎么做的。
-------------------------------------------------------------------------
函数的嵌套:
--注意:返回值
function getSqrt(a,b){
function square(x){return x*x};
return Math.sqrt(square(a)+square(b));
}
---------------------------------------------------------------------
四则运算的简单例子:
<!DOCTYPE HTML>
<html>
<title>
<meta charset="utf-8"/>
<title>四则运算</title>
<script type="text/javascript">
function add(a,b){return a+b};
function mul(a,b){return a*b};
function sub(a,b){return a-b};
function div(a,b){return a/b};
function operate(op,a,b){
return op(a,b);
}
alert(operate(add,3,4));
</script>
</title>
</html>
--------------------------------------------------------------------------------
javascript的内置对象:
1,javascript的对象的类型:内置对象,自定义对象,浏览器对象
2,javascript的内置对象的实现:数组对象,字符串对象、数学对象、日期对象、正则表达式
3,数组对象:
-----无类型
-----创建:
①var a =new Array(5); //创建5维数组
②var a =new Array(5,"aaa");// 创建数组并附值
③ var a =[12,"hello"]; //直接使用中括号创建数组
----数组的读写:通过下标
----数组的遍历:
----for( ; ; ){} //是连续的
----for( index in array){array[index]} //可以是不连续的,所以一般用这个
-----多维数组:
在javascript中不支持多维数组
---创建的方式:
var t =new Array(5);
for(var index in t){
t[index] =new Array(3);
}
-----sort(): 排序,默认的是按照字母表的,可以自己指定排序的规则:sort(function(x,y){});
例子
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>m冒泡排序</title>
<script type="text/javascript">
var numbers=[12,23,0,9,3,6];
var chars=['ant','Bug','Cot','Ddd','Att'];
//忽略字母大小写,按照字母的顺序排序
chars.sort(function(x,y){
var x =x.toLowerCase();
var y =y.toLowerCase();
if(x<y) return -1;
else if(x>y) return 1;
else return 0;
});
for(var index in chars){
document.write("<span id='sort1'>"+chars[index]+",</span>");
}
document.write("<br>");
//指定从小到大的顺序排列
numbers.sort(function(a,b){
return a-b;
});
for (var index in numbers){
document.write("<span id='sort1'>"+numbers[index]+",</span>");
}
</script>
</head>
<body>
</body>
</html>
-----push(a) //在结尾处增加
-----pop() //删除
-----unshift(a) //在开始出增加
----shift() //删除
----join :通过特定的字符将数组变成字符串,不改变原数组
----reverse: 数组颠倒,改变原数组
----concat: 连接数组中的元素,并返回一个新的数组,原来数组的内容不改变
简单的测试:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>m冒泡排序</title>
<script type="text/javascript">
var numbers=[12,23,0,9,3,6];
//添加和删除的方法
numbers.push("a"); //在末尾处添加
document.write("<span>"+numbers+"</span><br>");
numbers.pop(); //在末尾处删除
document.write("<span>"+numbers+"</span><br>");
numbers.unshift("b"); //在开头处添加
document.write("<span>"+numbers+"</span><br>");
numbers.shift(); //在开头处删除
document.write("<span>"+numbers+"</span><br>");
//join方法,返回的是字符串
var str=numbers.join(":");
document.write("<span>"+numbers+"</span><br>"); //不改变原数组
document.write("<span>"+str+"</span><br>");
//concat方法,返回新的数组
var newNum=numbers.concat("wwww");
document.write("<span>"+newNum+"</span><br>");
//reverse方法,改变原来的数组
numbers.reverse();
document.write("<span>"+numbers+"</span><br>");
</script>
</head>
<body>
</body>
</html>
----slice(start,end) :返回字数组,记头不记尾
----splice(index,count,ele1,ele2): 返回的是删除的数组,ele是在删除位置插入的元素 :在数组中插入和删除元素
----toString:转为字符串
例子:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>冒泡排序</title>
<script type="text/javascript">
var numbers=[12,23,0,9,3,6];
//slice:截取字符串,返回的是被截取的部分
var newNum=numbers.slice(2, 5);
document.write("<span>"+newNum+"</span><br>");
//splice:在数组中插入和删除元素,改变原数组
numbers.splice(2,3,"a");
document.write("<span>"+numbers+"</span><br>");
//toString() :将数组转换为字符串
document.write("<span>"+numbers.toString()+"</span>");
</script>
</head>
<body>
</body>
</html>
--------------------------------------------字符串对象
--创建 var str="";
--属性:length
--方法:格式替代类的方法
--split
-----------------------------------------
获得html中对应的id对象的标签
document.getElementById("XXX");
在对应的html中插入纯文本innerText
在对应的html中插入innerHTML
------------------------------------------------------
邮箱验证的例子:
<!DOCTYPE HTML>
<!--
邮箱验证的思路:
1,必须包含 @ 和 .
2, @前的字符串的长度 > 1
-->
<html>
<head>
<meta charset="utf-8"/>
<title>邮箱验证</title>
<script type="text/javascript">
function check(){
var value=document.getElementById("email").value;
if(value!=""){
if(value.indexOf("@")!=-1){
if(value.indexOf(".")!=-1){
var a=value.split("@");
if(a[0].length>1){
document.getElementById("mess").innerHTML="<font color='green'>正确</font>";
}else{
document.getElementById("mess").innerHTML="<font color='red'>长度错误</font>";
}
}else{
document.getElementById("mess").innerHTML="<font color='red'>错误</font>";
}
}else{
document.getElementById("mess").innerHTML="<font color='red'>错误</font>";
}
}
}
</script>
</head>
<body>
<label>邮箱:</label><input type="text" id="email" /><br><br>
<input type="button" value="验证" οnclick="check()" />
<span id="mess"></span>
</body>
</html>
--------------------------------------------
数学对象:
<!DOCTYPE HTML>
<!--
产生三个255内的随机数,实现内容颜色的改变
-->
<html>
<head>
<meta charset="utf-8"/>
<title>随机上色</title>
<style type="text/css">
#content{
width:100px;
height: 100px;
}
</style>
<script type="text/javascript">
function changeColor(){
var red =Math.ceil(Math.random()*255);
var bule =Math.ceil(Math.random()*255);
var green =Math.ceil(Math.random()*255);
var color="#"+red.toString(16)+green.toString(16)+bule.toString(16);
document.getElementById("content").style.color=color; //设置指定标签的样式
}
</script>
</head>
<body>
<p id="content">开始变换颜色了</p>
<input type="button" value="魔法开始" οnclick="changeColor()" />
</body>
</html>
--------------------------------------------------------------------------------------------------------
日期对象:
例子1 :
倒计牌的实现:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>倒计时的实现</title>
<script type="text/javascript">
function diff(){
var current =new Date();
alert(current.toLocaleDateString());
var year=document.getElementById("year").value;
var month=document.getElementById("month").value-1;//注意-1
var day=document.getElementById("day").value;
var futureDate=new Date(year,month,day);
alert(futureDate.toLocaleDateString());
var diff=Math.ceil((futureDate.getTime()-current.getTime())/(1000*60*60*24));
document.write("<span>"+diff+"</span>");
}
</script>
</head>
<body>
<label>年:</label><input type="text" id="year"/>
<label>月:</label><input type="text" id="month"/>
<label>日:</label><input type="text" id="day"/>
<input type="button" value="显示" οnclick="diff()">
</body>
</html>
---------------------------
日历的实现:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>网页版的日历</title>
<style type="text/css">
.content{
width: 400px;
height: 400px;
background: #c9c9c9;
margin:0 auto;
}
#tb{
width:400px;
height: 400px;
text-align: center;
}
</style>
<script type="text/javascript">
function getCal(){
var title=["日","一","二","三","四","五","六"];
var months=[1,2,3,4,5,6,7,8,9,10,11,12]; //月份
var monthDays=[31,28,31,30,31,30,31,31,30,31,30,31]; //每月的天数
var currentDay=new Date();
var date=currentDay.getDate();
var year=currentDay.getFullYear();
var month=currentDay.getMonth();
var monthFlag=0;
//判断是否为润年
if((year%4==0 && year%100!=0 ) || year%400==0){
monthFlag=1;
}else{
monthFlag=0;
}
//2月日子为:
monthDays[1]=monthDays[1]+monthFlag;
//列中填充的日子
currentDay.setDate(1);
var week=currentDay.getDay(); //得到这个月的1号是星期几
//确定要生成的行数
var row=Math.floor((monthDays[month]+6)/7);
var str="<div class='content'><table id='tb'><tbody>";
for( var index in title){
str+="<th>"+title[index]+"</th>";
var day=1;
for(var i=0;i<row;i++){
str+="<tr>";
// document.write("<tr>");
for(var j=0;j<7;j++){
if(!(i==0 && j<week)){
srt+="<td id="+day+">";
if(day==date){
str+="<td style='background:red'>";
}
str+=day;
if(day ==monthDays[month] ){
break;
}
day++;
str+="</td>";
}else{
str+="<td id='day'></td>";
}
}
str+="</tr>";
}
str+="</div></table></tbody>";
document.getElementById("date").innerHTML=str;
}
</script>
</head>
<body οnlοad="getCal()">
<div id="date"></div>
</body>
</html>
---------------------------------------------------------------
正则表达式:
1,用于模式匹配(验证),检索和替换;
2,基本的语法:
---创建正则表达式:
var reg=/pattern/[flags] // pattern是模式,写在 "//"之间
var reg=new RegExp("pattern",["flags"])
注意:
flags是可选项:
---g :是在全文查找
---i :忽略大小写
---m :多行查找
pattern是由元字符字母组成的:
^ :匹配字符串的开头
$ :匹配字符串的结尾
\w :匹配一个字符,含有数字,等价于[a-zA-Z0-9]
\W :匹配不是一个字符的[^a-zA-Z0-9]
\d :匹配一个数字[0-9]
\D :匹配不是一个数字[^0-9]
--------正则表达式的使用
----String对象的 方法:
-search
-replace
-match
-split
例子:
//search() :返回字符串在的位置alert(str.search(/ello/i)); //注意 是 "/"//replace(reg, str) 替换符合标准的正则表达式,返回的是新的字符串,但是原来额不改变alert(str.replace(/ello/i,"iii"));//match(reg) :返回和reg匹配的字符数组。var str2=" 1 + 2 = 3"alert(str2.match(/\d/g));//split(reg) :通过指定的reg切割stralert("1 , 2, 2".split(/\s*,\s*/));
----------------------------------------
正则表达式对象RegExp
--创建
直接量语法
/pattern/attributes
创建 RegExp 对象的语法:
new RegExp(pattern, attributes);
----使用
属性:lastIndex :数组.index+1
方法:test //返回的是boolean值
exec //返回的是数组
例子:邮箱验证的代码:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>正则表达式实现邮箱的验证</title>
<script type="text/javascript">
function check(){
var reg=/^[a-zA-Z]\w+[@]\w+[.][\w.]+$/;
var email=document.getElementById("email").value;
var show=document.getElementById("show");
if(reg.test(email)){
show.innerHTML="正确";
show.style.color='green';
}else{
show.innerHTML="错误";
show.style.color='red';
}
}
</script>
</head>
<body>
<label>邮箱:</label><input type="text" id="email" οnblur="check()" />
<span id="show"></span>
</body>
</html>
-----------------------------------------------------------
javascript自定义对象
---使用{} ,并动态创建属性和方法
---直接{属性和方法,用“,”隔开
}
---new Object() ,返回动态的创建属性和方法。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>创建一个对象的</title>
<script type="text/javascript">
//使用{}+动态创建的方式
var s={};
s.name="num1";
s.age="10";
s.show=function(){
alert("我是第一种创建方式!");
}
s.show();
//使用第二种创建方式:
var s2={
name:"num2",
age:"20",
show:function(){
alert("这是第二种创建方式");
}
}
s2.show();
//使用第三种方式创建
var s3=new Object();
s3.name="num3";
s3.age="30";
s3.show=function(){
alert("这是第三种创建方式");
}
s3.show();
</script>
</head>
<body></body>
</html>
-----原型对象的创建和使用
---创建:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>创建一个对象的</title>
<script type="text/javascript">
//原型对象的创建,名字要大写
function Person(name,age){
this.name=name;
this.age=age;
this.show=function(){
alert("hello");
}
}
var p =new Person("aaa",20);
var s=new Person("bbb",22);
alert(p.name+":"+p.age);
alert(s.name+":"+s.age);
p.show();
//constructor属性
alert(p.constructor==Person);
//instanceof属性
alert( p instanceof Person);
</script>
</head>
<body></body>
</html>
注意:对象.方法名 :这种调用返回的是对象对应的方法的地址
-----propotype对应的应用:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>创建一个对象的</title>
<script type="text/javascript">
//创建原型对象
function Person(name){
this.name=name;
}
//使得所有对象的属性和方法都是公用的
Person.prototype.type="女";
Person.prototype.show=function(){
alert("propertyp");
};
var p1=new Person("lili");
var p2=new Person("lily2");
p1.show();
alert(p1.show==p2.show);
//isPrototypeOf (p) :判断p是否对应对象的类
alert(Person.prototype.isPrototypeOf(p1));
//hasOwnProperty(“属性”) :判断对应的属性是否是自己的,还是继承的
alert(p1.hasOwnProperty("type"));
</script>
</head>
<body></body>
</html>
--------------------------------------------------------------
javaScript中实现继承的两种方式
----使用call和apply
----使用prototype的方式
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>创建一个对象的</title>
<script type="text/javascript">
function Animal(){
this.s="animal";
}
function Cat(){
Animal.call(this); //使用call或者 apply方法实现继承
this.name="cat";
this.show=function(){
alert(this.name);
}
}
var cat =new Cat();
alert(cat.s);
function Person(){
this.p="person";
}
function Student(){
this.name="stu";
}
Person.prototype.p2="pseron1";
Student.prototype=Person.prototype; //使用propotype的方式实现继承
var stu=new Student();
alert(stu.p2);
</script>
</head>
<body></body>
</html>
总结:
内置对象(数组对象,字符串对象,数学对象,日期对象,正则表达式)
面向对象的实现
--------------------------------------------
BOM浏览器对象
window 对象
navigator对象
screen对象
location对象
history对象
frames对象
作用:移动窗口的位置,改变窗口的大小,打开新的窗口,关闭窗口,弹出对话框,
进行导航,获取用户客户信息。
window对象
1,计时器,可以用来实现动画
setTimeout(code,millisec) //在指定的毫秒数之后调用code,值执行一次
clearTimeout(id_of_settimeout) //取消setTimeout()设置的timeoutsetInterval(code,millisec[,"lang"]) //在指定的毫秒数之后调用code,重复执行clearInterval(id_of_setinterval) //取消setTimeout()设置的timeout
例子:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>计时器</title>
<style type="text/css">
#time{
width: 100px;height: 100px;margin: 0 auto;
background:#c9c9cc;text-align: center;
line-height: 100px;color: red;
}
</style>
<script type="text/javascript">
var id;
//开始就执行
function init(){
id=setInterval(show_time,1000);
}
//显示时间
function show_time(){
var date =new Date();
var time =date.getHours()+":"+date.getMinutes()+":"
+date.getSeconds();
document.getElementById("time").innerHTML=time;
}
//结束记时
function stop(){
clearInterval(id);
}
</script>
</head>
<body οnlοad="init()">
<div id="time">
</div>
<input type="button" value="start" οnclick="init()" >
<input type="button" value="stop" οnclick="stop() ">
</body>
</html>
2,层的移动,广告动画的实现
---获得div的高和宽
div.style.left=x;alert(div.style.left)
---获得div的高和宽度,并去掉单位
alert(div.style.posLeft); //这个只是只是用与ie浏览器
alert(parseInt(div.syle.left))
---代码:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>广告动画</title>
<style type="text/css">
#ad{
width: 100px;height: 75px;
background: url(images/Penguins.jpg);
position: relative;
}
</style>
<script type="text/javascript">
var x=10,y=10;
var ad=null;
var id=null;
var height=null;
var flag=false;
function init(){
ad=document.getElementById("ad");
ad.style.posLeft=x;
ad.style.posTop=y;
// alert(ad.style.posLeft); //posLeft仅在ie中支持
id=setInterval(move,100);
}
function move(){
height=document.documentElement.clientHeight
-ad.offsetHeight;
if(y>=height){
flag=true;
y=height;
}
if(y<=10){
y=10;
flag=false;
}
if(flag){
y-=10;
ad.style.posTop=y;
}else{
y+=10;
ad.style.posTop=y;
}
}
</script>
</head>
<body οnlοad="init()">
<div id="ad"></div>
</body>
</html>
3,打开窗口的方法:window.open(URL,name,features,replace)
--定时打开窗口:setTimeout("self.close()",5000); //设置窗口在5秒后自动关闭
--向打开的窗口中写入内容:
var win=window.open("dom2.html","","width=100px,height=100px");
win.document.write("aaaa"); //向新打开的窗口中写入内容
--------------------------------------------------------
location对象:
window的location的属性底层调用的就是Location,用于得到URL
window的Screen对象底层调用的就是screen对象,用于得到浏览器的信息
window的history对象底层调用的就是History对象,用于展示访问过浏览器地址的信息的展示
-----------------------------------------
对话框:
alert :显示一条信息并等待用户关闭confirm :显示一条信息,要么“确定”,要么“取消”,并返回布尔值prompt :显示一条信息,等待用户输入字符串,并返回字符串---模式对话框:window的一个属性:showModalDialog(url,[传递的参数],设置) //??????没有办法正常使用----------------------------------DOM文档对象模型
1,概念和用途:概念:是结构化的,可以获得文档的属性,是独立于编程语言的。用途:
- 查询和选取元素
- 遍历文档,找到文档的元素的祖先,兄弟,后代元素
- 查找和设置元素的属性和内容
- 创建、插入和删除节点
- HTML表单
2,查找元素:---doocument.getElementById()---document.getElementsByName()---document.getElementsByTagName()---document对象:对象集合,对象元素,对象方法3,遍历文档:文档对象中有节点节点对象常用的属性:parentNode ---父节点childNodes ---子节点对象的集合firstChild,lastChildnextSibling,previousSibling --该节点中兄弟节点的前一个和后一个对应于节点的属性:nodeType ---9代表document节点1代表Element节点3代表Text节点8代表Comment节点nodeValuetext和comment节点中的内容nodeName --标签名4,修改文档:使用方法+innerHTML的方式function changeValue() {var obj=document.getElementById("hello");obj.innerHTML="<span class='ctn'>hello<span>";5,创建节点:creatElement: 创建元素节点creatTextNode:创建文本节点例子:动态加载js文件<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>动态的加载js</title><script type="text/javascript">function loadJS1(url){var js1=document.createElement("script");var head=document.getElementsByTagName("head")[0];js1.src=url;head.appendChild(js1);}</script></head><body><input type="button" id="btn1" value="加载js1" οnclick="loadJS1('test1.js')"></body></html>例子2:动态的创建表格,并且实现奇数行和偶数行的颜色的交替变换:<!DOCTYPE html><!--动态创建表格,并使其奇数和偶数行的颜色不一样--><html lang="en"><head><meta charset="UTF-8"><title>动态创建表格</title><style type="text/css">.r1{color: red;}.r2{color: blue;}</style><script type="text/javascript">function createTable(row,col){ var body=document.getElementsByTagName("body")[0];
var table=document.createElement("table");for(var i=0;i<row;i++){var tr=document.createElement("tr");for(var j=0;j<col;j++){var td=document.createElement("td");td.innerHTML="列"+j;tr.appendChild(td);}table.appendChild(tr);}body.appendChild(table);table.border="1px";changeColor();}function changeColor(){var trs=document.getElementsByTagName("tr");// alert(trs.length);for( var i=0;i<trs.length;i++){if(i%2==0){trs[i].className="r1";
}else{trs[i].className="r2";}}}</script></head><body οnlοad="createTable(4,5)"></body></html>------------------------------------------------------6,插入和删除节点:都是相对于父节点的插入节点的方法:--appendChild()--insertBefore(要插入的节点,相对的节点)删除节点的方法:removeChild()例子:插入和删除:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>插入和删除节点</title><script type="text/javascript">function insert(){var table=document.getElementsByTagName("table")[0];var tr=document.createElement("tr");var td1=document.createElement("td");var td2=document.createElement("td");var td3=document.createElement("td");td1.innerHTML="1";td2.innerHTML="小明";td3.innerHTML="信计";//插入table.appendChild(tr);tr.insertBefore(td1,null);tr.appendChild(td3);tr.insertBefore(td2,td3);}function delete1(){var table=document.getElementsByTagName("table")[0];var trs=document.getElementsByTagName("tr");table.removeChild(trs[trs.length-1]);}</script></head><body><input type="button" id="insert" value="插入一行" οnclick="insert()"><input type="button" id="delete" value="删除一行" οnclick="delete1()"><table id="table"><tbody><tr><th>序号</th><th>姓名</th><th>专业</th></tr></tbody></table></body></html>动态的添加城市:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>下拉列表</title><script type="text/javascript">function addCity(){var cityName=document.getElementById("city").value;var cityList=document.getElementById("cityList");var city=document.createElement("option");city.innerHTML=cityName;cityList.appendChild(city);}</script></head><body><input type="button" id="addCity" value="添加城市" οnclick="addCity()"><label>请输入要添加的城市</label><input type="text" id="city"><select id="cityList"></select></body></html>--------------------------级联的例子:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>下拉列表的级联</title><!--月份和日期的添加既可以使用str拼接的方式也可以使用dom的方式,本列子使用的是dom的方式--><script type="text/javascript">function init(){//添加年var yearList=document.getElementById("year");var date= new Date();var year=date.getFullYear();for(var i=1900;i<=year;i++){var years=document.createElement("option");years.innerHTML=i;yearList.appendChild(years);if(i==year){years.selected=true;}}//添加月var month=date.getMonth();var monthLists=document.getElementById("month")for (var i=1;i<=12;i++){var monthList=document.createElement("option");monthList.innerHTML=i;monthLists.appendChild(monthList);if(i==month){monthList.selected=true;}}}function getDay(){var year=parseInt(document.getElementById("year").value);
var month=parseInt(document.getElementById("month").value);
var day=document.getElementById("day");var count=0;var diffDay=0;//清除 ,放在for循环的前面
while(day.firstChild){
day.removeChild(day.firstChild);
}
//判断是否为润年if((year%400==0)||(year%4==0 && year%100!=0)){count=1;}//判断是月还是小月switch(month){case 1:case 3:case 5:case 7:case 8:case 10:case 12:diffDay=3;break;case 4: case 6: case 9: case 11:diffDay=2;break;case 2:diffDay=count;break;}var dayLength=28+diffDay; //实现月份的日子的控制for(var i=1;i<=dayLength;i++){var dayList=document.createElement("option");dayList.innerHTML=i;day.appendChild(dayList);}}</script></head><body οnlοad="init();getDay()"><table><!-- <input type="button" οnclick="getDay()"> --><tbody><tr><td>出生日期</td><td><select name="year" id="year" οnclick="getDay()"></select><label>年</label><select name="month" id="month" οnclick="getDay()"></select><label>月</label><select name="day" id="day"></select><label>日</label></td><td></td></tr></tbody></table></body></html>7,表单元素的访问:访问方法:document.表单名字.要访问的方法名();访问表单中的元素:---通过自己定义的名字document.myForms.psw---通过数组的形式document.forms[0].elements[0];--通过links访问超链接---------------------------------------------------------------------------------------------------------javascript的事件处理:1,常用的事件:--blur事件:失去焦点的事件,多用于文本框--load事件:--click事件--submit事件--mouseover事件 :鼠标悬停事件--mouseout事件 :鼠标移开事件2,event对象---event对象表示对象的状态。---event对象只在是事件发生的过程中有效。---fromElement和toElement属性只对mouseover和mouseout有意义。?????????图片这个没有办法弄:????????event事件不能用3,键盘事件:--keydown :键盘按下--keyup :按下释放--keypress :键盘按下并释放4,事件的注册:--html属性:onXx--javascript对象属性:document.getXX--addEventListener("cliclk",function(){},ture)//true获取funciton的返回值-----------------------------------------------------------------------