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可以执行的代码

/*

常用的正则表达式

常用正则表达式

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

用户名：/^[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}	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”。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始
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匹配版权符号（?）。

以下是以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;i

if(i%2==0){

arr[i].style.backgroundColor="#FFFFCC";

}else{

arr[i].style.backgroundColor="#BCD68D";

}

}

}

//////////////////////////

案例4:全选或者全不选

步骤分析:

1.确定事件 最上面那个复选框的单击事件 onclick

2.编写函数:让所有的复选框和最上面的复选框状态保持一致

a.获取最上面这个复选框选中状态 通过checkbox的checked属性即可

b.获取其他的复选框,设置他们的checked属性即可

可以通过以下两种方案获取元素

document.getElementsByClassName():需要给下面所有的复选框添加class属性

document.getElementsByName():需要给下面所有的复选框添加name属性

//////////////////////////////////

dom(文档对象模型)

当浏览器接受到html代码的时候,浏览器会将所有的代码装载到内存中,形成一棵树(document树)

节点(Node)

文档节点 document

元素节点 element

属性节点 attribute

文本节点 text

获取节点:

通过document可以获取其他节点:

常用方法:

document.getElementById("id值"):获取一个特定的元素

document.getElementsByTagName("标签名"):通过标签名获取一种元素(多个)

document.getElementsByClassName("class属性的值"):通过class属性获取一类元素(多个)

document.getElementsByName("name属性的值"):通过name属性获取一类元素(多个)

设置获取获取节点的value属性

dom对象.value;获取

dom对象.value="";设置

设置或者获取节点的标签体

dom对象.innerHTML;获取

dom对象.innerHTML="";设置

获取或者设置style属性

dom对象.style.属性;获取

dom对象.style.属性="";设置

获取或者设置属性

dom对象.属性

/////////////////////////

对于htmldom的操作若在js或者htmldom 查找不到 去查找xml dom

关于文档的操作 在 xml dom 的document中

关于元素的操作 在 xml dom 的element中

appendChild(dom对象):在一个元素下添加孩子

//////////////////////////////////////

案例5-左右选中.

需求:

技术分析:

1.确定事件,按钮的单击事件

2.编写函数:

点击移动单|多个的:

a.获取左边选中的选项  select对象.options--数组

遍历数组 判断是否选中 option对象.selected

b.将其追加到右边的下拉选中

rightSelect对象.appendChild(option);

点击移动所有的

a.获取左边的所有的选项

b.一个个的追加过去

///////////////////////

案例6-省市联动

需求:

选中省的时候,动态的查询当前省下的所有市,然后展示在市的下拉选中

技术分析:

数组:

////////////////////////

数组:

语法:

new Array();//长度为0

new Array(size);//指定长度的

new Array(e1,e2..);//指定元素

非官方

var arr4=["aa","bb"];

常用属性:

length

注意:

数组是可变的

数组可以存放任意值

常用方法:(了解)

存放值:对内容的操作

pop():弹 最后一个

push():插入 到最后

shift():删除第一个

unshift():插入到首位

打印数组:

join(分隔符):将数组里的元素按照指定的分隔符打印

拼接数组:

concat():连接两个或更多的数组，并返回结果。

对结构的操作:

sort();排序

reverse();反转

////////////////////////

步骤分析:

1.省的下拉选 的选项中添加value属性 当成数组的索引

2.初始化市

3.选择省的时候,onchange事件

4.编写函数,

通过获取的索引获取对象的市的数组 this.value

遍历数组,将数组里面的每个值组装option 添加到select中即可

//////////////////////////////

引用类型总结:

原始类型中的String Number Boolean都是伪对象,可以调用相应的方法

Array:数组

String:

语法:

new String(值|变量);//返回一个对象

String(值|变量);//返回原始类型

常用方法:

substring(start,end):[start,end)

substr(start,size):从索引为指定的值开始向后截取几个

charAt(index):返回在指定位置的字符。

indexOf(""):返回字符串所在索引

replace():替换

split():切割

常用属性:length

Boolean:

语法:

new Boolean(值|变量);

Boolean(值|变量);

非0数字 非空字符串 非空对象 转成true

Number

语法:

new Number(值|变量);

Number(值|变量);

注意:

null====>0

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()