Js的概念:
JavaScript是一种可以与HTML标记语言混合使用的脚本语言，其编写的程序可以直接在浏览器中解释执行。
- 问题:
在网页的发展历程中,发现网页不能对用户的数据进行自动校验,和提供一些特效造成用户体验极差 - 解决:
使用JavaScript
作用:
可以让网页和用户之间进行直接简单的交互. 可以给网页制作特效和动画
注意:
js是由浏览器解析执行的. js需要在HTML文档中进行声明
使用:
声明Js代码域
js的声明：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js的声明和引入</title>
<!--
声明js代码域
-->
<script type="text/javascript">
alert("这是我的js");
</script>
<!--
引入外部js文件,实现js代码的重复使用，避免代码冗余。
-->
<script src="js/jquery1.6.1.js"></script>
</head>
<body>
</body>
</html>
<!--
在head标签中，使用script标签中使用。
可以声明在文档的任意位置，一般放在head标签中。
-->
js的变量学习：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js的变量学习</title>
<!--
这是html的注释，请注意。
-->
<script type="text/javascript">
//js的注释与java一样
//js的声明只有var关键字,js的变量名是严格区分大小写的。
//js中的字符串可以使用单引号也可以使用双引号。可以声明同名变量，后者将会覆盖前者。
/*
* js中的数据类型:
* 数据类型判断关键字:typeof
* number 数字类型
* string 字符串类型
* boolean 布尔类型
* object 对象
* null 空对象赋值，主要和undefined来区分。
* undefined 变量声明未赋值的情况下，默认为undefined
*
* 注意：js实际开发中尽可能给声明的变量辅初始值
*/
var a = 123;
var a1 = 456;
var a2 = 'ko';
var a3 = new Date();
var a = "js学习";
alert(typeof a);
</script>
</head>
<body>
</body>
</html>
js的运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js中的变量强转</title>
<!--
使用Number()函数：将其他数据类型转换为数值类型，转
换失败返回NaN(not a number)
使用Boolean()函数：将其他数据类型转换为布尔类型，有
值返回true，无值返回false;
使用Number(其他类型的数据);
string 类型的数字字符: 对应的number数字
string 非数字字符: NaN(number类型)
boolean true: 1
boolean false: 0
object 有具体的值: 数字
object null: 0
其他类型转换为boolean 类型
使用Boolean(其他类型的数据);
number 正数或者负数： true
number 0 : false
string 非空字符串 : true
string 空字符串 "": false
object 具体的对象 : true
object null : false
声明不赋值的变量 : false
-->
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js的运算符</title>
<!--
js的运算符
算术运算符
（number类型的之间直接运算、
number类型和boolean之间，先将boolean强转（true--1,false--0）、
number类型和string类型（* / % -）
string和string （* / % -）
注意：
在字符串中"+"是字符串连接符，不会参与运算。
）
在算术运算中如果两边的数据类型不是number的话，会使用number()强转后进行运算，
字符串的加法会作为字符拼接，不会运算。
+ - * / %
逻辑运算符
！ & && | || (与JAVA中的一致)
关系运算符：返回值为boolean类型
！= >= <= > <
自增运算符：
++ -- += -=
-->
<script type="text/javascript">
var a = 123;
var b = 2;
alert(a+b);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js中特殊关系运算符</title>
<!--
等值运算符:==
先判断类型，类型一致则直接比较。
类型不一致，则先使用Number()进行强转后再进行比较。
等同运算符:===
先判断类型，类型一致则再比较内容，内容一致则返回true，内容不一致则返回false。
类型不一致则直接false
注意：
null和undefined在做==判断时候返回true
-->
<script type="text/javascript">
/*声明变量*/
var a=1;
var a1="1";
var a2=true;
var a3="true";
var a4="a";
var a5="a";
/*alert(a==a1);//true
alert(a==a2);//true
alert(a==a3);//false
alert(a1==a2);//true
alert(a1==a3);//false
alert(a2==a3);//false
alert(a4==a5);//true*/
/*alert(a===a1);//true
alert(a===a2);//true
alert(a===a3);//false
alert(a1===a2);//true
alert(a1===a3);//false
alert(a2===a3);//false
alert(a4===a5);//true*/
var a = 1 ;
var a1 = "1";
var a2 = true;
var a3 ="true";
</script>
</head>
<body>
</body>
</html>
js逻辑结构和循环结构
<html>
<head>
<title>js的逻辑结构和循环结构学习</title>
<meta charset="UTF-8"/>
<!--
js的逻辑结构：
if结构
单分支结构：
if(判断条件){执行体}
双分支：
if(判断条件){执行体}else{执行体}
多分支：
if(判断条件){执行体}else if(判断条件){执行体}……else{执行体}
swicth选择结构：
switch (a){
case "1":
alert("第一项选择");
break;
case "2":
alert("第二项选择");
break;
default:
alert("没有对应的选项");
break;
}
注意：
判断的变量可以是number类型也可以是string类型，但是不要混用。
循环结构：
for(变量;条件;迭代条件){循环体}循环
while(循环条件){循环体}
do{循环体}while(循环条件)
-->
<!--声明js代码域-->
<script type="text/javascript">
/*声明变量：if判断*/
var a=123;
var b=45;
if(a>10){
alert(a+b);
}
/*声明变量：选择结构*/
var a=1;
switch (a){
case "1":
alert("第一项选择");
break;
case "2":
alert("第二项选择");
break;
default:
alert("没有对应的选项");
break;
}
/*-----------------------------------------------------------------------------------*/
/*循环结构学习*/
for(var i=0;i<3;i++){
alert("好热:"+i);
}
/*演示九九乘法表*/
for(var i=1;i<=9;i++){
for(var j=1;j<=i;j++){
document.write(i+"*"+j+"="+i*j+" ");
}
document.write("<br />");
}
</script>
</head>
<body>
<h3>js的逻辑结构和循环结构学习</h3>
</body>
</html>
js的数组
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js的数组学习</title>
<!--
js的数组学习：
1、数组的声明
var arr=new Array();//声明一个空数组对象
var arr=new Array(length)//声明一个指定长度的数组
var arr=[元素]//声明数组(最常用);<br />
注意：js中的数组声明不用指定长度，js的数组长度是不固定的，会随着元素的数量改变而改变。
2、数组的赋值和取值
数组可以存储任意类型的数据
数组名[角标]=值;//角标可以是任意的正整数或者是0
数组的取出：
数组名[角标]//返回当前角标对应存储的值
如果角标不存在，返回undefined;
3、数组的length属性
作用1：数组名.length//返回当前数组的长度。
作用于2：数组名.length=新的值//动态的改变数组的长度
注意：length>原有长度，则使用空进行填充。
length<原有长度，则从后面进行截取，最后的数据会被删除。
4、数组的遍历
普通for循环：
for(var i=0;i<arr.length;i++){
alert(arr[i]);
}
for-in：
for(var i in arr){
alert(i);//获取的是角标
}
-->
<!--声明js代码域-->
<script type="text/javascript">
//1、js的数组声明
/*var arr1=new Array();//第一种声明方式
arr1[0]="abc";
alert(arr1);
var arr2=new Array(5);//第二种声明
alert(arr2.length);
var arr3=[1,2,3,4,5];
alert(arr3);*/
//2、数组的赋值和取值
//声明数组
/*var arr=[];
arr[0]=2;
arr[1]="abc";
arr[2]=true;
arr[3]=new Date();
arr[10]="哈哈";
alert(arr);
alert(arr[14]);*/
//3、数组的length属性
/*var arr=[1,2,3,4,5,6];
alert(arr.length);
arr.length=8;
alert(arr.length);
arr[2]="abc";
alert(arr);
arr.length=3;
alert(arr);*/
//4、数组的遍历
var arr=[1,"bnj",3,"a",4];
alert(arr);
//遍历1
/*for(var i=0;i<arr.length;i++){
alert(arr[i]);
}*/
//遍历2：
for(var i in arr){
alert(i);//获取的是角标
}
</script>
</head>
<body>
<h3>js的数组学习</h3>
</body>
</html>
<html>
<head>
<title>js数组的常用操作</title>
<meta charset="UTF-8"/>
<!--
数组的操作学习：
1、数组的合并：arr.concat(b,c);//数组的合并
2、数组指定间隔符转换字符串:var b=arr.join("-");
3、数组移除最后一个元素并返回:var ele=arr.pop();
4、数组的追加，返回新的长度：var ln=arr.push("lol");//追加的元素可以是一个数组，但是为作为一个角标值存在
5、数组移除第一个元素:var ele=arr.shift();
6、数组在开始位置插入指定元素:var a=arr.unshift("又是周五了");
7、数组删除指定位置元素：var arr2=arr.splice(1,3,"a");
-->
<!--声明js代码域-->
<script type="text/javascript">
/*声明数组*/
var arr=[1,"abc","张三","12"];
/*数组的操作*/
/*var b=["今天天气不错","适合学习"];
var c="js";
var d=arr.concat(b,c,c);//数组的合并
alert(d);
alert(d.length);*/
/*数组指定间隔符转换字符串*/
/*var b=arr.join("-");
alert(typeof b);*/
/*数组移除最后一个元素并返回*/
/*var ele=arr.pop();
alert(ele);*/
/*数组的追加*/
// var ln=arr.push("lol");
// var ln2=arr.push(["66",77]);
// alert(arr);
/*数组的移除第一个元素*/
// var ele=arr.shift();
// alert(ele);
// alert(arr);
/*数组的在开始位置插入指定元素*/
// var a=arr.unshift("又是周五了");
// alert(a);
/*数组删除指定位置元素*/
var arr2=arr.splice(1,3,"a");
alert(arr);
</script>
</head>
<body>
<h3>js数组的常用操作</h3>
</body>
</html>
js的函数
<html>
<head>
<title>js的函数学习</title>
<meta charset="UTF-8"/>
<!--
test,1-2,
test(1,2)
js的函数学习一：
作用:功能代码块的封装。减少代码的冗余。
1、函数的声明：
方式一:function 函数名(形参名1,形参名2……){执行体}
方式二:var 函数名=new Function("形参1","形参2"……,"函数执行体");
注意：此声明表明在js中函数是作为对象存在的。
方式三:var 变量名=function(形参名1,形参名2……){函数执行体}
2、函数的参数
js中的函数在调用时，形参可以不赋值，不会报错
js中的函数在调用时，形参赋值可以不全部赋值，不会报错，但是实参会依次进行赋值。
3、函数的返回值
在js中如果函数有返回值则直接返回，没有返回值默认返回undefined
注意：
js的代码声明区域和执行区域是一起的，都是在js代码的代码域中。
-->
<!--声明js代码域-->
<script type="text/javascript">
//1、声明函数
//方式一:
function test1(a1,a2)
{
alert("函数声明一");
}
//方式二:
var test2=new Function("a1","a2","alert('函数声明二'+a1)");
//方式三:
var test3=function(a1,a2){
alert("我是函数声明三");
}
//调用声明的函数
//test2(1,2);
//2、函数的参数
function testParam(a1,a2,a3){
alert(a1);
alert("函数的形参学习");
}
//testParam(1,2);
//3、函数的返回值
var testReturn=function(){
alert("函数的返回值学习");
//return "js";
}
alert(testReturn());
</script>
</head>
<body>
<h3>js的函数学习</h3>
</body>
</html>
<html>
<head>
<title>js的函数学习二</title>
<meta charset="UTF-8"/>
<!--
js的函数学习二:
1、函数的执行符:
在js中函数的执行符值()
没有小括号则函数名其实就是一个变量
加上小括号则会函数会被执行。
2、函数作为实参传递
在js中函数是可以作为实参进行传递的。
function testobj(a){
alert(a());
}
var testParam=function(){
alert("我是函数参数");
}
testobj(testParam());
-->
<!--声明js代码域-->
<script type="text/javascript">
//1、函数的执行符
var test1=function(){
alert("函数的执行符学习");
return "js";
}
//alert(test1());
//2、函数作为实参进行传递
function testobj(a){
alert(a());
}
var testParam=function(){
alert("我是函数参数");
}
testobj(testParam());
//3、开发中经常用的传递方式
function testObj2(fn){//testObj2函数在被调用的时候，实参必须是一个函数对象。
fn();
}
testObj2(function(){
alert("开发");
})
</script>
</head>
<body>
<h3>js的函数学习二</h3>
</body>
</html>
js中的类和对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js中的类和对象学习</title>
<meta charset="UTF-8"/>
<!--
js中的类学习：
1、类的声明:
function 类名(形参1，形参2……){
this.属性名1=形参1;
this.属性名2=形参2;
……
this.属性名=fn
}
2、类的使用:
var 对象名=new 类名(实参1，实参2……);
注意：
js中类的内容只是对象的公共部分，每个对象还可以自定义的进行扩充。
3、类的"继承"：prototype关键字
、 同过prototype关键字实现了不同对象之间的数据共享。
作用1:实现某个类的所有子对象的方法区对象的共享，节省内存
-->
<!--声明js代码域-->
<script type="text/javascript">
//1、类的声明--person
function Person(name,age){
Person.prototype=new User();
this.name=name;
this.age=age;
this.fav="唱歌";
}
function User(uname,pwd){
this.uname=uname;
this.pwd=pwd;
}
//使用prototype
//Person.prototype.test=function(){alert("嘿嘿")};
Person.prototype=new User();
User.prototype.testU=function(){alert("我是user")};
//User.prototype.student=new Student();
//2、使用类
var p1=new Person("张三",32);
// p1.address="北京市";
// alert(p1.address);
// alert(p1.name);
var p2=new Person("李四",23);
// alert(p2.name);
//alert(p1.test===p2.test);//false;
alert(p1.test===p2.test);
p1.testU();
</script>
</head>
<body>
</body>
</html>
js的自定义对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js的自定义对象</title>
<meta charset="UTF-8"/>
<!--
js创建自定义对象
对象的作用：用来存储整体数据。
原因：很多时候我们没有办法预先知道一个对象应该有哪些属性，所以只能临时的创建一个对象来自定义属性存储数据。来保证数据的完成性
应用：
Ajax中会使用。
使用：
1、创建自定义对象
var 对象名=new Object();
对象名.属性名1=属性值1;
对象名.属性名2=属性值2;
对象名.属性名3=属性值3;
……
var 对象名={};
对象名.属性名1=属性值1;
对象名.属性名2=属性值2;
对象名.属性名3=属性值3;
……
2、一般用来存储数据，不会再自定义对象中存储函数对象。
3、js中的对象属性和内容是可以自定义的扩充的，不是依赖于类的声明的，类只是对象公共部分的一种声明，是为了节省代码的冗余的。
-->
<!--声明js代码域-->
<script type="text/javascript">
//1、创建自定义对象
var obj=new Object();
obj.name="张三";
obj.age=23;
obj.test=function(){
alert("我是obj");
}
</script>
</head>
<body>
</body>
</html>
js常用对象和方法
<html>
<head>
<title>js的常用对象和方法</title>
<meta charset="UTF-8"/>
<!--
常用的对象和方法：
1、String
2、Date
3、Math
4、Global
-->
<!--声明js代码域-->
<script type="text/javascript">
//1、String对象学习
var str=new String("abcdefg");//声明String对象存储字符串
var str2="MNP";//简写形式
//alert(str);
//字符串大小写的转换
//alert(str.toUpperCase());//将字符串转换为大写
//alert(str2.toLowerCase());//将字符串转换为小写
//字符串的切割
// var s="哈哈,嘿嘿,呵呵";
// var s1=s.split(",");//按照指定的字符切割字符串，返回数组。
// alert(s1.length);
//字符串的截取
// var s="abcdef";
// alert(s.substr(1,3));//从指定的开始位置截取指定长度的子字符串
// alert(s.substring(1,3));//从指定的开始位置和指定的结束位置截取子字符串，含头不含尾。
//查找子字符串第一次出现的角标
// var s="abcdefg";
// alert(s.indexOf("dd"));//返回指定子字符串第一次出现的角标，没有则返回-1;
//2、Date对象
//1、创建Date对象
var d=new Date();
//alert(d);
//获取当前年份
// alert(d.getYear());//返回的是1900年开始距今的年分数
// alert(d.getFullYear());//返回的是当前的年份
// alert(d.getMonth()+1);//返回的当前月份的角标值，需要+1
// alert(d.getDate());//返回的是当前的日期数
// alert(d.getDay());//返回的是当前的星期数，但是周天会返回值为0;
// alert(d.getHours());//返回当前时间的小时数
// alert(d.getMinutes());//返回当前时间的分钟数
// alert(d.getSeconds());//返回当前时间的秒数
//alert(d.getHours()+":"+d.getMinutes()+":"+d.getSeconds());
//3、Math对象学习
//1、Math在使用的时候不能new，使用Math.方法名调用即可。
//创建随机数字
// alert("Math.random():"+Math.random());//返回0-1之间的随机数字，含0不含1。
// alert(1000+Math.random()*9000);
//向下取整
// alert(Math.floor(1000+Math.random()*9000));
//向上取整
// alert(Math.ceil("12.34"));
//四舍五入
// alert(Math.round(12.12));
// alert(Math.round(12.65));
//数值比较:求取最小值，求取最大值
// alert(Math.min(12,13,5,78));//获取最小值
// alert(Math.max(12,3,4,56));//获取最大值
//4、Global对象学习
//1、改对象从不直接使用并且不能new，也是就直接写方法名调用即可。
//使用eval将字符串转换为可执行的js代码
var str="var a=123";
eval(str);
alert(a);
//使用isNaN判断是否值NaN
alert(isNaN("123"));
//获取字符中的浮点数
alert(parseFloat("12.34a34a"));
</script>
</head>
<body>
</body>
</html>
js的事件学习
<html>
<head>
<title>js的事件机制学习1</title>
<meta charset="UTF-8"/>
<!--
js的事件机制：
解释：当我们的行为动作满足了一定的条件后，会触发某类事务的执行。
作用：主要是结合js的函数来使用。
内容:
1、单双击事件
单击：onclick 当鼠标单击的时候会触发
双击：ondblclick 当鼠标双击的时候会被触发
2、鼠标事件
onmouseover 当鼠标悬停在某个HTML元素上的时候触发
onmousemove 当鼠标在某个HTML元素上移动的时候触发
onmouseout 当鼠标在某个HTML元素上移出的时候触发
3、键盘事件
onkeyup 当键盘在某个HTML元素上弹起的时候触发
onkeydown 当键盘在某个HTML元素上下压的时候触发
4、焦点事件
onfocus 当某个HTML元素获取焦点的时候触发
onblur 当某个HTML元素失去焦点的时候触发
5、页面加载事件
onload 当页面加载成功后触发。
注意:
js中添加事件的第一种方式：
在HTML上直接使用事件属性进行添加，属性值为所监听执行的函数。
js中的事件只有在当前HTML元素上有效。
一个HTML元素可以添加多个不同的事件。
一个事件可以监听触发多个函数的执行,但是不同的函数要使用分号间隔
-->
<!--声明js代码域-->
<script type="text/javascript">
/*声明js函数*/
//单击事件
function testOnclick(){
alert("我是单击");
}
//测试双击
function testOndblclick(){
alert("我是双击");
}
//鼠标事件
function testOnmouseover(){
alert("我是鼠标悬停事件");
}
function testOnmousemove(){
alert("我被移动了");
}
function testOnmouseout(){
alert("我被移出了");
}
//键盘事件
function testOnkeyup(){
alert("我是键盘弹起事件");
}
function testOnkeydown(){
alert("我是键盘按下事件");
}
//焦点事件
function testOnfocus(){
document.getElementById("showdiv").innerHTML="哈哈";
alert("我是获取焦点事件");
}
function testOnblur(){
alert("我是失去焦点事件");
}
//页面加载
function testOnload(){
alert("我是页面加载事件");
}
//测试
function test(){
alert("测试一个事件的多个函数执行");
}
</script>
<style type="text/css">
#showdiv{
width: 300px;
height: 300px;
border: solid 1px;
}
</style>
</head>
<body onload="testOnload()">
<h3>js的事件机制学习1</h3>
<hr />
<input type="button" name="" id="" value="测试单击" onclick="testOnclick();test();" />
<input type="button" name="" id="" value="测试双击" ondblclick="testOndblclick();" />
<hr />
<br /><br />
<div id="showdiv" onmouseover="testOnmouseover();" onmousemove="testOnmousemove()" onmouseout="testOnmouseout()">
</div>
<hr />
键盘事件学习： <br />
键盘弹起事件：<input type="text" name="" id="" value="" onkeyup="testOnkeyup();"/><br /><br />
键盘下压事件： <input type="text" name="" id="" value="" onkeydown="testOnkeydown()"/>
<hr />
焦点事件学习：<br />
获取焦点： <input type="text" name="" id="" value="" onfocus="testOnfocus();"/><br /><br />
失去焦点： <input type="text" name="" id="" value="" onblur="testOnblur();"/>
</body>
</html>
<html>
<head>
<title>js的事件机制二</title>
<meta charset="UTF-8"/>
<!--
js的事件机制学习2：
1、给合适的HTML标签添加合适的事件
onchange----select下拉框
onload------body标签
单双击-------用户会进行点击动作的HTML元素
鼠标事件------用户会进行鼠标移动操作的。
键盘事件------用户会进行键盘操作的HTML元素。
2、给HTML元素添加多个事件时，注意事件之间的冲突
举个栗子：单击和双击
当事件的触发条件包含相同部分的时候，会产生事件之间的冲突。
3、事件的阻断
当事件所监听的函数的将返回值返回给事件时：
false：则会阻断当前事件所在的HTML标签的功能
true:则继续执行当前事件所在的HTML标签的功能
4、超链接调用js函数
<a href="javascript:函数名()">调用js函数</a>
-->
<script type="text/javascript">
//值改变事件
function testOnchange(){
alert("我被改变了");
}
//单击事件
function testOnclick(){
alert("今天天气真好，不冷不热，贼适合学习");
}
//双击事件
function testOndblclick(){
alert("老师说的对");
}
//事件的阻断
function testA(){
alert("事件的阻断");
return true;
}
//超链接调用js函数
function testHref(){
alert("我是超链接调用");
}
</script>
</head>
<body>
<h3>js的事件机制二</h3>
<hr />
值改变事件: <input type="text" name="" id="" value="" onchange="testOnchange();"/>
<br /><br />
<select name="" id="" onchange="testOnchange();">
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
</select>
<hr />
事件的冲突：<br />
<input type="button" name="" id="" value="事件的冲突" onclick="testOnclick()" ondblclick="testOndblclick()"/>
<hr />
事件的阻断：<br />
<a href="http://www.baidu.com" target="_blank" onclick="return testA()">百度一下</a>
<hr />
超链接调用js函数:
<a href="javascript:testHref()">调用js函数</a>
</body>
</html>
window对象学习
<html>
<head>
<title>window对象学习</title>
<meta charset="UTF-8"/>
<!--
BOM浏览器对象模型：是规范浏览器对js语言的支持(js调用浏览器本身的功能)。
BOM的具体实现是window对象
window对象使用学习：
1、window对象不用new，直接进行使用即可，类似Math的使用方式，window关键字可以省略不写。
2、框体方法
alert:警告框 提示一个警告信息，没有返回
confirm:确认框 提示用户选择一项操作（确定/取消）
点击确定 返回true
点击取消 返回false
prompt:提示框， 提示用某个信息的录入或者说收集
点击确定，返回当前用书录入的数据，默认返回空字符串
点击取消,返回null
3、定时和间隔执行方法
setTimeout:指定的时间后执行指定的函数
参数1：函数对象
参数2：时间，单位毫秒。
返回值：返回当前定时器的id
setInterval:每间隔指定的时间执行指定的函数
参数1：函数对象
参数2：时间，单位毫秒。
返回值：返回当前间隔器的id
clearTimeout:用来停止指定的定时器
参数：定时器的id
clearInterval:用来停止指定的间隔器
参数：间隔器的id
-->
<!--声明js代码域-->
<script type="text/javascript">
//框体方法学习：
//警告框
function testAlert(){
var a=window.alert("我是警告框");
alert(a);
}
//确认框
function testConfirm(){
var flag=window.confirm("你确定要删除吗?");
alert(flag);
}
//提示框
function testPrompt(){
var str=window.prompt("请输入昵称：");
alert(str);
}
/*----------------------------------------------------------------------------------------------*/
var idi;
var ids
//定时执行
function testSetTimeout(){
idi=window.setTimeout(function(){
alert("我是定时执行");
},3000);
}
//间隔执行
function testSetInterval(){
ids=window.setInterval(function(){
alert("我是间隔执行");
},2000);
}
//停止当前的定时方法
function testClearTimeout(){
window.clearTimeout(idi);
}
function testClearInterval(){
window.clearInterval(ids);
}
</script>
</head>
<body>
<h3>window对象学习</h3>
<hr />
<input type="button" name="" id="" value="测试警告框" onclick="testAlert();" />
<input type="button" name="" id="" value="测试确认框" onclick="testConfirm()" />
<input type="button" name="" id="" value="测试提示框" onclick="testPrompt()"/>
<hr />
<input type="button" name="" id="" value="测试setTimeout--定时执行" onclick="testSetTimeout()"/>
<input type="button" name="" id="" value="测试setInterval--间隔执行" onclick="testSetInterval()"/>
<input type="button" name="" id="" value="测试clearTimeout--停止指定的定时器" onclick="testClearTimeout()" />
<input type="button" name="" id="" value="测试clearInterval--停止指定的间隔器" onclick="testClearInterval()" />
</body>
</html>
<html>
<head>
<title>js的window对象学习2</title>
<meta charset="UTF-8"/>
<!--
js的window对象学习
1、子窗口方法
window.open('子页面的资源(相对路径)','打卡方式','配置');
示例：window.open('son.html','newwindow','height=400, width=600, top=100px,left=320px, toolbar=yes, menubar=yes, scrollbars=yes, resizable=yes,location=no, status=yes');
注意:
关闭子页面的方法window.close(),但是此方法只能关闭open方法打开的子页面。
2、子页面调用父页面的函数
window.opener.父页面的函数
js的window对象的常用属性
地址栏属性:location
window.location.href="新的资源路径（相对路径/URL）"
window.location.reload()重新加载页面资源
历史记录属性
window.history.forward() 页面资源前进，历史记录的前进。
window.history.back() 页面资源后退，历史记录后退
window.history.go(index) 跳转到指定的历史记录资源
注意window.history.go(0)相当于刷新。
屏幕属性
window.srceen.width;//获取屏幕的宽度分辨率
window.screen.height;//获取屏幕的高度分辨率
浏览器配置属性
主体面板属性(document)
-->
<!--声明js代码域-->
<script type="text/javascript">
//1、子页面方法
function testOpen(){
window.open('son.html','newwindow','height=400, width=600, top=100px,left=320px, toolbar=yes, menubar=yes, scrollbars=yes, resizable=yes,location=no, status=yes');
}
//2、子页面调用父页面的函数
function testFather(){
alert("父页面");
}
/*----------------------------------------------------------------------------*/
//1、地址栏属性学习--location
function testLocation(){
window.location.href="http://www.baidu.com";
}
function testLocation2(){
window.location.reload();
}
//2、历史记录属性
function testHistory(){
window.history.forward();
}
function testHistory2(){
window.history.go(0);
}
//3、屏幕属性学习
function testScreen(){
var x=window.screen.width;
var y=window.screen.height;
alert(x+":"+y)
}
//4、浏览器配置属性
function testNa(){
alert(window.navigator.userAgent);
}
</script>
</head>
<body>
<h3>js的window对象学习2</h3>
<hr />
<input type="button" name="" id="" value="测试open" onclick="testOpen()"/>
<hr />
<input type="button" name="" id="" value="测试地址栏属性--location--跳转资源" onclick="testLocation()" />
<input type="button" name="" id="" value="测试地址栏属性--location--重新加载资源" onclick="testLocation2()" />
<br /><br />
<input type="button" name="" id="" value="测试历史记录属性--history-前进" onclick="testHistory();"/>
<input type="button" name="" id="" value="测试历史记录属性--history-go" onclick="testHistory2();"/>
<br /><br />
<input type="button" name="" id="" value="测试屏幕属性--screen" onclick="testScreen()" />
<input type="button" name="" id="" value="测试浏览器配置属性--navigator" onclick="testNa()" />
</body>
</html>
document对象学习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document对象学习</title>
<!--
document对象学习:
1、document对象的概念
浏览器对外提供的支持js的用来操作HTML文档的一个对象，此对象封存的HTML文档的所有信息。
2、使用document
获取HTML元素对象
直接获取方式：
通过id
通过name属性值
通过标签名
通过class属性值
间接获取方式：
父子关系
子父关系
兄弟关系
-->
<!--声明js代码域-->
<script type="text/javascript">
//document获取元素对象
//直接方式
//id方式
function testGetEleById(){
var inp=window.document.getElementById("uname");
alert(inp);
}
//name方式
function testGetEleByName(){
var favs=document.getElementsByName("fav");
alert(favs);
}
//标签名
function testGetEleByTagName(){
var inps=document.getElementsByTagName("input");
alert(inps);
}
//class属性
function testGetEleByClassName(){
var inps=document.getElementsByClassName("common");
alert(inps.length);
}
//间接获取方式
//父子关系
function testParent(){
//获取父级元素对象
var showdiv=document.getElementById("showdiv");
//获取所有的子元素对象数组
var childs=showdiv.childNodes;
alert(childs.length);
}
//子父关系
function testChild(){
//获取子元素对象
var inp=document.getElementById("inp");
var div=inp.parentNode;
alert(div);
}
//兄弟关系
function testBrother(){
var inp=document.getElementById("inp");
var preEle= inp.previousSibling;//弟获取兄
var nextEle=inp.nextSibling;//兄获取弟
alert(preEle+":::"+nextEle);
}
</script>
<style type="text/css">
.common{}
#showdiv{
border: solid 2px orange;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<h3>document对象的概念和获取元素对象学习</h3>
直接获取方式学习：<br />
<input type="button" name="" id="" value="测试获取HTML元素对象--id" onclick="testGetEleById()" />
<input type="button" name="" id="" value="测试获取HTML元素对象---name" onclick="testGetEleByName()" />
<input type="button" name="" id="" value="测试获取HTML元素对象---TagName" onclick="testGetEleByTagName()" />
<input type="button" name="" id="" value="测试获取HTML元素对象---className" onclick="testGetEleByClassName()" />
<hr />
用户名：<input type="text" name="uname" id="uname" value="" /><br /><br />
<input type="checkbox" name="fav" id="fav" value="" class="common"/>唱歌
<input type="checkbox" name="fav" id="fav" value="" class="common"/>跳舞
<input type="checkbox" name="fav" id="fav" value="" />睡觉
<input type="checkbox" name="fav" id="fav" value="" />打游戏
<hr />
间接获取方式学习：<br />
<input type="button" name="" id="" value="测试父子关系" onclick="testParent()"/>
<input type="button" name="" id="" value="测试子父关系" onclick="testChild()"/>
<input type="button" name="" id="" value="测试兄弟关系" onclick="testBrother()"/>
<hr />
<div id="showdiv"><input type="" name="" id="" value="" /><input type="" name="" id="inp" value="" />
<input type="" name="" id="" value="" />
<input type="" name="" id="" value="" />
<input type="" name="" id="" value="" />
<input type="" name="" id="" value="" />
</div>
</body>
</html>
js操作HTML的元素属性
<html>
<head>
<title>js操作HTML的元素属性</title>
<meta charset="UTF-8"/>
<!--
js操作HTML元素属性学习：
获取元素对象
操作元素属性
获取：
元素对象名.属性名//返回当前属性的属性值。----固有
元素对象名.getAttribute("属性名");//返回自定义属性的值-----自定义
修改
元素对象名.属性名=属性值
元素对象名.setAttribute("属性名","属性值");//修改自定义属性的值----自定义
注意：
尽量的不要去修改元素的id值和name属性值。
使用自定义方式获取固有属性内容，value的值获取的是默认值，不能够获取到实时的用户数据。
-->
<!--声明js代码域-->
<script type="text/javascript">
//声明函数---固有属性
//获取属性值
function testField(){
//获取元素对象
var inp=document.getElementById("uname");
//获取元素属性值
alert(inp.type+":"+inp.name+":"+inp.id+":"+inp.value);
}
//修改元素属性值
function testField2(){
//获取元素对象
var inp=document.getElementById("uname");
//修改元素属性
inp.value="哈哈";
inp.type="button";
}
//声明函数---自定义属性
//获取
function testOwnField(){
//获取元素对象
var inp=document.getElementById("uname");
//获取自定义属性的值
alert(inp.getAttribute("abc"));
}
//修改
function testOwnField2(){
//获取元素对象
var inp=document.getElementById("uname");
//修改自定义属性的值
inp.setAttribute("abc","呵呵");
}
//使用自定义方式操作固有属性
function testOper(){
//获取元素对象
var inp=document.getElementById("uname");
//操作对象属性
alert(inp.getAttribute("type"));
alert(inp.getAttribute("value"));
}
</script>
</head>
<body>
<h3>js操作HTML的元素属性</h3>
<input type="button" name="" id="" value="测试获取元素属性--固有" onclick="testField()" />
<input type="button" name="" id="" value="测试修改元素属性--固有" onclick="testField2()" />
<input type="button" name="" id="" value="测试获取元素属性--自定义" onclick="testOwnField()" />
<input type="button" name="" id="" value="测试修改元素属性--自定义" onclick="testOwnField2()" />
<input type="button" name="" id="" value="测试操作元素自定义操作固有属性" onclick="testOper()" />
<hr />
用户名 : <input type="text" name="uname" id="uname" value="" abc="嘿嘿"/>
</body>
</html>
js操作元素内容学习
<html>
<head>
<title>js操作元素内容学习</title>
<meta charset="UTF-8"/>
<!--声明css-->
<style type="text/css">
#div01{
width: 200px;
height: 200px;
border: solid 1px orange;
}
</style>
<!--
操作元素内容学习：
获取元素对象
获取
元素对象名.innerHTML//返回当前元素对象的所有内容，包括HTML标签
元素对象名.innerHTML//返回当前元素对象的文本内容，不包括HTML标签
修改
元素对象名.innerHTML="新的值"//会将原有内容覆盖，并HTML标签会被解析
元素对象名.innerHTML=元素对象名.innerHTML+"新的值"//追加效果
元素对象名.innerText="新的值"//会将原有内容覆盖，但HTML标签不会被解析，会作为普通文本显示。
-->
<!--声明js代码域-->
<script type="text/javascript">
//获取元素内容
function getContext(){
//获取元素对象
var div=document.getElementById("div01");
//获取元素内容
alert(div.innerHTML);
alert(div.innerText);
}
//修改元素内容
function updateContext(){
//获取元素对象
var div=document.getElementById("div01");
//修改元素对象内容
div.innerHTML="<b>你先上，皇军给你殿后，八嘎</b>";
}
function updateContext2(){
//获取元素对象
var div=document.getElementById("div01");
//修改元素对象内容
div.innerText="<b>你先上，皇军给你殿后，八嘎</b>";
}
</script>
</head>
<body>
<h3>js操作元素内容学习</h3>
<input type="button" name="" id="" value="测试获取元素内容---innerHTML&innerText" onclick="getContext()"/>
<input type="button" name="" id="" value="测试修改元素内容--innerHTML" onclick="updateContext()"/>
<input type="button" name="" id="" value="测试修改元素内容--innerText" onclick="updateContext2()"/>
<hr />
<div id="div01">
<b>皇军，前面有八路的干活。</b>
<b>皇军，前面有八路的干活。</b>
</div>
</body>
</html>
js操作元素的样式
<html>
<head>
<title>js操作元素的样式</title>
<meta charset="UTF-8"/>
<!--声明css-->
<style type="text/css">
#showdiv{
width: 200px;
height: 200px;
border: solid 1px;
}
.common{
width: 200px;
height: 200px;
border: solid 1px;
}
.common2{
width: 200px;
height: 200px;
border: solid 1px;
background-color: aqua;
}
</style>
<!--
js操作元素样式：
获取元素对象
通过style属性
元素对象名.style.样式名="样式值"//添加或者修改
元素对象名.style.样式名=""//删除样式
注意:
以上操作，操作的是HTML的style属性声明中的样式。而不是其他css代码域中的样式。
通过className
元素对象名.className="新的值"//添加类选择器样式或者修改类选择器样式
元素对象名.className=""//删除类样式。
-->
<!--声明js代码域-->
<script type="text/javascript">
//js操作元素样式
//js给元素操作样式---style
function testOperCss(){
//获取元素对象
var showdiv=document.getElementById("showdiv");
//添加元素样式
showdiv.style.backgroundColor="#FFA500";
//js修改元素样式
showdiv.style.border="solid 2px red";
//js删除样式
showdiv.style.border="";
}
//js操作样式--className
function testOperCss2(){
//获取元素对象
var div01=document.getElementById("div01");
//获取
alert(div01.className);
//添加或者修改
div01.className="common2";
//删除
div01.className="";
}
</script>
</head>
<body>
<h3>js操作元素的样式</h3>
<input type="button" name="" id="" value="测试操作元素样式--style" onclick="testOperCss()" />
<input type="button" name="" id="" value="测试操作元素样式--className" onclick="testOperCss2()" />
<hr />
<div id="showdiv" style="border: solid 2px blue;">
</div>
<div id="div01" class="common">
</div>
</body>
</html>
js操作元素的文档结构
<html>
<head>
<title>js操作元素的文档结构</title>
<meta charset="UTF-8"/>
<!--
js操作HTML文档结构:
增加节点
删除节点
第一种方式：使用innerHTML
div.innerHTML=div.innerHTML+"内容"//增加节点
div.innerHTML=""//删除所有子节点
父节点.removeChild(子节点对象)//删除指定的子节点。
-->
<!--声明js代码域-->
<script type="text/javascript">
function testAdd(){
//获取元素对象
var showdiv=document.getElementById("showdiv");
//给div追加上传按钮
showdiv.innerHTML=showdiv.innerHTML+"<div><input type='file' value='' /><input type='button' value='删除' onclick='delInp(this)'/></div>";
}
function delInp(btn){
//获取父级div
var showdiv=document.getElementById("showdiv");
//获取要删除的子div
var cdiv=btn.parentNode;
//父div删除子div
showdiv.removeChild(cdiv);
}
</script>
</head>
<body>
<h3>js操作元素的文档结构</h3>
<input type="button" name="" id="" value="继续上传" onclick="testAdd()"/>
<hr />
<div id="showdiv">
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js操作文档结构2</title>
<!--
js操作文档结构2：
获取元素对象
var obj=document.createElement("标签名");
元素对象名.appendChild(obj);
-->
<!--声明js代码域-->
<script type="text/javascript">
function testOper2(){
//获取元素对象
var showdiv=document.getElementById("showdiv");
//创建input元素对象
var inp=document.createElement("input");
inp.type="file";
//创建按钮元素对象
var btn=document.createElement("input");
btn.type="button";
btn.value="删除";
btn.onclick=function(){
showdiv.removeChild(inp);
showdiv.removeChild(btn);
showdiv.removeChild(br);
}
//创建换行符
var br=document.createElement("br");
//将创建的元素对象存放到div中
showdiv.appendChild(inp);
showdiv.appendChild(btn);
showdiv.appendChild(br);
}
</script>
</head>
<body>
<h3>js操作文档结构2</h3>
<input type="button" name="" id="" value="继续上传" onclick="testOper2()"/>
<hr />
<div id="showdiv">
</div>
</body>
</html>
js操作form表单
<html>
<head>
<title>js操作form表单</title>
<meta charset="UTF-8"/>
<!--
js操作form:
获取form表单对象
使用id:var fm=document.getElementById("fm");
使用name属性:var frm=document.frm;
获取form下的所有表单元素对象集合
fm.elements
form表单的常用方法
表单对象.submit();//提交表单数据。
form的属性操作：
表单对象名.action="新的值"//动态的改变数据的提交路径
表单对象名.method="新的值"//动态的改变提交方式
js表单元素的通用属性
只读模式:
readonly="readonly"//不可以更改，但是数据可以提交
关闭模式：
disabled="disabled"//不可以进行任何的操作，数据不会提交。
-->
<script type="text/javascript">
//
function testForm(){
//获取form表对象
var fm=document.getElementById("fm");
//alert(fm);
//使用form表单的name属性值来获取
var frm=document.frm;
//alert(frm===fm);
//获取form表单元素对象集合
//alert(fm.elements.length);
//form表单的常用方法
//fm.submit();很重要
fm.reset();
//form的属性操作
fm.action="http://www.baidu.com/s";
}
</script>
</head>
<body>
<h3>js操作form表单</h3>
<input type="button" name="" id="" value="测试操作form" onclick="testForm()" />
<hr />
<form action="#" method="get" id="fm" name="frm">
<b>用户名：</b><input type="text" name="uname" id="uname" value="" readonly="readonly"/><br /><br />
密码： <input type="password" name="pwd" id="pwd" value="" disabled="disabled"/><br /><br />
<input type="submit" name="" id="" value="登录" />
</form>
</body>
</html>
操作表单元素
<html>
<head>
<title>操作表单元素</title>
<meta charset="UTF-8"/>
<!--
js操作多选框、单选框
被选中状态下在js中checked属性值为true,未选中状态为false;
js操作下拉框：
被选择的option对象在js中selected属性值为true，未选中为false
-->
<!--声明js代码域-->
<script type="text/javascript">
//多选框操作
function testCheckBox(){
//获取所有的多选元素对象数组
var favs=document.getElementsByName("fav");
//遍历数组
for(var i=0;i<favs.length;i++){
if(favs[i].checked){
alert(favs[i].value+":"+favs[i].checked);
}
}
}
//全选
function testCheckBox2(){
var favs=document.getElementsByName("fav");
for(var i=0;i<favs.length;i++){
favs[i].checked=true;
}
}
//反选
function testCheckBox3(){
var favs=document.getElementsByName("fav");
for(var i=0;i<favs.length;i++){
favs[i].checked=!favs[i].checked;
}
}
//操作下拉框
function testSel(){
//获取下拉框对象
var sel=document.getElementById("address");
//alert(sel.value);
//获取option对象集合
var os=sel.options;
for(var i=0;i<os.length;i++){
if(os[i].selected){
alert(os[i].value+":"+os[i].text);
}
}
}
</script>
</head>
<body>
<h3>操作表单元素</h3>
<hr />
<b>操作多选框</b><br /><br />
<input type="checkbox" name="fav" id="fav" value="1" />远走高飞<br />
<input type="checkbox" name="fav" id="fav" value="2" />当<br />
<input type="checkbox" name="fav" id="fav" value="3" />李白<br />
<input type="checkbox" name="fav" id="fav" value="4" />杜甫<br />
<input type="checkbox" name="fav" id="fav" value="5" />see you again<br />
<input type="checkbox" name="fav" id="fav" value="6" />fade<br /><br /><br />
<input type="button" name="" id="" value="播放" onclick="testCheckBox()"/>
<input type="button" name="" id="" value="全选" onclick="testCheckBox2()"/>
<input type="button" name="" id="" value="反选" onclick="testCheckBox3()"/>
<hr />
<select name="" id="address" onchange="testSel()">
<option value="0">--请选择--</option>
<option value="1" >北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
</select>
</body>
</html>
js校验form表单
<html>
<head>
<title>js校验form表单</title>
<meta charset="UTF-8"/>
<!--声明css代码域-->
<style type="text/css">
/*设置背景图片*/
body{
background-image: url(img/b.jpg);
}
/*设置tr样式*/
tr{
height: 40px;
}
/*设置div样式*/
#showdiv{
border: solid 1px #FF0000;
border-radius: 10px;
width: 500px;
margin: auto;
margin-top: 40px;
}
/*设置table*/
table{
margin: auto;
color: white;
}
span{
font-size:13px;
}
#codeSpan{
font-size:20px;
}
</style>
<!--声明js代码域-->
<script type="text/javascript">
//常见验证码
function createCode(){
//创建随机四位数字
var code=Math.floor(Math.random()*9000+1000);
//获取元素对象
var span=document.getElementById("codeSpan");
//将数字存放到span中
span.innerHTML=code;
}
//验证用户名
function checkUname(){
//获取用户的用户名信息
var uname=document.getElementById("uname").value;
//创建校验规则
var reg=/^[\u4e00-\u9fa5]{2,4}$/
//获取span对象
var span=document.getElementById("unameSpan");
//开始校验
if(uname=="" || uname==null){
//输出校验结果
span.innerHTML="用户名不能为空";
span.style.color="red";
return false;
}else if(reg.test(uname)){
//输出校验结果
span.innerHTML="用户名ok";
span.style.color="green";
return true;
}else{
//输出校验结果
span.innerHTML="用户名不符合规则";
span.style.color="red";
return false;
}
}
//验证密码
function checkPwd(){
//获取用户的密码信息
var pwd=document.getElementById("pwd").value;
//创建校验规则
var reg=/^[a-z]\w{5,7}$/;
//获取span对象
var span=document.getElementById("pwdSpan");
//开始校验
if(pwd=="" ||pwd==null){
//输出校验结果
span.innerHTML="*密码不能为空";
span.style.color="red";
return false;
}else if(reg.test(pwd)){
//输出校验结果
span.innerHTML="*密码ok";
span.style.color="green";
return true;
}else{
//输出校验结果
span.innerHTML="*密码格式不正确";
span.style.color="red";
return false;
}
checkPwd2();
}
//校验确认密码
function checkPwd2(){
//获取第一次密码
var pwd=document.getElementById("pwd").value;
//获取确认密码
var pwd2=document.getElementById("pwd2").value;
//获取span对象
var span=document.getElementById("pwd2Span");
//比较两次密码是否相同
if(pwd2==""||pwd2==null){
span.innerHTML="确认密码不能为空";
span.style.color="red";
return false;
}else if(pwd==pwd2){
span.innerHTML="确认密码ok";
span.style.color="green";
return true;
}else{
span.innerHTML="两次密码不一致";
span.style.color="red";
return false;
}
}
//校验手机号
function checkPhone(){
return checkField("phone",/^1[3,4,5,7,8]\d{9}$/);
}
//校验邮箱
function checkMail(){
return checkField("mail",/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+$/ )
}
//校验籍贯
function checkAddress(){
//获取用户选择的数据
var sel=document.getElementById("address").value;
//获取span
var span=document.getElementById("addressSpan");
//校验
if(sel!=0){
span.innerHTML="籍贯选择成功";
span.style.color="green";
return true;
}else{
span.innerHTML="籍贯不能为请选择";
span.style.color="red";
return false;
}
}
//校验爱好
function checkFav(){
//获取所有的爱好
var favs=document.getElementsByName("fav");
//获取span
var span=document.getElementById("favSpan");
//遍历
for(var i=0;i<favs.length;i++){
if(favs[i].checked){
span.innerHTML="爱好选择成功";
span.style.color="green";
return true;
}
}
span.innerHTML="爱好至少选则一项";
span.style.color="red";
return false;
}
//校验是否同意公司协议
function checkAgree(){
document.getElementById("sub").disabled=!document.getElementById("agree").checked;
}
//提交判断
function checkSub(){
checkUname();
checkPwd();
checkPwd2();
checkPhone();
checkMail();
checkAddress();
checkFav();
return checkUname()&&checkPwd()&&checkPwd2()&&checkPhone()&&checkMail()&&checkAddress()&&checkFav();
}
/*-------------------------------------------------------------------------------------------------*/
//封装校验:相同的保留，不同的传参。
function checkField(id,reg){
//获取用户数据
var inp=document.getElementById(id);
var va=inp.value;
var alt=inp.alt;
//创建校验规则
//获取span对象
var span=document.getElementById(id+"Span")
//开始校验
if(va=="" ||va==null){
//输出校验结果
span.innerHTML=alt+"不能为空";
span.style.color="red";
return false;
}else if(reg.test(va)){
//输出校验结果
span.innerHTML=alt+"ok";
span.style.color="green";
return true;
}else{
//输出校验结果
span.innerHTML=alt+"不符合规则";
span.style.color="red";
return false;
}
}
</script>
</head>
<body onload="createCode()">
<div id="showdiv">
<form action="#" method="get" onsubmit="return checkSub()">
<table>
<tr>
<td width="80px">用户名:</td>
<td width="200px">
<input type="text" name="uname" id="uname" value="" onblur="checkUname()" alt="用户名"/><span id="unameSpan">*2-4位汉字</span>
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="password" name="pwd" id="pwd" value="" onblur="checkPwd()"/>
<span id="pwdSpan"></span>
</td>
</tr>
<tr>
<td>确认密码:</td>
<td>
<input type="password" name="pwd2" id="pwd2" value="" onblur="checkPwd2()"/>
<span id="pwd2Span"></span>
</td>
</tr>
<tr>
<td>手机号:</td>
<td>
<input type="text" name="phone" id="phone" value="" alt="手机号" onblur="checkPhone()"/>
<span id="phoneSpan"></span>
</td>
</tr>
<tr>
<td>邮箱：</td>
<td>
<input type="text" name="mail" id="mail" value="" alt="邮箱" onblur="checkMail()"/>
<span id="mailSpan"></span>
</tr>
<tr>
<td>性别</td>
<td>
男 <input type="radio" name="sex" id="sex" value="0" checked="checked"/>
女 <input type="radio" name="sex" id="sex" value="1" />
</td>
</tr>
<tr>
<td>籍贯:</td>
<td>
<select name="address" id="address" onchange="checkAddress()">
<option value="0">--请选择--</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
</select>
<span id="addressSpan"></span>
</td>
</tr>
<tr>
<td>爱好:</td>
<td>
<input type="checkbox" name="fav" id="" value="1" onclick="checkFav()"/>LOL
<input type="checkbox" name="fav" id="" value="2" onclick="checkFav()"/>睡觉
<input type="checkbox" name="fav" id="" value="3" onclick="checkFav()"/>吃饭<br />
<input type="checkbox" name="fav" id="" value="4" onclick="checkFav()"/>打豆豆
<input type="checkbox" name="fav" id="" value="5" onclick="checkFav()"/>看电影
<input type="checkbox" name="fav" id="" value="6" onclick="checkFav()" />听歌
<span id="favSpan"></span>
</td>
</tr>
<tr>
<td>个人介绍:</td>
<td>
<textarea name="intro" rows="4" cols="40" id="intro"></textarea>
</td>
</tr>
<tr>
<td>验证码:</td>
<td>
<input type="text" name="code" id="code" value="" style="width: 100px;"/>
<span id="codeSpan" onclick="createCode()" style="background-image: url(img/code.jpg.gif);color: black;"></span>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="checkbox" name="" id="agree" value="" onclick="checkAgree()"/>是否同意本公司协议</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="" id="sub" value="立即注册" disabled="disabled"/></td>
</tr>
</table>
</form>
</div>
</body>
</html>
event对象学习
<html>
<head>
<title>event对象学习</title>
<meta charset="UTF-8"/>
<!--
event对象学习：
1、event对象获取鼠标坐标
2、event对象获取键盘值
-->
<style type="text/css">
#showdiv{
width: 300px;
height: 300px;
border: solid 1px;
}
</style>
<script type="text/javascript">
function getMouse(event){
//获取event对象
var eve=event || window.event;//因为浏览器差异问题，使用此种方式获取event对象
var x=eve.clientX;
var y=eve.clientY;
alert(x+":"+y);
}
function getKey(event){
//获取event对象
var eve=event || window.event;//因为浏览器差异问题，使用此种方式获取event对象
var code=eve.keyCode;
alert(code);
}
</script>
</head>
<body>
<h3>event对象学习</h3>
<hr />
<div id="showdiv" onmousemove="getMouse(event)">
</div>
<br /><br />
<input type="text" name="" id="" value="" onkeydown="getKey(event)"/>
</body>
</html>
JS中用一对大括号{}包含的代码，叫一个代码块。只具有分组的作用！
{
alert(666);
console.log("999");
}
立即执行函数
//此函数只执行一次，自动调用！
(function () {
alert(666);
})();
this解析器在调用函数时，会隐式的传递一个参数this,以函数形式调用时this是window，以方法的形式调用时this就是那个对象。
原型对象prototype,每一个函数都有prototype属性，对应一个对象，这个对象就是原型对象。
380
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
