DOM操作：

元素：获取节点，添加节点，修改节点，删除节点，克隆节点

属性：获取元素的属性，增删改属性

事件绑定：

domObj.onclick = function(){

//这个函数不是直接执行，由用户的行为来触发这个函数

}

常用事件：

window.onload事件：

onclick

onkeyup / onkeydown / onkeypress

onmouseover / onmouseout

onfocus / onblur

onchange

正则表达式

一、概述

1、概述

正则表达式(regular expression)描述了一种字符串匹配的模式，可以用来检查一个字符串中是否含有某种子串、将匹配的子串做替换或者从某个字符串中取出符合某个条件的子串等。

匹配就是在某个字符串中查找你想要查找的内容（由正则表达式决定），如果查找到了，就表示匹配。没有查找到就表示不匹配。

abacabad

正则表达式本身是一门独立的技术，可以被大多数编程语言所使用，如Javascript、PHP、Java

2、应用场景

（1）表单验证里面，验证字符的合法性，如邮箱是否合法，手机号是否合法等等。

（2）信息过滤，如论坛帖子或者评论中的非法字符，例如 sql注入、js脚本注入、煽动性的言论。

（3）信息采集，采集别人网站上面的内容，例如整页采集时 筛选出需求的部分

（4）信息替换。

（5）页面伪静态的规则

二、入门案例

1、正则用法说明

这个案例是在字符串str中查找是否有p。

正则语法：

以两条斜线，作为正则表达式起始和结尾的定界符。不能加引号。

match是字符串方法，所以应该由字符串调用。意思是在字符串中匹配要查找的值，如果匹配将返回匹配的内容，如果不匹配返回null。

2、全局修饰符g

g是global，表示全局的意思，它是正则表达式语法中的修饰符，修饰符应该放到定界符(/)的后面。

三、正则语法

1、量词

n+ 匹配任何包含至少一个 n 的字符串。匹配一个或多个前导字符（前导字符就是紧挨着+的前一个字符）

n* 匹配任何包含零个或多个 n 的字符串。前导字符有没有都行

n? 匹配任何包含零个或一个 n 的字符串。

n{X} 匹配包含 X 个 n 的序列的字符串。

n{X,Y} 匹配包含 X 或 Y 个 n 的序列的字符串。

n{X,} 匹配包含至少 X 个 n 的序列的字符串。

n$ 匹配任何结尾为 n 的字符串。从末尾开始匹配

^n 匹配任何开头为 n 的字符串。（注意位置在前面）

^n$ 表示只匹配字符串n。也就是匹配整个字符串。

2、元字符

. 表示单个字符，表示任意字符。除了换行和行结束符。

.* 表示任意字符串（0个或多个任意字符，除了换行和行结束符）

\w 匹配任何数字、字母、下划线。一个\w表示一个字符。

\W 匹配任何非数字、非字母、非下划线。

\d 查找数字。

\D 查找非数字字符。

\s 查找空白字符。

\S 查找非空白字符。

\b 匹配单词边界。（边界字母个数没有限制；\b放前面表示匹配单词前面的边界，\b表示匹配单词后面的边界）

\B 匹配非单词边界。

\n 查找换行符。

\r 查找回车符。

\t 查找制表符。

3、方括号

方括号表示一个范围，也称为字符簇。

[abc] 查找方括号之间的任何字符。

[^abc] 查找任何不在方括号之间的字符。（方括号中的^表示取反）

[0-9] 查找任何从 0 至 9 的数字。表示一个字符

[a-z] 查找任何从小写 a 到小写 z 的字符。

[A-Z] 查找任何从大写 A 到大写 Z 的字符。

[A-z] 查找任何从大写 A 到小写 z 的字符。包括下划线。

[5-8] 查找5 <= 目标 <= 8的字符

(red|blue|green) 查找任何指定的选项。（竖线|表示或者）

4、修饰符

i 执行对大小写不敏感的匹配。

g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。

m 执行多行匹配。

5、转义字符

四、分组/捕获和反向引用

捕获和反向引用的语法的解释：

正则中出现的小括号，就叫捕获或者分组

在正则语法中（在/…/内），在捕获的后面，用“\1”来引用前面的捕获。用\2表示第二个捕获的内容….

在正则语法外（如replace时），用“$1”来引用前面的捕获。

禁止引用

(?:正则) 这个小括号中的内容不能够被引用

五、匹配中文（utf-8编码）

每个字符（中文、英文字母、数字、各种符号、拉丁文、韩文、日文等）都对应着一个Unicode编码。

查看Unicode编码，找到中文的部分，然后获取中文的Unicode编码的区间，就可以用正则匹配了。

中文的Unicode编码从4E00开始，到9FA5结束。

[4E00-9FA5]

完整的Unicode编码表：http://blog.csdn.net/hherima/article/details/9045861

六、环视（断言/零宽断言）

every(?=n) 匹配任何其后紧接指定字符串 n 的字符串。

查找a，什么样的a呢？后面必须是b的a

every(?!n) 匹配任何其后没有紧接指定字符串 n 的字符串。

查找a，什么样的a呢？后面不能是b的a

另外，还会看到(?!B)[A-Z]这种写法，其实它是[A-Z]范围里，排除B的意思，前置的(?!B)只是对后面数据的一个限定，从而达到过滤匹配的效果。

七、正则对象的属性和方法

正则对象中的成员方法和属性的正确调用方式：

1、exec方法和lastIndex属性

exec方法执行一个正则匹配，只匹配一次，匹配到结果就返回一个数组类型的结果，匹配不到就返回null。并将表示匹配的位置 置为下一个匹配的位置。

lastIndex一个整数，标示开始下一次匹配的字符位置。没有更多匹配重置lastIndex为0.

依次调用exec匹配下一个的例子：

匹配带子表达式的例子：

带子表达式并且依次调用的例子：

2、test方法

test方法检测目标字符串和正则表达式是否匹配，如果匹配返回true，不匹配返回false。

八、支持正则表达式的 String 对象的方法

1、search()

在字符串中搜索符合正则表达式的结果。如果找到结果返回结果的位置，停止向后检索，也就是说忽略全局标识符g；如果没有匹配结果，返回-1.

2、match()

在字符串中检索匹配正则表达式的子串；如果匹配，返回包含匹配结果的一个数组；不匹配返回null。

不加全局g的情况：

获取的结果只是第一个匹配的内容，匹配的内容中的第一个单元是匹配的结果，后面的单元是子表达式

加全局的g的情况：

获取的结果是所有匹配的内容，但是不包含子表达式。

多次调用和调用一次效果一样。

3、split()

将字符串分割成数组：

4、replace()替换

默认只替换一次，加g全部替换

替换的时候，使用”$1″表示第一个字表达式：

替换abc为a[a-b-c]c hds h[h-d-s]s

替换aaa bbb ccc为Aaa Bbb Ccc

九、案例

1、匹配手机号格式是否正确

要求：

基本的要求：11位，1打头，纯数字

特别精细的话，必须联系各大运营商，查看23位都是什么，比如有136的，但是可以没有163的。

2、匹配邮箱格式是否正确

邮箱：

@前面有4~16个字符（都可以有数字，字母，下划线，点 ，中横线）

@后面点前面：允许数字字母组合，长度2~10位

点后面：只允许出现字母，长度为2~5；

还有一种情况是后面是两个点，如xxxx@xx.com.cn

3、解决结巴程序

把叠字的字符串，换成单子，比如，“今今今今天天天天天天天天中午吃吃吃了泡面”换成“今天中午吃了泡面”

4、用户名验证

注册的时候，要求用户名：长度4~10位，不能是纯数字，不能是纯字母，不能有特殊符号，不能以数字打头。

十、PHP中的正则表达式

语法和JavaScript中的正则语法基本一致。

PHP中的正则函数：

1、preg_match()

基础语法练习：

基础语法和js中正则语法基本相同。

具体查看preg_match的用法：

带有子表达式的例子：

2、preg_match_all();

执行正则表达式的全局匹配

查看匹配情况（不带子表达式）：

查看匹配情况（带子表达式）：

3、preg_replace();

案例：解决贪婪问题？

4、php中匹配中文

回顾

1. 计算机单位
   1. 最小单位是位（B）
   2. 字节（b） 一个字符的大小
   3. 1K=1024b
   4. 1M=1024K
   5. 1G=1024M
   6. 1T=1024G
2. 进制转换
   1. 十进制转二进制：整数除2反向取余，小数乘2正向取整
   2. 二进制转成十进制：以2为底，从右往左依次是2的0次方，1次方…
   3. 八进制转二进制，一个八进制转成3位的二进制，然后再合并起来
   4. 十六进制转二进制：一个十六进制转成4位的二进制，然后在合并起来。
3. 网页中的颜色表示：光的三原色，红色（red），绿色(green)，蓝色（blue）。所有光的颜色都是由这三种颜色组成。他们的范围都是0-255，颜色的表示通过RGB的十六机制数表示，
4. CSS介绍：层叠样式表，用来控制网页的外在表现（网页的装修），
5. 语法

选择器{

属性:属性的值;

属性:属性的值;

}

1. 注释 /* */
2. CSS选择器
   1. ID选择器
      1. 以#开头
      2. 只能供一个元素使用。
   2. 类选择器
      1. 以点（.）开头
      2. 可以供多个元素使用
   3. 标签选择器：选择标签
   4. 通配选择器：*
   5. 组合选择器：h1,#aa,.bb
   6. 后代选择器：p b #aa .bb
   7. 子元素选择器p>b
   8. 相邻元素选择器div+p div~p
   9. 伪类：4种状态。 lvha
      1. :link 正常连接的状态
      2. :visited 点击完后代状态
      3. :hover 当鼠标移上去的时候状态
      4. :active 当鼠标点击下去的状态

网页中图像的基础知识

1. 位图：由像素点组成的图
   1. 体积大
   2. 放大失真
   3. 颜色丰富，达到256*256*256种颜色

1. 矢量：是由线条和面组成的图形
   1. 体积小
   2. 可以无限制的放大
   3. 支持的颜色数比较少

脚下留心：网页上的图片都是位图

1. 分辨率

思考：是不是像素点越多，图片的质量越高？

答：不是，衡量一个照片的质量通过的是分辨率。

分辨率：单位长度里的像素点的多少，一般都以一英寸为单位。

在尺寸一定情况下，分辨率越大质量也好，图片的体积也越大，网页打开的速度也越慢。网页上的分辨率一般是72。（印刷的分辨率一般在300）

1. 网站默认尺寸单位为象素（px）。
2. 网页常见的图象格式：网页中常用的图片格式有png，jpg，gif

伪类选择器与类选择器一起使用

思考一个场景：如何实现一个页面中有两种超链接的样式。

<style type=”text/css”>

a.first:link{

color:#F00;

text-decoration:none;

font-size:12px;

}

a.first:hover{

color:#060;

text-decoration:underline;

font-size:12px;

}

a.second:link{

color:#00F;

text-decoration:overline;

font-size:36px;

}

a.second:hover{

color:#90F;

text-decoration:underline;

font-size:36px;

}

</style>

<a href=”#” class=”first”>链接1</a> <br>

<a href=”#” class=”first”>链接1</a> <hr>

<a href=”#” class=”second”>链接2</a> <br>

<a href=”#” class=”second”>链接2</a> <hr>

运行结果

思考题：a.first和a .first的区别

伪对象选择器

伪类描述的是状态，伪对象描述的是对象。

元素:first-letter，选择元素中内容的第一个字

元素:first-line，选择元素中是内容的第一行

<style type=”text/css”>

p:first-letter{ /*选择元素的第一个字*/

font-size:24px;

color:#F00;

}

div:first-line{ /*选择元素的第一行*/

font-size:12px;

color:#060;

text-decoration:underline;

}

</style>

<p>

锄禾日当午，<br>

汗滴禾下土。<br>

谁知盘中餐，<br>

粒粒皆辛苦。<br>

</p>

<div>

离离原上草，一岁一枯荣。<br>

野火烧不尽，春风吹又生。<br>

远芳侵古道，晴翠接荒城。<br>

又送王孙去，萋萋满别情。

</div>

属性选择器

1. 元素[属性]：具备指定属性的元素

1. 元素[属性=值]：选择指定属性指定值的元素

1. 元素[属性~=值]: 选择具有attr属性且属性值为用空格分隔的字词列表，其中一个等于指定值的元素

1. 元素[属性|=值]：选择具有attr属性且属性值为用连字符分隔的字词列表，并且由指定的值开始的元素

E1[attr] element（元素） attribute（属性）

常用CSS属性的讲解

字体属性

<style type=”text/css”>

body{

color:#F00; /*字体颜色*/

font-family:”黑体”, “隶书”, “微软雅黑”, “宋体”; /*字体*/

font-size:16px; /*字号*/

font-weight:bold; /*字体粗细*/

text-decoration:underline; /*文本修饰*/

text-transform:uppercase; /*文本转换（大小写）*/

line-height:30px; /*行高*/

}

</style>

锄禾日当午，<br>

汗滴禾下土。<br>

谁知盘中餐，<br>

粒粒皆辛苦。<br>

I a am boy!

运行结果

详细说明text-transform属性值

思考：为什么font-family跟多个字体？

font-family:”黑体”, “隶书”, “微软雅黑”, “宋体”;

答：客户端首先用第一个字体来解析，如果没有就选择第二个字体，依次类推，一直到最后。如果一个字体都没有，就选择客户端的默认字体。中文的浏览器默认字体是宋体。

文本属性

text-align的值

尺寸属性

width：宽度

height：高度

边框属性

多学一招：

背景属性

边距属性 （margin）

margin-top：上边距

margin-right：右边距

margin-bottom：下边距

margin-left：左边距

margin：符合边距

列表属性

内容溢出属性

overflow:hidden; /*溢出部分隐藏*/

overflow:auto; /*如果有溢出，就会出现垂直滚动条*/

CSS样式的的分类

样式按照写的地方不同分成3类：

1. 内部样式：写在页面的内部，只能给当前页面使用

<style type=”text/css”></style>

1. 外部样式：写在页面的外部，可以给所有页面使用

新建一个css文件，将样式写到文件中

1. 行内样式：写在元素的后面，只能给当前元素使用

<div style=””></div>

内部样式

写在页面的内部，通过<style>开头</style>结束，可以给整个页面使用

行内样式

每个元素都有style属性，通过style属性也元素添加样式

外部样式

将样式写到外部文件中，给所有页面使用

第一步：创建CSS文件

脚下留心：在CSS文件中，不需要<style>开头，</style>结束。

第二步：新建html，并引入css文件

引入CSS文件的方式：链接和导入

1. 链接

语法：<link rel=’stylesheet’ href=’地址’>

1. 导入

语法：@import url(地址);

思考：为什么<link>不需要写在<style></style>之间，而@import需要呢？

答：因为<link>是HTML标签，而@import是CSS指令

思考：<link>和@import引入样式的区别？

分析：

答：1、<link>在HTML页面中引入CSS文件

2、@import在HTML页面和CSS页面都能引入。

样式的继承

内层标签继承和覆盖外层标签的样式。

1. 子级标签继承父级标签没有的样式
2. 子级标签覆盖父级标签相同的样式

样式的优先级

1. ID选择器>CLASS选择器>HTML标签选择器
2. 直接（行内）样式表>内部样式表>外部样式表

例题2

1. class=“类1，类2”，以类的加载的顺序为优先级，后加载的将先加载的覆盖。

1. 强制优先级（important）

1. 权重叠加
   • 标签 < 类 < id选择器<直接<important
   • 1 < 10 < 100 <1000<10000

例题：

标签的显示模式

标签的显示模式有两种：块显示，行显示

1. 块显示特点
   1. 上下排列
   2. 默认宽度是100%，高度0px
   3. 可以设置宽度和高度
2. 行显示特点
   1. 左右排列
   2. 默认框架是宽度0px，高度是0px
   3. 不能设置宽度和高度

思考：如何设置行显示标记的宽度和高度？

答：将行显示转成块显示即可

思考：既要设置宽高，又要显示在一行，如何实现？

display:block; 将标签显示方式改为块显示

display:inline：将标签显示方式改为行显示

div+css拼版好处

1. 提高页面执行效率
2. 代码维护变得简单
3. 提高代码的可重用性。