Java网页编程与设计——javascript语言

1.1JavaScript的简介

1)为什么学习javascript(作用)

1.html+css 知识可以实现静态的页面无法实现动态的效果
2.表单的校验
3.背景图片的更换
4.操作节点的信息

2)javascript的概念

javascript 一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型

3)javascript的组成

Java网页编程与设计——javascript语言_第1张图片
ECMAScript:JavaScript的核心
文档对象模型(DOM):DOM(文档对象模型)是 HTML 和 XML 的 应用程序接口(API)。DOM 将把整个页面规划成由节点层级
构成的文档 浏览器对象模型(BOM)对浏览器窗口进行访问和操作

4)javascript语言的特点

1、脚本语言
脚本语言是一种简单的程序,是有一些ASCCII字符构成,可以使用任何一种文本编辑器编写,一些程序语言(如C、C++、Java等)都必须经过编译,将源代码编译成二进制的可执行文件之后才能运行,而脚本语言不需要事先编译,只要有一个与其相适应的解释器就可以执行。
脚本语言是指在web浏览器内有解释器解释执行的编程语言,每次运行程序的时候,解释器会把程序代码翻译成可执行的格式。
2、基于对象的语言
面向对象有的三大特点(封装、继承、多态)缺一不可
通常“基于对象”是使用对象,但是无法利用现有的对象模板产生新的对象类型,也就是说“基于对象”没有继承的特点。没了继承的概念也就无从谈论“多态”。
3. 事件驱动
在网页中执行了某种操作的动作,被称为“事 件”(Event),比如按下鼠标、移动窗口、选择菜单 等都可以视为事件。当事件发生后,可能会引起相 应的事件响应。
4、简单性
变量类型是采用弱类型,并未使用严格的数据类型。 var a,b,c; a=123; b=“abc”; a=b;
5、安全性
JavaScript不能访问本地的硬盘,不能将数据存入到 服务器上,不能对网络文档进行修改和删除,只能 通过浏览器实现信息浏览或动态交互
6、跨平台性
JavaScript依赖于浏览器本身,与操作平台无关, 只要计算机安装了支持JavaScript 的浏览器(装有 JavaScript解释器),JavaScript 程序就可以正确执行。
缺点
各种浏览器支持JavaScript的程度是不一样的,支持 和不完全支持JavaScript的 浏览器在浏览同一个 带有JavaScript脚本的网页时,效果会有一定的差 距,有时甚至会显示不出来。

JS的引入房式

<script type="text/javascript"> /*网页中的弹框*/ alert("js 的学习课程"); </script> 

type:引入文件的类型 src: 引 入文件的路径 charset:指定引入的编码–>

  <script type="text/javascript" src="js/test.js" charset="UTF-8" ></script>

JS中的变量

1、JS中变量的声明

var 变量名=值;

2、JS中变量的使用注意的事项

A、js中的变量的名称和java中标识符的命名保持一致就可以了。
B、js中变量名称是可以重复的,但是后者的名称会把前者的名称覆盖
C、js中末尾及时没有分号结束也是可以的,但是不推荐大家这样写


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		
		<script>
			
			var  a =1;
			
			var  b ="2";
			
			var  c ="你好";
			
			var  d=true;
			
			var  e=new  Date();
			
			var  f='5';
			
			var  z=1.32;
			
			
			
			var  a=123;
			
			
			alert(a);
			
		script>
		
		
		
	head>
	<body>
	body>
html>

JS中的数据类型

基本数据类型
number(数字类型的数据)
string(字符串类型)
boolean(布尔数据类型)
object(对象类型)
JS中特殊数据类型
undefined(未定义)
NaN(不是一个数字)not a number
null(空对象)


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		
		
		<script>
			
			var  a=1;
			
			var  b=1.2;
			
			var c='你';
			
			var d="我们";
			
			var  e=true;
			
			var  f=new  Date();
			
			
			
//			alert(typeof f);
			
			
			var  aa;
			
			
//			alert(typeof aa);
			
			
			var  bb="123a";
			
//			alert(Number(bb));

            var  cc=null;
            
            var  dd="";
            
            alert(typeof cc);
			
		script>
		
		
	head>
	<body>
		
		
	body>
html>

JS 中的运算符

算数运算符在这里插入图片描述

逻辑运算符
在这里插入图片描述

连接符

特殊运算符

(= =)等值符
先比较类型 如果类型一致,在比较内容如果类型不一 致,这时候会进行强制转换统一转number类型,然后再进行 内容的比较
(===)等同符
先比较类型 如果类型一致,在比较内容如果类型不一 致 直接返回false;


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		
		<script>
			
			var  a=10;
			
			var b=12.7;
			
			
//			alert(a+b);//22.7
			
			
		  var   c="123";
		  
//		  alert(a+b+c);
			
	     
	     var  d=true;// true ---1   false---0
	     
	     var  e=1;
	     
//	     alert(d+e);
			
			
			var  f1=true;// 1
			
			
			var  f2="true";// NAN
			
			var  f3=1;//1
			
			var  f4="1";//1
			
			
			/*alert(f1==f2);//F
			alert(f1==f3);//T
			alert(f1==f4);//T
			alert(f2==f3);//F
			alert(f2==f4);//F
			alert(f3==f4);//T*/
			
			
			
			alert(f1===f2);//F
			alert(f1===f3);//F
			alert(f1===f4);//F
			alert(f2===f3);//F
			alert(f2===f4);//F
			alert(f3===f4);//F
			
			
		script>
		
		
	head>
	<body>
	body>
html>

控制语句

条件语句

if(){} 
if(){}else{}
if(){}else if(){} else if()...else{} 

分支语句(选择语句)

 switch(){ 
 case value: break;
  default: break; 
  } 

循环语句

  while(){} 
  /**至少执行一次循环体 **/
  do{}while() 
 for(var i =0 ; i<10;i++){}

<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script>
			
			/*var  a=15;
			
			switch (a){
				   case 10: alert("我是10");
					 break;
					case 20: alert("我是20");
					break;
					case 30: alert("我是30");
					break;
				default:
					break;
			}*/
			
			
			
			for(var  a=1; a<=9;a++){
				
				
				for(var  b=1;b<=a;b++){
					
					
					document.write(b+"*"+a+"="+a*b+"    ");
					
				}
				/*直接把信息打印到浏览器上*/
			     document.write("
"
); }
script> head> <body> body> html>

JS 中函数的声明

函数声明的三种形式
(1) function 函数名(){
函数体
}

(2) var 函数名=function(){
函数体
}

(3) var 函数名=new Function(“函数体”);

函数参数传递
在js中实参的个数和形参的个数可以不一致

函数的返回值
如果函数没有return 这时候返回 undefined
():函数执行符


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		
		<script>
			
			/*****【1】函数声明的方式***********************/
			
			//方式一
			function  demo1(){
				
				alert("函数声明一");
				
			}
			
			//方式二
			var  demo2= function(){
				
				
				alert("函数声明二");
				
			}
			
			//方式三   (函数本身也是一个对象)   了解
			
			var  demo3=new  Function("alert('我是函数声明三')");
			
			
//			demo3();
//			demo1();
			
			/*************函数中参数传递************************/
			
			function  demo4(a,b){
				
				console.log(a+"...."+b);
				
				
			}
			
			
		/*	demo4(1,2);//1....2
			
			demo4(1);//1....undefined
			
			demo4(1,2,3);//1....2*/
			
			
			/**************函数的返回值**************************/
			
			
			function  demo5(a){
				
				
				console.log("参数值:"+a());
				
				
				return a;
				
				
			}
			
//			alert(demo5(5));
			
			var  a=function(){
				
				console.log("我是函数a");
				
			};
			
			demo5(a);
			
			
			
			
			
		script>
		
		
	head>
	<body>
	body>
html>

常用对象

Date 日期对象
数学对象


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script>
			
			/***********日期对象*****************/
			
			function testDate(){
				
				
				
				var  date=new  Date();
				
				//本月中的第几天
				document.write(date.getDate()+"
"
); //本星期的第几天 document.write(date.getDay()+"
"
); //返回的月份 0-11 document.write(date.getMonth()+"
"
); //返回的是1900年到现在年份的差值2018-1900 document.write(date.getYear()+"
"
); //返回全年2018 document.write(date.getFullYear()+"
"
); //2018/6/22 下午12:17:14:返回本地的时间 document.write(date.toLocaleString()+"
"
); } /***********数学对象*****************/ function testMath(){ //获得随机数 //随机数范围是0-1 var ran=Math.random()*1000; console.log(ran); //向下取整 756.9714434215177 ==756 console.log(Math.floor(ran)); //向上取整 398.06376470341377==398 console.log(Math.ceil(ran)); //获得4位随机数--验证码 console.log(Math.floor(Math.random()*9000+1000) ); } testMath();
script> head> <body> body> html>

String对象

Global对象


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script>
			
			/************String对象学习**************/
			function  testString(){
				
				var   a="b-j-s-x-t";
				
				var  b=new  String("bjsxt");
				
				//获得下标为2的内容
				document.write(b.charAt(2)+"
"
); //2 :获得下标 document.write(b.indexOf("sxt")+"
"
); //字符串截取 开始下标 截取长度 document.write(b.substr(2,3)+"
"
); // 截取开始的长度 document.write(b.substr(1)+"
"
); //字符串截取 开始下标 结束的下标 document.write(b.substring(2,3)+"
"
); //开始下标 document.write(b.substr(2)+"
"
); //字符串截取的方法 document.write(a.split("-")); } /***************Global对象学习********/ function testGlobal(){ var a=1; var b="var c=1+1"; document.write(a+"
"
); document.write(b+"
"
); //把字符串转成可以执行的js的代码 eval(b); document.write(c+"
"
); var d="123a"; Number(d);//NAN // 检查某个值是否是数字。 document.write(isNaN(d)); } testGlobal();
script> head> <body> body> html>

Array对象1


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script>
			
			/*********数组的声明方式*****************/
			
			function  demo1(){
				
				//方式一
				var   arr=new  Array();
				//方式二   5代表数组的长度
				var  arr2=new  Array(5);
				
//				console.log(arr2);
				//方式三
				
				var  arr3=new  Array("你好",123,new String(),true);
				
				console.log(arr3);
				//方式四
				
				var  arr4=["bjsxt",123,new Date(),false];
			}
			
			/*********数组的使用**************/
			
			function  demo2(){
				
				
				var arr=[];
				
				arr[0]="李时珍的皮";
				
				arr[1]=true;
				
				arr[2]=new  Date();
				
				
				arr[6]=12;
				
				//js中数组的下标可以不连续  如果没有给值就是empty 
				
				console.log(arr);
				
				
			}
			
			/*******数组的扩容********************/
			  
			  function  demo3(){
			  	
			  	
			    var  arr=["bjsxt",123,new Date(),false];
			  	
			  	
			     console.log(arr.length);
			  	
			  	//扩大数组   empty
			  	
//			  	arr.length=10;
			  	
			  	//缩小数组
			  	arr.length=2;
			  	
			  	
			  	console.log(arr);
			  	
			  	
			  }
			  
			/*******数组的遍历********************/
			
			function  demo4(){
				
				var  arr=["bjsxt",123,new Date(),false];
				 
				//数组的遍历方式一
				for(var  i =0;i<arr.length;i++){
					
					console.log(arr[i]);
				}
				
				//数组遍历方式二  i :是代表数组的下标
				for(var  i in arr ){
					
					
					console.log(arr[i]);
				}
				
			}
			/*******数组中常用的方法********************/
			
			function  demo5(){
				
				var  arr=["bjsxt",123,new Date(),false];
				
				console.log(arr);
				//向数组的末尾添加一个或更多元素,并返回新的长度。
				// var  le= arr.push("我们");
				//删除并返回数组的最后一个元素
				// var le= arr.pop();
				//删除并返回数组的第一个元素
				//arr.shift();
				//	向数组的开头添加一个或更多元素,并返回新的长度。
				//arr.unshift("sxt");
				//  删除的含义   开始删除的下标   删除的个数
				//arr.splice(1,2);
				//添加的含义   添加的下标   0   添加的元素
				arr.splice(1,0,"你好");
				console.log(arr);
				
				
			}
			
			demo5();
			
			
		script>
		
		
		
	head>
	<body>
	body>
html>

Array对象2


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script>
			
			/*********数组的声明方式*****************/
			
			function  demo1(){
				
				//方式一
				var   arr=new  Array();
				//方式二   5代表数组的长度
				var  arr2=new  Array(5);
				
//				console.log(arr2);
				//方式三
				
				var  arr3=new  Array("你好",123,new String(),true);
				
				console.log(arr3);
				//方式四
				
				var  arr4=["bjsxt",123,new Date(),false];
			}
			
			/*********数组的使用**************/
			
			function  demo2(){
				
				
				var arr=[];
				
				arr[0]="李时珍的皮";
				
				arr[1]=true;
				
				arr[2]=new  Date();
				
				
				arr[6]=12;
				
				//js中数组的下标可以不连续  如果没有给值就是empty 
				
				console.log(arr);
				
				
			}
			
			/*******数组的扩容********************/
			  
			  function  demo3(){
			  	
			  	
			    var  arr=["bjsxt",123,new Date(),false];
			  	
			  	
			     console.log(arr.length);
			  	
			  	//扩大数组   empty
			  	
//			  	arr.length=10;
			  	
			  	//缩小数组
			  	arr.length=2;
			  	
			  	
			  	console.log(arr);
			  	
			  	
			  }
			  
			/*******数组的遍历********************/
			
			function  demo4(){
				
				var  arr=["bjsxt",123,new Date(),false];
				 
				//数组的遍历方式一
				for(var  i =0;i<arr.length;i++){
					
					console.log(arr[i]);
				}
				
				//数组遍历方式二  i :是代表数组的下标
				for(var  i in arr ){
					
					
					console.log(arr[i]);
				}
				
			}
			/*******数组中常用的方法********************/
			
			function  demo5(){
				
				var  arr=["bjsxt",123,new Date(),false];
				
				console.log(arr);
				//向数组的末尾添加一个或更多元素,并返回新的长度。
				// var  le= arr.push("我们");
				//删除并返回数组的最后一个元素
				// var le= arr.pop();
				//删除并返回数组的第一个元素
				//arr.shift();
				//	向数组的开头添加一个或更多元素,并返回新的长度。
				//arr.unshift("sxt");
				//  删除的含义   开始删除的下标   删除的个数
				//arr.splice(1,2);
				//添加的含义   添加的下标   0   添加的元素
				arr.splice(1,0,"你好");
				console.log(arr);
				
				
			}
			
			demo5();
			
			
		script>
		
		
		
	head>
	<body>
	body>
html>

event 事件

1.什么是事件
事件是可以被 JavaScript 侦测到的行为

网页中的每个元素都可以产生某些可以触发 JavaScript 函数的 事件。比方说,我们可以在用户点击某按钮时产生 一个 onClick 事件来触发某个函数

事件通常与函数配合使用,这样就可以通过发生的事件来 驱动函数执行

生活案例: 电动车、汽车报警器 燃气泄漏探测器、火灾烟雾探测器

2.有哪些事件
Java网页编程与设计——javascript语言_第2张图片
Java网页编程与设计——javascript语言_第3张图片


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script>
			
			function demo1(){
				
				alert("单击事件的执行");
				
			}
			
			function demo2(){
				
				
				alert("双击事件的执行");
				
			}
			
			function demo3(){
				
				//alert("我来了");
				
				alert("我离开了");
			}
			
			function demo4(){
				
				console.log("鼠标移动");
				
			}
			
			function demo5(){
				
				
				alert("键盘按下");
				
			}
			
			function demo6(){
				
				alert("内容改变");
				
			}
			
			function demo7(){
				
				
				alert("页面加载完成");
				
			}
			
		script>
		
	head>
	<body onload="demo7()">
		
		
		<input type="button" name="" id="" value="单击操作" onclick="demo1();demo2()" /> <br /><br /><br />
		
		
		
		<input type="button" name="" id="" value="双击事件" ondblclick="demo2()" /><br /><br /><br />
		
		
		
		<div style="width: 300px; height: 300px; background-color: red;"  onmousemove="demo4()">div><br /><br /><br />
		
		
		
		<input type="text"  onkeydown="demo5()" /><br /><br /><br />
		
		
		
		
		<input type="text" name="" id="" value=""  onchange="demo6()" />
		
	body>
html>

BOM和DOM对象

Java网页编程与设计——javascript语言_第4张图片
Java网页编程与设计——javascript语言_第5张图片
Java网页编程与设计——javascript语言_第6张图片
什么是BOM?
BOM是Browser Object Model的简写,即浏览器对象模型。
BOM由一系列对象组成,是访问、控制、修改浏览器的属性的方法。
BOM没有统一的标准(每种客户端都可以自定标准)。
BOM的顶层是windows对象。
什么是DOM?
DOM是Document Object Model的简写,即文档对象模 型。
DOM用于XHTML、XML文档的应用程序接口(API)。
DOM提供一种结构化的文档描述方式,从而使HTML内容使用结构化的方式显示。
DOM由一系列对象组成,是访问、检索、修改XHTML文档内容与结构的标准方法。
DOM标准是由w3c制定与维护。DOM是跨平台与跨语言的。
DOM的顶层是Document对象
Java网页编程与设计——javascript语言_第7张图片
蓝色框内是归DOM管的,红色框内归BOM管的;也可以说DOM 也是归BOM管的

BOM 是为了操作浏览器出现的 API,window 是其根对象。

DOM 是为了操作文档出现的 API,document 是其根对象。

BOM 对象-window

三种弹框的方式:
//只含有确定的按钮
window.alert(“今天星期一, 马上周五了, 我好开心呢”);
//含有确定按钮和取消按钮的弹框
var flag= window.confirm(“确实很开心”);
//如果返回的是true代表点击的是确定 , 如果返回是false 代表点击的取消
//含有输入内容的弹框 前部分代表的是提示的信息, 后面是 输入内容的默认值
var val= window.prompt(“请输入昵称:”,“例如:李白”);
//取消 返回 null

定时器的应用
//2S后调用方法 执行一次
var time1=window.setTimeout(“test04()”,2000);
//每间隔2s就会执行方法 执行了多次 window.setInterval(“test04()”,2000);

清除计时器的操作
//清除计时器的操作 其中的名称就是清除计时器的名称 window.clearInterval(time);
window.clearTimeout(time1);

关闭和打开浏览器
//打开指定的页面
window.open(“http://www.baidu.com”);
//关闭浏览器窗口。
window.close();


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		
		<script>
			
			/*三种弹框*/
			function  demo1(){
				
				//含有确定按钮的弹框
				window.alert("弹框A");
			}
			
			function  demo2(){
				
				//含有确认取消的弹框
				var  flag= window.confirm("是否删除");
				
				
				alert(flag);
			}
			
			function  demo3(){
				//可以输入内容的弹框
				var  va= window.prompt("请输入昵称:","例如:李白");
				
				alert(va);
			}
			
			/*****定时器********/
			
			function  getTime(){
				
				var  date=new  Date();
				//获得时间
				var  time=date.toLocaleString();
				
				
				//获得id名称是span_1的对象
				
				var span =document.getElementById("span_1");
				
				span.innerHTML=time;
				
			}
			
			//1s之后进行方法的调用  调用一次
//			window.setTimeout("getTime()",1000);
			//每间隔1s就会进行方法的调用   调用多次
		   var  in1=	window.setInterval("getTime()",1000);
			
			
			function  demo4(){
				//清除定时器操作
				window.clearInterval(in1);
				
			}
			
			/*******打开或者关闭浏览器*******/
			
			function  demo5(){
				
				window.open("http://www.baidu.com");
				
			}
			
			function  demo6(){
				
				//关闭当前的网页
				window.close();
				
			}
			
		script>
		
		
	head>
	<body onload="getTime()">
	  
	  <p>
	 <input type="button" name="" id="" value="弹框A" onclick="demo1()"/>
	  p>
	  
	   <p>
	 <input type="button" name="" id="" value="弹框B" onclick="demo2()"/>
	  p>
	  
	   <p>
	 <input type="button" name="" id="" value="弹框C" onclick="demo3()"/>
	  p>
	  
	  当前的时间是: <span id="span_1">span>
	  
	    <p>
	 <input type="button" name="" id="" value="停止时间" onclick="demo4()"/>
	  p>
	  
	    <p>
	 <input type="button" name="" id="" value="打开百度" onclick="demo5()"/>
	  p>
	  
	  
	  <p>
	 <input type="button" name="" id="" value="关闭" onclick="demo6()"/>
	  p>
	  
	body>
html>

Window 中对象学习

Location:对象
var href= window.location.href;
//获得端口号 8020
var port=window.location.port;
//主机名称
var hostname=window.location.hostname;
//主机加端口号
var host=window.location.host;
//修改当前的URL地址 window.location.href=“http://www.taobao.com”;
//刷新网页
window.location.reload();
History 对象:
/返回历史记录的数量
var len= window.history.length;
//后退按钮
window.history.back();
//前进按钮
window.history.forward();
//如果是正数标识前进指定的页面 如果是负数标识后退指定 的页面
window.history.go(-1);
Screen:对象:
//获得当前屏幕的分辨率
var he = window.screen.height;
var wi = window.screen.width;
Navigator 对象:
//返回由客户机发送服务器的 user-agent 头部的值。 console.log(window.navigator.userAgent);


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script>
			/*****Location对象学习*********/
			
			function  testLocation(){
		//http://127.0.0.1:8020/06JS/02JS%E4%B8%ADBOM%E5%AF%B9%E8%B1%A1%E5%AD%A6%E4%B9%A0.html		
			 var  href=	window.location.href;
			//http://127.0.0.1 
			 var hostname=window.location.hostname;
			 //8020
			 var  port=window.location.port;
			 
			 //http://127.0.0.1:8020
			 var  host=window.location.host;
			 
			 
			// alert(href+"----"+hostname+"----"+port+"----"+host);
			 
			 //修改当前的URL地址
			// window.location.href="http://www.baidu.com";
			 
			//重新加载页面	
		   window.location.reload();		
				
			}
			
			
			
			function  testHistory(){
				//返回浏览器历史列表中的 URL 数量。
				var len=window.history.length;
				
				//alert(len);
				//前进操作
//				window.history.forward();
				//后退操作
				//window.history.back();
				
				//控制前进和后退的网页  如果是正数代表前进  如果是负数代表后退  如果是0重新加载页面
				window.history.go(0);
			}
			
			
			function  testScreen(){
				
				//获得当前屏幕的分辨率
				
				var  he=window.screen.height;
				
				
				var  wi=window.screen.width;
				
				alert(he+"----"+wi);
				
				
				
			}
			
			
			function  testNavigator(){
				
			//返回由客户机发送服务器的 user-agent 头部的值。	
			 var  us=	window.navigator.userAgent;
				
				
		    alert(us);		
			}
			
		script>
		
		
	head>
	<body>
	
	<p>
	   <input type="button" name="" id="" value="Location对象" onclick="testLocation()" />
	
	p>
	
	<p>
	   <input type="button" name="" id="" value="History对象" onclick="testHistory()" />
	
	p>
	
	<p>
	   <input type="button" name="" id="" value="Screen对象" onclick="testScreen()" />
	
	p>
	
	<p>
	   <input type="button" name="" id="" value="Navigator对象" onclick="testNavigator()" />
	
	p>

	body>
html>

DOM 中的节点类型

1.什么是 DOM
Java网页编程与设计——javascript语言_第8张图片
Java网页编程与设计——javascript语言_第9张图片
Java网页编程与设计——javascript语言_第10张图片
2.DOM 节点分类 node

元素节点 element node

<a href="链接地址">我的 链接a> 

属性节点 attribute node href="链接地址"

文本节点 text node 链接地址 我的链接

3.DOM 节点关系
Java网页编程与设计——javascript语言_第11张图片
4.DOM 操作的内容

1.查询元素(进行操作元素、或者元素的属性、文本)
2.操作文本
3.操作属性
4.操作CSS样式(一个特殊的属性style)
5.操作元素

获得元素对象的方式(DOM)

直接获得的方式:
//获得id名称是div1的对象
var div= document.getElementById(“div1”);
//获得所有的input标签对象 HTMLCollection
var inp = document.getElementsByTagName(“input”)[0]; //NodeList 获得name属性等于inp的所有的节点对象
var inp= document.getElementsByName(“inp”);
//通过class 的名称可以获得对象 document.getElementsByClassName(“inp1”);

间接获得对象的方式:
//获得div下的所有的子节点 空白的文本也是一个节点
var child= div.childNodes;
//获得当前节点的父级节点—直系父节点
var parent= inp.parentNode;
//获得当前节点的上一个节点
var pre= inp.previousSibling.previousSibling;
//获得上一个节点对象不包含空白文本
var pre1=span.previousElementSibling;
//获得当前节点的下一个节点 var next=inp.nextSibling.nextSibling;
//获得下一个元素节点 不包括空白文本
var next2=span.nextElementSibling;


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script>
			
			/************直接获得节点对象的方式***************/
			
			function  demo1(){
				
				//id方式直接获得--单个对象
				
				var  username=window.document.getElementById("username");
				
				alert(username);
			}
			
			function demo2(){
				//通过标签名称获得元素对象  获得的是多个对象
				
				var  inp=document.getElementsByTagName("input");
				
				alert(inp[2]);
				
				
			}
			
			function  demo3(){
				
				//通过name属性获得
				
				var inp=document.getElementsByName("hobby");
				
				alert(inp.length);
				
			}
			
			/*********间接获得元素对象的方式***************/
			
			function  demo4(){
				
				//获得父节点
				var  professional=document.getElementById("professional");
				//获得子元素  注意:空白的文档也是一个子节点
				 var  child= professional.childNodes;
				 
				
				console.log(child);
				
			}
			
			function  demo5(){
				
				
				var  p2=document.getElementById("p2");
				
				//获得父节点
				var  parent= p2.parentNode;
				
				
				console.log(parent);
				
			}
			
			function  demo6(){
				
				var  p2=document.getElementById("p2");
				//获得下一个节点包含空白的文档
//				var next=p2.nextSibling.nextSibling;
				//获得下一个节点不包含空白的文档
//				var  next=p2.nextElementSibling;
				
				//获得上一个节点对象包含空白文档
//				var  up=p2.previousSibling.previousSibling;
				
				//获得上一个节点对象不包含空白文档
				var  up=p2.previousElementSibling;
				console.log(up);
				
			}
			
		script>
		
		
		
	head>
	<body  onload="demo6()">
		
          <form action="" id="form1">
		      用户名:<input  type="text" name="username" id="username" value="请输入姓名" ><br />
		      密码:  <input  type="password" name="pwd" id="pwd" /><br />
		      爱好:  <input  type="checkbox" name="hobby" value="music" />音乐
				      <input  type="checkbox" name="hobby" value="sports" />体育
				      <input  type="checkbox" name="hobby" value="art"/>美术<br />
		      职业:  <select name="professional" id="professional">
		      	            <option value="1">工人option>
							<option value="2" id="p2">农民option>
							<option value="3">解放军option>
							<option value="4">知识分子option>
					  select><br />
						
						
            <input  type="button" value="提交"/>
        form>

		
	body>
html>

操作元素属性
//获得id名称是inp1对象节点
var inp1=document.getElementById(“inp1”);
//方式一: 获得元素的属性
var ty=inp1.type;
var va=inp1.value;
var na=inp1.name;
//操作元素的属性
inp1.type=“button”;
inp1.value=“测试改变”;
//方式二: 获得元素的属性
var ty1=inp1.getAttribute(“type”);
//获得属性的默认值
var va2=inp1.getAttribute(“value”);
//方式二: 操作元素的属性
inp1.setAttribute(“type”,“button”);


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		
		<script>
			
			function  demo1(){
				
				//获得id名称是inp1对象节点
				
				var  inp1=document.getElementById("inp1");
				
				//获得节点对象的属性
				
				var  ty=inp1.type;
				
				var  va=inp1.value;
				
				var  na=inp1.name;
				
				//alert(ty+"----"+va+"---"+na);
				
				//操作元素的属性
				/*
				inp1.type="button";
				
				inp1.value="测试改变";*/
				
				
				//方式二:   获得元素的属性
				
				var  ty1=inp1.getAttribute("type");
				//获得市属性的默认值
				var  va2=inp1.getAttribute("value");
				
//				alert(va2s);
				
				//方式二:   操作元素的属性
				inp1.setAttribute("type","button");

			}

		script>
		
	head>
	<body>
		
		<input type="text" id="inp1" value="张三" name="uname" />
		
		<hr />
		
		<input type="button" name="" id="" value="测试元素属性" onclick="demo1()" />
		
		
	body>
html>

操作元素样式

获得id名称是div1的对象
var div =document.getElementById(“div1”);
获得css样式 只是支持行内样式的css
var wi=div.style.width;
var hi=div.style.height;
操作元素的css样式 对于 background-color格式的样 式在js中需要使用驼峰规则进行改变
div.style.width=“300px”;
div.style.height=“300px”;
div.style.backgroundColor=“red”;

通过操作类操作元素样式
通过增加class类来增加对应的css样式 注意:className div.className=“div2”;


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script>
			
			function  demo1(){
				
				//获得id名称是div1的对象
				
				var div =document.getElementById("div1");
				
				//获得css样式  只是支持行内样式的css
				
				var  wi=div.style.width;
				
				
				var  hi=div.style.height;
				
				
//				alert(wi+"----"+hi);
				
				
				//操作元素的css样式    对于 background-color格式的样式在js中需要使用驼峰规则进行改变
				
				div.style.width="300px";
				
				
				div.style.height="300px";
				
				
				div.style.backgroundColor="red";
				
				
				//通过增加class类来增加对应的css样式   注意:className 
				div.className="div2";
				
			}
			
			
		script>
	
		
		<style>
			
			.div2{
				
				
				border: 3px solid  green;
					
			}
			
		style>
		
	head>
	<body >
		
		<div id="div1"  style="width: 200px; height: 200px; background-color: palegreen;">div>
		
		<hr />
		
		<input type="button" name="" id="" value="css样式的操作" onclick="demo1()" />
	body>
html>

操作元素文本和值

//获得div1的对象
var div=document.getElementById(“div1”);
//获得元素的文本内容
//会获得里面的HTML中的内容
var inn=div.innerHTML;
//只会获得文本的信息
var inn2=div.innerText;
//会识别HTML信息

  div.innerHTML="<h1>我们没有什么不一样h1>" 

//不会识别HTML的信息

  div.innerText+="<h1>我们没有什么不一样h1>" 

注意:

  • 双标签有innerHTML和innerText,
  • 单标签获得的时候都是用value获得
  • 特殊的标签:
  • select、textarea

<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style>
			#div1{
				
				width: 200px;
				
				height: 200px;
				
				border: 2px solid  red;
				
			}
			
			
		style>
		
		<script>
			
			function  demo1(){
				
				//获得div1的对象
				
				var  div=document.getElementById("div1");
				
				//获得元素的文本内容
				
				//会获得里面的HTML中的内容
				var  inn=div.innerHTML;
				
				//只会获得文本的信息
				var  inn2=div.innerText;
				
				
//				console.log(inn);
				
//				console.log(inn2);
				
			//会识别HTML信息	
			//div.innerHTML="

我们没有什么不一样

"
//不会识别HTML的信息 div.innerText+="

我们没有什么不一样

"
/* * 注意: * * 双标签有innerHTML和innerText, * * 单标签获得的时候都是用value获得 * * * 特殊的标签: * * select、textarea * * * */ } function demo2(){ //获得select对象 var sel=document.getElementById("sele"); alert(sel.value); } function demo3(){ var te= document.getElementById("tex"); alert(te.value); }
script> head> <body > <div id="div1"> <span>我们不一样span> div> <input type="text" name="inp2" id="inp2" value="" /> <br /> <select id="sele" onchange="demo2()"> <option value="0">--请选择--option> <option value="1">中国option> <option value="2">美国option> select> <br /> <textarea rows="20" cols="20" id="tex">1223455textarea> <input type="button" value="操作元素的文本内容" onclick="demo3()" /> body> html>

操作元素

创建节点的方法
document.createElement(“div"):
加入节点的方法
parentNode.appendChild(childElement):末尾追加 方式插入节点
parentNode.insertBefore(newNode,beforeNode):
在指定节点前插入新节点
删除节点的方法
parentNode.removeChild(childNode)
p.remove();
替换节点的方法
parentNode.replaceChild(newNode, oldNode)


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		
		<script>
			function  addNode(){
				
				//获得表单对象
				
				var  fom=document.getElementById("fom");
				
				//创建节点的方法
				
			  var  p=	document.createElement("p");
			  
			  p.innerText="照片: "
			
			  
			  var  inp=document.createElement("input");
			  
			  inp.type="file";
			  
			  var  inp2=document.createElement("input");
			   
			  inp2.type="button";
			  
			  inp2.value="删除";
			  
			  inp2.onclick=function(){
			  	
			  	  //移除子节点;
			  	  p.removeChild(inp);
			  	  
			  	  p.removeChild(inp2);
			  	  
			  	  //移除本身
			  	  p.remove();
			  	
			  }
				
				
		     //添加节点对象
//		     fom.appendChild(p);
		     
		     //获得最后一个节点对象
		     
		     var  lastNode=document.getElementById("lastNode");
		     
		     //在指定元素之前添加节点
		     fom.insertBefore(p,lastNode);
		     
		     p.appendChild(inp);
		     
		     p.appendChild(inp2);		     
			}
			
			
		script>
	head>
	<body>
		
		<form  id="fom">
			
			
			<p>
				用户名:<input type="text" />
				
				
			p>
			
			
			<p>
				照片:<input type="file" />
				
				<input type="button" value="添加"  onclick="addNode()"/>
				
				
			p>
			
			
			<p id="lastNode">
				<input type="button" name="" id="" value="提交" />
				
				<input type="button" name="" id="" value="清空" />
				
			p>
			
			
		form>
		
		
	body>
html>

操作表单元素

readonly 和 disabled
共同的特点: 可以看到数据, 但是不可以操作数据

不同:
readonly(只读): 里面的数据是可以提交到后台 disabled(不可用):数据无法提交到后台

控制表单提交的方式
[1] οnsubmit=“return checkName()”
[2] document.fom.submit();
[3] var fom = document.getElementById(“fom”); fom.submit();


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		
		<script>
			function  checkName(){
				
				//获得input对象的值
				var  uname =document.getElementById("uname").value;
				
				//获得span对象
				
				var span =document.getElementById("uname_span");
				
				if(uname==null||uname==""){
					
					
					span.innerText="×账号不能为空";
					
					
				}else {
					
					span.innerText="√账号合法";
					
				  //手动的提交表单
				  
				
				}
				
			}
			
			
		script>
	
		
	head>
	<body>
		
		 <form action="" name="fom" id="fom" >
		 	
		 	<p>
		 		
		 		
		 		账号:<input type="text" name="uname" id="uname" onblur="checkName()"/><span id="uname_span">span>
		 		
		 	p>
		 	
		 	<p>
		 		
		 		密码:<input type="password" name="pwd" value="123"/>
		 		
		 	p>
		 	
		 	
		 	<p>
		 		
		 		<input type="button" value="提交" onclick="checkName()" />
		 		
		 	p>
		 	
		 form>
		
		
	body>
html>

正则表达式

  • 正则表达式是对于数据格式进行一定的规范限制
  • ^:开始
  • [0-9] [a-z A-Z] :数字 字母
  • {2,4} :段域 至少是2位 最多是4位
  • {3}:指定范围就是3位
  • {2,}:至少是2位
  • $:结束
  • \d:[0-9]
  • \w[0-9 a-z A-Z]
    表单校验 详细看代码

<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script>
		
		  var  ran;
			/**********验证码生成**********/
			function  YZM(){
				
				//4位随机整数
			    ran=Math.floor(Math.random()*9000+1000);
				//获得span对象
				var span =document.getElementById("yzm_span");
				
				span.innerText=ran;
			}
			
			/*********校验用户名方法**************/
			
			function  checkName(){
		
				//汉字的正则表达式
				var  reg=/^[\u4e00-\u9fa5]{3,5}$/;
				
				return check("uname",reg);
			}
			
			
			/*********校验邮箱方法**************/
			
			function  checkEmail(){
				//邮箱的正则表达式
				
				var  reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
				
			return	check("email",reg);
			}
			
			
			/*********密码邮箱方法**************/
			
			function  checkPwd(){
				//密码的正则表达式
				
				var  reg=/^\d{3,6}$/;
				
			return	check("pwd",reg);
			}
			
			
			/***********提取公共的部分***************/
			function  check(id,reg){
			
				//获得密码的值
				var  uname=document.getElementById(id);
				
				var  val=uname.value;
				
				//获得alt属性
				var  alt=uname.alt;
				
				//获得span对象
				var span =document.getElementById(id+"_span");
				
				if(val==null||val==""){
					
					
					span.innerText="×"+alt+"不能为空";
					
					span.style.color="red";
					
					return false;
					
				}else if(reg.test(val)){
					
					span.innerText="√"+alt+"合法";
					
					span.style.color="green";
					
					return true;
					
				}else{
					span.innerText="×"+alt+"不合法";
					
					span.style.color="red";
					
					return false;
				}
			}
			
			/*******性别校验**************/
			
			function  checkSex(){
				
				//获得所有的性别对象
				var  sex=document.getElementsByName("sex");
				
				//获得span对象
				
				var span =document.getElementById("sex_span");
				for(var  i in sex){
					
					
					if(sex[i].checked){
						
						span.innerHTML="性别选择成功";
						
						span.style.color="green";
						
						return true;
					}
					
				}
				
				
				span.innerHTML="请选择性别";
						
				span.style.color="red";
						
				return false;
				
			}
			/*********籍贯校验***********/
			function  checkAdress(){
				
				var  sel=document.getElementById("sel").value;
				
				var  span =document.getElementById("sel_span");
				
				if(sel==0){
					
					span.style.color="red";
					span.innerText="请选择籍贯"
					
					return false;
				}else {
					
					span.style.color="green";
					span.innerText="籍贯选择成功"
					
					return true;
					
				}
				
				
				
			}
			/*******验证码输入校验********************/
			function  checkYZM(){
				
				
				//获得自己输入的验证码
				
				var  yzm=document.getElementById("yzm").value;
				
				//获得span标签
				var  span =document.getElementById("yzm2_span");
				
				if(ran==yzm){
					
					span.style.color="green";
					span.innerText="验证码正确";
					
					return true;
					
				}else {
					
					span.style.color="red";
					span.innerText="验证码不正确";
					
					return false;
				}
				
				
			}
			
			/*******是否统一协议**********/
			function  checkAgree(){
				//同意框
				var  check=document.getElementById("check");
				//提交
				var  sub=document.getElementById("sub");
				
				sub.disabled=!check.checked;
				
				
				
			}
			
			function zong(){
				
			  var  flag=checkName()&&checkPwd()&&checkSex()&&checkYZM()&&checkAgree()&&checkEmail();
				
				
		     return flag;		
			}
			
			/*
			 
			 * 
			 * 正则表达式:
			 *    
			 * 正则表达式是对于数据格式进行一定的规范限制
			 * 
			 * 
			 * ^:开始
			 * [0-9]  [a-z A-Z] :数字  字母
			 * 
			 * {2,4} :段域 至少是2位  最多是4位
			 * {3}:指定范围就是3位
			 * {2,}:至少是2位
			 *  $:结束
			 * 
			 * \d:[0-9]
			 * 
			 * \w[0-9 a-z A-Z]
			 * 
			 * */
			
		script>
		
		
	head>
	<body onload="YZM()">
		<center>
		<h3>注册页面h3>
		<hr />
		<form action="" method="get" onsubmit="return zong()">
		<table>
			<tr height="35px">
				<td width="150px">用户名:td>
				<td width="400px">
					<input type="text" name="uname" id="uname" value="" alt="用户名" onblur="checkName()"/>
				    <span id="uname_span">*用户名必须是3-5位的汉字span>
				td>
			tr>
			<tr height="35px">
				<td>密码:td>
				<td>
					<input type="password" name="pwd" id="pwd" value="" alt="密码" onblur="checkPwd()"/>
					<span id="pwd_span">span>
					
				td>
			tr>
			<tr height="35px">
				<td>手机号:td>
				<td>
					<input type="text" name="phone" id="phone" value="" alt="手机号" />
					<span id="phone_span">span>
				td>
			tr>
			<tr height="35px">
				<td>邮箱:td>
				<td>
					<input type="text" name="email" id="email" value="" alt="邮箱" onblur="checkEmail()" />
				    <span id="email_span">span>
				td>
			tr>
			<tr height="35px">
				<td>性别:td>
				<td>
					男:<input type="radio" name="sex" id="" value="1"  onclick="checkSex()"/>
					女:<input type="radio" name="sex" id="" value="0" onclick="checkSex()"/>
					
					<span id="sex_span">
						
					span>
				td>
			tr>
			<tr height="35px">
				<td>爱好:td>
				<td>
					<input type="checkbox" name="fav" id="" value="1" />唱歌
					<input type="checkbox" name="fav" id="" value="2" />睡觉
					<input type="checkbox" name="fav" id="" value="3"  />LOL<br />
					<input type="checkbox" name="fav" id="" value="4"  />旅游
					<input type="checkbox" name="fav" id="" value="5" />高尔夫
					<input type="checkbox" name="fav" id="" value="6" />篮球
					
				td>
			tr>
			<tr height="35px">
				<td>籍贯:td>
				<td>
					<select name="adress" id="sel" onchange="checkAdress()">
						<option value="0">--请选择--option>
						<option value="1">河南option>
						<option value="2">湖南option>
						<option value="3">海南option>
						<option value="4">云南option>
					select>
					
					<span id="sel_span">span>
				td>
			tr>
			
			<tr height="35px">
				<td>验证码td>
				<td>
					<input type="number" name="" id="yzm" value="" onblur="checkYZM()"/>
					<span id="yzm_span">span>
					<span id="yzm2_span">span>
				td>
			tr>
			
			<tr height="35px">
				<td>个人介绍:td>
				<td>
					<textarea name="intro" rows="8" cols="30">textarea>
				td>
			tr>
			
			<tr height="35px">
				<td colspan="2" align="center">
					<input type="checkbox" name="" id="check" value="" onclick="checkAgree()">是否同一本公司协议
				td>
			tr>
			<tr height="35px">
				<td colspan="2" align="center">
					<input type="submit" id="sub" value="注册" disabled="true"/>
				td>
			tr>
		table>
		form>
		center>
		
		
	body>
html>


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script>
		
		  var  ran;
			/**********验证码生成**********/
			function  YZM(){
				
				//4位随机整数
			    ran=Math.floor(Math.random()*9000+1000);
				//获得span对象
				var span =document.getElementById("yzm_span");
				
				span.innerText=ran;
			}
			
			/*********校验用户名方法**************/
			
			function  checkName(){
		
				//汉字的正则表达式
				var  reg=/^[\u4e00-\u9fa5]{3,5}$/;
				
				return check("uname",reg);
			}
			
			
			/*********校验邮箱方法**************/
			
			function  checkEmail(){
				//邮箱的正则表达式
				
				var  reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
				
			return	check("email",reg);
			}
			
			
			/*********密码邮箱方法**************/
			
			function  checkPwd(){
				//密码的正则表达式
				
				var  reg=/^\d{3,6}$/;
				
			return	check("pwd",reg);
			}
			
			
			/***********提取公共的部分***************/
			function  check(id,reg){
			
				//获得密码的值
				var  uname=document.getElementById(id);
				
				var  val=uname.value;
				
				//获得alt属性
				var  alt=uname.alt;
				
				//获得span对象
				var span =document.getElementById(id+"_span");
				
				if(val==null||val==""){
					
					
					span.innerText="×"+alt+"不能为空";
					
					span.style.color="red";
					
					return false;
					
				}else if(reg.test(val)){
					
					span.innerText="√"+alt+"合法";
					
					span.style.color="green";
					
					return true;
					
				}else{
					span.innerText="×"+alt+"不合法";
					
					span.style.color="red";
					
					return false;
				}
			}
			
			/*******性别校验**************/
			
			function  checkSex(){
				
				//获得所有的性别对象
				var  sex=document.getElementsByName("sex");
				
				//获得span对象
				
				var span =document.getElementById("sex_span");
				for(var  i in sex){
					
					
					if(sex[i].checked){
						
						span.innerHTML="性别选择成功";
						
						span.style.color="green";
						
						return true;
					}
					
				}
				
				
				span.innerHTML="请选择性别";
						
				span.style.color="red";
						
				return false;
				
			}
			/*********籍贯校验***********/
			function  checkAdress(){
				
				var  sel=document.getElementById("sel").value;
				
				var  span =document.getElementById("sel_span");
				
				if(sel==0){
					
					span.style.color="red";
					span.innerText="请选择籍贯"
					
					return false;
				}else {
					
					span.style.color="green";
					span.innerText="籍贯选择成功"
					
					return true;
					
				}
				
				
				
			}
			/*******验证码输入校验********************/
			function  checkYZM(){
				
				
				//获得自己输入的验证码
				
				var  yzm=document.getElementById("yzm").value;
				
				//获得span标签
				var  span =document.getElementById("yzm2_span");
				
				if(ran==yzm){
					
					span.style.color="green";
					span.innerText="验证码正确";
					
					return true;
					
				}else {
					
					span.style.color="red";
					span.innerText="验证码不正确";
					
					return false;
				}
				
				
			}
			
			/*******是否统一协议**********/
			function  checkAgree(){
				//同意框
				var  check=document.getElementById("check");
				//提交
				var  sub=document.getElementById("sub");
				
				sub.disabled=!check.checked;
				
				
				
			}
			
			function zong(){
				
			  var  flag=checkName()&&checkPwd()&&checkSex()&&checkYZM()&&checkAgree()&&checkEmail();
				
				
		     return flag;		
			}
			
			/*
			 
			 * 
			 * 正则表达式:
			 *    
			 * 正则表达式是对于数据格式进行一定的规范限制
			 * 
			 * 
			 * ^:开始
			 * [0-9]  [a-z A-Z] :数字  字母
			 * 
			 * {2,4} :段域 至少是2位  最多是4位
			 * {3}:指定范围就是3位
			 * {2,}:至少是2位
			 *  $:结束
			 * 
			 * \d:[0-9]
			 * 
			 * \w[0-9 a-z A-Z]
			 * 
			 * */
			
		script>
		
		
	head>
	<body onload="YZM()">
		<center>
		<h3>注册页面h3>
		<hr />
		<form action="" method="get" onsubmit="return zong()">
		<table>
			<tr height="35px">
				<td width="150px">用户名:td>
				<td width="400px">
					<input type="text" name="uname" id="uname" value="" alt="用户名" onblur="checkName()"/>
				    <span id="uname_span">*用户名必须是3-5位的汉字span>
				td>
			tr>
			<tr height="35px">
				<td>密码:td>
				<td>
					<input type="password" name="pwd" id="pwd" value="" alt="密码" onblur="checkPwd()"/>
					<span id="pwd_span">span>
					
				td>
			tr>
			<tr height="35px">
				<td>手机号:td>
				<td>
					<input type="text" name="phone" id="phone" value="" alt="手机号" />
					<span id="phone_span">span>
				td>
			tr>
			<tr height="35px">
				<td>邮箱:td>
				<td>
					<input type="text" name="email" id="email" value="" alt="邮箱" onblur="checkEmail()" />
				    <span id="email_span">span>
				td>
			tr>
			<tr height="35px">
				<td>性别:td>
				<td>
					男:<input type="radio" name="sex" id="" value="1"  onclick="checkSex()"/>
					女:<input type="radio" name="sex" id="" value="0" onclick="checkSex()"/>
					
					<span id="sex_span">
						
					span>
				td>
			tr>
			<tr height="35px">
				<td>爱好:td>
				<td>
					<input type="checkbox" name="fav" id="" value="1" />唱歌
					<input type="checkbox" name="fav" id="" value="2" />睡觉
					<input type="checkbox" name="fav" id="" value="3"  />LOL<br />
					<input type="checkbox" name="fav" id="" value="4"  />旅游
					<input type="checkbox" name="fav" id="" value="5" />高尔夫
					<input type="checkbox" name="fav" id="" value="6" />篮球
					
				td>
			tr>
			<tr height="35px">
				<td>籍贯:td>
				<td>
					<select name="adress" id="sel" onchange="checkAdress()">
						<option value="0">--请选择--option>
						<option value="1">河南option>
						<option value="2">湖南option>
						<option value="3">海南option>
						<option value="4">云南option>
					select>
					
					<span id="sel_span">span>
				td>
			tr>
			
			<tr height="35px">
				<td>验证码td>
				<td>
					<input type="number" name="" id="yzm" value="" onblur="checkYZM()"/>
					<span id="yzm_span">span>
					<span id="yzm2_span">span>
				td>
			tr>
			
			<tr height="35px">
				<td>个人介绍:td>
				<td>
					<textarea name="intro" rows="8" cols="30">textarea>
				td>
			tr>
			
			<tr height="35px">
				<td colspan="2" align="center">
					<input type="checkbox" name="" id="check" value="" onclick="checkAgree()">是否同一本公司协议
				td>
			tr>
			<tr height="35px">
				<td colspan="2" align="center">
					<input type="submit" id="sub" value="注册" disabled="true"/>
				td>
			tr>
		table>
		form>
		center>
		
		
	body>
html>


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script>
		
		  var  ran;
			/**********验证码生成**********/
			function  YZM(){
				
				//4位随机整数
			    ran=Math.floor(Math.random()*9000+1000);
				//获得span对象
				var span =document.getElementById("yzm_span");
				
				span.innerText=ran;
			}
			
			/*********校验用户名方法**************/
			
			function  checkName(){
		
				//汉字的正则表达式
				var  reg=/^[\u4e00-\u9fa5]{3,5}$/;
				
				return check("uname",reg);
			}
			
			
			/*********校验邮箱方法**************/
			
			function  checkEmail(){
				//邮箱的正则表达式
				
				var  reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
				
			return	check("email",reg);
			}
			
			
			/*********密码邮箱方法**************/
			
			function  checkPwd(){
				//密码的正则表达式
				
				var  reg=/^\d{3,6}$/;
				
			return	check("pwd",reg);
			}
			
			
			/***********提取公共的部分***************/
			function  check(id,reg){
			
				//获得密码的值
				var  uname=document.getElementById(id);
				
				var  val=uname.value;
				
				//获得alt属性
				var  alt=uname.alt;
				
				//获得span对象
				var span =document.getElementById(id+"_span");
				
				if(val==null||val==""){
					
					
					span.innerText="×"+alt+"不能为空";
					
					span.style.color="red";
					
					return false;
					
				}else if(reg.test(val)){
					
					span.innerText="√"+alt+"合法";
					
					span.style.color="green";
					
					return true;
					
				}else{
					span.innerText="×"+alt+"不合法";
					
					span.style.color="red";
					
					return false;
				}
			}
			
			/*******性别校验**************/
			
			function  checkSex(){
				
				//获得所有的性别对象
				var  sex=document.getElementsByName("sex");
				
				//获得span对象
				
				var span =document.getElementById("sex_span");
				for(var  i in sex){
					
					
					if(sex[i].checked){
						
						span.innerHTML="性别选择成功";
						
						span.style.color="green";
						
						return true;
					}
					
				}
				
				
				span.innerHTML="请选择性别";
						
				span.style.color="red";
						
				return false;
				
			}
			/*********籍贯校验***********/
			function  checkAdress(){
				
				var  sel=document.getElementById("sel").value;
				
				var  span =document.getElementById("sel_span");
				
				if(sel==0){
					
					span.style.color="red";
					span.innerText="请选择籍贯"
					
					return false;
				}else {
					
					span.style.color="green";
					span.innerText="籍贯选择成功"
					
					return true;
					
				}
				
				
				
			}
			/*******验证码输入校验********************/
			function  checkYZM(){
				
				
				//获得自己输入的验证码
				
				var  yzm=document.getElementById("yzm").value;
				
				//获得span标签
				var  span =document.getElementById("yzm2_span");
				
				if(ran==yzm){
					
					span.style.color="green";
					span.innerText="验证码正确";
					
					return true;
					
				}else {
					
					span.style.color="red";
					span.innerText="验证码不正确";
					
					return false;
				}
				
				
			}
			
			/*******是否统一协议**********/
			function  checkAgree(){
				//同意框
				var  check=document.getElementById("check");
				//提交
				var  sub=document.getElementById("sub");
				
				sub.disabled=!check.checked;
				
				
				
			}
			
			function zong(){
				
			  var  flag=checkName()&&checkPwd()&&checkSex()&&checkYZM()&&checkAgree()&&checkEmail();
				
				
		     return flag;		
			}
			
			/*
			 
			 * 
			 * 正则表达式:
			 *    
			 * 正则表达式是对于数据格式进行一定的规范限制
			 * 
			 * 
			 * ^:开始
			 * [0-9]  [a-z A-Z] :数字  字母
			 * 
			 * {2,4} :段域 至少是2位  最多是4位
			 * {3}:指定范围就是3位
			 * {2,}:至少是2位
			 *  $:结束
			 * 
			 * \d:[0-9]
			 * 
			 * \w[0-9 a-z A-Z]
			 * 
			 * */
			
		script>
		
		
	head>
	<body onload="YZM()">
		<center>
		<h3>注册页面h3>
		<hr />
		<form action="" method="get" onsubmit="return zong()">
		<table>
			<tr height="35px">
				<td width="150px">用户名:td>
				<td width="400px">
					<input type="text" name="uname" id="uname" value="" alt="用户名" onblur="checkName()"/>
				    <span id="uname_span">*用户名必须是3-5位的汉字span>
				td>
			tr>
			<tr height="35px">
				<td>密码:td>
				<td>
					<input type="password" name="pwd" id="pwd" value="" alt="密码" onblur="checkPwd()"/>
					<span id="pwd_span">span>
					
				td>
			tr>
			<tr height="35px">
				<td>手机号:td>
				<td>
					<input type="text" name="phone" id="phone" value="" alt="手机号" />
					<span id="phone_span">span>
				td>
			tr>
			<tr height="35px">
				<td>邮箱:td>
				<td>
					<input type="text" name="email" id="email" value="" alt="邮箱" onblur="checkEmail()" />
				    <span id="email_span">span>
				td>
			tr>
			<tr height="35px">
				<td>性别:td>
				<td>
					男:<input type="radio" name="sex" id="" value="1"  onclick="checkSex()"/>
					女:<input type="radio" name="sex" id="" value="0" onclick="checkSex()"/>
					
					<span id="sex_span">
						
					span>
				td>
			tr>
			<tr height="35px">
				<td>爱好:td>
				<td>
					<input type="checkbox" name="fav" id="" value="1" />唱歌
					<input type="checkbox" name="fav" id="" value="2" />睡觉
					<input type="checkbox" name="fav" id="" value="3"  />LOL<br />
					<input type="checkbox" name="fav" id="" value="4"  />旅游
					<input type="checkbox" name="fav" id="" value="5" />高尔夫
					<input type="checkbox" name="fav" id="" value="6" />篮球
					
				td>
			tr>
			<tr height="35px">
				<td>籍贯:td>
				<td>
					<select name="adress" id="sel" onchange="checkAdress()">
						<option value="0">--请选择--option>
						<option value="1">河南option>
						<option value="2">湖南option>
						<option value="3">海南option>
						<option value="4">云南option>
					select>
					
					<span id="sel_span">span>
				td>
			tr>
			
			<tr height="35px">
				<td>验证码td>
				<td>
					<input type="number" name="" id="yzm" value="" onblur="checkYZM()"/>
					<span id="yzm_span">span>
					<span id="yzm2_span">span>
				td>
			tr>
			
			<tr height="35px">
				<td>个人介绍:td>
				<td>
					<textarea name="intro" rows="8" cols="30">textarea>
				td>
			tr>
			
			<tr height="35px">
				<td colspan="2" align="center">
					<input type="checkbox" name="" id="check" value="" onclick="checkAgree()">是否同一本公司协议
				td>
			tr>
			<tr height="35px">
				<td colspan="2" align="center">
					<input type="submit" id="sub" value="注册" disabled="true"/>
				td>
			tr>
		table>
		form>
		center>
		
		
	body>
html>

自定义对象prototype


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script>
			
			
			function  user(age,sex){
				
				this.name="张三";
				
				this.age=age;
				
				this.sex=sex;
				
				this.eat=function(){
					
					//方法体
					alert("我是user中的吃的方法")
					
				}
				
			}
			
			function  user2(){
				
				this.run=function(){
					
					alert("我是user2中跑的方法");
					
				}
				
			}
			
			
			
			user.prototype=new user2();
			
			
			//创建对象
			
			var  us =new  user(12);
			
			us.look="看雾霾";//js中对象的使用比较灵活
			
			//alert(us.name+"<---->"+us.age+"<---->"+us.sex+"<====>"+us.look);
			
			us.run();
			
		script>
		
		
	head>
	<body>
	body>
html>

你可能感兴趣的:(Java)