以下内容为学习毕向东HTML_CSS_JavaScript视频教程时做的笔记
网页显示版面有些乱 下载原笔记
HTML
HTML:(Hype Text Markup Language)超文本标记语言,是最基本的网页语言。代码由标签组成,不区分大小写。
由<html>开始,</html>结束,分头部分(head)和体部分(body),头部分用于给页面增加一些辅助或属性信息,最先加载。体部分是真正存放页面数据的地方。
属性和属性值用“=”连接,属性值可加双引号、单引号或不加引号。
标签相当于一个容器,数据存放在容器里,对数据操作,就是在修改容器的属性值。
字体标签:<font size=”5” color=”red”>文字</font>
color属性可用颜色单词,也可用“#FFFFFF”:井号加十六进制数据表示,红绿蓝
标题标签:<h1>文字</h1> 共有6级标题
水平线标签:<hr color=”red” size=”5”/> size属性指定水平线粗细
特殊符号:
大于号> | 小于号< | 与符号& | 双引号” | 空格 | 注册符® | 版权符© | TM符™ |
< | > | & | " | | ® | © | ™ |
列表和项目符号标签:
定义列表<dl> </dl> | 数字标签<ol> </ol> | 符号标签<ul> </ul> | |
<dl>定义列表DefinedList <dt>定义项目 <dd>具体项目</dd> <dd>具体项目</dd> </dt> </dl> 自动缩进效果 | 具体项目内容用<li></li>封装 自动缩进 | ||
默认数字样式 可用type修改:a A I i 1 Start属性指定起始号码 | 默认样式空心圆circle disc实心圆 square黑方块 可用CSS自定义符号 |
注释标签:<!—注释内容-->
图像标签:<img src=”../dir/file” alt=”说明文字” height width border/>
src属性中可用两个点(../)代表上层目录
alt属性中的说明文字在鼠标悬停和图片加载失败时显示
图像地图:用<img>封装好图像后,切换到DW设计视图,在属性中选择热点区域形状并在图像上拖动出一块热点区域,用热点区域链接某个资源。在页面中点击热点区域就会跳转到相应资源。
表格标签:<table><tr><td></td></tr></table>
<table border=”边框粗细” bordercolor cellpadding=”单元格中数据与单元格边框间距” cellspacing=”单元格与单元格间距 0两线并为一线” width=’固定像素值或相对页面百分比’> cellspacing=0两线并成一线但显示出来粗,用CSS中border-collapse两线重叠看起来就是一条线
<table>标签内<caption></caption>给表格加标题,是表格的一部分
<td colspan=2>行占两列 | |
|
|
<td rowspan=2>列占两行第一行第一个单元格 | 第一行第二个 |
第二行只有一个 |
table标签中默认都有一个tbody标签 thead、tbody、tfoot
浏览页面时,浏览器解析由table标签封装的页面数据时,读到</table>表格结束标记才会显示数据,若封装页面数据的表格很大,没读到结束标记就不显示任何数据,用户体验不佳,所以将表格分为多个部分,读一个</tbody>就显示一部分。用tbody将表格分体
超链接标签:<a href=”http://www.xxx.cn” >文字</a>
点击一个超链接做了什么?首先启动相应的协议解析引擎,访问本机hosts文件,查找对应主机IP,未找到再请求网络DNS服务器获取对应IP,用IP访问指定主机。
href属性,可以指定协议,mailto:abc@qq.com?subject=”邮件主题”&cc=”抄送地址”
mailto thunder…… 不指定协议默认启动文件协议解析
href=www.baidu.com 默认使用file协议打开的是一个本地文件并不是主机地址
超链接实现页面内跳转:定位标记、锚
<a name=”top”>顶部位置</a>
用a标签的name属性为当前位置指定一个名字,不使用href属性
…很多页面内容…
在适当位置用a标签链接到指定名字的位置 用#标示当前页面
<a href=”#top”>回到顶部位置</a>
target属性指定页面打开方式,默认在当前页面内打开,_blank新窗口打开
title属性:当鼠标悬停在文字上时显示的文字内容
表单标签:用于与服务端交互
<form action=”表单提交目的地” method=”表单提交方式”></form>
form标签内的组件:input接收用户输入数据 select下拉列表 textarea文本区域
<input type=”text” name=”user” value=”zhangsan” />
input标签内要指定name属性,服务端才能获取到对应的value
input内包含的组件类型通过type指定:
text文本框 password密码框
radio单选框 属于同一组的选择框name属性要一致,不然单选框不能实现单选
checkbox复选框 分组同单选框 单选框不加属性时还不让你选
file 提供一个文件浏览按钮,多用于上传文件
hidden 隐藏组件,不需用户看到但服务端要用到,可通过JavaScript将其值在用户端运算后再提交至服务端使用
button 按钮通过onclick方法添加事件监听
reset 重置按钮 submit 提交按钮
image 和submit一样,但可通过src属性指定一个图片充当按钮美化效果
<select>选择列表,默认单选下拉式 设定multiple属性使选项全部列出,无下拉效果
size属性指定显示多少项,显示不完出现滚动条
通过<option></option>标签封装列表项
<textarea cols=”” rows=””> 文本区域可指定行数和列数
<fieleset>区域设置,可给form加外框 外框上的文字可用legend标签指定
form中的method指定提交方式,有7中,常用get和post
用Java自定义服务端与form交互 查看数据提交不同之处
get提交:信息显示在地址栏中,敏感信息泄露,不安全;
地址栏存储信息量有限,不利于大数据量提交;
将信息封装在消息头前边;
提交至服务端的中文乱码需要再次编码后再解码
post:地址栏上不显示提交的信息,避免信息泄露,安全;
提交数据量无限制,方便大数据提交;
将信息封装在消息头后边(空行后)的数据体中;
中文乱码可通过设定字符集方法简单搞定
Tomcat服务端默认使用的iso8859编码,两种提交方式提交中文时,服务端会显示乱码,需要在服务端使用指定字符集解码,request.setCharacterEncoding(“GBK”)但设定字符集方法只对数据体中的数据有效,get方式提交的信息封装在消息头中,不能使用这种方法。但可以通过先用iso8859编码再GBK解码的方式解决。推荐使用post方式提交。
暴力提交、暴力注册
<a href=”http://注册地址?name=value&id=value......”>暴力开始</a>
超链接默认就是get方式提交
客户端首先进行数据有效性校验,服务端对客户端提交的数据必须再次校验
label标签:用于给各元素定义快捷键
for属性指定快捷键起作用的表单元素,其值必须与该表单元素的id值相同
accessKey指定快捷键,要与Alt合用
例:<label for=”user” accessKey=”u”>user name</label>
<input type=”text” id=”user” />
label使用技巧:
将label标签加到tr标签上,for属性指向该tr里的文本框,在这行的任意位置点击鼠标,文本框都将获得焦点。
其他标签:
<pre></pre>此标签内封装的文本数据格式将保持原样,包括空格和缩进等格式。常用于页面中显示带有缩进层次的代码。
<p></p>段落标签,两个段落之间带有空行
<b>加粗 <strong>加粗 <i>斜体 <u>下划线 <sub>下标 <sup>上标
<marquee direction=”left/right/down/up” behavior=”scroll/alternate/slide”>
此标签内可以让内容动起来,scroll滚动穿过/alternate来回弹/slide一下摔死
框架集frameset标签:将浏览器页面分成多个独立的部分,分别显示不同的页面
放在head和body之间 frameset分割页面 frame指定小页面内容
<frameset rows=”30%, *” frameborder=”yes” border=”1” framespacing=”0”>
<frame src=”1.html” noresize=”noresize” />
<frame src=”2.html” noresize=”noresize” />
</frameset>
frameset中用rows和cols属性指定分割页面大小区域,可用百分比也可用像素值
frame中的noresize属性使框架页面大小不可随意改动
frame中添加的超链接默认都是在当前框架页面内打开的,要让其在当前窗口中的其他框架页面中打开,需要将框架页面添加一个name属性,让超链接的target属性值等于这个框架页面的name属性即可
iframe画中画标签:直接在当前页面中挖出一个区域,显示指定页面内容
<iframe src=”1.html” width=30 height=50>画中画标签说明文字,这些文字在浏览器不支持iframe标签时显示</iframe>
画中画标签具有一定的危险性,可能被用于隐藏执行一些恶意的代码
如:<iframe src=”1.js” height=0 width=0>
头标签<head>内的一些标签:<title></title> <base /> <meta /> <link />
title:页面标题,显示在浏览器标题栏上的文字
base:href指定页面中所有超链接的目录,可本地,也可网络,结尾一定要用斜杠/表示
目录,只作用于相对路径文件。 target指定打开方式
meta: <meta name=”keywords” content=”电影,视频,关键字……” />
<meta http-equiv=”refresh” content=”3, url=http://www.xxx.com” />
http-equiv:模拟HTTP协议响应消息头,3秒后刷新,打开指定网页
link:给HTML关联一些文件,如CSS,JS等
<link rel=”stylesheet” href=”1.css” media=”print/screen”>
rel指定关联文件与HTML的关系 media指定文件作用的设备,多个设备斜杠分隔
XHTML是可扩展的(Extensible)超文本标记语言,可理解为HTML向XML的过渡。
XML是可扩展标记语言,是对数据信息的描述,而HTML是对数据显示的描述。XML规定更为严格,如标签不结束即错误。XML规范可被更多应用程序解释,将成为一种通用的数据交换语言,各个服务器、框架都将XML作为配置文件。
Dreamweaver创建HTML文件自动生成的头部信息中,又一个规范约束文件(.dtd),描述一些标签信息,由此文件来约束标签的自动闭合,删除这些头部信息后,DW中输入标签将不会自动闭合。前边的网址并不代表此文件要从网络获取,只表示名称空间,可自定义。
正则表达式
正则表达式:是一种专门用来操作字符串的规则,通过一些符号来表示某些程序代码,简化对字符串的复杂操作,但可读性较差。
常见操作:匹配、获取/查找、切割、替换
匹配:String类中的matches方法 matches(regex)
获取(查找):Pattern+Matcher
Pattern p = Pattern.compile(regex); 封装规则
Matcher m = p.matcher(String); 关联字符串,获取对应匹配器
while (m.find()) 查找是否包含有指定规则的字符串
{
SOP(m.group()); 输出符合规则的内容
}
切割:String中的split() spilt(regex)实现复杂切割(连词、叠词)
替换:replaceAll(regex, str);
示例:获取连续数字
String regex = “\\d{5,}”; 5个以上的连续数字符合规则
Pattern p = Pattern.compile(regex);
Matcher m = p.matcher(String);
while (m.find())
{
String s = m.group();
SOP(s.replaceAll(regex, “#”)); 将符合规则的数据替换掉
}
网页爬虫:通过网络以及IO读取网页源文件,并通过规则获取网页中符合规则的数据。
常用的一些正则符号:
?零次或一次 *零次或多次 +一次或多次
{n}正好n次 {n,}最少n次 {n,m}最少n次,最多m次
点.表示任意字符 \d任意数字 \w字母数字下划线
注意转义斜杠\\表示一个斜杠
正则表达式中乱七八糟的组合很多,下面是js帮助文档中的说明,放这里以备查用
正则表达式对象
本对象包含正则表达式模式以及表明如何应用模式的标志。
语法 1
re = /pattern/[flags]
语法 2
re = new RegExp("pattern",["flags"])
参数
re
必选项。将要赋值为正则表达式模式的变量名。
Pattern
必选项。要使用的正则表达式模式。如果使用语法 1,用 "/" 字符分隔模式。如果用语法 2,用引号将模式引起来。
flags
可选项。如果使用语法 2 要用引号将 flag 引起来。标志可以组合使用,可用的有:
- g (全文查找出现的所有pattern)
- i (忽略大小写)
- m (多行查找)
说明
不要将正则表达式对象跟全局 RegExp 对象混淆。尽管听起来像是一回事,但它们是截然不同的。正则表达式对象的属性只包含一个正则表达式的信息,而全局RegExp 对象的属性包含了不断更新的每一个匹配出现的信息。
正则表达式对象保存用于查找字符串中的字符组合时的模式。创建正则表达式对象后,或者它被传递给字符串方法,或者字符串被传递给一个正则表达式方法。有关最近进行查找的信息被保存在全局RegExp 对象中。
当预先知道查找字符串时用语法 1。当查找字符串经常变动或不知道时用语法 2,比如由用户输入得到的字符串。
在使用前 pattern 参数被编译为内部格式。对语法 1 来说,pattern 在该脚本被装载时被编译。对语法 2 来说,pattern 在使用前,或调用compile 方法时被编译。
示例
下面的示例创建一个包含正则表达式模式及相关标志的对象(re),向您演示正则表达式对象的用法。在本例中,作为结果的正则表达式对象又用于match 方法中:
function MatchDemo(){
var r, re; //
声明变量。
var s = "The rain in Spain falls mainly in the plain";
re = new RegExp("Spain","i"); //
创建正则表达式对象。
r =
s.match(re
); //
在字符串 s
中查找匹配。
return(r); //
返回匹配结果。
}
正则表达式语法
一个正则表达式就是由普通字符(例如字符 a 到 z)以及特殊字符(称为元字符)组成的文字模式。该模式描述在查找文字主体时待匹配的一个或多个字符串。正则表达式作为一个模板,将某个字符模式与所搜索的字符串进行匹配。
这里有一些可能会遇到的正则表达式示例:
JScript | VBScript | 匹配 |
/^\[ \t]*$/ | "^\[ \t]*$" | 匹配一个空白行。 |
/\d{2}-\d{5}/ | "\d{2}-\d{5}" | 验证一个ID 号码是否由一个2位数字,一个连字符以及一个5位数字组成。 |
/<(.*)>.*<\/\1>/ | "<(.*)>.*<\/\1>" | 匹配一个 HTML 标记。 |
下表是元字符及其在正则表达式上下文中的行为的一个完整列表:
字符 | 描述 |
\ | 将下一个字符标记为一个特殊字符、或一个原义字符、或一个 后向引用、或一个八进制转义符。例如,'n' 匹配字符 "n"。'\n' 匹配一个换行符。序列 '\\' 匹配 "\" 而 "\(" 则匹配 "("。 |
^ | 匹配输入字符串的开始位置。如果设置了 RegExp 对象的Multiline 属性,^ 也匹配 '\n' 或 '\r' 之后的位置。 |
$ | 匹配输入字符串的结束位置。如果设置了RegExp 对象的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' 在内的任何字符,请使用象 '[.\n]' 的模式。 |
(pattern) | 匹配pattern 并获取这一匹配。所获取的匹配可以从产生的 Matches 集合得到,在VBScript 中使用SubMatches 集合,在JScript 中则使用$0…$9 属性。要匹配圆括号字符,请使用 '\(' 或 '\)'。 |
(?:pattern) | 匹配 pattern 但不获取匹配结果,也就是说这是一个非获取匹配,不进行存储供以后使用。这在使用 "或" 字符 (|) 来组合一个模式的各个部分是很有用。例如, 'industr(?:y|ies) 就是一个比 'industry|industries' 更简略的表达式。 |
(?=pattern) | 正向预查,在任何匹配 pattern 的字符串开始处匹配查找字符串。这是一个非获取匹配,也就是说,该匹配不需要获取供以后使用。例如, 'Windows (?=95|98|NT|2000)' 能匹配 "Windows 2000" 中的 "Windows" ,但不能匹配 "Windows 3.1" 中的 "Windows"。预查不消耗字符,也就是说,在一个匹配发生后,在最后一次匹配之后立即开始下一次匹配的搜索,而不是从包含预查的字符之后开始。 |
(?!pattern) | 负向预查,在任何不匹配Negative lookahead matches the search string at any point where a string not matchingpattern 的字符串开始处匹配查找字符串。这是一个非获取匹配,也就是说,该匹配不需要获取供以后使用。例如'Windows (?!95|98|NT|2000)' 能匹配 "Windows 3.1" 中的 "Windows",但不能匹配 "Windows 2000" 中的 "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 之前至少有is preceded by at leastnm 个获取得子表达式,则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 匹配版权符号 (?)。 |
Java帮助文档中的正则表达式:
java.util.regex
类 Pattern
public final class Pattern
extends Object
implements Serializable
正则表达式的编译表示形式。
指定为字符串的正则表达式必须首先被编译为此类的实例。然后,可将得到的模式用于创建 Matcher
对象,依照正则表达式,该对象可以与任意字符序列匹配。执行匹配所涉及的所有状态都驻留在匹配器中,所以多个匹配器可以共享同一模式。
因此,典型的调用顺序是
Pattern p = Pattern.compile
("a*b");
Matcher m = p.matcher
("aaaaab");
boolean b = m.matches
();
在仅使用一次正则表达式时,可以方便地通过此类定义 matches
方法。此方法编译表达式并在单个调用中将输入序列与其匹配。语句
boolean b = Pattern.matches("a*b", "aaaaab");
等效于上面的三个语句,尽管对于重复的匹配而言它效率不高,因为它不允许重用已编译的模式。
此类的实例是不可变的,可供多个并发线程安全使用。Matcher
类的实例用于此目的则不安全。
正则表达式的构造摘要
构造 | 匹配 |
|
|
字符 | |
x | 字符 x |
\\ | 反斜线字符 |
\0n | 带有八进制值0的字符n (0 <= n <= 7) |
\0nn | 带有八进制值0的字符nn (0 <= n <= 7) |
\0mnn | 带有八进制值0的字符mnn(0 <= m <= 3、0 <= n <= 7) |
\xhh | 带有十六进制值 0x的字符hh |
\uhhhh | 带有十六进制值 0x的字符hhhh |
\t | 制表符 ('\u0009') |
\n | 新行(换行)符 ('\u000A') |
\r | 回车符 ('\u000D') |
\f | 换页符 ('\u000C') |
\a | 报警 (bell)符 ('\u0007') |
\e | 转义符 ('\u001B') |
\cx | 对应于 x 的控制符 |
|
|
字符类 | |
[abc] | a、b或c(简单类) |
[^abc] | 任何字符,除了a、b或c(否定) |
[a-zA-Z] | a到z或A到Z,两头的字母包括在内(范围) |
[a-d[m-p]] | a到d或m到p:[a-dm-p](并集) |
[a-z&&[def]] | d、e或f(交集) |
[a-z&&[^bc]] | a到z,除了b和c:[ad-z](减去) |
[a-z&&[^m-p]] | a到z,而非m到p:[a-lq-z](减去) |
|
|
预定义字符类 | |
. | 任何字符(与行结束符可能匹配也可能不匹配) |
\d | 数字:[0-9] |
\D | 非数字:[^0-9] |
\s | 空白字符:[ \t\n\x0B\f\r] |
\S | 非空白字符:[^\s] |
\w | 单词字符:[a-zA-Z_0-9] |
\W | 非单词字符:[^\w] |
|
|
POSIX字符类(仅 US-ASCII) | |
\p{Lower} | 小写字母字符:[a-z] |
\p{Upper} | 大写字母字符:[A-Z] |
\p{ASCII} | 所有 ASCII:[\x00-\x7F] |
\p{Alpha} | 字母字符:[\p{Lower}\p{Upper}] |
\p{Digit} | 十进制数字:[0-9] |
\p{Alnum} | 字母数字字符:[\p{Alpha}\p{Digit}] |
\p{Punct} | 标点符号:!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~ |
\p{Graph} | 可见字符:[\p{Alnum}\p{Punct}] |
\p{Print} | 可打印字符:[\p{Graph}\x20] |
\p{Blank} | 空格或制表符:[ \t] |
\p{Cntrl} | 控制字符:[\x00-\x1F\x7F] |
\p{XDigit} | 十六进制数字:[0-9a-fA-F] |
\p{Space} | 空白字符:[ \t\n\x0B\f\r] |
|
|
java.lang.Character类(简单的java字符类型) | |
\p{javaLowerCase} | 等效于 java.lang.Character.isLowerCase() |
\p{javaUpperCase} | 等效于 java.lang.Character.isUpperCase() |
\p{javaWhitespace} | 等效于 java.lang.Character.isWhitespace() |
\p{javaMirrored} | 等效于 java.lang.Character.isMirrored() |
|
|
Unicode块和类别的类 | |
\p{InGreek} | Greek 块(简单块)中的字符 |
\p{Lu} | 大写字母(简单类别) |
\p{Sc} | 货币符号 |
\P{InGreek} | 所有字符,Greek块中的除外(否定) |
[\p{L}&&[^\p{Lu}]] | 所有字母,大写字母除外(减去) |
|
|
边界匹配器 | |
^ | 行的开头 |
$ | 行的结尾 |
\b | 单词边界 |
\B | 非单词边界 |
\A | 输入的开头 |
\G | 上一个匹配的结尾 |
\Z | 输入的结尾,仅用于最后的结束符(如果有的话) |
\z | 输入的结尾 |
|
|
Greedy数量词 | |
X? | X,一次或一次也没有 |
X* | X,零次或多次 |
X+ | X,一次或多次 |
X{n} | X,恰好n次 |
X{n,} | X,至少n次 |
X{n,m} | X,至少n次,但是不超过m 次 |
|
|
Reluctant数量词 | |
X?? | X,一次或一次也没有 |
X*? | X,零次或多次 |
X+? | X,一次或多次 |
X{n}? | X,恰好n次 |
X{n,}? | X,至少n次 |
X{n,m}? | X,至少n次,但是不超过m 次 |
|
|
Possessive数量词 | |
X?+ | X,一次或一次也没有 |
X*+ | X,零次或多次 |
X++ | X,一次或多次 |
X{n}+ | X,恰好n次 |
X{n,}+ | X,至少n次 |
X{n,m}+ | X,至少n次,但是不超过m 次 |
|
|
Logical运算符 | |
XY | X 后跟Y |
X|Y | X 或Y |
(X) | X,作为捕获组 |
|
|
Back引用 | |
\n | 任何匹配的 nth捕获组 |
|
|
引用 | |
\ | Nothing,但是引用以下字符 |
\Q | Nothing,但是引用所有字符,直到\E |
\E | Nothing,但是结束从\Q开始的引用 |
|
|
特殊构造(非捕获) | |
(?:X) | X,作为非捕获组 |
(?idmsux-idmsux) | |
(?idmsux-idmsux:X) | |
(?=X) | X,通过零宽度的正 lookahead |
(?!X) | X,通过零宽度的负 lookahead |
(?<=X) | X,通过零宽度的正 lookbehind |
(?<!X) | X,通过零宽度的负 lookbehind |
(?>X) | X,作为独立的非捕获组 |
反斜线、转义和引用
反斜线字符 ('\') 用于引用转义构造,如上表所定义的,同时还用于引用其他将被解释为非转义构造的字符。因此,表达式\\ 与单个反斜线匹配,而\{ 与左括号匹配。
在不表示转义构造的任何字母字符前使用反斜线都是错误的;它们是为将来扩展正则表达式语言保留的。可以在非字母字符前使用反斜线,不管该字符是否非转义构造的一部分。
根据 Java Language Specification 的要求,Java 源代码的字符串中的反斜线被解释为Unicode 转义或其他字符转义。因此必须在字符串字面值中使用两个反斜线,表示正则表达式受到保护,不被 Java 字节码编译器解释。例如,当解释为正则表达式时,字符串字面值"\b" 与单个退格字符匹配,而 "\\b" 与单词边界匹配。字符串字面值"\(hello\)" 是非法的,将导致编译时错误;要与字符串(hello) 匹配,必须使用字符串字面值"\\(hello\\)"。
字符类
字符类可以出现在其他字符类中,并且可以包含并集运算符(隐式)和交集运算符 (&&)。并集运算符表示至少包含其某个操作数类中所有字符的类。交集运算符表示包含同时位于其两个操作数类中所有字符的类。
字符类运算符的优先级如下所示,按从最高到最低的顺序排列:
1 | 字面值转义 | \x |
2 | 分组 | [...] |
3 | 范围 | a-z |
4 | 并集 | [a-e][i-u] |
5 | 交集 | [a-z&&[aeiou]] |
注意,元字符的不同集合实际上位于字符类的内部,而非字符类的外部。例如,正则表达式 . 在字符类内部就失去了其特殊意义,而表达式- 变成了形成元字符的范围。
行结束符
行结束符 是一个或两个字符的序列,标记输入字符序列的行结尾。以下代码被识别为行结束符:
- 新行(换行)符 ('\n')、
- 后面紧跟新行符的回车符 ("\r\n")、
- 单独的回车符 ('\r')、
- 下一行字符 ('\u0085')、
- 行分隔符 ('\u2028')或
- 段落分隔符 ('\u2029)。
如果激活 UNIX_LINES
模式,则新行符是唯一识别的行结束符。
如果未指定 DOTALL
标志,则正则表达式. 可以与任何字符(行结束符除外)匹配。
默认情况下,正则表达式 ^ 和 $ 忽略行结束符,仅分别与整个输入序列的开头和结尾匹配。如果激活MULTILINE
模式,则^ 在输入的开头和行结束符之后(输入的结尾)才发生匹配。处于MULTILINE
模式中时,$ 仅在行结束符之前或输入序列的结尾处匹配。
组和捕获
捕获组可以通过从左到右计算其开括号来编号。例如,在表达式 ((A)(B(C))) 中,存在四个这样的组:
1 | ((A)(B(C))) |
2 | \A |
3 | (B(C)) |
4 | (C) |
组零始终代表整个表达式。
之所以这样命名捕获组是因为在匹配中,保存了与这些组匹配的输入序列的每个子序列。捕获的子序列稍后可以通过 Back 引用在表达式中使用,也可以在匹配操作完成后从匹配器获取。
与组关联的捕获输入始终是与组最近匹配的子序列。如果由于量化的缘故再次计算了组,则在第二次计算失败时将保留其以前捕获的值(如果有的话)例如,将字符串"aba" 与表达式(a(b)?)+ 相匹配,会将第二组设置为"b"。在每个匹配的开头,所有捕获的输入都会被丢弃。
以 (?) 开头的组是纯的非捕获 组,它不捕获文本,也不针对组合计进行计数。
CSS层叠样式表cascading style sheets
将网页中的样式单独分离出来,完全由CSS控制,增强样式复用性和扩展性。
格式:选择器{属性名:属性值;属性名:属性值;……}
CSS与HTML结合的4中方式:
1、每个HTML标签都有style属性
2、当页面中有多个标签具有相同样式时,可定义style标签封装样式以复用
<style type=”text/css”>css代码</style>
3、当多个页面使用相同样式时,可将样式单独封装为CSS文件导入
<style type=”text/css”>@import url(“1.css”);</style>
4、通过HTML头标签中的link标签链接一个CSS文件
<link rel=”stylesheet” href=”1.css” media属性可选,默认设备屏幕/>
技巧:为提高样式的复用性和可扩展性,将多个样式单独定义并封装为CSS文件,如p.css、div.css……在一个总的CSS文件中,使用import导入这些CSS文件,然后在HTML页面中用link标签将这个总的CSS文件导入即可。
优先级:就近原则 标签上设置的style属性可以覆盖其他样式
选择器:
1、标签选择器:每个HTML标签名即为一个选择器
2、类选择器:标签中的class属性指定 定义样式要加点 js引用时用className
3、ID选择器:标签的id属性,尽量保证唯一,便于JavaScript获取元素
4、扩展选择器:
a、关联选择器:标签中的标签 table div表示表格中的div区域
b、组合选择器:多个选择器 逗号分隔
c、为元素选择器:元素的状态如超链接的默认状态、点击状态、悬停状态等
a:link a:visited a:hover a:active LVHA顺序
删除超链接默认下划线:text-decoration:none
p:first-letter p:first-line focus:IE6不支持
CSS滤镜:通过一些代码丰富了的样式
网页设计时,DIV+CSS
DIV和P标签都属于行级区域,回车效果,SPAN标签为块级区域,无回车效果
可加border、color等属性,P标签中不要嵌套DIV标签
JavaScript:基于对象和事件的脚本语言
特点:
安全性:不允许直接访问本地硬盘,可做的就是信息的动态交互
跨平台性:只要可以解析JS的浏览器就可执行,与平台无关
JavaScript与Java的不同:
1、js是NetScape的产品,Java是SUN的产品
2、js是基于对象的,Java是面向对象的
3、js只需解释就可执行,Java需要先编译成字节码文件后再执行
4、js是弱类型语言,Java是强类型的
5、js是非严谨的,Java是严谨的
JavaScript与HTML代码的结合方式:任何代码要融入HTML代码中都是通过标签形式
1、将js代码存放在标签对<script></script>中,规范要求加type属性,以前是language属性
<script type=”text/javascript”> js代码 </script>
2、将js代码封装成js文件,提高复用性
<script type=”text/javascript” src=”1.js”></script>
变量通过关键字var定义,弱类型语言不需要指定具体数据类型
特殊常量:undefined 变量没有初始化时值就是它
数组:var arr = [1, 2, ‘abc’, 3.53] 数组长度是可变的,没有越界问题,其他值为undefined
var arr = new Array() 数组内可存放任意类型元素,推荐元素类型一致
var arr = [[1, 0, 3], [true, ‘abc’]];二维数组
js中的数组就相当于Java中的集合
函数:function函数名(参数列表){js代码}
JavaScript函数没有重载形式,参数可随意传递,函数内部默认有一个arguments数组用来接收传入的参数,参数个数尽量保持一致
alert(函数名)可将函数内容打印出来,包括注释
动态函数:var fun = new Function(“x”, “y”, “var sum=x+y; return sum;”); var a = fun(3,2);
函数的参数和函数体都可以通过字符串变量来动态修改
匿名函数:同Java,多用于事件处理
可以通过函数形式来模拟Java,创建对象
function Person()
{
alert(“person init”);
}
var p = new Person();
上面会调用Person的方法
可以给p添加属性和方法
p.name = “张三”
p.age = 30;
p.eat = function(){}
引用name属性可用
p.name 或p[“name”]
也可像Java一样使用this来完成对象构造
简化操作的with语句和for…in语句
with用于确定对象的作用范围
with(对象){可直接调用对象的属性和方法,不用加对象名}
for…in语句用于遍历对象或数组
for((变量)s in (学生对象)stu){alert(s)}此处打印出stu的属性,要获得属性值用stu[s]
for(x in array) alert(x)打印的是数组角标
JavaScript的内部对象:Object、String、Array、Math……
String:长度为length属性,不是方法
方法有:toUpperCase() toLowerCase() CharAt() indexOf() lastIndexOf()
split() replace() substring(start, end) substr(start, length)
math()正则表达式匹配 bold()给字符串两边加上<b></b>标签
fontColor() fontSize() sub() sup() link(“URL”)都是加标签的
Math:random()产生0~1之间的伪随机数,含0不含1,可能为0,但总小于1,为小数
怎么产生1—10之间的整数呢?random()*10+1需要转换成整数,使用Global对象方法
Global:封装一些不属于具体某个对象的单独存在的全局方法,可不用对象名直接调用
parseFloat() parseInt() radix基数
parseInt(numString, [radix]) radix指定numString的进制形式,2~36
默认0x开头位16进制,0开头为八进制,其他为十进制
如果numString前缀不能转为数字,则返回NaN(Not a number)可用isNaN()检测
parseInt(“aaa”) NaN parseInt(“33abe”) 33
提示:转换前先用正则匹配,是数字再转换
反向转换用toString方法
toString([radix])
Data:日期时间对象
var d = new Data();
with(d)
{
var month = getMonth()+1; 月份从0开始
month = month>9?month:”0”+month; 月份用两位数 日也可这样做
alert(getYear()+”年”+month+”月”+getData()+”日,星期”+getDay());
}
prototype属性:获取对象原型,可以给源对象添加自定义功能或属性
function getMax()
{
var max = this[0];
for (var x=1; x<this.length; x++)
{
if (max<this[x])
max = this[x];
}
return max;
}
Array.prototype.getMax = getMax; 给Array对象添加getMax方法,可直接调用
DOM
DOM:文档对象模型document object model
DOM三层模型:
DOM1;将HTML文档封装成对象
DOM2:将XML文档封装成对象
DOM3:将XML文档封装成对象
DOM树:将HTML中的标签按照层级关系封装成节点对象
DOM的出现使静态的HTML页面的标签变为动态的可操作的节点对象
DHTML:动态的HTML,是HTML、CSS、DOM、JavaScript四种技术的综合体
HTML:封装页面数据
CSS:设置标签中的数据样式
DOM:将标签封装成对象
JavaScript:将三者进行融合,通过程序设计方式完成动态效果的操作
标记型文档一加载进内存,内存中就产生了相应的DOM树,由此产生的弊端就是,文档国大时,消耗资源。对于大型文档,可用SAX方式解析。
HTML文档中的层次关系,DOM树的层次结构
document HTML文档对象
|——head
|——title
|——base
|——meta
|——link
|——body
|——form
|——input
|——select
|——textarea
|——div
|——table
|——tbody 默认都有,不写也有
|——tr
|——td
|——th
|——a
……
将HTML文档及其中的标签都封装成对象,方便操作。
节点都有的属性:nodeName nodeType nodeValue
注意区分DOM代码中对象的属性和HTML、CSS代码中的属性写法上的不同
节点类型
标签型节点:nodeType为1,容器型节点的nodeValue为空null没有值
文本型节点:名字#text 类型为3
注释型节点:#comment 类型为8
文档型节点:#document 类型为9
属性型节点:类型为2 属性可通过对象的attributes集合属性获取
节点关系
父节点:每个节点有且只有一个父节点 通过节点parentNode属性获取
子节点:可以有多个 通过节点childNodes属性获取子节点集合(数组)
兄弟节点:分上一个和下一个,通过previousSibling和nextSibling属性获取
注意页面中标签之间的空行也是文本节点,浏览器解析时可能出现也可能没有这个节点
获取节点的方法:
1、getElementById(HTML标签中定义的id值)
获取文档中指定id对应的标签对象,注意保证id值唯一;
如果多个标签id相同,获取的是id对应的第一个对象
<script type=”text/javascript”>
var divObj = document.getElementById(“divid”);
divObj.style.backgroundColor=”blue”;注意DOM代码与CSS代码的不同
</script>
<html>
<div id=”divid” style=”background-color:red”>div内部数据</div>
style属性中的内容为CSS代码,注意区分DOM中的相同属性名称
</html>
2、getElementsByName(HTML标签中定义的name值)
获取文档中所有与name值相同的标签对象,封装为数组返回
3、getElementsByTagName(HTML标签名)
获取文档中与指定标签名相同的所有对象,返回数组
容器型标签中都有该方法,如div、table、p
每个对象都有一个集合属性all,可以获取该对象中的所有节点对象的引用,但是all属性不获取文本型节点和空行产生的节点;还有一个attributes集合属性,用来获取该对象的所有属性。
window对象:代表浏览器打开的一个窗口
window中的对象
document:窗口中的HTML文档 event:事件状态
history:历史记录 location:当前地址栏信息
navigator:关于浏览器的信息 screen:屏幕信息
navigator对象:window.navigator.href或者navigator.href
属性:appCodeName appName appVersion获取浏览器代码名称、名称、版本
platform获取操作系统名称
history对象:只有一个length属性
方法:back() forward() go()都是从历史列表中装入URL
location对象:此对象的属性既可用来获取又可用来设置对应属性的值
属性:host获取或设置URL的主机名和端口号 hostname port
href :URL protocol:协议 pathname:文件名或路径
search:href属性中问号后面的部分 hash:href属性中井号后的部分
location对象的任一属性改变后浏览器都将立即前往指定的URL
screen对象:
属性:availHeight和availWidth是系统屏幕的有效区域,不包括Windows的任务栏
height和width是系统屏幕的分辨率值
window对象方法:
alert:确定对话框
confirm:确定取消对话框,返回true或false
prompt(提示信息,[输入默认值]):可接收输入数据的对话框,返回输入的文本数据
moveBy(x, y):使窗体根据指定的坐标值偏移 窗口抖动效果
moveTo(x, y):使窗体移动到指定坐标值
resizeBy(x, y):窗体缩放指定偏移值 resizeTo(x, y):窗体缩放至指定值
scroll(x, y):将窗口滚动到距窗口左上角指定偏移值的位置
scrollBy(x, y):将窗口滚动指定的偏移值
scrollTo(x, y):将窗口滚动到指定位置
close:关闭窗口
open:打开一个窗口window.open( [sURL] [, sName] [,sFeatures] [,bReplace])
window.open("","_blank","fullscreen=1");这句NB了,整个屏幕都是白板
sURL:打开窗口的地址,默认打开一个新的空白窗体about:blank
sName:指定窗口的打开方式,即target属性值
_blank:新的无标题窗口
_parent:当前框架的父窗体,没有父窗体则为_self
_self:当前窗口,替换当前窗口内容
_search:浏览器的搜索面板内,IE5及以后版本有效
_top:替换所有可以加载的框架集,没有框架则为_self
sFeatures:(for example, "fullscreen=yes, toolbar=yes")
height≥100px,width≥100px,left≥0,top≥0
下边的属性取值可以为yes/no或1/0
channelmode默认值no
fullscreen默认值no,改为yes记得提供关闭窗口的按钮或方法ALT+F4
下边的默认值都为yes directories location地址栏
menubar菜单栏 resizable可调大小 scroll bars滚动条
status状态栏 titlebar标题栏 toolbar工具栏
window.open()
bReplace:false(新建)或者true(替换)历史列表中的记录
setTimeout:经过指定毫秒值后,计算表达式的值或执行表达式内容。返回一个id值
setTimeout(“window.close()”, 5000);5秒后自动关闭窗口
setInterval:没经过指定毫秒值计算表达式,循环。返回一个事件id值
setInterval(“alert(111)”,3000)每隔3秒弹一次
clearTimeout(id)、clearInterval(id):清除使用上边两个方法开始的事件
focus:获取焦点
window.setInterval(“window.focus()”, 3000);将窗口每隔3秒前置一次
window事件
onload:对象加载完成后 打开窗口后
onunload:对象卸载完成 关闭窗口,窗体消失后
onbeforeunload:对象卸载前 关闭窗口,窗体还在时
onkeypress:键盘事件
event对象:
keyCode属性:设置或获取事件对应的按键码
returnValue:设置或获取事件的返回值,false或true,用于取消事件执行效果
例:文本框只允许输入数字,非数字不允许显示在文本框中
<input type=text οnclick=checkNum() />
function checkNum()
{
if (!(window.event.keyCode>=48 && window.event.keyCode<=59))
{
alert(“不允许输入非数字”);
//不加下边这句,非数字会提示但还会在文本框显示
window.event.returnValue = false;取消事件执行
}
}
returnValue可用在表单提交中,当表单数据不符合要求时取消提交按钮效果
srcElement属性可设置或获取事件源对象
取消超链接默认点击效果:让浏览器启动JavaScript解析引擎执行一个空的函数
<a href=”javascript:void(0)” οnclick=”method()”></a>
CSS中的布局属性overflow:设置当对象中的内容超过其指定宽度或高度时的显示方式
hidden隐藏、visible显示、scroll滚动条、auto自动
使用此属性可以实现展开闭合效果,如好友列表
display属性也可以完成这个效果 none隐藏,block块状显示 分行,
inline一行内显示
获取事件源对象的两种方式
1、event.srcElement
2、事件处理时直接将事件对象通过this传递
创建节点:
document.createElement(标签名)创建一个指定标签名的节点
document.createTextNode(文本内容)创建一个文本节点
添加节点:添加到的目的节点.appendChild(要添加的节点) 添加到尾部
table对象
rows属性:获取表格中所有的行 cells属性:表格中所有单元格
使用table对象创建行对象:table.insertRow([index])index默认-1行尾
用tr对象创建单元格:tr.insertCell()
注意table的下一级子节点tbody,添加行节点要加在tbody下
tr对象也有cells集合属性,获取的是这一行中的单元格集合
给对象添加属性
1、tabNode.id = “tabid”
2、tabNode.setAttribute(“id”,”tabid”)
删除表格节点:
删除行:tabNode.deleteRow(rowIndex)
删除列:删除所有行的指定单元格 获取列数tabNode.rows[0].cells.length
trNode.deleteCell(cellIndex)
表格数据排序过程中定义的临时容器(存放行对象的数组)存放的都是行对象的引用。
表格行颜色间隔显示和鼠标悬浮行高亮效果:
间隔显示:奇偶行分别加载不同样式即可,onload事件中加载
悬浮高亮:行对象的onmouseover和onmouseout事件
对象.innerText 可以获取或设置对象的内部文本,但是包含的HTML标签或属性也会作为纯文本解析。要将内部的标签或HTML属性解析,需要使用innerHTML
按钮一次性点击效果:event.srcElement事件源/input对象.disabled=true 按钮点击后变灰
复选框操作:获取总金额
获取所有复选框checkboxs,遍历,判断checked属性if (checkedboxs[x].checked)
注意将复选框的value属性值进行parseInt转换
全选时将其他复选框的checked属性值改为全选框的checked属性值即可
通过下拉列表动态改变页面样式:select标签的onchange事件
options属性:所有列表项 selectedIndex:选中项的角标
获取列表选中项:selectNode.options[selectNode.selectedIndex] 值.value
DOM代码改变div区域内文本样式:divNode.style.textTransform
uppercase lowercase capitalize首字母大写
JavaScript代码写在head标签内时要注意全局变量的问题:
函数只有调用时才执行,封装在函数内部的变量没有问题;在函数外部定义的全局变量,页面加载时还没读到下边的具体标签,全局变量获取指定标签对象时就会出现null
获取鼠标的坐标,让指定区域随鼠标移动
获取鼠标坐标方法:event.x event.y
随鼠标移动:改变指定区域的left和top属性
用到的事件:body对象的onmousemove
还用到CSS样式的position定位属性,将页面分层,使指定区域悬浮在body区域上方。层次:直接定义页面所有对象到同一个层里,为了对某个区域进行移动、定位,将该区域分离到另一个单独的层里
<body>
//用position属性将广告区域进行分层,绝对定位,使广告区域悬浮在body区域上方
<div id=”ad” style=”position:absolute; left:0; top:0”>广告</div>
<div id=”bodyid”>body区域</div>
</body>
window.οnlοad=function()
{
document.body.onmousemove = function()
{
var adNode=document.getElementById(‘ad’)
adNode.style.left = event.x;
adNode.style.top = event.y;
}
}
流氓:将广告区域的坐标值设置为鼠标坐标值左上一点,使鼠标停在广告区域中
将广告区域用a标签封装
在广告区域添加点击事件,点击后关闭广告ad.style.dislay=none
限定边界: addiv.offsetWidth 广告区域自己的宽度
document.body.clientWidth body区域的宽度
边界内移动代码:
<script type="text/javascript">
var x=y=1;
var movex=movey=0;
function move()
{
var ad = document.getElementById("ad");
movex = movex + x*5; //每次移动位置递增5个像素
movey = movey + y*5;
ad.style.left = movex; //移动
ad.style.top = movey;
//alert("aaaaaaaa");
var bdx = document.body.clientWidth; //获取当前浏览器页面窗口的宽和高
var bdy = document.body.clientHeight;
var adx = ad.offsetWidth; //获取广告区域的大小
var ady = ad.offsetHeight;
//alert(bdx+"----------"+bdy);
if (movex+adx >= bdx) //判断是否移到边界了
{ //移到边界开始递减
x = -1;
}
else if (movex <= 0) //递减只零再开始递增
{
x = 1;
}
if (movey+ady >= bdy)
{
y = -1;
}
else if (movey <= 0)
{
y = 1;
}
}
var timeid;
function fly()//飞吧 每个10毫秒执行一次移动
{
//move();
timeid = window.setInterval("move()", 100);
}
function over()//鼠标进入广告区停止移动
{
window.clearInterval(timeid);
}
window.onload = function() //页面一加载就开始飞
{
fly();
var ad = document.getElementById("ad");
ad.onmouseover = function()
{
over(); //鼠标进入取消定时移动
}
ad.onmouseout = function()
{
fly(); //鼠标离开继续移动
}
}
function closeAD() //点击关闭后停止定时移动,隐藏广告区域
{
var ad = document.getElementById("ad");
ad.style.display = 'none';
over();
}
</script>
</head>
<body>
<div id="ad" style="position:absolute; border: red 1px solid; left:0; top:0; height:90; width:90">
<a href="http://www.ad.com" target="_blank">广告</a><br/><br/><br/><br/>
<a href="javascript:void(0)" οnclick="closeAD()">关闭广告</a></div>
</body>
级联菜单:省市选择示例 select标签onchange事件 添加option项
将省份对应的城市城市列表封装进二维数组,角标和省的option项角标一致
选中省份后,遍历对应的城市列表,将其封装进option标签中并添加到子菜单中
注意:在添加子项前需先清空子菜单项,以免将上一选项结果遗留
再次注意:清空子项用遍历时,注意removeChild一次,length就减一次,如果循环变量跟着递增就会移不完
移除下拉选项的简单方法,直接将列表的options属性的length置为0即可
邮件列表示例中删除所选邮件时注意:
和用遍历方法删除列表项时的问题一样,删除时,长度递减,循环变量递增,删不全
可定义一个临时容器用来存储待删除的节点索引,然后遍历临时容器时再删除这些节点。临时容器中存放的也是表格行节点的引用,每次删除完颜色事件都要加载一遍
表单验证:
可以用document.forms获取页面中的所有表单对象
拿到表单对象后,可以直接使用表单中的组件名获取对应组件
输入框失去焦点时就开始验证:onblur事件发生就开始验证
怎么让表单验证失败时提交不出去呢?
1、表单标签中的onsubmit事件中,event.returnValue=false提交按钮就失效了
2、在onsubmit事件处理函数中返回false(不提交)或true(提交),再将返回结果返回给onsubmit事件即可 οnsubmit=“return checkForm()”
事件处理函数中使用returnValue时,onsubmit不用return即可
JS中的正则表达式 限定开始结束位置^ $
两种写法:var reg = /^\d{5}$/ 5位数字,下同
var reg = new RegExp(“^\\d{5}$”);
var namereg = /^[a-z]{5}$/i 5为字母 后面加i不分大小写
下面的示例创建一个包含正则表达式模式及相关标志的对象(re),向您演示正则表达式对象的用法。在本例中,作为结果的正则表达式对象又用于match 方法中:
function MatchDemo(){
var r, re; //
声明变量。
var s = "The rain in Spain falls mainly in the plain";
re = new RegExp("Spain","i"); //
创建正则表达式对象。
r =
s.match(re
); //
在字符串 s
中查找匹配。
return(r); //
返回匹配结果。
}
如果String对象的 match 方法没有找到匹配,返回 null。
RegExp对象的test方法也可判断是否匹配
reg.test(str) 返回boolean
附件添加删除、通过下拉列表改变字体颜色、字体样式、省市级联菜单示例
<style type="text/css">
/*CSS区域*/
a:link, a:visited{
color: #FF0000;
font-size: 22;
text-decoration: none;
}
</style>
<script type="text/javascript">
/*javascript区域*/
function addFile()
{
var tabNode = document.getElementById("file");
var trNode = tabNode.insertRow();
var tdNode_file = trNode.insertCell();
var tdNode_del = trNode.insertCell();
tdNode_file.innerHTML = "<input type='file' />";
tdNode_del.innerHTML = "<img src='1.jpg' alt='删除文件' οnclick='delFile(this)' />";
}
function delFile(node)
{
//var tabNode = document.getElementById("file");
var trNode = node.parentNode.parentNode;
//alert(tabNode.nodeName);
//alert(trNode.nodeName);
trNode.parentNode.removeChild(trNode); //父节点删除子节点 他杀
}
</script>
<body>
<!--添加删除附件-->
<a href="javascript:void(0)" οnclick="addFile()">点击上传文件</a>
<table id="file">
</table>
<hr/>
<style type="text/css">
#bbb{
border: red 3px solid;
width: 200px;
}
#colorid{
width: 50px;
}
#text{
border: blue 1px solid;
width: 100px;
text-align: center;
margin: 10px 0px 0px 20px;
}
</style>
<script type="text/javascript">
/*鼠标指上去就盖住背景色了 想去掉没成功
οnlοad=function()
{
var sel = document.getElementById("colorid");
sel.onmouseover = function(){sel.className="";};
sel.onmouseout = function(){sel.className="";};
}
*/
function changeColor()
{
var sel = document.getElementById("colorid");
var div = document.getElementById("text");
var val = sel.options[sel.selectedIndex].value;
div.style.color = val;
}
</script>
<div id="bbb">
选择颜色:
<select id="colorid" οnchange="changeColor()">
<option value=#FFFF00 style=background:#FFFF00></option>
<option value=#FF0000 style=background:#FF0000></option>
<option value=#33FF00 style=background:#33FF00></option>
<option value=#0033FF style=background:#0033FF></option>
</select>
<div id="text">
变变变<br />
变变变<br />
变变变<br />
变变变<br />
变变变<br />
</div>
</div>
<hr />
<style type="text/css">
#div1{
background: #FFCC00;
width: 300;
height: 80;
}
#selid{
width: 200;
margin-top: 20px;
margin-bottom: 20px;
}
#div2{
background: #669999;
width: 300;
}
</style>
<script type="text/javascript">
<!—改变字体样式-->
function textChange()
{
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var sel = document.getElementById("selid");
var val = sel.options[sel.selectedIndex].value;
//alert(val);
div1.style.textTransform = val;
div2.innerHTML = "text-transform : "+val+";";
}
</script>
<div id="div1">
Every man dies. Not every man really lives.
</div>
<select id="selid" οnchange="textChange()">
<option value="none">--text-transform--</option>
<option value="uppercase">UPPERCASE</option>
<option value="lowercase">lowercase</option>
</select>
<div id="div2">
text-transform : none;
</div>
<hr/>
<!—省市级联菜单-->
<style type="text/css">
#seldiv select{
width: 150px;
}
</style>
<script type="text/javascript">
function showCity()
{
var arr = [[], ["朝阳区", "海淀区", "西城区", "东城区"],
["郑州市", "南阳市", "邓州市", "信阳市", "驻马店市", "开封市"],
["唐山市", "石家庄市", "廊坊市", "邯郸市"],
["北京", "上海", "深圳", "天津", "重庆", "香港特别行政区", "澳门特别行政区"]];
var sel1 = document.getElementById("sel1");
var sel2 = document.getElementById("sel2");
var index = sel1.selectedIndex;
//sel2中添加内容之前先清空下 有简单方法
for (var x=1; x<sel2.options.length; )//x++) //length在减 x在递增 只移除一半
{
sel2.removeChild(sel2.options[x]);
}
for (var x=1; x<sel1.options.length; x++)
{
if (x == index)
{
for (var y=0; y<arr[x].length; y++)
{
var opNode = document.createElement("option");
opNode.innerHTML = arr[x][y];
sel2.appendChild(opNode);
}
}
}
if (sel1.selectedIndex!=0)
sel2.selectedIndex = 1;
}
</script>
<div id="seldiv">
<select id="sel1" οnchange="showCity()">
<option value="0">选择省市</option>
<option value="1">北京市</option>
<option value="2">河南省</option>
<option value="3">河北省</option>
<option value="4">中国</option>
</select>
<select id="sel2">
<option value="none">选择城市</option>
</select>
</div>
</body>
邮件列表示例:
<style type="text/css">
/*CSS区域*/
table{
border: black 2px solid;
border-collapse: collapse;
text-align: center;
width: 600px;
/* margin: 10px; 外框边距*/
}
table th{
background: #33FF33;
}
table td, table th{
padding: 5px;
border: black 1px solid;
}
.one{
background: #CCFF66;
}
.two{
background: #FFCCFF;
}
.over{
background: #FF9933;
}
</style>
<script type="text/javascript">
/*javascript区域*/
var name;
function trColor()
{
var tabNode = document.getElementById("maillist");
var tabRows = tabNode.rows;
for (var x=1; x<tabRows.length-1; x++)
{
if (x%2==1)
{
tabRows[x].className = "one";
}
else
tabRows[x].className = "two";
tabRows[x].onmouseover = function()
{
name = this.className;
this.className = "over";
}
tabRows[x].onmouseout = function()
{
this.className = name;
}
}
}
window.onload = function()
{
trColor();
}
function checkAll(index)
{
var allNodes = document.getElementsByName("all");
//不管选的哪个都让两个全选框一样
allNodes[Math.abs(index-1)].checked = allNodes[index].checked;
var mails = document.getElementsByName("mail");
for (var x=0; x<mails.length; x++)
{
mails[x].checked = allNodes[index].checked;
}
}
function checkByBut(mode) //选择按钮事件处理
{
/*简单写法
var mails = document.getElementsByName("mail");
for (var x=0; x<mails.length; x++)
{
if (mode==2)
mails[x].checked = !mails[x].checked;
else
mails[x].checked = mode;
}
*/
if (mode==1)
{
document.getElementsByName("all")[0].checked = true;
checkAll(0);
//alert(mode);
}
if (mode==0)
{
document.getElementsByName("all")[0].checked = false;
checkAll(0);
}
if (mode==2)
{ //mails[x].checked = !mails[x].checked;
var alls = document.getElementsByName("all");
if (alls[0].checked) //使两个全选框同步
{
alls[0].checked = false;
alls[1].checked = false;
}
var mails = document.getElementsByName("mail");
for (var x=0; x<mails.length; x++)
{
if (mails[x].checked)
{
mails[x].checked = false;
}
else
{
mails[x].checked = true;
}
}
}
}
function del() //删除所选
{
/*
var mails = document.getElementsByName("mail");
for (var x=0; x<mails.length; x++)
{
if (mails[x].checked)
{
var trNode = mails[x].parentNode.parentNode;
trNode.removeNode(true); //这样删掉之后length在减小 而x在递增 导致删一半留一半
}
}
trColor();
*/
var arr = []; //记录被选择的行号
var pos = 0;
var mails = document.getElementsByName("mail");
for (var x=0; x<mails.length; x++)
{
if (mails[x].checked)
{
var trNode = mails[x].parentNode.parentNode;
arr[pos++] = trNode;
}
}
var tabNode = document.getElementById("maillist");
var tabRows = tabNode.rows;
for (var x=0; x<arr.length; x++)
{
arr[x].removeNode(true);
}
trColor(); //重新加载一次样式,颜色间隔效果
}
</script>
<body> <!--邮件列表操作演示-->
<table id="maillist">
<tr>
<th><input type="checkbox" name="all" οnclick="checkAll(0)" />全选</th>
<th>发件人</th>
<th>邮件主题</th>
<th>邮件内容</th>
<tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三11</td>
<td>主题:邮件11</td>
<td>内容:邮件11</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三22</td>
<td>主题:邮件22</td>
<td>内容:邮件22</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三33</td>
<td>主题:邮件33</td>
<td>内容:邮件33</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三44</td>
<td>主题:邮件44</td>
<td>内容:邮件44</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三55</td>
<td>主题:邮件55</td>
<td>内容:邮件55</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三66</td>
<td>主题:邮件66</td>
<td>内容:邮件66</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三77</td>
<td>主题:邮件77</td>
<td>内容:邮件77</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三88</td>
<td>主题:邮件88</td>
<td>内容:邮件88</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三99</td>
<td>主题:邮件99</td>
<td>内容:邮件99</td>
</tr>
<tr>
<th><input type="checkbox" name="all" οnclick="checkAll(1)" />全选</th>
<th colspan=3>
<input type="button" value="全选" οnclick="checkByBut(1)" />
<input type="button" value="取消选择" οnclick="checkByBut(0)" />
<input type="button" value="反选" οnclick="checkByBut(2)" />
<input type="button" value="删除所选邮件" οnclick="del()" />
</th>
<tr>
</table>
</body>