javaWeb核心技术第四篇之Javascript第二篇事件和正则表达式

- 事件
  - 表单提交(掌握)
    "onsubmit"
  - 单击事件(掌握)
    "onclick"
  - 页面加载成功事件(掌握)
    "onload"
  - 焦点事件:(掌握)
    - 获取焦点
      "onfocus"
    - 失去焦点
      "onblur"
  - 表单事件(了解)
    - ondblclick		双击事件
    - onreset;                重置
    - onchange;            改变(熟练使用)
  - 鼠标事件:(了解)
    - onmouseover		悬停
    - onmouseout		移出
    - onmousedown	按下
    - onmouseup		弹起
    - onmousemove	移动
  - 键盘事件:(了解)
    - onkeydown		按下
    - onkeyup			弹起
    - onkeypress		按下并弹起
- DOM(文档对象模型):操作html文档
  "html加载到内存中时,是以一棵树的形式存在的,可以通过document操作所有的节点"
  - html文档与dom树的关系:理解
    - html里所有的标签、标签的属性、文本都会转换成dom树里的节点
      - a.整个html文档抽象成的对象,叫作document    文档节点
      - b.标签转换成的节点对象,叫作Element           元素节点
      - c.标签属性转换成的节点对象,叫作Attribute   属性节点
      - d.文本转换成的节点对象,叫作Text                  文本节点
  - 查询(获取元素对象)★★
    - document.getElementById("id");  获取一个元素对象
    - document.getElementsByTagName("标签名"); 获取一种元素对象  数组接收
    - document.getElementsByClassName("class属性值"); 获取一类元素对象 数组接收
    - document.getElementsByName("name属性值"); 获取多个元素对象 数组接收
  - 元素(element)
    - 方式1简单方法操作:★★
      - 元素.innerHTML = "

文本内容

"; 添加 - 元素.innerHTML = ""; 删除 - 方式2扩展:了解 - 添加 - var ele = document.createElement("标签名"); 创建元素节点(创建一个标签) "var ele = document.createElement("h1");

" - var text = document.createTextNode("值"); 创建文本节点(创建一个值) "var text = document.createTextNode(""); "客"" - 元素节点.appendChild(文本节点); 给元素节点添加文本信息 "ele.appendChild(text);

" - 元素.appendChild(子元素对象); 将元素节点追加到指定标签中 "将创建好的h1标签添加到页面的指定标签中" - 删除 - 元素.remove(); 自杀 - 属性:(attribute) - 方式1简单方法操作:★★ - 元素.属性名称; 获取指定属性的值 - 元素.属性名称 = "属性值"; 设置指定属性的值 - 方式2扩展:了解 - 查(获取): - 元素.getAttribute("属性名称"); - 增: - 元素.setAttribute("属性名称","属性值"); - 删: - 元素.removeAttribute("属性名称"); - 引用数据类型(对象) - 注意:string,number,boolen称为伪对象,可以直接使用相应的方法或属性 - Array:数组 - 语法: - new Array(); 创建空数组 - new Array(3); 创建包含指定个数的数组 - new Array(ele1,ele2...); 创建包含指定元素的数组 - 特征: - 数组长度可变 - 数组中可以存放任何类型的值 - 常用属性 - length 长度 - 常用方法 - join("分隔符"); 按指定的分隔符分割 - shift(); 删除并返回数组中的第一个元素 - unshift(); 向数组的开头添加一个或多个元素,并返回新数组的长度 - pop(); 删除并返回数组中的最后一个元素 - push(); 向数组的末尾添加一个或多个元素,返回新数组的长度 - sort(); 操作数组结构 对数组进行排序 "//初始化设置元素的时候,排序不起作用的" - reverse(); 颠倒数组中元素的顺序 - String - 语法 - new String(); 返回一个object对象 - 常用属性 - length - 常用方法 - substring(startindex,endindex); - slice(startindex,endindex); - charAt(); - split(); - Number - 语法: - new Number(); 返回一个object对象 - Boolean - new Boolean(); 返回一个object对象 - Boolean(值); 将给定值转为Boolean类型 - Math - 常用操作 - Math.round(); - Math.PI; - Math.random(); - Date - 语法 - new Date(); - 常用方法 - toLocaleString(); 转为字符串 - reg(正则) - 1.编写正则表达式 - 格式: /^正则表达式$/ - 2.校验 - 正则表达式.test(); 返回boolean类型的值 - 全局函数 - parseInt(); 尝试转换为Int类型 - parseFloat(); 尝试转换为float类型 - String(); 强制转换为String类型 - Number(); 强制转换为number类型 - encodeURI(); 编码 - decodeURI(); 解码 - eval(); 将字符串转换称js可以执行的代码 /* 正则表达式,常用的正则表达式,js正则表达式,正则表达式数字,正则表达式空格

常用的正则表达式

常用正则表达式

正则表达式用于字符串处理、表单验证等场合,实用高效。现将一些常用的表达式收集于此,以备不时之需。

用户名:/^[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})$/

URL:/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/

IP 地址:/^(?:(?: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+\/>)$/

Unicode编码中的汉字范围:/^[u4e00-u9fa5],{0,}$/

匹配中文字符的正则表达式: [\u4e00-\u9fa5]
评注:匹配中文还真是个头疼的事,有了这个表达式就好办了

匹配双字节字符(包括汉字在内):[^\x00-\xff]
评注:可以用来计算字符串的长度(一个双字节字符长度计2,ASCII字符计1)

匹配空白行的正则表达式:\n\s*\r
评注:可以用来删除空白行

匹配HTML标记的正则表达式:<(\S*?)[^>]*>.*?</\1>|<.*? />
评注:网上流传的版本太糟糕,上面这个也仅仅能匹配部分,对于复杂的嵌套标记依旧无能为力

匹配首尾空白字符的正则表达式:^\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}
评注:匹配形式如 0511-4405222 或 021-87888822

匹配腾讯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个英文字母或者下划线组成的字符串

表达式全集

正则表达式有多种不同的风格。下表是在PCRE中元字符及其在正则表达式上下文中的行为的一个完整列表:

字符 描述
\ 将下一个字符标记为一个特殊字符、或一个原义字符、或一个向后引用、或一个八进制转义符。例如,“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} mn均为非负整数,其中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”。预查不消耗字符,也就是说,在一个匹配发生后,在最后一次匹配之后立即开始下一次匹配的搜索,而不是从包含预查的字符之后开始
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的向后引用。如果前面的条件都不满足,若nm均为八进制数字(0-7),则\nm将匹配八进制转义值nm
\nml 如果n为八进制数字(0-3),且m和l均为八进制数字(0-7),则匹配八进制转义值nml。
\un 匹配n,其中n是一个用四个十六进制数字表示的Unicode字符。例如,\u00A9匹配版权符号(?)。

以下是以PHP的语法所写的示例

验证字符串是否只含数字与英文,字符串长度并在4~16个字符之间

<?php
$str = 'a1234';
if (preg_match("^[a-zA-Z0-9]{4,16}$", $str)) {
    echo "驗證成功";
} else {
    echo "驗證失敗";
}
?>

简易的台湾身份证字号验证

<?php
$str = 'a1234';
if (preg_match("/^\w[12]\d{8}$/", $str)) {
    echo "驗證成功";
} else {
    echo "驗證失敗";
}
?>

以下示例是用 Perl 语言写的,与上面的示例功能相同

print $str = "a1234" =~ m:^[a-zA-Z0-9]{4,16}$: ? "COMFIRM" : "FAILED";
print $str = "a1234" =~ m"^\w[12]\d{8}$" ? "COMFIRM" : "INVAILD";

如何写出高效率的正则表达式

如果纯粹是为了挑战自己的正则水平,用来实现一些特效(例如使用正则表达式计算质数、解线性方程),效率不是问题;如果所写的正则表达式只是为了满足一两次、几十次的运行,优化与否区别也不太大。但是,如果所写的正则表达式会百万次、千万次地运行,效率就是很大的问题了。我这里总结了几条提升正则表达式运行效率的经验(工作中学到的,看书学来的,自己的体会),贴在这里。如果您有其它的经验而这里没有提及,欢迎赐教。

为行文方便,先定义两个概念。

误匹配:指正则表达式所匹配的内容范围超出了所需要范围,有些文本明明不符合要求,但是被所写的正则式“击中了”。例如,如果使用\d{11}来匹配11位的手机号,\d{11}不单能匹配正确的手机号,它还会匹配98765432100这样的明显不是手机号的字符串。我们把这样的匹配称之为误匹配。

漏匹配:指正则表达式所匹配的内容所规定的范围太狭窄,有些文本确实是所需要的,但是所写的正则没有将这种情况囊括在内。例如,使用\d{18}来匹配18位的身份证号码,就会漏掉结尾是字母X的情况。

写出一条正则表达式,既可能只出现误匹配(条件写得极宽松,其范围大于目标文本),也可能只出现漏匹配(只描述了目标文本中多种情况种的一种),还可能既有误匹配又有漏匹配。例如,使用\w+\.com来匹配.com结尾的域名,既会误匹配abc_.com这样的字串(合法的域名中不含下划线,\w包含了下划线这种情况),又会漏掉ab-c.com这样的域名(合法域名中可以含中划线,但是\w不匹配中划线)。

精准的正则表达式意味着既无误匹配且无漏匹配。当然,现实中存在这样的情况:只能看到有限数量的文本,根据这些文本写规则,但是这些规则将会用到海量的文本中。这种情况下,尽可能地(如果不是完全地)消除误匹配以及漏匹配,并提升运行效率,就是我们的目标。本文所提出的经验,主要是针对这种情况。

掌握语法细节。正则表达式在各种语言中,其语法大致相同,细节各有千秋。明确所使用语言的正则的语法的细节,是写出正确、高效正则表达式的基础。例如,perl中与\w等效的匹配范围是[a-zA-Z0-9_];perl正则式不支持肯定逆序环视中使用可变的重复(variable repetition inside lookbehind,例如(?<=.*)abc),但是.Net语法是支持这一特性的;又如,JavaScript连逆序环视(Lookbehind,如(?<=ab)c)都不支持,而perl和python是支持的。《精通正则表达式》第3章《正则表达式的特性和流派概览》明确地列出了各大派系正则的异同,这篇文章也简要地列出了几种常用语言、工具中正则的比较。对于具体使用者而言,至少应该详细了解正在使用的那种工作语言里正则的语法细节。

先粗后精,先加后减。使用正则表达式语法对于目标文本进行描述和界定,可以像画素描一样,先大致勾勒出框架,再逐步在局步实现细节。仍举刚才的手机号的例子,先界定\d{11},总不会错;再细化为1[358]\d{9},就向前迈了一大步(至于第二位是不是3、5、8,这里无意深究,只举这样一个例子,说明逐步细化的过程)。这样做的目的是先消除漏匹配(刚开始先尽可能多地匹配,做加法),然后再一点一点地消除误匹配(做减法)。这样有先有后,在考虑时才不易出错,从而向“不误不漏”这个目标迈进。

留有余地。所能看到的文本sample是有限的,而待匹配检验的文本是海量的,暂时不可见的。对于这样的情况,在写正则表达式时要跳出所能见到的文本的圈子,开拓思路,作出“战略性前瞻”。例如,经常收到这样的垃圾短信:“发*票”、“发#漂”。如果要写规则屏蔽这样烦人的垃圾短信,不但要能写出可以匹配当前文本的正则表达式 发[*#](?:票|漂),还要能够想到 发.(?:票|漂|飘)之类可能出现的“变种”。这在具体的领域或许会有针对性的规则,不多言。这样做的目的是消除漏匹配,延长正则表达式的生命周期。

明确。具体说来,就是谨慎用点号这样的元字符,尽可能不用星号和加号这样的任意量词。只要能确定范围的,例如\w,就不要用点号;只要能够预测重复次数的,就不要用任意量词。例如,写析取twitter消息的脚本,假设一条消息的xml正文部分结构是<span class=”msg”>…</span>且正文中无尖括号,那么<span class=”msg”>[^<]{1,480}</span>这种写法的思路要好于<span class=”msg”>.*</span>,原因有二:一是使用[^<],它保证了文本的范围不会超出下一个小于号所在的位置;二是明确长度范围,{1,480},其依据是一条twitter消息大致能的字符长度范围。当然,480这个长度是否正确还可推敲,但是这种思路是值得借鉴的。说得狠一点,“滥用点号、星号和加号是不环保、不负责任的做法”。

不要让稻草压死骆驼。每使用一个普通括号()而不是非捕获型括号(?:…),就会保留一部分内存等着你再次访问。这样的正则表达式、无限次地运行次数,无异于一根根稻草的堆加,终于能将骆驼压死。养成合理使用(?:…)括号的习惯。

宁简勿繁。将一条复杂的正则表达式拆分为两条或多条简单的正则表达式,编程难度会降低,运行效率会提升。例如用来消除行首和行尾空白字符的正则表达式s/^\s+|\s+$//g;,其运行效率理论上要低于s/^\s+//g; s/\s+$//g; 。这个例子出自《精通正则表达式》第五章,书中对它的评论是“它几乎总是最快的,而且显然最容易理解”。既快又容易理解,何乐而不为?工作中我们还有其它的理由要将C==(A|B)这样的正则表达式拆为A和B两条表达式分别执行。例如,虽然A和B这两种情况只要有一种能够击中所需要的文本模式就会成功匹配,但是如果只要有一条子表达式(例如A)会产生误匹配,那么不论其它的子表达式(例如B)效率如何之高,范围如何精准,C的总体精准度也会因A而受到影响。

巧妙定位。有时候,我们需要匹配的the,是作为单词的the(两边有空格),而不是作为单词一部分的t-h-e的有序排列(例如together中的the)。在适当的时候用上^$\b等等定位锚点,能有效提升找到成功匹配、淘汰不成功匹配的效率。

正则表达式: http://114.xixik.com/regex/

HTML转义字符: http://114.xixik.com/character/

*/ /* 回顾: css: 层叠样式表 作用: 渲染页面 提供工作效率,将html和样式分离 和html的整合 方式1:内联样式表 通过标签的style属性 方式2:内部样式表 通过head的子标签Style子标签 方式3:外部样式表 有一个独立css文件.后缀名:.css 在html中通过link标签导入 选择器: id选择器 html元素有id属性且有值 css中通过 # 导入 #d1{...} 类选择器 html元素有class属性且有值 css中通过 . 导入 .c1{...} 元素选择器 css中通过标签名即可 xx{...} 属性选择器 html元素有一个属性且有值 css中通过元素名[属性="值"]使用 xx[att="val1"]{...} 后代选择器 选择器 后代选择器 锚伪类(了解) // 字体 文本 背景 列表 分类(clear display:none block inline) 框模型: 一个元素外边有内边距 边框 外边距 顺序:上右下左 // js javascript 脚本语言 解释性 基于对象 事件驱动函数 js的组成: ECMAScript(语法) BOM(浏览器对象模型) DOM(文档对象模型) html和js的整合 方式1:内部编写js 方式2: 外部有一个独立的js文件 后缀名:.js 在html中通过script的src属性导入 注意: 一旦使用了src属性,那么script标签体中的js代码将不再执行了. 变量: var 变量名=初始化值; 数据类型: 原始类型(5种) Undefined Null String 用引号引起来的内容 Number Boolean 通过typeof可以判断一个值或者变量是否是原始类型,若是原始类型,还可以判断属于那种. typeof 变量|值 引用类型 运算符: 关系运算符: 两边值都是字符串,比较ascii码 两边都是数字,和java一样 一边是数字,一遍是字符串形式的数字, 可以比较 一边是数字,一遍是普通字符串 可以比较 值永远是false 等性运算符 "66"==66 true "666"===666 false js的语句 if while for 和java一样 // 获取元素: var obj=document.getElementById("id值"); 获取元素的value属性 var val=document.getElementById("id值").value; 设置元素的value属性 document.getElementById("id值").value="sdfsdf"; 获取元素的标签体 var ht=document.getElementById("id值").innerHTML; 设置元素的标签体 document.getElementById("id值").innerHTML="ssss"; 定义函数: 方式1:function 函数名(参数列表){函数体} 方式2: var 函数名=function(参数列表){函数体} 注意: 函数声明的时候不用声明返回值类型 参数列表上不要写参数类型 通过return结束方法和将值返回 事件: onclick 单击 onsubmit 表单提交 onload 页面加载成功或者元素加载成功 事件和函数绑定 方式1:通过元素的事件属性 方式2:派发事件 document.getElementById("id值").onxxx=function(){...}; document.getElementById("id值").onxxx=函数名; / 案例1-定时弹出广告 需求: 打开页面后4秒,展示广告,2秒之后,该广告隐藏.再停2秒,继续展示. 技术分析: 定时器 定时器(BOM-window对象) setInterval(code,毫秒数):周期执行 setTimeout(code,毫秒数):延迟多长事件后 只执行一次. 清除定时器 clearInterval(id): clearTimeout(id): 步骤分析: 1.确定事件 2.编写函数 a.获取元素 b.操作元素 1.html页面,先把广告隐藏 2.页面加载成功事件 onload 3.编写函数 定时器: 操作元素: document.getElementById("") 操作css属性 document.getElementById("id").style.属性="值" 属性:就是css中属性 css属性有"-" 例如:backgroud-color 若有"-" 只需要将"-"删除,后面第一个字母变大写即可 注意: 只要是window对象的属性和方法,可以把window省略 window.onload 等价于 onload window.setInterval() 等价于 setInterval() bom(浏览器对象模型)总结 所有的浏览器都有5个对象 window:窗口 location:定位信息 (地址栏) history:历史 window对象详解: 如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象, 并为每个框架创建一个额外的 window 对象。 常用的属性: 通过window可以获取其他的四个对象 window.location 等价域 location window.history 等价于 history ... 常用的方法 消息框 alert("...."):警告框 confirm("你确定要删除吗?"):确定框 返回值:boolean prompt("请输入您的姓名"):输入框 返回值:你输入的内容 定时器 设置定时器 setInterval(code,毫秒数):周期执行 setTimeout(code,毫秒数):延迟多长事件后 只执行一次. 例如: setInterval(showAd,4000); serInterval("showAd()",4000); 清除定时器 clearInterval(id): clearTimeout(id): 打开和关闭 open(url):打开 close():关闭 / location:定位信息 常用属性: href:获取或者设置当前页面的url(定位信息) location.href; 获取url location.href="...";设置url 相当于 a标签 // history:历史 back();后退 forward():向前 ★go(int) go(-1) 相当于 back() go(1) 相当于 forward() // 案例2-表单校验plus 需求: 提示信息不用弹出框,将信息追加在文本框后面 技术分析: 确定事件 表单提交的时候 onsubmit 文本框失去焦点的时候 onblur 编写函数 获取元素 document.getElementById("id值"); 操作元素(获取元素的值,操作标签体,操作标签value属性) / 步骤分析: 1.表单 2.表单提交的时候 确定事件 onsubmit() 3.校验用户名和密码 4.获取用户名和密码的对象及值 5.判断内容,当为空的时候,获取响应的span元素 往span元素中显示错误信息 注意: 在方法中(function()) this指代的是当前的元素(当前dom对象) 例如: 方法: function loseFocus(obj){ alert(obj); } / 事件总结: 常见的事件: 焦点事件:★ onfocus onblur 表单事件:★ onsubmit onchange 改变 页面加载事件:★ onload 鼠标事件(掌握) onclick 鼠标事件(了解) ondblclick:双击 onmousedown:按下 onmouserup:弹起 onmousemove:移动 onmouserover:悬停 onmouserout:移出 键盘事件(理解) onkeydown:按下 onkeyup:弹起 onkeypress:按住 绑定事件: 方式1: 元素的事件属性 方式2: 派发事件 /// 了解 阻止默认事件的发生 阻止事件传播 / 案例3-隔行换色 需求: 一个表格,隔一行换一个色 技术分析: 事件:onload 获取元素:dom操作 /// 获取元素: document.getElementById("id"):通过id获取一个元素 document.getElementsByTagName("标签名"):通过标签名获取一种元素(多个)返回一个数组 Array: 常用属性: length:数组的长度 步骤分析: 1.html表格一加载的时候 确定事件 onload 2.编写函数 a.获取元素(所有的tr元素) b.操作(若当前行是偶数的话加一个样式,若是奇数的话,加另一个样式) //页面加载成功 onload=function(){ //1.获取所有的tr var arr=document.getElementsByTagName("tr"); //alert(arr); //alert(arr.length); //2.判断奇偶数 添加不同的样式 遍历数组 for(var i=1;i0 fale====>0 true====>1 字符串的数字=====>对应的数字 其他的NaN Date: new Date(); 常用方法: toLocalString() RegExp:正则表达式 语法: 直接量语法 /正则表达式/参数 直接量语法 /正则表达式/ new RegExp("正则表达式") new RegExp("正则表达式","参数") 参数: i:忽略大小写 g:全局 常用方法: test() :返回值为boolean Math: Math.常量|方法 Math.PI Math.random() [0,1) 全局: ★ decodeURI() 解码某个编码的 URI。 encodeURI() 把字符串编码为 URI。 Number():强制转换成数字 String():转成字符串 parseInt():尝试转换成整数 parseFloat():尝试转换成小数 eval() 计算 JavaScript 字符串,并把它作为脚本代码来执行。 // // 上午回顾: BOM(浏览器对象模型) window对象:窗口 注意: 若是window对象的属性和方法,调用的时候可以省略window 常用属性: 通过window可以获取其他的四个对象 window.location 等价于 location 常用方法: 消息框 alert() 警告框 confirm() 确认框 返回值:boolean prompt() 输入框 返回值:输入的内容 定时器 设置 setInterval(code,毫秒数):循环 setTimeout(code,毫秒数):延迟 只执行一次 清除 clearInterval(id): clearTimeout(id): 打开和关闭 open(url) close() location对象:定位信息 地址栏 常用属性: href:获取或者设置当前页面的url location.href:获取 location.href="url":设置 相当于超链接 history对象:操作历史 常用方法: go() 事件: 焦点:★ onfocus:获取焦点 onblur:失去焦点 表单事件:★ onsubmit: form表单里的 onchange:改变(下拉选) 页面或者对象加载:★ onload: 鼠标:★ onclick:单击 键盘: onkeyup: dom(★) 获取元素的方法(4个) document 操作元素的属性 dom对象.属性; 引用类型: array string substring 全局: 编码2个 强制转化 Number String 尝试 parseXxx eval() 解析字符串形式的js代码 Math random()

你可能感兴趣的:(javaWeb核心技术第四篇之Javascript第二篇事件和正则表达式)