本文深入讲解JavaScript的基础概念、发展历程及核心特性，同时介绍jQuery框架的优势、语法结构及其在网页特效制作中的应用。
使用jQuery 快速高效制作 网页特效
注意：<!--这是HTML的注释而不是JavaScript的注释-->
------------------------
第一章：JavaScript基础
DOM：document object model 文档对象模型
BOM：browser object model 浏览器对象模型
undefined 未限定的，未阐明的
alert 警惕的，警告的
prompt 提示
function 函数
JavaScript 是在客户端先进行验证，减轻了服务器的压力
JavaScript 是在客户端先进行验证，减轻了服务器的压力
什么是JavaScript ？
JavaScript是一种描述性语言，也是一种基于对象和事件驱动（Event Driven）的,
并具有安全的 性能的脚本语言。他与HTML一起，在一个web页面中链接多个对象
与客户实现交互，无论在客户端还是在服务器端，JavaScript应用程序都要下载到浏览器 的
客户端执行，从而减轻服务器端的压力。
JavaScript的由来：
Netspace 公司为了扩展其浏览器的功能，开发了一种名为LivdScript的脚本语言，并于
1995年将其更名为JavaScript
ECMAScript 是一种脚本语言的标准，JavaScript就是遵循
ECMAScript标准的一种实现
特点：
JavaScript 主要用来向HTML页面中添加交互行为
JavaScript是一种脚本语言，语法和java相似
JavaScript 一般 用来编写客户端脚本
JavaScript是一种解释性语言，边执行边解释
JavaScript 的组成：
JavaScript嵌套在html中的代码不需要编译
ECMAScript
是一种由
Ecma国际
（前身为
欧洲计算机制造商协会
,英文名称是European Computer Manufacturers Association）通过ECMA-262标准化的脚本
程序设计语言
。这种语言在
万维网
上应用广泛，它往往被称为
JavaScript
或
JScript
，但实际上后两者是ECMA-262标准的实现和扩展。
JavaScript由三部分组成
|
所以在JavaScript里写 <!-- -->,他是不认识的，所以不会把脚本语言给忽略
JavaScript的注释和java一样
document.write("<h1>Hello world</h1>") ;
<script></script> 的位置并不是固定的，可以包含在文档中的任何地方，只要保证这些代码在被使用前已被读取 ，并被加载到内存即可
JavaScript的执行原理：
1：用户在浏览器地址栏里输入要访问的页面，客户端向服务器端发送请求
2：数据处理：服务器端将某个包含JavaScript的页面进行处理
3：发送响应：
服务器端将页面发给客户端
4：由浏览器客户端从上到下逐条解析HTML标签JavaScript，并将页面效果呈现给用户
<script src="js/jquery-1.8.3.js" type="text/javascript">
在标签中写JavaScript的代码一般结合事件：
<input type="button" name="btn" value="弹出消息框" onclick="javascript:alert('欢迎您！');"/>
当在双引号里还有双引号时 要改单引号
变量的声明和赋值：
JavaScript是弱类型语言，没有明确的数据类型
可以由字母数字下划线和$组成，但不能是数字开头和使用关键字
var width=32;
var x,y,z=10;
money=88;
这些都是可以的，但为了规范还是要声明的
数据类型：
undefined（未定义类型）
null=
undefined
number
String
boolean
有时候需要检测变量的具体数据类型，JavaScript提供了typeof(变量名)来判断
var name="rose";
document.write("rose 的数据类型是"+typeof(name));
JavaScript的数组：
var fruit = new Array("4pple", "banana", "watermelon", "orenge", "pear",
"peach");
也可以这样声明：
var fruit =[
"4pple",
"banana",
"watermelon",
"orenge",
"pear"]
fruit.sort();
var count = 0;
var total = 0;
for ( var i = 0; i < fruit.length; i++) {
document.writeln(fruit[i] + "<br/>");
if ((fruit[i].indexOf("a") || fruit[i].indexOf("A")) != -1) {
count++;
}
for ( var j = 0; j < fruit[i].length; j++) {
if ("a" == fruit[i].charAt(j)) {
total++;
}
}
运算符的计算顺序
！>算数>关系>逻辑
for循环的的第二种写法：
var arr=new Array();
arr["广东省"]=["揭阳市","湛江市","广州市","佛山市","珠海市"];
arr["湖南省"]=["揭阳市","湛江市","广州市","佛山市","珠海市"];
for（var i in arr）{
$option=$("<option>"+i+"</option>");
$("#province").append($option);
}
------------------------
------------------------
------------------------
------------------------
警告消息框
alert 方法有一个参数，即希望对用户显示的文本字符串。该字符串不是 HTML 格式。该消息框提供了一个“确定”按钮让用户关闭该消息框，并且该消息框是模式对话框，也就是说，用户必须先关闭该消息框然后才能继续进行操作。
window.alert("欢迎！请按“确定”继续。");
确认消息框
使用确认消息框可向用户问一个“是-或-否”问题，并且用户可以选择单击“确定”按钮或者单击“取消”按钮。confirm 方法的返回值为 true 或 false。该消息框也是模式对话框：用户必须在响应该对话框（单击一个按钮）将其关闭后，才能进行下一步操作。
var truth = window.confirm("单击“确定”继续。单击“取消”停止。");if (truth) {window.alert("欢迎访问我们的Web页！");}else window.alert("再见啦！");提示消息框
提示消息框提供了一个文本字段，用户可以在此字段输入一个答案来响应您的提示。该消息框有一个“确定”按钮和一个“取消”按钮。如果您提供了一个辅助字符串参数，则提示消息框将在文本字段显示该辅助字符串作为默认响应。否则，默认文本为 "<undefined>"。
与alert( ) 和 confirm( ) 方法类似，prompt 方法也将显示一个模式消息框。用户在继续操作之前必须先关闭该消息框
var theResponse = window.prompt("提示信息","输入框默认的信息");单击取消返回null,确定返回你输入的字符串f12 和f5 调试常用系统函数：parseInt 方法
返回由字符串转换得到的整数。
parseInt(numString, [radix])参数
numString
必选项。要转换为数字的字符串。
radix
可选项。在 2 和 36 之间的表示 numString 所保存数字的进制的值。如果没有提供，则前缀为 '0x' 的字符串被当作十六进制，前缀为 '0' 的字符串被当作八进制。所有其它字符串都被当作是十进制的。
说明
parseInt 方法返回与保存在 numString 中的数字值相等的整数。如果 numString 的前缀不能解释为整数，则返回 NaN（而不是数字）。
parseInt("abc")//返回NaN。parseInt("12abc")//返回12。可以用 isNaN 方法检测 NaN。
parseFloat 方法
返回由字符串转换得到的浮点数。
parseFloat(numString)必选项 numString 参数是包含浮点数的字符串。
说明
parseFloat 方法返回与 numString 中保存的数相等的数字表示。如果 numString 的前缀不能解释为浮点数，则返回 NaN （而不是数字）。
parseFloat("abc")//返回NaN。parseFloat("1.2abc")//返回1.2。可以用 isNaN 方法检测 NaN。
isNaN 方法
返回一个 Boolean 值，指明提供的值是否是保留值 NaN （不是数字）。
isNaN(numValue)必选项 numvalue 参数为要检查是否为 NAN 的值。
说明
如果值是 NaN， 那么 isNaN 函数返回 true ，否则返回 false 。 使用这个函数的典型情况是检查 parseInt 和 parseFloat 方法的返回值。
还有一种办法，变量可以与它自身进行比较。 如果比较的结果不等，那么它就是 NaN 。 这是因为 NaN 是唯一与自身不等的值。
var reg=/^(([1-9]?|1[0-1])\d|120)$/
此题考查的是按钮的单击事件属性，在通过标签的事件属性调用相关的功能函数的时候，如果有参数，必须使用单双引号相互嵌套的方式，
JavaScript中的数组在创建的时候赋初值，语法采用[]，而不是{}。javaScitp是弱类型的语言，所以B答案中的用法在JavaScript中是合法的
第二章：JavaScript对象
特殊的内部函数
Jscript 语言包含很多内部函数。某些函数可以操作表达式和特殊字符，而其他函数将字符串转换为数值。一个有用的内部函数是 eval()。该函数可以对以字符串形式表示的任意有效的 Jscript代码求值。eval() 函数有一个参数，该参数就是想要求值的代码。下面给出一个使用本函数的示例。
var anExpression = "6 * 9 % 7";var total = eval(anExpression); //将变量total赋值为5。var yetAnotherExpression = "6 * (9 % 7)";total = eval(yetAnotherExpression) //将变量total赋值为12。//将一个字符串赋给totality（注意嵌套引用）var totality = eval("’...surrounded by acres of clams.’");eval 方法
检查 JScript 代码并执行.
eval(codeString)必选项 codestring 参数是包含有效 JScript 代码的字符串值。这个字符串将由 JScript 分析器进行分析和执行。
说明
eval 函数允许 JScript 源代码的动态执行。例如,下面的代码创建了一个包含 Date 对象的新变量 mydate ：
eval("var mydate = new Date();");传递给 eval 方法的代码执行时的上下文和调用 eval 方法的一样.
interval 间隔
timeout 超时
当浏览器打开HTML文档时，通常会创建一个window对象，如果文档定义了一个或多个框架，浏览器将会为原始文档创建一个window对象
window对象(浏览器对象)是整个BOM的核心
history：有关客户访问过的URL信息方法：back() 前一个URL；forward() 后一个URL ；go(数字)
document：
location：有关当前URL信息 方法：prompt("提示语","文本默认值")提示对话框;alert()警告框；confirm() 验证框，有返回值true或false;close();open();setTimeout("函数名"，时间(毫秒))只执行一次；setInterval("函数名"，时间(毫秒));以一定时间为周期调用函数；
window.location="http://www.baidu.com";//window可以省略window.open("要弹出的窗口的URL"，"窗口的名称可不写"，"窗口的特征");WindowObjectReference = window.open("http://www.cnn.com/", "CNN_WindowName","menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes");titlebar 标题栏fullscreen 默认为no这些窗口特征默认为yestoolbar工具栏scrollbars滚动条location地址栏status状态栏menubar菜单栏resizable窗口是否可调节尺寸location对象：
属性；host:设置或返回主机名和当前URL的端口号hostname：返回或设置当前URL的主机名href:设置或返回完整的URL方法：reload();重新加载页面replace();用新的文档替换当前的文档assign(); assign() 方法可加载一个新的文档。window.location.assign("http://www.w3school.com.cn")<a href="javascript:location.reload();">刷新当前页面</a>window.loacation.href="a.html" 是通过调用js内置方法来进行页面跳转的，可以用JS里的事件来触发这个方法。如：onclick、onmouseover/out 、onkeyup/down 等 <a href="a.html"/>就是普通的页面链接document 对象：
属性；
referrer:返回载入当前文档的URL( 即文档的来路 )注意：如果当前文档不是由 超链接 访问的，document.referrer返回nullURL：返回当前文档的URL方法：getElementById(): 返回拥有指定id的第一个对象的引用，即如果有多个相同的id名，也只返回第一个getElement s ByName(): 返回带有指定名称对象的集合getElementsByTagName():返回指定标签对象的集合write();innerHTML属性是几乎所有HTML元素都有的属性，用来设置或获取当前对象的开始和结束标签之间的内容HTML DOM Document 对象
Document 对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
Document 对象集合
集合 描述 all[] 提供对文档中所有 HTML 元素的访问。 anchors[] 返回对文档中所有 Anchor 对象的引用。 applets 返回对文档中所有 Applet 对象的引用。 forms[] 返回对文档中所有 Form 对象引用。 images[] 返回对文档中所有 Image 对象引用。 links[] 返回对文档中所有 Area 和 Link 对象引用。 Document 对象属性
属性 描述 body 提供对 <body> 元素的直接访问。
对于定义了框架集的文档，该属性引用最外层的 <frameset>。
cookie 设置或返回与当前文档有关的所有 cookie。 domain 返回当前文档的域名。 lastModified 返回文档被最后修改的日期和时间。 referrer 返回载入当前文档的文档的 URL。 title 返回当前文档的标题。 URL 返回当前文档的 URL。 Document 对象方法
方法 描述 close() 关闭用 document.open() 方法打开的输出流，并显示选定的数据。 getElementById() 返回对拥有指定 id 的第一个对象的引用。 getElementsByName() 返回带有指定名称的对象集合。 getElementsByTagName() 返回带有指定标签名的对象集合。 open() 打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。 write() 向文档写 HTML 表达式 或 JavaScript 代码。 writeln() 等同于 write() 方法，不同的是在每个表达式之后写一个换行符。 Document 对象描述
HTMLDocument 接口对 DOM Document 接口进行了扩展，定义 HTML 专用的属性和方法。
很多属性和方法都是 HTMLCollection 对象（实际上是可以用数组或名称索引的只读数组），其中保存了对锚、表单、链接以及其他可脚本元素的引用。
这些集合属性都源自于 0 级 DOM。它们已经被 Document.getElementsByTagName() 所取代，但是仍然常常使用，因为他们很方便。
write() 方法值得注意，在文档载入和解析的时候，它允许一个脚本向文档中插入动态生成的内容。
注意，在 1 级 DOM 中，HTMLDocument 定义了一个名为 getElementById() 的非常有用的方法。在 2 级 DOM 中，该方法已经被转移到了 Document 接口，它现在由 HTMLDocument 继承而不是由它定义了。
方法是我们可以在节点（HTML 元素）上执行的动作。
编程接口
可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。
所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。
方法是您能够执行的动作（比如添加或修改元素）。
属性是您能够获取或设置的值（比如节点的名称或内容）。
getElementById() 方法
getElementById() 方法返回带有指定 ID 的元素：
例子
var element=document.getElementById("intro");HTML DOM 对象 - 方法和属性
一些常用的 HTML DOM 方法：
- getElementById(id) - 获取带有指定 id 的节点（元素）
- appendChild(node) - 插入新的子节点（元素）
- removeChild(node) - 删除子节点（元素）
一些常用的 HTML DOM 属性：
- innerHTML - 节点（元素）的文本值
- parentNode - 节点（元素）的父节点
- childNodes - 节点（元素）的子节点
- attributes - 节点（元素）的属性节点
您将在本教程的下一章中学到更多有关属性的知识。
现实生活中的对象
某个人是一个对象。
人的方法可能是 eat(), sleep(), work(), play() 等等。
所有人都有这些方法，但会在不同时间执行它们。
一个人的属性包括姓名、身高、体重、年龄、性别等等。
所有人都有这些属性，但它们的值因人而异。
一些 DOM 对象方法
这里提供一些您将在本教程中学到的常用方法：
方法 描述 getElementById() 返回带有指定 ID 的元素。 getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。 appendChild() 把新的子节点添加到指定节点。 removeChild() 删除子节点。 replaceChild() 替换子节点。 insertBefore() 在指定的子节点前面插入新的子节点。 createAttribute() 创建属性节点。 createElement() 创建元素节点。 createTextNode() 创建文本节点。 getAttribute() 返回指定的属性值。 setAttribute() 把指定属性设置或修改为指定的值。
JavaScript内置对象ArrayStringJavaScript String 对象
String 对象
String 对象用于处理文本（字符串）。
创建 String 对象的语法：
new String(s);String(s);参数
参数 s 是要存储在 String 对象中或转换成原始字符串的值。
返回值
当 String() 和运算符 new 一起作为构造函数使用时，它返回一个新创建的 String 对象，存放的是字符串 s 或 s 的字符串表示。
当不用 new 运算符调用 String() 时，它只把 s 转换成原始的字符串，并返回转换后的值。
String 对象属性
属性 描述 constructor 对创建该对象的函数的引用 length 字符串的长度 prototype 允许您向对象添加属性和方法 String 对象方法
方法 描述 anchor() 创建 HTML 锚。 big() 用大号字体显示字符串。 blink() 显示闪动字符串。 bold() 使用粗体显示字符串。 charAt() 返回在指定位置的字符。 charCodeAt() 返回在指定的位置的字符的 Unicode 编码。 concat() 连接字符串。 fixed() 以打字机文本显示字符串。 fontcolor() 使用指定的颜色来显示字符串。 fontsize() 使用指定的尺寸来显示字符串。 fromCharCode() 从字符编码创建一个字符串。 indexOf() 检索字符串。 italics() 使用斜体显示字符串。 lastIndexOf() 从后向前搜索字符串。 link() 将字符串显示为链接。 localeCompare() 用本地特定的顺序来比较两个字符串。 match() 找到一个或多个正则表达式的匹配。 replace() 替换与正则表达式匹配的子串。 search() 检索与正则表达式相匹配的值。 slice() 提取字符串的片断，并在新的字符串中返回被提取的部分。 small() 使用小字号来显示字符串。 split() 把字符串分割为字符串数组。 strike() 使用删除线来显示字符串。 sub() 把字符串显示为下标。 substr() 从起始索引号提取字符串中指定数目的字符。 substring() 提取字符串中两个指定的索引号之间的字符。 sup() 把字符串显示为上标。 toLocaleLowerCase() 把字符串转换为小写。 toLocaleUpperCase() 把字符串转换为大写。 toLowerCase() 把字符串转换为小写。 toUpperCase() 把字符串转换为大写。 toSource() 代表对象的源代码。 toString() 返回字符串。 valueOf() 返回某个字符串对象的原始值。 String 对象描述
字符串是 JavaScript 的一种基本的数据类型。
String 对象的 length 属性声明了该字符串中的字符数。
String 类定义了大量操作字符串的方法，例如从字符串中提取字符或子串，或者检索字符或子串。
需要注意的是，JavaScript 的字符串是不可变的（immutable），String 类定义的方法都不能改变字符串的内容。像 String.toUpperCase() 这样的方法，返回的是全新的字符串，而不是修改原始字符串。
在较早的 Netscape 代码基的 JavaScript 实现中（例如 Firefox 实现中），字符串的行为就像只读的字符数组。例如，从字符串 s 中提取第三个字符，可以用 s[2] 代替更加标准的 s.charAt(2)。此外，对字符串应用 for/in 循环时，它将枚举字符串中每个字符的数组下标（但要注意，ECMAScript 标准规定，不能枚举 length 属性）。因为字符串的数组行为不标准，所以应该避免使用它。
Math：Math.random()*100+1;Date：<html><head><script type="text/javascript">function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
// add a zero in front of numbers<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()',500)
}
function checkTime(i)
{
if (i<10)
{i="0" + i}
return i
}
</script>
</head>
<body οnlοad="startTime()">
<div id="txt"></div>
</body>
</html>var today=new Date(参数);如果没有参数则表示当前日期和时间参数的格式是："MM DD ,YYYY,hh:mm:ss"var today=new Date("July 14,2016,16:34:28");
getDate() 返回一个月中的其中一天，取值范围1~31getDay() 返回一个星期中的其中一天，取值范围0~6其他以此类推，其他均从0开始计数Date 对象
Date 对象用于处理日期和时间。
创建 Date 对象的语法：
var myDate=new Date()注释：Date 对象会自动把当前日期和时间保存为其初始值。
Date 对象属性
属性 描述 constructor 返回对创建此对象的 Date 函数的引用。 prototype 使您有能力向对象添加属性和方法。 Date 对象方法
方法 描述 Date() 返回当日的日期和时间。 getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。 getMonth() 从 Date 对象返回月份 (0 ~ 11)。 getFullYear() 从 Date 对象以四位数字返回年份。 getYear() 请使用 getFullYear() 方法代替。 getHours() 返回 Date 对象的小时 (0 ~ 23)。 getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。 getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。 getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。 getTime() 返回 1970 年 1 月 1 日至今的毫秒数。 getTimezoneOffset() 返回本地时间与格林威治标准时间 (GMT) 的分钟差。 getUTCDate() 根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。 getUTCDay() 根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。 getUTCMonth() 根据世界时从 Date 对象返回月份 (0 ~ 11)。 getUTCFullYear() 根据世界时从 Date 对象返回四位数的年份。 getUTCHours() 根据世界时返回 Date 对象的小时 (0 ~ 23)。 getUTCMinutes() 根据世界时返回 Date 对象的分钟 (0 ~ 59)。 getUTCSeconds() 根据世界时返回 Date 对象的秒钟 (0 ~ 59)。 getUTCMilliseconds() 根据世界时返回 Date 对象的毫秒(0 ~ 999)。 parse() 返回1970年1月1日午夜到指定日期（字符串）的毫秒数。 setDate() 设置 Date 对象中月的某一天 (1 ~ 31)。 setMonth() 设置 Date 对象中月份 (0 ~ 11)。 setFullYear() 设置 Date 对象中的年份（四位数字）。 setYear() 请使用 setFullYear() 方法代替。 setHours() 设置 Date 对象中的小时 (0 ~ 23)。 setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)。 setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)。 setMilliseconds() 设置 Date 对象中的毫秒 (0 ~ 999)。 setTime() 以毫秒设置 Date 对象。 setUTCDate() 根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。 setUTCMonth() 根据世界时设置 Date 对象中的月份 (0 ~ 11)。 setUTCFullYear() 根据世界时设置 Date 对象中的年份（四位数字）。 setUTCHours() 根据世界时设置 Date 对象中的小时 (0 ~ 23)。 setUTCMinutes() 根据世界时设置 Date 对象中的分钟 (0 ~ 59)。 setUTCSeconds() 根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。 setUTCMilliseconds() 根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。 toSource() 返回该对象的源代码。 toString() 把 Date 对象转换为字符串。 toTimeString() 把 Date 对象的时间部分转换为字符串。 toDateString() 把 Date 对象的日期部分转换为字符串。 toGMTString() 请使用 toUTCString() 方法代替。 toUTCString() 根据世界时，把 Date 对象转换为字符串。 toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。 toLocaleTimeString() 根据本地时间格式，把 Date 对象的时间部分转换为字符串。 toLocaleDateString() 根据本地时间格式，把 Date 对象的日期部分转换为字符串。 UTC() 根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。 valueOf() 返回 Date 对象的原始值。
定义和用法
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
语法
setTimeout(code,millisec)
参数 描述 code 必需。要调用的函数后要执行的 JavaScript 代码串。 millisec 必需。在执行代码前需等待的毫秒数。 提示和注释
提示：setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。
实例
<html> <head> <script type="text/javascript"> function timedMsg() { var t=setTimeout("alert('5 seconds!')",5000) } </script> </head> <body> <form> <input type="button" value="Display timed alertbox!" onClick="timedMsg()"> </form> <p>Click on the button above. An alert box will be displayed after 5 seconds.</p> </body> </html>定义和用法
clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。
语法
clearTimeout(id_of_settimeout)
参数 描述 id_of_settimeout 由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。 定义和用法
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
语法
setInterval(code,millisec[,"lang"])
参数 描述 code 必需。要调用的函数或要执行的代码串。 millisec 必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。 返回值
一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。
实例
<html> <body> <input type="text" id="clock" size="35" /> <script language=javascript> var int=self.setInterval("clock()",50)function clock() { var t=new Date() document.getElementById("clock").value=t } </script> </form> <button οnclick="int=window.clearInterval(int)">Stop interval</button> </body>自定义方法和属性<html><body><script type="text/javascript">function employee(name,job,born){ this.name=name; this.job=job;this.born=born;}var bill=new employee("Bill Gates","Engineer",1985);alert("当前对象的构造器是："+employee.constructor);employee.prototype.sex=null;bill.sex="男";document.write(bill.name);document.write(bill.sex);</script></body></html>对象的valueOf()方法用于获取对象的初始值<script type="text/javascript">var boo = new Boolean(false)document.write(boo.valueOf())</script>输出 false第3章：初识jQuerywrite less ，do more!为什么使用jQuery：jQuery框架是JavaScript库之一，能使代码量大大减少和不存在浏览器兼容问题
能兼容主流浏览器,ie,firefox,chrome,safari等,但不能兼容非主流浏览器jQuery简介：
jQuery是继Prototype之后又一个优秀的JavaScript是由美国人
John Resig 于2006年创建的开源项目集JavaScript、CSS、DOM、Ajax于一体的强大框架体系jQuery的用途：
1：访问和操作DOM元素如：腾讯qq空间删除说说信息2：控制页面样式如：网易邮箱的换肤功能3：对页面事件的处理
4：方便使用 jQuery 插件如：jQuery UI插件库、From插件、Validate插件 、Slicebox插件等3D幻灯片就是用Slicebox插件5：与Ajax技术的完美结合利用Ajax异步读取服务器的方法jQuery 的语法结构：工厂函数、选择器、方法
$(document).ready(function(){
});$是jQuery的标志jQuery强大的连缀模式
基于结构与样式分离的原则addClass()比css()更实用$()的作用是将DOM对象转化为jQuery对象<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>jQuery选择器</title><style>.title{border:2px solid rgba(0,0,255,0.3);padding:3px 15px;}div{display:none;border:2px dashed rgba(0,0,0,0.5);padding:3px 25px;}.setspan,.hobbyspan{ width: 150px; border: 1px solid #AAAAAA; padding: 3px 10px; text-align: center;}.selected{background-color: #CCCCCC;}.uname,.upwd{ border: 2px solid rgb(255,0,0); box-shadow: 0px 0px 5px #FF0000;}.B{font-weight:bolder;}.I{font-style:italic;}.U{text-decoration: underline;}</style><script src="js/jquery-1.8.3.js"></script><script>$(function(){//第一题$("#myForm h3").click(function(){$(this).next("div").slideToggle();$(this).siblings("h3").next("div").slideUp();});//第二题$("#div2 p input").focus(function(){$(this).addClass("uname");if($(this).attr("id")=="uname"){$(this).next("span").css("color","red").html("请输入用户名！");}else{$(this).next("span").css("color","red").html("请输密码！");}}).blur(function(){$(this).removeClass("uname").next("span").html("");});//第三题$("#info").keyup(function(){if($(this).html().length>40){$("#num").html(-1);$(this).blur();}else{$("#num").html(40-$(this).html().length);}});//toggle()方法的使用：若没有参数，则表示显示或隐藏，若有参数，则表示第一次点击执行该方法，第二次执行另一个方法$(".setspan").toggle(function(){$("#info").addClass($(this).html());$(this).css("background-color","gray");},function(){$("#info").removeClass($(this).html());$(this).css("background-color","#fff");});//第四题$(".hobbyspan").click(function(){$(this).addClass("selected").siblings("span").removeClass("selected");});$("#btnShow").click(function(){alert($(".hobbyspan.selected").html());});});</script></head><body><form id="myForm" action=""><h3 class="title">第一题20分</h3><div><p>完成各个题目和内容的折叠显示效果</p><p>选择某一题目则展开显示其内容，其他题目的内容折叠</p><p>提示使用slideToggle或者animate</p></div><h3 class="title">第二题20分</h3><div id="div2"><p>用户名:<input type="text" id="uname"><span></span></p><p>密码:<input type="password" id="upwd" /><span></span></p><p>提示红色发光使用css3的代码是 box-shadow: 0px 0px 5px #FF0000;</p></div><h3 class="title">第三题30分</h3><div><p><span class="setspan">B</span><span class="setspan">I</span><span class="setspan">U</span></p><p><textarea name="" id="info" cols="30" rows="10"></textarea>你还可以输入<span id="num">40</span>个字</p><p>提示B表示加粗、I表示倾斜、U表示下划线;</p></div><h3 class="title">第四题30分</h3><div><p>兴趣:<span class="hobbyspan selected">体育</span><span class="hobbyspan">音乐</span><span class="hobbyspan">阅读</span></p><p><input type="button" id="btnShow" value="提交显示" /></p></div></form></body></html>
DOM里的节点通常分为3种类型：元素节点、文本节点、属性节点所有的标签都是元素节点文本节点：用html()方法：只能返回单值不能返回数组html([val|fn])
概述
取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。
参数
valStringV1.0
用于设定HTML内容的值
function(index, html)FunctionV1.4
此函数返回一个HTML字符串。接受两个参数，index为元素在集合中的索引位置，html为原先的HTML值。
示例
无参数 描述:
返回p元素的内容。
jQuery 代码:
$('p').html();参数val 描述:
设置所有 p 元素的内容
jQuery 代码:
$("p").html("Hello <b>world</b>!");回调函数描述:
使用函数来设置所有匹配元素的内容。
jQuery 代码:
$("p").html(function(n){ return "这个 p 元素的 index 是：" + n; });或val()方法val([val|fn|arr])
返回值:String或Array
概述
获得匹配元素的当前值。
在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选，将返回一个数组，其包含所选的值。
参数
valStringV1.0
要设置的值。
function(index, value)FunctionV1.4
此函数返回一个要设置的值。接受两个参数，index为元素在集合中的索引位置，text为原先的text值。
arrayArray<String>V1.0
用于 check/select 的值
示例
无参数 描述:
获取文本框中的值
jQuery 代码:
$("input").val();参数val 描述:
设定文本框的值
jQuery 代码:
$("input").val("hello world!");回调函数 描述:
设定文本框的值
jQuery 代码:
$('input:text.items').val(function() { return this.value + ' ' + this.className;});参数array 描述:
设定一个select和一个多选的select的值
HTML 代码:
<select id="single"> <option>Single</option> <option>Single2</option></select><select id="multiple" multiple="multiple"> <option selected="selected">Multiple</option> <option>Multiple2</option> <option selected="selected">Multiple3</option></select><br/><input type="checkbox" value="check1"/> check1<input type="checkbox" value="check2"/> check2<input type="radio" value="radio1"/> radio1<input type="radio" value="radio2"/> radio2jQuery 代码:
$("#single").val("Single2");$("#multiple").val(["Multiple2", "Multiple3"]);$("input").val(["check2", "radio1"]);或text()方法
text([val|fn])
返回值:String ：是所有字符串的串联值
概述
取得所有匹配元素的内容。
结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
参数
valStringV1.0
用于设置元素内容的文本
function(index, text)FunctionV1.4
此函数返回一个字符串。接受两个参数，index为元素在集合中的索引位置，text为原先的text值。
示例
无参数 描述:
返回p元素的文本内容。
jQuery 代码:
$('p').text();参数val 描述:
设置所有 p 元素的文本内容
jQuery 代码:
$("p").text("Hello world!");回调函数 描述:
使用函数来设置所有匹配元素的文本内容。
jQuery 代码:
$("p").text(function(n){ return "这个 p 元素的 index 是：" + n; });jQuery对象与DOM对象的相互转换1：jQuery对象转DOM对象：使用[index]或get(index)方法var $txtName=$("txtName");//jQuery对象前要加$var txtName=$txtName[0];//DOM对象jQuery对象转DOM对象很少见，除非要使用到outerHTML属性，因为jQuery中没有该方法2：DOM对象转jQuery对象var txtName=document.getElementById("txtName");var $txtName=$(txtName);第四章：jQuery选择器选择器是jQuery的根基，在jQuery中，对事件处理、遍历DOM和Ajax操作都依赖于选择器，熟练地使用选择器，不但能简化代码，而且能够事半功倍选择器：基本选择器：class、id、并集（,）、交集（连着写）、全局（*）选择器层次选择器:后代$("#menu span ")、子选择器$("#menu>span ")、相邻元素选择器$(" h1+dl")用next()方法代替、同辈元素选择器$("h1~dl ")用siblings()方法代替属性选择器：属性
- [attribute]
- [attribute=value]
- [attribute!=value]
- [attribute^=value]
- [attribute$=value]
- [attribute*=value]
- [attrSel1][attrSel2][attrSelN]
过滤选择器：
基本
内容
可见性过滤选择器：
学会使用选择器是学习jQuery的基础jQuery 选择器注意事项：1：选择器中含有特殊符号的注意事项：要使用转义符转义：\\#2:选择器中含有空格的注意事项
第五章：事件与动画
页面载入
事件处理
事件委派
事件切换
事件
- blur([[data],fn])
- change([[data],fn])
- click([[data],fn])
- dblclick([[data],fn])
- error([[data],fn])
- focus([[data],fn])
- focusin([data],fn)
- focusout([data],fn)
- 键盘事件
- keydown([[data],fn])
- keypress([[data],fn])
- keyup([[data],fn])
- 鼠标事件
- mousedown([[data],fn])
- mouseenter([[data],fn])
- mouseleave([[data],fn])
- mousemove([[data],fn])
- mouseout([[data],fn])
- mouseover([[data],fn])
- mouseup([[data],fn])
- resize([[data],fn])
- scroll([[data],fn])
- select([[data],fn])
- submit([[data],fn])
- unload([[data],fn])
- 同时绑定多个事件
- 复合事件：hover
- 当鼠标移入时会触发第一个方法，当鼠标移出时会触发第二个方法
- 复合事件：toggle 切换元素
- 如果没参数，默认显示或隐藏
- 当鼠标点击时会触发第一个方法，点击第二次会触发第二个方法，
- 点击第三次会触发第三个方法，有多少个方法就以多少为周期
效果
基本
滑动
淡入淡出
自定义
设置
- 第6章使用jQuery操作DOM
- DOM操作分为三类：
- DOM Core：任何一种支持DOM的编程语言都可以使用它
- JavaScript中的getElementById()等方法都是DOM core 的组成部分
- HTML-DOM：
- CSS-DOM：element.style.color="green";
- jQuery 中的dom 操作主要可分为样式操作、文本、属性值、和节点操作，节点操作又可分为属性操作、节点遍历、和css-dom 操作，
- 其中最核心的部分是节点操作和节点遍历，掌握了这两部分，可以毫不夸张的说，jQuery你已学会了一半
- <p class=" class1 calss2"></p>
- 注意：这个p标签有两个类选择器，一个是class1，另一个是class2
- 所以可以同时添加多个class 也可以同时删除多个class
- html()既能获取和设置文本内容，也可设置HTML的标签，
- 这是html()和text()的区别之一
- 就像这样：
- $("input").html("<div class='content'>天道酬勤！</div>");
- val()方法多用于操作表单的input元素
- 清空文本内容：$(this).val(" ");
节点与属性操作：jQuery 中 节点与属性操作是jQuery操作DOM的核心内容，非常重要，学习并掌握这部分的内容，能让大家在日后的开发过程中事半功倍创建节点元素：var $newNode=$(" <li title ='我要学习！'>学习</li>");插入节点 元素 ：内部插入：将B追加到A中：$(B).appendTo(A);将A追加到B中：$(A).append(B);将B追加到A前：$(B).prependTo(A);
$(A).prepend(B);外部插入：同理： after()，insertAfter(),before(),insertBefore()删除节点：remove()、detach()、empty()detach()方法使用频率不高,了解即可empty()不是删除节点而是清空节点内容，它能清空其所有后代节点remove()和detach()的异同：同：只是在页面中删除，但该jQuery对象还存在异：被detach()方法删除的对象，其事件依然存在替换节点：replaceWith()、replaceAll()复制节点：即克隆节点clone(true);如果参数为true 复制该对象的所有事件属性操作 ：
attr()方法:获取或设置元素的属性removeAttr():$(function(){var len=$("p").length;$("p").each(function(index){$(this).css({"border":"1px solid #ff0000","font-size":40-index*9+"px","opacity":1-index/len+"","margin-left":20+index*20+"px","margin-top":index*3+"px"});});$("p").click(function(){//有这个样式就删除，没有就添加$(this).toggleClass("p");});$("#btn1").toggle(function(){$(this).next("div").html("<p class='p'></p>");},function(){$(this).next("div").html("<img src=images/1.gif>");});$("#uname").focus(function(){if( $(this).val()=="请输入用户名")$(this).val("");}).blur(function(){if($(this).val()==""){$(this).val("请输入用户名");}});$("#paw").focus(function(){if( $(this).val()=="请输入用密码")$(this).val("");}).blur(function(){if($(this).val()==""){$(this).val("请输入用密码");}});var $B=$("<p>B</p>");var $C=$("<p>C</p>");$("#divA span").click(function(){$(this).append($B);$(this).prepend($C);});$("button").click(function(){$(this).clone(true).css("background-color","#"+Math.floor(Math.random()*16777215).toString(16)).insertAfter(this);});});</script><style>.p{background-color: yellow;color:blue;}#divA span{ background-color: yellow; color: blue;};</style></head><body><p>p1</p><p>p2</p><p>p3</p><input type="button" value="增加文字或图片" id="btn1" /><div></div><input type="text" value="请输入用户名" id="uname"/><input type="text" value="请输入用密码" id="paw"/><div id="divA"><span>A1</span><span>A2</span><span>A3</span></div><button> clone Me</button></body></html>
节点遍历：查找
CSS-DOM操作：CSS
CSS
位置
- offset([coordinates])
- offsetParent():
- 返回最近的已经定位的祖先元素，定位元素指的是元素的css position 值被设置为relative 或absolute
- position()
- scrollTop([val])
- scrollLeft([val])
尺寸
- 第七章：表单的校验
- 表单基本验证技术：
- 无论是动态网站还是其它B/S结构的系统，都离不开表单，表单作为客户端向服务器提交数据的主要载体
- 自动选择Email文本框的内容并高亮显示，要使用jQuery中的select()方法
- $("#email").select();
$(function(){
$("#email").focus(clearText);
$("#form1").submit(function(){
return check();
});});
- 正则表达式
- var reg=/在这里写表达式/;
- 若是遇到字符串：例如要匹配输入框的内容可以使用
- var reg=new RegExp("white","匹配模式如i");
- 匹配模式：
- g:global:是否执行全局匹配，如果g被设置，则global属性值为true否则为false
- 得到一个，下次匹配时就会从这一个开始查找
- i:ignoreCase:同上
- m:multiline:是否支持多行匹配
- 电子邮箱：/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/
正则表达式速查表
字符 描述 \ 将下一个字符标记为一个特殊字符、或一个原义字符、或一个向后引用、或一个八进制转义符。例如，“ n”匹配字符“n”。“\n”匹配一个换行符。串行“\\”匹配“\”而“\(”则匹配“(”。^ 匹配输入字符串的开始位置。如果设置了RegExp对象的Multiline属性，^也匹配“ \n”或“\r”之后的位置。$ 匹配输入字符串的结束位置。如果设置了RegExp对象的Multiline属性，$也匹配“ \n”或“\r”之前的位置。* 匹配前面的子表达式零次或多次。例如，zo*能匹配“ z”以及“zoo”。*等价于{0,}。+ 匹配前面的子表达式一次或多次。例如，“ zo+”能匹配“zo”以及“zoo”，但不能匹配“z”。+等价于{1,}。? 匹配前面的子表达式零次或一次。例如，“ do(es)?”可以匹配“does”或“does”中的“do”。?等价于{0,1}。{n} n是一个非负整数。匹配确定的n次。例如，“ o{2}”不能匹配“Bob”中的“o”，但是能匹配“food”中的两个o。{n,} n是一个非负整数。至少匹配n次。例如，“ o{2,}”不能匹配“Bob”中的“o”，但能匹配“foooood”中的所有o。“o{1,}”等价于“o+”。“o{0,}”则等价于“o*”。{n,m} m和n均为非负整数，其中n<=m。最少匹配n次且最多匹配m次。例如，“ o{1,3}”将匹配“fooooood”中的前三个o。“o{0,1}”等价于“o?”。请注意在逗号和两个数之间不能有空格。? 当该字符紧跟在任何一个其他限制符（*,+,?，{n}，{n,}，{n,m}）后面时，匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串，而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如，对于字符串“ oooo”，“o+?”将匹配单个“o”，而“o+”将匹配所有“o”。. 匹配除“ \n”之外的任何单个字符。要匹配包括“\n”在内的任何字符，请使用像“(.|\n)”的模式。(pattern) 匹配pattern并获取这一匹配。所获取的匹配可以从产生的Matches集合得到，在VBScript中使用SubMatches集合，在JScript中则使用$0…$9属性。要匹配圆括号字符，请使用“ \(”或“\)”。(?:pattern) 匹配pattern但不获取匹配结果，也就是说这是一个非获取匹配，不进行存储供以后使用。这在使用或字符“ (|)”来组合一个模式的各个部分是很有用。例如“industr(?:y|ies)”就是一个比“industry|industries”更简略的表达式。(?=pattern) 正向肯定预查，在任何匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如，“ Windows(?=95|98|NT|2000)”能匹配“Windows2000”中的“Windows”，但不能匹配“Windows3.1”中的“Windows”。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始。(?!pattern) 正向否定预查，在任何不匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如“ Windows(?!95|98|NT|2000)”能匹配“Windows3.1”中的“Windows”，但不能匹配“Windows2000”中的“Windows”。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始(?<=pattern) 反向肯定预查，与正向肯定预查类拟，只是方向相反。例如，“ (?<=95|98|NT|2000)Windows”能匹配“2000Windows”中的“Windows”，但不能匹配“3.1Windows”中的“Windows”。(?<!pattern) 反向否定预查，与正向否定预查类拟，只是方向相反。例如“ (?<!95|98|NT|2000)Windows”能匹配“3.1Windows”中的“Windows”，但不能匹配“2000Windows”中的“Windows”。x|y 匹配x或y。例如，“ z|food”能匹配“z”或“food”。“(z|f)ood”则匹配“zood”或“food”。[xyz] 字符集合。匹配所包含的任意一个字符。例如，“ [abc]”可以匹配“plain”中的“a”。[^xyz] 负值字符集合。匹配未包含的任意字符。例如，“ [^abc]”可以匹配“plain”中的“p”。[a-z] 字符范围。匹配指定范围内的任意字符。例如，“ [a-z]”可以匹配“a”到“z”范围内的任意小写字母字符。[^a-z] 负值字符范围。匹配任何不在指定范围内的任意字符。例如，“ [^a-z]”可以匹配任何不在“a”到“z”范围内的任意字符。\b 匹配一个单词边界，也就是指单词和空格间的位置。例如，“ er\b”可以匹配“never”中的“er”，但不能匹配“verb”中的“er”。\B 匹配非单词边界。“ er\B”能匹配“verb”中的“er”，但不能匹配“never”中的“er”。\cx 匹配由x指明的控制字符。例如，\cM匹配一个Control-M或回车符。x的值必须为A-Z或a-z之一。否则，将c视为一个原义的“ c”字符。\d 匹配一个数字字符。等价于[0-9]。 \D 匹配一个非数字字符。等价于[^0-9]。 \f 匹配一个换页符。等价于\x0c和\cL。 \n 匹配一个换行符。等价于\x0a和\cJ。 \r 匹配一个回车符。等价于\x0d和\cM。 \s 匹配任何空白字符，包括空格、制表符、换页符等等。等价于[ \f\n\r\t\v]。 \S 匹配任何非空白字符。等价于[^ \f\n\r\t\v]。 \t 匹配一个制表符。等价于\x09和\cI。 \v 匹配一个垂直制表符。等价于\x0b和\cK。 \w 匹配包括下划线的任何单词字符。等价于“ [A-Za-z0-9_]”。\W 匹配任何非单词字符。等价于“ [^A-Za-z0-9_]”。\xn 匹配n，其中n为十六进制转义值。十六进制转义值必须为确定的两个数字长。例如，“ \x41”匹配“A”。“\x041”则等价于“\x04&1”。正则表达式中可以使用ASCII编码。.\num 匹配num，其中num是一个正整数。对所获取的匹配的引用。例如，“ (.)\1”匹配两个连续的相同字符。\n 标识一个八进制转义值或一个向后引用。如果\n之前至少n个获取的子表达式，则n为向后引用。否则，如果n为八进制数字（0-7），则n为一个八进制转义值。 \nm 标识一个八进制转义值或一个向后引用。如果\nm之前至少有nm个获得子表达式，则nm为向后引用。如果\nm之前至少有n个获取，则n为一个后跟文字m的向后引用。如果前面的条件都不满足，若n和m均为八进制数字（0-7），则\nm将匹配八进制转义值nm。 \nml 如果n为八进制数字（0-3），且m和l均为八进制数字（0-7），则匹配八进制转义值nml。 \un 匹配n，其中n是一个用四个十六进制数字表示的Unicode字符。例如，\u00A9匹配版权符号（©）。 常用正则表达式
用户名 /^[a-z0-9_-]{3,16}$/ 密码 /^[a-z0-9_-]{6,18}$/ 十六进制值 /^#?([a-f0-9]{6}|[a-f0-9]{3})$/ 电子邮箱 /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/URL /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/ IP 地址 /((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)/
/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/HTML 标签 /^<([a-z]+)([^<]+)*(?:>(.*)<\/\1>|\s+\/>)$/ 删除代码\\注释 (?<!http:|\S)//.*$ Unicode编码中的汉字范围 /^[\u2E80-\u9FFF]+$/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>新用户注册页面</title><link type="text/css" rel="stylesheet" href="css/register.css" /><script type="text/javascript" src="js/jquery-1.8.3.js"></script><script>var reg;/*验证用户名开始 */function checkUname() {$("#userName").removeClass("import_prompt");reg = /^[a-zA-Z][a-zA-Z0-9]{3,15}$/;var $uName=$("#userName");var $uNameValue=$("#userName").val();if (!reg.test($uNameValue)) {$("#userNameId").html("输入不正确!用户名4-16位，以字母开头!").removeClass("ok_prompt").addClass("error_prompt");return false;} else {$("#userNameId").html("输入正确!").addClass("ok_prompt");return true;}}/*验证用户名结束 *//* 验证密码开始 */function checkPwd() {$("#pwd").removeClass("import_prompt");reg = /^\w{6,20}$/;var $pwd=$("#pwd");var $pwdValue=$("#pwd").val();if (!reg.test($pwdValue)) {$("#pwdId").html("密码的长度必须在6-20位之间").removeClass("ok_prompt").addClass("error_prompt");return false;} else {$("#pwdId").html("输入正确!").addClass("ok_prompt");return true;}}function checkRepwd() {$("#repwd").removeClass("import_prompt");if($("#repwd").val()!=$("#pwd").val()){$("#repwdId").html("两次密码输入不一致，请重新输入").removeClass("ok_prompt").addClass("error_prompt");return false;}else if($("#repwd").val()==""){$("#repwdId").html("确认密码要填").removeClass("ok_prompt").addClass("error_prompt");return false;}else {$("#repwdId").html("输入正确!").addClass("ok_prompt");return true;}}/* 验证密码结束 *//* 验证真实姓名开始*/function checkRealName(){$("#realName").removeClass("import_prompt");if($("#realName").val()==""){$("#realNameId").html("真实姓名和昵称不能为空!").removeClass("ok_prompt").addClass("error_prompt");}else{$("#realNameId").html("输入正确!").addClass("ok_prompt");}}/* 验证真实姓名结束*//* 验证电子邮箱开始 */function checkEmail(){$("#email").removeClass("import_prompt");reg=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;var $email=$("#email");if (!reg.test($email.val())) {$("#emailId").html("邮箱格式不正确!").removeClass("ok_prompt").addClass("error_prompt");return false;} else {$("#emailId").html("输入正确!").addClass("ok_prompt");return true;}}/* 验证电子邮箱结束 *//* 验证手机号开始 */function checkTel(){$("#tel").removeClass("import_prompt");reg=/^\d{11}$/;var $cellphone=$("#tel");if (!reg.test($cellphone.val())) {$("#telId").html("手机号不是11位,请重新输入!").removeClass("ok_prompt").addClass("error_prompt");return false;} else {$("#telId").html("输入正确!").addClass("ok_prompt");return true;}}/* 验证手机号结束 */$(function(){//$("#userName").focus(function() {$("#userName").addClass("import_prompt");}).blur(checkUname);/*方法做参数不加括号 *///$("#pwd").focus(function() {$("#pwd").addClass("import_prompt");}).blur(checkPwd);//$("#repwd").focus(function() {$("#repwd").addClass("import_prompt");}).blur(checkRepwd);//$("#realName").focus(function() {$("#realName").addClass("import_prompt");}).blur(checkRealName);//$("#nickName").focus(function() {$("#nickName").addClass("import_prompt");}).blur(checkRealName);//$("#tel").focus(function() {$("#tel").addClass("import_prompt");}).blur(checkTel);//$("#email").focus(function() {$("#email").addClass("import_prompt");}).blur(checkEmail);//$(":input[type=image]").click(function(){if(checkUname()&&checkPwd()&&checkRepwd()&&checkRealName()&&checkTel()&&checkEmail()){$("#registerForm").submit();}else{alert("其中一项或多项 输入出错,无法提交注册");return false;}});});</script></head><body><div id="header"><img src="images/register_logo.gif" alt="logo"/></div><div id="main"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td class="bg bg_top_left"></td><td class="bg_top"></td><td class="bg bg_top_right"></td></tr><tr><td class="bg_left"></td><td class="content"><form id="registerForm" action="https://www.baidu.com" method="post" name="myform"><dl><dt>通行证用户名：</dt><dd><input type="text" id="userName" class="inputs userWidth"/> @163.com</dd><div id="userNameId"></div></dl><dl><dt>登录密码：</dt><dd><input type="password" id="pwd" class="inputs"/></dd><div id="pwdId"></div></dl><dl><dt>重复登录密码：</dt><dd><input type="password" id="repwd" class="inputs"/></dd><div id="repwdId"></div></dl><dl><dt>性别：</dt><dd><input name="sex" type="radio" value="" checked="checked"/>男 <input name="sex" type="radio" value="" />女 </dd></dl><dl><dt>真实姓名：</dt><dd><input type="text" id="realName" class="inputs" /></dd><div id="realNameId"></div></dl><dl><dt>昵称：</dt><dd><input type="text" id="nickName" class="inputs"/></dd><div id="nickNameId"></div></dl><dl><dt>关联手机号：</dt><dd><input type="text" id="tel" class="inputs"/></dd><div id="telId"></div></dl><dl><dt>保密邮箱：</dt><dd><input type="text" id="email" class="inputs"/></dd><div id="emailId"></div></dl><dl><dt></dt><dd><input name=" " type="image" src="images/button.gif"/></dd></dl></form></td><td class="bg_right"></td></tr><tr><td class="bg bg_end_left"></td><td class="bg_end"></td><td class="bg bg_end_right"></td></tr></table></div></body></html>
扫一扫
249
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
