javascript和html5

hnzhoujunmei

浏览: 467679 次
性别:
来自: 北京

最近访客更多访客>>

wuxia_2001

hudie7306

Adan-Chiu

寻找任大侠

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

web前端

javascript简单总结
如果要往html中的某个元素中添加text内容，obj.innerHtml=""
简单的js验证可以省略html文件中的html，head，title，body标记。
更简单的js验证可以使用javascript:URL伪协议来执行。

javascript程序是用Unicode字符集编写的，Unicode是16位的。
javascript是大小写敏感，而html不区分大小写，如属性onClick可以写成onclick，在javascript只能用onclick。
常量{x:1,y:2}为对象，[1,2,3,4]为数组

javascript只有局部变量（方法中定义的变量）和全局变量，没有块作用域的对象。
var a;
alert(a);//undefined

数值，布尔值，null和undefined属于基本类型，对象、数组和函数属于引用类型。
基本类型在内存中具有固定的大小，如数值在内存中占8个字节，数值类型是基本类型中最大的数据类型。

js中也有垃圾回收，自动进行的。

全局变量是全局对象的属性，而局部变量是一个特殊的调用对象的属性。

全局函数isNaN用于检测一个值是否是NaN。NaN与任何值都不等同，即a===NaN返回始终是false。NaN===NaN返回false。

===运算符比较两个值是否完全相等：
1，如果两个值的类型不同，不等
2，如果两个值类型为数字，而且值相同，除非有NaN，否则它们等同。
3，如果两个值类型为字符串，在同一个位置上的字符完全相同，就等同，否则不同。
4，如果两个值类型为布尔型，同为true或同为false视为等同，否则不同。
5，如果两个值引用的是同一个对象，数组或函数，那么它们等同，如果引用不同对象，即使两个对象具有完全相同的属性或值，也不等同。
6，如果两个值都是null或都是undefined，它们完全等同。
==运算符的判断规则
1，如果两个值的类型不同，则可能相等。
如果一个值是null，另一个值是undefined，它们相等。如果一个值是数字，另一个是字符串，把字符串转化为数字，再比较。
如果一个值为true，将它转化为1，为false，转化为0，再进行比较
如果一个值是对象，另一个值是数字或字符串，将对象转化成原始类型的值，再进行比较，如使用toString()或valueOf()方法

in运算符
in要求其左边的运算数是一个字符串，或可以被转化为字符串，右边的运算数是一个对象或数组。如果左边的值是右边对象的一个属性名，返回true。

instanceof运算符

typeof运算符
运算数是数字、字符串或布尔值，返回的结果为number，string，或boolean，对对象、数组和null，它返回的是object。对函数运算，返回的是function，如果运算数是未定义的，将返回undefined。

对象创建运算符new

delete运算符，删除运算数所指定的对象的属性、数组元素或变量。如果删除成功，返回true，如果不能删除，返回false。如果删除一个不存在的一个属性，将返回true。

函数定义在解析时发生，而不是在运行时发生。所以javascript中函数调用可以发生在函数定义的前面。

return语句只能出现在函数体内，return语句还可以不带参数来终止程序的执行，并不返回值。

throw语句和try/catch/finally语句都是与异常相关的语句。

with语句

创建对象，new var a=new Array();创建一个空数组

对象属性obj.atrr来引用属性
遍历对象的属性
for(var name in obj) alert(name);
检查属性的存在性，用in运算符，如判断obj对象是否有x属性，可以用if("x" in obj)来判断，但通常不用in，而是用
if(obj.x!==undefined) obj.x=1;如果查询并不存在的一个属性，会返回undefined值。注意，一个属性也可能已经存在但还是未定义，可能编写
obj.x=undefined。

删除属性，可以使用delete来删除一个对象的属性，   delete book.title。

通用的object属性和方法
1，constructor属性
每个对象都有一个constructor属性，引用了初始化这个对象的构造函数。
2，toString()方法，与java中对象的方法类似。
3，toLocaleString()方法，
4，valueOf()方法，当javascript需要把一个对象转化为某种基本数据类型，才调用的方法。
5，hasOwnProperty()方法
如果包括一个单独的字符串参数指定的名字来定义一个非继承的属性，返回为true，否则返回false。html5简单总结
html5与之前的html版本无区别的元素

<base>，规定页面中所有链接的基准 url。如
<head>
<base href="http://www.w3school.com.cn/i/" />
</head>

<blockquote> 标签定义引用。
<col> 标签为表格中的一个或多个列定义属性值。您只能在表格或列组中使用该元素。
注释：col 元素是空元素。如需创建列，必须在 tr 元素内规定 td 元素。
提示：如果需要为一个或多个列规定属性值，请使用该元素。
提示：如果需要向一个列组规定相同的属性值，请使用 <colgroup> 元素。
<dl> 标签定义一个定义列表。

html5中不支持的元素

html5不支持frame和frameset，不支持applet元素，使用<object>代替，不支持big标签，用css代替，不支持<acronym>，使用<abbr>代替，
HTML 5 中，不支持<caption>标签。请使用 CSS 代替。不支持<center>标签，
html5中的div元素不支持align属性。
<iframe> 标签创建包含另一个文档的行内框架。
在 HTML 5 中，仅仅支持 src 属性
不支持<small><big>元素

html5新增元素

不同的文档声明：html5的文档类型声明：只有一个：<!DOCTYPE HTML>。
html5新标签<article>,<aside>,<audio>(定义声音，src属性)，<canvas> 标签定义图形，比如图表和其他图像。
<command> 标签定义命令按钮，比如单选按钮、复选框或按钮。
<datagrid> 标签定义可选数据的列表。datagrid 作为树列表来显示。
<datalist> 标签定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>

<dialog> 标签定义对话，比如交谈。
<embed> 标签定义嵌入的内容，比如插件，必须有src属性
<event-source> 标签定义由服务器发送的事件的来源。
<footer> 标签定义 section 或 document 的页脚。典型地，它会包含创作者的姓名、文档的创作日期以及/或者联系信息。
<header> 标签定义 section 或 document 的页眉。
在 HTML 5 中，type 属性有很多新的值。
button
checkbox
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
submit
text
time
url
week
<video> 标签定义视频，比如电影片段或其他视频流。

<section> 标签定义文档中的节（section）。比如章节、页眉、页脚或文档中的其他部分。
javascript有用的正则表达式：

"^\d+$"　　//非负整数（正整数 + 0）
"^[0-9]*[1-9][0-9]*$" 　　//正整数
"^((-\d+)|(0+))$"　　//非正整数（负整数 + 0）
"^-[0-9]*[1-9][0-9]*$"　　//负整数
"^-?\d+$"　　　　//整数
"^\d+(\.\d+)?$"　　//非负浮点数（正浮点数 + 0）
"^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$" 　　//正浮点数
"^((-\d+(\.\d+)?)|(0+(\.0+)?))$"　　//非正浮点数（负浮点数 + 0）
"^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$" 　　//负浮点数
"^(-?\d+)(\.\d+)?$"　　//浮点数
"^[A-Za-z]+$"　　//由26个英文字母组成的字符串
"^[A-Z]+$"　　//由26个英文字母的大写组成的字符串
"^[a-z]+$"　　//由26个英文字母的小写组成的字符串
"^[A-Za-z0-9]+$" 　　//由数字和26个英文字母组成的字符串
"^\w+$"　　//由数字、26个英文字母或者下划线组成的字符串
"^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$" 　　　　//email地址
"^[a-zA-z]+://(\w+(-\w+)*)(\.(\w+(-\w+)*))*(\?\S*)?$"　　 //url
/^(d{2}|d{4})-((0([1-9]{1}))|(1[1|2]))-(([0-2]([1-9]{1}))|(3[0|1]))$/   // 年-月-日
/^((0([1-9]{1}))|(1[1|2]))/(([0-2]([1-9]{1}))|(3[0|1]))/(d{2}|d{4})$/   // 月/日/年
"^([w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$"   //Emil
/^((\+?[0-9]{2,4}\-[0-9]{3,4}\-)|([0-9]{3,4}\-))?([0-9]{7,8})(\-[0-9]+)?$/     //电话号码
"^(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5])$"   //IP地址

匹配中文字符的正则表达式： [\u4e00-\u9fa5]
匹配双字节字符(包括汉字在内)：[^\x00- \xff]
匹配空行的正则表达式：\n[\s| ]*\r
匹配HTML标记的正则表达式：/<(.*)>.*<\ /\1>|<(.*) \/>/
匹配首尾空格的正则表达式：(^\s*)|(\s*$)
匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
匹配网址URL的正则表达式：^[a-zA- z]+://(\\w+(-\\w+)*)(\\.(\\w+(-\\w+)*))*(\\?\\S*)?$
匹配帐号是否合法(字母开头，允许 5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
匹配国内电话号码：(\d{3}-| \d{4}-)?(\d{8}|\d{7})?
匹配腾讯QQ号：^[1-9]*[1-9][0-9]*$
元字符及其在正则表达式上下文中的行为：
\ 将下一个字符标记为一个特殊字符、或一个原义字符、或一个后向引用、或一个八进制转义符。
^ 匹配输入字符串的开始位置。如果设置了 RegExp 对象的Multiline 属性，^ 也匹配 ’\n’ 或 ’\r’ 之后的位置。
$ 匹配输入字符串的结束位置。如果设置了 RegExp 对象的Multiline 属性，$ 也匹配 ’\n’ 或 ’\r’ 之前的位置。
* 匹配前面的子表达式零次或多次。
+ 匹配前面的子表达式一次或多次。+ 等价于 {1,}。
? 匹配前面的子表达式零次或一次。? 等价于 {0,1}。
{n} n 是一个非负整数，匹配确定的n 次。
{n,} n 是一个非负整数，至少匹配n 次。
{n,m} m 和 n 均为非负整数，其中n <= m。最少匹配 n 次且最多匹配 m 次。在逗号和两个数之间不能有空格。
? 当该字符紧跟在任何一个其他限制符 (*, +, ?, {n}, {n,}, {n,m}) 后面时，匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串，而默认的贪婪模式则尽可能多的匹配所搜索的字符串。
. 匹配除 "\n" 之外的任何单个字符。要匹配包括 ’\n’ 在内的任何字符，请使用象 ’[.\n]’ 的模式。
(pattern) 匹配pattern 并获取这一匹配。
(?:pattern) 匹配pattern 但不获取匹配结果，也就是说这是一个非获取匹配，不进行存储供以后使用。
(?=pattern) 正向预查，在任何匹配 pattern 的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。
(?!pattern) 负向预查，与(?=pattern)作用相反
x|y 匹配 x 或 y。
[xyz] 字符集合。
[^xyz] 负值字符集合。
[a-z] 字符范围，匹配指定范围内的任意字符。
[^a-z] 负值字符范围，匹配任何不在指定范围内的任意字符。
\b 匹配一个单词边界，也就是指单词和空格间的位置。
\B 匹配非单词边界。
\cx 匹配由x指明的控制字符。
\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 为十六进制转义值。十六进制转义值必须为确定的两个数字长。
\num 匹配 num，其中num是一个正整数。对所获取的匹配的引用。
\n 标识一个八进制转义值或一个后向引用。如果 \n 之前至少 n 个获取的子表达式，则 n 为后向引用。否则，如果 n 为八进制数字 (0-7)，则 n 为一个八进制转义值。
\nm 标识一个八进制转义值或一个后向引用。如果 \nm 之前至少有is preceded by at least 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字符。
匹配中文字符的正则表达式： [u4e00-u9fa5]
匹配双字节字符(包括汉字在内)：[^x00-xff]
匹配空行的正则表达式：n[s| ]*r
匹配HTML标记的正则表达式：/<(.*)>.*</1>|<(.*) />/
匹配首尾空格的正则表达式：(^s*)|(s*$)
匹配Email地址的正则表达式：w+([-+.]w+)*@w+([-.]w+)*.w+ ([-.]w+)*
匹配网址URL的正则表达式：http://([w-]+.)+[w-]+(/[w- ./?%&=]*)?
利用正则表达式限制网页表单里的文本框输入内容：
用正则表达式限制只能输入中文：onkeyup="value=value.replace(/[^u4E00-u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^u4E00-u9FA5]/g,''))"
用正则表达式限制只能输入全角字符： onkeyup="value=value.replace(/[^uFF00-uFFFF]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^uFF00-uFFFF]/g,''))"
用正则表达式限制只能输入数字：onkeyup="value=value.replace(/[^d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^d]/g,''))"
用正则表达式限制只能输入数字和英文：onkeyup="value=value.replace(/[W]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^d]/g,''))"

整理：

匹配中文字符的正则表达式： [\u4e00-\u9fa5]
匹配双字节字符(包括汉字在内)：[^\x00-\xff]
匹配空行的正则表达式：\n[\s| ]*\r
匹配HTML标记的正则表达式：/<(.*)>.*<\/\1>|<(.*) \/>/
匹配首尾空格的正则表达式：(^\s*)|(\s*$)
匹配IP地址的正则表达式：/(\d+)\.(\d+)\. (\d+)\.(\d+)/g //
匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+ ([-.]\w+)*
匹配网址URL的正则表达式：http://(/[\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?
sql语句：^(select|drop|delete|create|update|insert).*$
1、非负整数：^\d+$
2、正整数：^[0-9]*[1-9][0-9]*$
3、非正整数：^((-\d+)|(0+))$
4、负整数：^-[0-9]*[1-9][0-9]*$

5、整数：^-?\d+$

6、非负浮点数：^\d+(\.\d+)?$

7、正浮点数：^((0-9)+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]* [1-9][0-9]*))$

8、非正浮点数：^((-\d+\.\d+)?)|(0+(\.0+)?))$

9、负浮点数：^(-((正浮点数正则式)))$

10、英文字符串：^[A-Za-z]+$

11、英文大写串：^[A-Z]+$

12、英文小写串：^[a-z]+$

13、英文字符数字串：^[A-Za-z0-9]+$

14、英数字加下划线串：^\w+$

15、 E-mail地址：^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$

16、URL：^[a-zA- Z]+://(\w+(-\w+)*)(\.(\w+(-\w+)*))*(\?\s*)?$
或：^http:\/\/[A-Za-z0-9]+ \.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$

17、邮政编码：^[1-9]\d{5}$

18、中文：^[\u0391-\uFFE5]+$

19、电话号码：^((\ (\d{2,3}\))|(\d{3}\-))?($0\d{2,3}$|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$

20、手机号码：^(($\d{2,3}$)|(\d{3}\-))?13\d{9}$

21、双字节字符(包括汉字在内)：^\x00- \xff

22、匹配首尾空格：(^\s*)|(\s*$)（像vbscript那样的trim函数）

23、匹配HTML 标记：<(.*)>.*<\/\1>|<(.*) \/>

24、匹配空行：\n[\s| ]*\r

25、提取信息中的网络链接：(h|H)(r|R)(e|E)(f|F) *= *('|")?(\w|\\|\/|\.)+('|"| *|>)?

26、提取信息中的邮件地址：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*

27、提取信息中的图片链接：(s|S)(r|R)(c|C) *= *('|")?(\w|\\|\/|\.)+('|"| *|>)?

28、提取信息中的IP地址：(\d+)\.(\d+)\.(\d+)\.(\d+)

29、提取信息中的中国手机号码：(86)*0*13\d{9}

30、提取信息中的中国固定电话号码：($\d{3,4}$|\d{3,4}-|\s)?\d{8}

31、提取信息中的中国电话号码（包括移动和固定电话）：($\d{3,4}$|\d{3,4}-|\s)?\d{7,14}

32、提取信息中的中国邮政编码：[1-9] {1}(\d+){5}

33、提取信息中的浮点数（即小数）：(-?\d*)\.?\d+

34、提取信息中的任何数字：(-?\d*)(\.\d+)?

35、IP：(\d+)\.(\d+)\.(\d+)\.(\d+)

36、电话区号：/^0\d{2,3}$/

37、腾讯QQ号：^[1-9]*[1-9][0-9]*$

38、帐号(字母开头，允许 5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$

39、中文、英文、数字及下划线：^[\u4e00-\u9fa5_a-zA-Z0-9]+$

分享到：