web前端--javascript

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切割str
   alert("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()设置的timeout
setInterval(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,lastChild    
nextSibling,previousSibling  --该节点中兄弟节点的前一个和后一个
对应于节点的属性:
nodeType  ---
  9代表document节点
  1代表Element节点
  3代表Text节点
  8代表Comment节点
nodeValue    
    text和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的返回值
-----------------------------------------------------------------------
























  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值