web前端知识点汇总

-.z.正则表达search()方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。varstr="Visitw3cschool";

varn=str.search(/w3cschool/i);replace()方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。varstr="VisitMicrosoft!";varres=str.replace(/microsoft/i,"w3cschool");Macth)方法match()方法可在字符串检索指定的值，或找到一个或多个正则表达式的匹配。页面显示的是字符串里面符合跳出来转化为数组的形式varstr='sdfe443fedef5566gg333322312dff99';varre=/\d+/g;alert(str.match(re));varstr='1b2abc1c2ee';//或者[a78]只解读其中的以为不能加空格不然会看成空格也算筛选项[^a]意思是指除了a以外都行[0-9]是指0到9中的任意一位[a-z]同样[0-9a-zA-Z]是指其中以为对于或者还有这样操作/啊哈|哈哈|哈哈/也是只或者一位varre=/1[abc]2/g;意思是指12中间有其中的一位就行\d是[0-9]的简写i不区分大小写g全局搜索正则的使用方法varre=规则string.replace(re,'')if(re.test(re))ture;//varre=/1a2|1b2|1c2/gi;alert(str.match(re));/^\s*$/匹配空行。/\d{2}-\d{5}/验证由两位数字、一个连字符再加5位数字组成的ID号。/<\s*(\S+)(\s[^>]*)">[\s\S]*<\s*\/\1\s*>/匹配HTML标记。下表包含了元字符的完整列表以及它们在正则表达式上下文中的行为：字符说明\将下一字符标记为特殊字符、文本、反向引用或八进制转义符。例如，“n〞匹配字符“n〞。“\n〞匹配换行符。序列“\\〞匹配“\〞，“\(〞匹配“(〞。^匹配输入字符串开场的位置。如果设置了

RegE*p

对象的

Multiline

属性，^还会与“\n〞或“\r〞之后的位置匹配。$匹配输入字符串结尾的位置。如果设置了

RegE*p

对象的

Multiline

属性，$还会与“\n〞或“\r〞之前的位置匹配。*零次或屡次匹配前面的字符或子表达式。例如，zo*匹配“z〞和“zoo〞。*等效于{0,}。+一次或屡次匹配前面的字符或子表达式。例如，“zo+〞与“zo〞和“zoo〞匹配，但与“z〞不匹配。+等效于{1,}。"零次或一次匹配前面的字符或子表达式。例如，“do(es)"〞匹配“do〞或“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〞在的任意字符，请使用诸如“[\s\S]〞之类的模式。(pattern)匹配

pattern

并捕获该匹配的子表达式。可以使用

$0…$9

属性从结果“匹配〞集合中检索捕获的匹配。假设要匹配括号字符()，请使用“\(〞或者“\)〞。(":pattern)匹配

pattern

但不捕获该匹配的子表达式，即它是一个非捕获匹配，不存储供以后使用的匹配。这对于用“or〞字符(|)组合模式部件的情况很有用。例如，'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〞。预测先行不占用字符，即发生匹配后，下一匹配的搜索紧随上一匹配之后，而不是在组成预测先行的字符后。*|y匹配

*

或

y。例如，'z|food'匹配“z〞或“food〞。'(z|f)ood'匹配“zood〞或“food〞。[*yz]字符集。匹配包含的任一字符。例如，“[abc]〞匹配“plain〞中的“a〞。[^*yz]反向字符集。匹配未包含的任何字符。例如，“[^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〞。\c*匹配

*

指示的控制字符。例如，\cM匹配Control-M或回车符。*

的值必须在A-Z或a-z之间。如果不是这样，则假定c就是“c〞字符本身。\d数字字符匹配。等效于[0-9]。\D非数字字符匹配。等效于[^0-9]。\f换页符匹配。等效于\*0c和\cL。\n换行符匹配。等效于\*0a和\cJ。\r匹配一个回车符。等效于\*0d和\cM。\s匹配任何空白字符，包括空格、制表符、换页符等。与[

\f\n\r\t\v]等效。\S匹配任何非空白字符。与[^

\f\n\r\t\v]等效。\t制表符匹配。与\*09和\cI等效。\v垂直制表符匹配。与\*0b和\cK等效。\w匹配任何字类字符，包括下划线。与“[A-Za-z0-9_]〞等效。\W与任何非单词字符匹配。与“[^A-Za-z0-9_]〞等效。\*n匹配

n，此处的

n

是一个十六进制转义码。十六进制转义码必须正好是两位数长。例如，“\*41〞匹配“A〞。“\*041〞与“\*04〞&“1〞等效。允许在正则表达式中使用ASCII代码。\num匹配

num，此处的

num

是一个正整数。到捕获匹配的反向引用。例如，“(.)\1〞匹配两个连续的一样字符。\n标识一个八进制转义码或反向引用。如果\n

前面至少有

n

个捕获子表达式，则

n

是反向引用。否则，如果

n

是八进制数(0-7)，则

n

是八进制转义码。\nm标识一个八进制转义码或反向引用。如果\nm

前面至少有

nm

个捕获子表达式，则

nm

是反向引用。如果\nm

前面至少有

n个捕获，则

n

是反向引用，后面跟有字符

m。如果两种前面的情况都不存在，则\nm

匹配八进制值

nm，其中

n

和

m

是八进制数字(0-7)。\nml当

n

是八进制数(0-3)，m

和

l

是八进制数(0-7)时，匹配八进制转义码

nml。\un匹配

n，其中

n

是以四位十六进制数表示的Unicode字符。例如，\u00A9匹配符号(©)。匹配中文字符的正则表达式：[u4e00-u9fa5]

评注：匹配中文还真是个头疼的事，有了这个表达式就好办了

匹配双字节字符(包括汉字在)：[^*00-*ff]

评注：可以用来计算字符串的长度〔一个双字节字符长度计2，ASCII字符计1〕

匹配空白行的正则表达式：ns*r

评注：可以用来删除空白行

匹配HTML标记的正则表达式：<(S*")[^>]*>.*"|<.*"/>

评注：网上流传的版本太糟糕，上面这个也仅仅能匹配局部，对于复杂的嵌套标记依旧

匹配首尾空白字符的正则表达式：^s*|s*$

评注：可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式

匹配Email地址的正则表达式：w+([-+.]w+)*w+([-.]w+)*.w+([-.]w+)*

评注：表单验证时很实用

匹配网址URL的正则表达式：[a-zA-z]+://[^s]*

评注：网上流传的版本功能很有限，上面这个根本可以满足需求

匹配是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$

评注：表单验证时很实用

匹配国：d{3}-d{8}|d{4}-d{7}

评注：匹配形式如0或2

匹配腾讯QQ号：[1-9][0-9]{4,}

评注：腾讯QQ号从10000开场

匹配中国邮政编码：[1-9]d{5}("!d)

评注：中国邮政编码为6位数字

匹配：d{15}|d{18}

评注：中国的为15位或18位

匹配ip地址：d+.d+.d+.d+

评注：提取ip地址时有用

匹配特定数字：

^[1-9]d*$//匹配正整数

^-[1-9]d*$//匹配负整数

^-"[1-9]d*$//匹配整数

^[1-9]d*|0$//匹配非负整数〔正整数+0〕

^-[1-9]d*|0$//匹配非正整数〔负整数+0〕

^[1-9]d*.d*|0.d*[1-9]d*$//匹配正浮点数

^-([1-9]d*.d*|0.d*[1-9]d*)$//匹配负浮点数

^-"([1-9]d*.d*|0.d*[1-9]d*|0".0+|0)$//匹配浮点数

^[1-9]d*.d*|0.d*[1-9]d*|0".0+|0$//匹配非负浮点数〔正浮点数+0〕

^(-([1-9]d*.d*|0.d*[1-9]d*))|0".0+|0$//匹配非正浮点数〔负浮点数+0〕

评注：处理大量数据时有用，具体应用时注意修正

匹配特定字符串：

^[A-Za-z]+$//匹配由26个英文字母组成的字符串

^[A-Z]+$//匹配由26个英文字母的大写组成的字符串

^[a-z]+$//匹配由26个英文字母的小写组成的字符串

^[A-Za-z0-9]+$//匹配由数字和26个英文字母组成的字符串

^w+$//匹配由数字、26个英文字母或者下划线组成的字符串

在使用RegularE*pressionValidator验证控件时的验证功能及其验证表达式介绍如下:

只能输入数字：“^[0-9]*$〞

只能输入n位的数字：“^d{n}$〞

只能输入至少n位数字：“^d{n,}$〞

只能输入m-n位的数字：“^d{m,n}$〞

只能输入零和非零开头的数字：“^(0|[1-9][0-9]*)$〞

只能输入有两位小数的正实数：“^[0-9]+(.[0-9]{2})"$〞

只能输入有1-3位小数的正实数：“^[0-9]+(.[0-9]{1,3})"$〞

只能输入非零的正整数：“^+"[1-9][0-9]*$〞

只能输入非零的负整数：“^-[1-9][0-9]*$〞

只能输入长度为3的字符：“^.{3}$〞

只能输入由26个英文字母组成的字符串：“^[A-Za-z]+$〞

只能输入由26个大写英文字母组成的字符串：“^[A-Z]+$〞

只能输入由26个小写英文字母组成的字符串：“^[a-z]+$〞

只能输入由数字和26个英文字母组成的字符串：“^[A-Za-z0-9]+$〞

只能输入由数字、26个英文字母或者下划线组成的字符串：“^w+$〞

验证用户密码:“^[a-zA-Z]w{5,17}$〞正确格式为：以字母开头，长度在6-18之间，

只能包含字符、数字和下划线。

验证是否含有^%&'',;="$"等字符：“[^%&'',;="$*22]+〞

只能输入汉字：“^[u4e00-u9fa5],{0,}$〞

验证Email地址：“^w+[-+.]w+)*w+([-.]w+)*.w+([-.]w+)*$〞

验证InternetURL：“^([w-]+.)+[w-]+(/[w-./"%&=]*)"$〞

验证：“^((d{3,4})|d{3,4}-)"d{7,8}$〞

正确格式为：“****-*******〞，“****-********〞，“***-*******〞，

“***-********〞，“*******〞，“********〞。

验证号〔15位或18位数字〕：“^d{15}|d{}18$〞

验证一年的12个月：“^(0"[1-9]|1[0-2])$〞正确格式为：“01〞-“09〞和“1〞“12〞

验证一个月的31天：“^((0"[1-9])|((1|2)[0-9])|30|31)$〞

正确格式为：“01〞“09〞和“1〞“31〞。

匹配中文字符的正则表达式：[u4e00-u9fa5]

匹配双字节字符(包括汉字在)：[^*00-*ff]

匹配空行的正则表达式：n[s|]*r

匹配HTML标记的正则表达式：/<(.*)>.*|<(.*)/>/

匹配首尾空格的正则表达式：(^s*)|(s*$)

匹配Email地址的正则表达式：w+([-+.]w+)*w+([-.]w+)*.w+([-.]w+)*

匹配网址URL的正则表达式：([w-]+.)+[w-]+(/[w-./"%&=]*)"

(1)应用：计算字符串的长度〔一个双字节字符长度计2，ASCII字符计1〕

Stotype.len=function(){returnthis.replace([^*00-*ff]/g,"aa").length;}

(2)应用：javascript中没有像vbscript那样的trim函数，我们就可以利用这个表达式来Stotype.trim=function()

{

returnthis.replace(/(^s*)|(s*$)/g,"");

}

(3)应用：利用正则表达式分解和转换IP地址

functionIP2V(ip)//IP地址转换成对应数值

{

re=/(d+).(d+).(d+).(d+)/g//匹配IP地址的正则表达式

if(re.test(ip))

{

returnRegE*p.$1*Math.pow(255,3))+RegE*p.$2*Math.pow(255,2))+RegE*p.$3*255+RegE*p.$4*1

}

else

{

thrownewError("NotavalidIPaddress!")

}

}

(4)应用：从URL地址中提取文件名的javascript程序

s=".9499.net/page1.htm";

s=s.replace(/(.*/){0,}([^.]+).*/ig,"$2");//Page1.htm

(5)应用：利用正则表达式限制网页表单里的文本框输入容

用正则表达式限制只能输入中文：onkeyup="value=value.replace(/[^u4E00-u9FA5]/g,'')"onbeforepaste="clipboardData.setData(''te*t'',clipboardData.getData(''te*t'').replace(/[^u4E00-u9FA5]/g,''))"

用正则表达式限制只能输入全角字符：onkeyup="value=value.replace(/[^uFF00-uFFFF]/g,'')"onbeforepaste="clipboardData.setData(''te*t'',clipboardData.getData(''te*t'').replace(/[^uFF00-uFFFF]/g,''))"

用正则表达式限制只能输入数字：onkeyup="value=value.replace(/[^d]/g,'')"onbeforepaste="clipboardData.setData(''te*t'',clipboardData.getData(''te*t'').replace(/[^d]/g,''))"

用正则表达式限制只能输入数字和英文：onkeyup="value=value.replace(/[W]/g,'')"onbeforepaste="clipboardData.setData(''te*t'',clipboardData.getData(''te*t'').replace(/[^d]/g,''JS框架操作一.js的数据类型和变量JavaScript有六种数据类型。主要的类型有number、string、object以及Boolean类型,其他两种类型为null和undefined。

String字符串类型:字符串是用单引号或双引号来说明的。〔使用单引号来输入包含引号的字符串。〕如：“Thecowjumpedoverthemoon.〞数值数据类型：JavaScript支持整数和浮点数。整数可以为正数、0或者负数；浮点数可以包含小数点、也可以包含一个“e〞〔大小写均可，在科学记数法中表示“10的幂〞〕、或者同时包含这两项。Boolean类型：可能的Boolean值有true和false。这是两个特殊值，不能用作1和0。Undefined数据类型：一个为undefined的值就是指在变量被创立后，但未给该变量赋值以前所具有的值。Null数据类型：null值就是没有任何值，什么也不表示。object类型：除了上面提到的各种常用类型外，对象也是JavaScript中的重要组成局部，这局部将在后面章节详细介绍。在JavaScript中变量用来存放脚本中的值，这样在需要用这个值的地方就可以用变量来代表，一个变量可以是一个数字，文本或其它一些东西。JavaScript是一种对数据类型变量要求不太严格的语言，所以不必声明每一个变量的类型，变量声明尽管不是必须的，但在使用变量之前先进展声明是一种好的习惯。可以使用var语句来进展变量声明。如：varmen=true;//men中存储的值为Boolean类型。变量命名:JavaScript是一种区分大小写的语言，因此将一个变量命名为puter和将其命名为puter是不一样的。

另外，变量名称的长度是任意的，但必须遵循以下规则：

1.第一个字符必须是一个字母〔大小写均可〕、或一个下划线(_)或一个美元符($)。

2.后续的字符可以是字母、数字、下划线或美元符。

3.变量名称不能是保存字。

二.js语句及语法JavaScript所提供的语句分为以下几大类：

1.变量声明，赋值语句：var。

语法如下：var变量名称[=初始值]

例：varputer=32//定义puter是一个变量，且有初值为32。2.函数定义语句：function，return。

语法如下：function函数名称〔函数所带的参数〕

｛

函数执行局部

｝

return表达式//return语句指明将返回的值。

例：functionsquare(*)

{

return***

}3.条件和分支语句：if...else，switch。

if...else语句完成了程序流程块中分支功能：如果其中的条件成立，则程序执行紧接着条件的语句或语句块；否则程序执行else中的语句或语句块。语法如下：if(条件)

｛

执行语句1

｝else{

执行语句2

｝

例：if(result==true)

｛

response=“你答对了！〞

｝else{

response=“你错了！〞

｝

分支语句switch可以根据一个变量的不同取值采取不同的处理方法。

语法如下：switch(e*pression)

{

caselabel1:语句串1；

caselabel2:语句串2；

caselabel3:语句串3；

...

default:语句串3；

}

如果表达式取的值同程序中提供的任何一条语句都不匹配，将执行default中的语句。4.循环语句：for，for...in，while,break,continue。

for语句的语法如下：for(初始化局部；条件局部；更新局部)

｛

执行局部...

｝

只要循环的条件成立，循环体就被反复的执行。

for...in语句与for语句有一点不同，它循环的围是一个对象所有的属性或是一个数组的所有元素。

for...in语句的语法如下：for(变量in对象或数组)

｛

语句...

}

while语句所控制的循环不断的测试条件，如果条件始终成立，则一直循环，直到条件不再成立。

语法如下：while(条件)

｛

执行语句...

}break语句完毕当前的各种循环，并执行循环的下一条语句。

continue语句完毕当前的循环，并马上开场下一个循环。5.对象操作语句：with，this，new。

with语句的语法如下：

with(对象名称){

执行语句

}

作用是这样的：如果你想使用*个对象的许多属性或方法时，只要在with语句的〔〕中写出这个对象的名称，然后在下面的执行语句中直接写这个对象的属性名或方法名就可以了。new语句是一种对象构造器，可以用new语句来定义一个新对象。

语法是这样的：新对象名称＝new真正的对象名

譬如说，我们可以这样定义一个新的日期对象：varcurr＝newDate()，然后，变量curr就具有了Date对象的属性。this运算符总是指向当前的对象。6.注释语句：//，/*...*/。

//这是单行注释

/*这可以多行注释*/

三.js对象的属性及方法.在JavaScript中是基于对象的编程，而不是完全的面向对象的编程。

那麽什麽是对象呢？如果你学过一些VB的编程，对这个名词一定不会陌生。通俗的说，对象是变量的集合体，对象提供对于数据的一致的组织手段，描述了一类事物的共同属性。在JavaScript中，可以使用以下几种对象：

1.由浏览器根据web页面的容自动提供的对象。

2.JavaScript的置对象，如Date,Math等。

3.效劳器上的固有对象。

4.用户自定义的对象。JavaScript中的对象是由属性和方法两个根本的元素的构成的。对象的属性是指对象的背风光，长度，名称等。对象的方法是指对属性所进展的操作，就是一个对象自己所属的函数，如对对象取整，使对象获得焦点，使对象获得个随机数等等一系列操作。举个例子来说，将汽车看成是一个对象，汽车的颜色，大小，品牌等叫做属性，而发动，刹车，拐弯等就叫做方法。可以采用这样的方法来访问对象的属性：对象名称.属性名称，例：myputer.year=1996，myputer.owner=“me〞。可以采用这样的方法，将对象的方法同函数联系起来：对象.方法名字=函数名字或对象.属性.方法名，例：this.display=display，document.writeln〔“thisismethod〞〕。多看或多写一些程序，就会理解对象的方法和属性的含义了！

四.js事件的处理事件是浏览器响应用户交互操作的一种机制，JavaScript的事件处理机制可以改变浏览器响应用户操作的方式，这样就开发出具有交互性，并易于使用的网页。浏览器为了响应*个事件而进展的处理过程，叫做事件处理。事件定义了用户与页面交互时产生的各种操作，例如单击超级连接或按钮时，就产生一个单击〔click〕操作事件。浏览器在程序运行的大局部时间都等待交互事件的发生，并在事件发生时，自动调用事件处理函数，完成事件处理过程。事件不仅可以在用户交互过程中产生，而且浏览器自己的一些动作也可以产生事件，例：当载入一个页面时，就会发生load事件，卸载一个页面时，就会发生unload事件等。归纳起来，必需使用的事件有三大类：

1.引起页面之间跳转的事件，主要是超连接事件。

2.事件浏览器自己引起的事件。

3.事件在表单部同界面对象的交互。另：Javascript根底

一、变量

var

myBook;

myBook=5;

变量名要求以字母或_打头，不能含有空格

常见的类型有：字符串，数值，布尔和对象类型。

var

num=6

b=(3>5)

false

true

二、表达式与操作符

1、比拟操作符

==

!=

>

<

>=

<=

2、运算操作符

+

-

*

/

%

++

--3、逻辑操作符

与&&，或||

，非!

4、位操作符

&

|

^〔异或〕

~

<<

>>

>>>(填0右移操作符)

5、赋值操作符

=

+=

-=

*=

/=

&=

|=

^=

<<=

>>=

>>>=6、其它操作符

条件操作符：(条件)？值1：值2

a=5

b=6

c=(a>b)"a-b:a+b

new操作符

var

=new

Array("Zhang","Li","wang","Chen")

[2]

delete操作符delete[2]

7、

三、语句

1、条件语句

〔1〕if……else

if

(mark>60)

s="pass"

else

s="fail"

〔2〕tch

case

标签1：代码块1；break;

case

标签2：代码块2；break;

…………

case

标签n：代码块n；break;

default:缺省代码块；

}

〔3〕

2、循环语句

〔1〕for语句

for〔初始表达式;循环条件;递增表达式〕

{

代码块

}

〔2〕while语句

while〔循环条件〕

{代码块}

〔3〕do……while语句

do{

代码块

}while〔循环条件〕〔4〕label语句

label：代码块

〔5〕break语句

跳出循环语句或tch

break

label

跳出label标识的代码块〔6〕

3、其他语句

〔1〕for……in语句

[forin.htm]

for(变量

in对象){

代码块

}

〔2〕with〔对象〕{

代码块

}

〔3〕注释

//注释一行

/*

*/〔4〕return

4、

四、函数

1、函数的定义

function

函数名〔参数列表〕

{

代码块

}--

111

--

发布时间：2004-12-31:31:00

--

2、函数的调用

函数名〔参数列表〕

3、javascript的全局函数

〔1〕eval〔字符串〕

执行该字符串

〔2〕

parseInt〔字符串，[基数]〕

parseFloat〔字符串〕

vars="3.14"

varj=parseInt(s)

vark=parseFloat(s)

parseInt("2B",16)=

〔3〕isNaN〔表达式〕：不是数字

〔4〕Number〔对象〕和String〔对象〕

Varn=newNumber(20)

document.write(n.toString(16))

〔5〕Escape〔字符串〕和unescape〔字符串〕将消息串格式转换为ASC码格式

4、方法

〔1〕滚动窗口scroll()

scroll(*,y)：移至窗口*一点，左上角为0,0

[winscroll.htm]

〔2〕设置延迟setTimeout〔"表达式"，时间〕时间：以毫秒为单位

〔3〕去除延迟clearTimeout〔"延迟号"〕

如：id=setTimeout("disp()",1000)

clearTimeout(id)

〔4〕五、Javascript中的对象

1、建立自定义对象

方法1：对象={属性1：属性值1，属性2：属性值2……属性n：属性值n}

方法2：先定义构造函数，再new创立对象实例。

如：functioncar(thecolor,thenumber,thewheels)

{this.color=thecolor;

this.number=thenumber;

this.wheels=thewheels;

}

var

mycar=newcar("RED","13245",4);

2、定义对象的方法

[oop.htm]

functionReportInfo()

{varinformation=newstring;

information="color:"+this.color+"<BR>";

information+="Number:"+this.Number+"<BR>";

information+="Wheels"+this.wheels;

window.document.write(information);

}3、javascript核心语言对象

〔1〕数组对象〔Array〕

建立数组：varst=newArray("zhang","wang","li","chen");

varst1=newArray(4)

访问数组元素：st[2]

数组对象的属性length(长度)

[forin.htm]

方法sort()

按ASCII码排序

sort([比拟函数名])

[sort.htm]

比拟函数返回值(a与b比拟)

<0

b排在a的前面

=0

保持原来次序

>0

a排在b的前面

reverse()

元素颠倒顺序

join(分隔符)转换成字符串

〔2〕字符串对象〔String〕

属性：length

方法：toUpperCase()

转换为大写字母

toLowerCase()

转换为小写字母

inde*Of(字符串，起始位置)

返回子字符串在字符串中的位置，假设没有，则为-1

LastInde*Of(字符串，起始位置)返回子字符串在字符串中最后的位置

charAt(位置)

返回字符串中下标位置的字母

substring〔位置1，位置2〕返回位置1，位置2间字符串

split(分界符)按分界符的分解成数组元素

以下的为格式化字符串方法[str.htm]

big()

blink()

bold()

fi*ed()

fontcolor()

fontsize()

italics()small()

strike()

sub()

sup()--

111

--

发布时间：2004-12-31:31:00

--

〔3〕日期对象〔Date〕

创立日期对象

var

对象名称=newDate(参数)

var

theDate=new

Date()

var

theDate=new

Date(1999,1,1)

方法：getYear()

getMonth()

getDate()

getHours()

getMinutes()

getSeconds()

setYear(年份)

setMonth(月份)

setDate(日期)

setHours(小时数)

setMinutes(分钟数)

setSeconds(秒数)

getTime(毫秒数)获得1970年1月1日0时0分0秒开场的豪秒

setTime(毫秒数)

〔4〕数学对象〔Math〕

属性：PI圆周率

3.14159265

SQRT2

2的平方根

1.414

LN2

2的自然对数

0.693147

E2.9

LN10

10的自然对数2.302585

LOG2E以2为底E的对数

1.442695

LOG10E以10为底E的对数0.4342944819

SQRT1-2

0.5的平方根

0.7071

方法：min(值1，值2)

ma*(值1，值2)

round(数值)

四舍五入

ceil(数值)

返回>=参数的最小整数负值取0〔向上取整〕

floor(数值)

截尾取整〔向下取整〕

random()

0-1的随机数

sqrt(数值)

返回数值的平方根

abs(数值)

取绝对值

acos(数值)

arccos反余弦

asin(数值)

反正弦

atan(数值)

反正切

cos(数值)

余弦

sin(数值)

正弦

tan(数值)

正切

atan(*,y)

计算极角，夹在*正半轴与*,y间的角

pow(*,y)

*的Y次幂

log(*)

*的自然对数

e*p(*)

E的*次方JQ框架操作Dom：Attribute：

$("p").addClass(css中定义的样式类型);

给*个元素添加样式

$("img").attr({src:"test.jpg",alt:"testImage"});

给*个元素添加属性/值，参数是map

$("img").attr("src","test.jpg");

给*个元素添加属性/值

$("img").attr("title",function(){returnthis.src});

给*个元素添加属性/值

$("元素名称").html();

获得该元素的容〔元素，文本等〕

$("元素名称").html("<b>newstuff</b>");

给*元素设置容

$("元素名称").removeAttr("属性名称")

给*元素删除指定的属性以及该属性的值

$("元素名称").removeClass("class")

给*元素删除指定的样式

$("元素名称").te*t();

获得该元素的文本

$("元素名称").te*t(value);

设置该元素的文本值为value

$("元素名称").toggleClass(class)

当元素存在参数中的样式的时候取消,如果不存在就设置此样式

$("input元素名称").val();

获取input元素的值

$("input元素名称").val(value);

设置input元素的值为value

Manipulation：

$("元素名称").after(content);

在匹配元素后面添加容

$("元素名称").append(content);

将content作为元素的容插入到该元素的后面

$("元素名称").appendTo(content);

在content后接元素

$("元素名称").before(content);

与after方法相反

$("元素名称").clone(布尔表达式)

当布尔表达式为真时，克隆元素〔无参时，当作true处理〕

$("元素名称").empty()

将该元素的容设置为空

$("元素名称").insertAfter(content);

将该元素插入到content之后

$("元素名称").insertBefore(content);

将该元素插入到content之前

$("元素").prepend(content);

将content作为该元素的一局部，放到该元素的最前面

$("元素").prependTo(content);

将该元素作为content的一局部，放content的最前面

$("元素").remove();

删除所有的指定元素

$("元素").remove("e*p");

删除所有含有e*p的元素

$("元素").wrap("html");

用html来包围该元素

$("元素").wrap(element);

用element来包围该元素

Traversing：

add(e*pr)

add(html)

add(elements)

children(e*pr)

contains(str)

end()

filter(e*pression)

filter(filter)

find(e*pr)

is(e*pr)

ne*t(e*pr)

not(el)

not(e*pr)

not(elems)

parent(e*pr)

parents(e*pr)

prev(e*pr)

siblings(e*pr)Core：

$(html).appendTo("body")

相当于在body中写了一段html代码

$(elems)

获得DOM上的*个元素

$(function(){……..});

执行一个函数

$("div>p").css("border","1p*solidgray");

查找所有div的子节点p，添加样式

$("input:radio",document.forms[0])

在当前页面的第一个表单中查找所有的单项选择按钮

$.e*tend(prop)prop是一个jQuery对象，

举例：

jQuery.e*tend({

min:function(a,b){returna<b"a:b;},

ma*:function(a,b){returna>b"a:b;}

});

jQuery(e*pression,[conte*t])$(e*pression,[conte*t]);

在默认情况下，$()查询的是当前HTML文档中的DOM元素。each(callback)

以每一个匹配的元素作为上下文来执行一个函数

举例：1

$("span").click(function){

$("li").each(function(){

$(this).toggleClass("e*ample");

});

});

举例：2

$("button").click(function(){

$("div").each(function(inde*,domEle){

//domEle==this

$(domEle).css("backgroundColor","yellow");

if($(this).is("*stop")){

$("span").te*t("Stoppedatdivinde**"+inde*);

returnfalse;

}

});

});

jQueryEvent:ready(fn);$(document).ready()注意在body中没有onload事件，否则该函数不能执行。在每个页面中可以

有很多个函数被加载执行，按照fn的顺序来执行。

bind(type,[data],fn)

为每一个匹配元素的特定事件〔像click〕绑定一个或多个事件处理器函数。可能的事件属性有：blur,focus,load,resize,scroll,unload,click,dblclick,mousedown,mouseup,mousemove,

mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,

keyup,error

one(type,[data],fn)

为每一个匹配元素的特定事件〔像click〕绑定一个或多个事件处理器函数。在每个对

象上，这个事件处理函数只会被执行一次。其他规则与bind()函数一样。trigger(type,[data])

在每一个匹配的元素上触发*类事件。

triggerHandler(type,[data])

这一特定方法会触发一个元素上特定的事件(指定一个事件类型)，同时取消浏览器对此事件的默认行动

unbind([type],[data])

反绑定，从每一个匹配的元素中删除绑定的事件。

$("p").unbind()

移除所有段落上的所有绑定的事件

$("p").unbind("click")

移除所有段落上的click事件

hover(over,out)over,out都是方法,

当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。

$("p").hover(function(){

$(this).addClass("over");

},

function(){

$(this).addClass("out");

}

);toggle(fn,fn)

如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。

$("p").toggle(function(){

$(this).addClass("selected");

},

function(){

$(this).removeClass("selected");

}

);

元素事件列表说明

注：不带参数的函数，其参数为可选的

fn。jQuery不支持form元素的reset事件。

事件描述支持元素或对象

blur()

元素失去焦点

a,input,te*tarea,button,select,label,map,area

change()

用户改变域的容

input,te*tarea,select

click()

鼠标点击*个对象几乎所有元素

dblclick()

鼠标双击*个对象几乎所有元素

error()

当加载文档或图像时发生*个错误

window,img

focus()

元素获得焦点

a,input,te*tarea,button,select,label,map,area

keydown()

*个键盘的键被按下几乎所有元素

keypress()

*个键盘的键被按下或按住几乎所有元素

keyup()

*个键盘的键被松开几乎所有元素

load(fn)

*个页面或图像被完成加载

window,img

mousedown(fn)

*个鼠标按键被按下几乎所有元素

mousemove(fn)

鼠标被移动几乎所有元素

mouseout(fn)

鼠标从*元素移开几乎所有元素

mouseover(fn)

鼠标被移到*元素之上几乎所有元素

mouseup(fn)

*个鼠标按键被松开几乎所有元素

resize(fn)

窗口或框架被调整尺寸

window,iframe,frame

scroll(fn)

滚动文档的可视局部时

window

select()

文本被选定

document,input,te*tarea

submit()

提交按钮被点击

form

unload(fn)

用户退出页面

windowJQueryAja*

方法说明:load(url,[data],[callback])

装入一个远程HTML容到一个DOM结点。

$("*feeds").load("feeds.html");

将feeds.html文件载入到id为feeds的div中

$("*feeds").load("feeds.php",{limit:25},function(){

alert("Thelast25entriesinthefeedhavebeenloaded");

});jQuery.get(url,[data],[callback])

使用GET请求一个页面。

$.get("test.cgi",{name:"John",time:"2pm"},function(data){

alert("DataLoaded:"+data);

});jQuery.getJSON(url,[data],[callback])

使用GET请求JSON数据。

$.getJSON("test.js",{name:"John",time:"2pm"},function(json){

alert("JSONData:"+json.users[3].name);

});jQuery.getScript(url,[callback])

使用GET请求JavaScript文件并执行。

$.getScript("test.js",function(){

alert("Scriptloadedande*ecuted.");

});

jQuery.post(url,[data],[callback],[type])

使用POST请求一个页面。aja*plete(callback)

当一个AJA*请求完毕后，执行一个函数。这是一个Aja*事件

$("*msg").aja*plete(function(request,settings){

$(this).append("<li>Requestplete.</li>");

});

aja*Error(callback)

当一个AJA*请求失败后，执行一个函数。这是一个Aja*事件

$("*msg").aja*Error(function(request,settings){

$(this).append("<li>Errorrequestingpage"+settings.url+"</li>");

});aja*Send(callback)

在一个AJA*请求发送时，执行一个函数。这是一个Aja*事件

$("*msg").aja*Send(function(evt,request,settings){

$(this).append("<li<Startingrequestat"+settings.url

+"</li<");

});aja*Start(callback)

在一个AJA*请求开场但还没有激活时，执行一个函数。这是一个Aja*事件

当AJA*请求开场(并还没有激活时)显示loading信息

$("*loading").aja*Start(function(){

$(this).show();

});aja*Stop(callback)

当所有的AJA*都停顿时，执行一个函数。这是一个Aja*事件

当所有AJA*请求都停顿时，隐藏loading信息。

$("*loading").aja*Stop(function(){

$(this).hide();

});aja*Success(callback)

当一个AJA*请求成功完成后，执行一个函数。这是一个Aja*事件

当AJA*请求成功完成时，显示信息。

$("*msg").aja*Success(function(evt,request,settings){

$(this).append("<li>SuccessfulRequest!</li>");

});jQuery.aja*Setup(options)

为所有的AJA*请求进展全局设置。查看$.aja*函数取得所有选项信息。

设置默认的全局AJA*请求选项。

$.aja*Setup({

url:"/*ml/",

global:false,

type:"POST"

});

$.aja*({data:myData});serialize()

以名称和值的方式连接一组input元素。实现了正确表单元素序列

functionshowValues(){

varstr=$("form").serialize();

$("*results").te*t(str);

}

$(":checkbo*,:radio").click(showValues);

$("select").change(showValues);

showValues();serializeArray()

连接所有的表单和表单元素(类似于.serialize()方法)，但是返回一个JSON数据格式。

从form中取得一组值，显示出来

functionshowValues(){

varfields=$(":input").serializeArray();

alert(fields);

$("*results").empty();

jQuery.each(fields,function(i,field){

$("*results").append(field.value+"");

});

}

$(":checkbo*,:radio").click(showValues);

$("select").change(showValues);

showValues();JQueryEffects

方法说明show()

显示隐藏的匹配元素。

show(speed,[callback])

以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。

hide()

隐藏所有的匹配元素。

hide(speed,[callback])

以优雅的动画隐藏所有匹配的元素，并在显示完成后可选地触发一个回调函数

toggle()

切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，

切换为可见的。

slideDown(speed,[callback])

通过高度变化〔向下增大〕来动态地显示所有匹配的元素，在显示完成后可选

地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以

"滑动"的方式显示出来。

slideUp(speed,[callback])

通过高度变化〔向上减小〕来动态地隐藏所有匹配的元素，在隐藏完成后可选地

触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以"滑动"

的方式隐藏起来。

slideToggle(speed,[callback])

通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回

调函数。这个动画效果只调整元素的高度，可以使匹配的元素以"滑动"的方式隐

藏或显示。

fadeIn(speed,[callback])

通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触

发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的

高度和宽度不会发生变化。

fadeOut(speed,[callback])

通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触

发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的

高度和宽度不会发生变化。

fadeTo(speed,opacity,[callback])

把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成

后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所

有匹配的元素的高度和宽度不会发生变化。

stop()

停顿所有匹配元素当前正在运行的动画。如果有动画处于队列当中，他们就会立即开场。

queue()

取得第一个匹配元素的动画序列的引用(返回一个容为函数的数组)

queue(callback)

在每一个匹配元素的事件序列的末尾添加一个可执行函数，作为此元素的事件函数

queue(queue)

以一个新的动画序列代替所有匹配元素的原动画序列

dequeue()

执行并移除动画序列前端的动画

animate(params,[duration],[easing],[callback])

用于创立自定义动画的函数。

animate(params,options)

创立自定义动画的另一个方法。作用同上。

JQueryTraversing

方法说明eq(inde*)

从匹配的元素集合中取得一个指定位置的元素，inde*从0开场

filter(e*pr)

返回与指定表达式匹配的元素集合，可以使用","号分割多个e*pr，用于实现多个条件筛选

filter(fn)

利用一个特殊的函数来作为筛选条件移除集合中不匹配的元素。

is(e*pr)

用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的

表达式就返回true。

map(callback)

将jQuery对象中的一组元素利用callback方法转换其值，然后添加到一个jQuery数组中。

not(e*pr)

从匹配的元素集合中删除与指定的表达式匹配的元素。

slice(start,[end])

从匹配元素集合中取得一个子集，和建的数组的slice方法一样。

add(e*pr)

把与表达式匹配的元素添加到jQuery对象中。

children([e*pr])

取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。可选的过滤器

将使这个方法只匹配符合的元素(只包括元素节点，不包括文本节点)。

contents()

取得一个包含匹配的元素集合中每一个元素的所有子节点的集合(只包括元素节点，不

包括文本节点)，如果元素为iframe，则取得其中的文档元素

find(e*pr)

搜索所有与指定表达式匹配的元素。

ne*t([e*pr])

取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

ne*tAll([e*pr])

取得一个包含匹配的元素集合中每一个元素所有的后面同辈元素的元素集合

parent([e*pr])

取得一个包含着所有匹配元素的唯一父元素的元素集合。

parents([e*pr])

取得一个包含着所有匹配元素的唯一祖先元素的元素集合〔不包含根元素〕。

prev([e*pr])

取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。

prevAll([e*pr])

取得一个包含匹配的元素集合中每一个元素的之前所有同辈元素的元素集合。

siblings([e*pr])

取得一个包含匹配的元素集合中每一个元素的所有同辈元素的元素集合。

andSelf()

将前一个匹配的元素集合添加到当前的集合中

取得所有div元素和其中的p元素，添加border类属性。取得所有div元素中的p元素，

添加background类属性

$("div").find("p").andSelf().addClass("border");

$("div").find("p").addClass("background");

end()

完毕当前的操作，回到当前操作的前一个操作

找到所有p元素其中的span元素集合，然后返回p元素集合，添加css属性

$("p").find("span").end().css("border","2p*redsolid");JQuerySelectors

方法说明根本选择器

$("*myDiv")

匹配唯一的具有此id值的元素

$("div")

匹配指定名称的所有元素

$(".myClass")

匹配具有此class样式值的所有元素

$("*")

匹配所有元素

$("div,span,p.myClass")

联合所有匹配的选择器

层叠选择器

$("forminput")

后代选择器，选择ancestor的所有子节点

$("*main>*")

子选择器，选择parent的所有子节点

$("label+input")

临选择器，选择prev的下一个临节点

$("*prev~div")

同胞选择器，选择prev的所有同胞节点

根本过滤选择器

$("tr:first")

匹配第一个选择的元素

$("tr:last")

匹配最后一个选择的元素

$("input:not(:checked)+span")从原元素集合中过滤掉匹配selector的所有元素〔这里有是一个临选择器〕

$("tr:even")

匹配集合中偶数位置的所有元素(从0开场)

$("tr:odd")

匹配集合中奇数位置的所有元素(从0开场)

$("td:eq(2)")

匹配集合中指定位置的元素(从0开场)

$("td:gt(4)")

匹配集合中指定位置之后的所有元素(从0开场)

$("td:gl(4)")

匹配集合中指定位置之前的所有元素(从0开场)

$(":header")

匹配所有标题

$("div:animated")

匹配所有正在运行动画的所有元素

容过滤选择器

$("div:contains('John')")

匹配含有指定文本的所有元素

$("td:empty")

匹配所有空元素(只含有文本的元素不算空元素)

$("div:has(p)")

从原元素集合中再次匹配所有至少含有一个selector的所有元素

$("td:parent")

匹配所有不为空的元素(含有文本的元素也算)

$("div:hidden")

匹配所有隐藏的元素，也包括表单的隐藏域

$("div:visible")

匹配所有可见的元素

属性过滤选择器

$("div[id]")

匹配所有具有指定属性的元素

$("input[name='newsletter']")

匹配所有具有指定属性值的元素

$("input[name!='newsletter']")

匹配所有不具有指定属性值的元素

$("input[name^='news']")

匹配所有指定属性值以value开头的元素

$("input[name$='letter']")

匹配所有指定属性值以value结尾的元素

$("input[name*='man']")

匹配所有指定属性值含有value字符的元素

$("input[id][name$='man']")

匹配同时符合多个选择器的所有元素

子元素过滤选择器

$("ulli:nth-child(2)"),

$("ulli:nth-child(odd)"),

匹配父元素的第n个子元素

$("ulli:nth-child(3n+1)")$("div