转换课程方向

1、DOM编程和正则表达式第四章回顾与作业点评如何在网页中调用一个JavaScript函数？JavaScript修改CSS样式的常用方法有哪些？预习检查W3C标准定义的DOM由哪三部分组成？在HTML DOM中，Table对象、TableRow对象、TableCell对象分别代表什么？正则表达式有几种构造方式，分别是什么？RegExp对象使用什么方法匹配正则表达式？本章任务制作动态添加表格的特效制作严谨的电子邮箱验证页面本章目标使用HTML DOM操作动态修改HTML元素内容使用正则表达式验证复杂规则的表单项DOM的应用DOM的典型应用删除单件商品修改商品数量DOM的组成W3C规定的三类DOM标准

2、接口Core DOM，适用于各种结构化文档XML DOM，专用于XML文档HTML DOM，专用于HTML文档选用DOM标准接口，结合支持的编程语言访问DOM树，如Java、JavaScript、C#等核心DOMJava OOP学过HTML DOM对象-table对象如何在页面中动态操作表格的行与列？表格相关对象4-1表格相关对象table表格对象 tableRow表格行对象 tableCell单元格对象 表格相关对象4-2table表格对象类别名称描述属性rows返回包含表格中所有行的一个数组方法insertRow()在表格中插入一个新行deleteRow()从表格中删除一行代码片段tabl

3、eObject.rows tableObject.insertRow(index)deleteRow(index)tab表格对象的属性和方法的用法 代码片段tableRowObject.insertCell(index) tableRowObject.deleteRow(index)表格相关对象4-3tableRow表格行对象用法示例 类别名称描述属性cells返回包含行中所有单元格的一个数组rowIndex返回该行在表中的位置方法insertCell()在一行中的指定位置插入一个空的标签deleteCell()删除行中指定的单元格代码片段cell2.innerHTML=“改变单元格的HTML

4、内容;cell2.align=center;表格相关对象4-4tableCell单元格行对象用法示例 类别名称描述属性cellIndex返回单元格在某行单元格集合中的位置innerHTML设置或返回单元格的开始标签和结束标签之间的HTMLalign设置或返回单元格内部数据的水平排列方式className设置或返回元素的class属性用table对象重新实现表格操作2-1function addRow() var newRow=document.getElementById(myTable).insertRow(2); var col1=newRow.insertCell(0); col1.in

5、nerHTML=幸福从天而降; var col2=newRow.insertCell(1); col2.innerHTML=18.5; col2.align=center; 实现“增加一行”的操作 增加一个行对象，然后插入单元格，最后设置单元格内容演示示例1：使用HTML DOM操作表格用table对象重新实现表格操作2-2function delRow() document.getElementById(myTable).deleteRow(1); function updateRow() var uRow=document.getElementById(myTable).rows0; uR

6、ow.className=title;实现“删除第2行”的操作 实现“修改标题”的操作使用class样式属性直接修改标题样式演示示例1：使用HTML DOM操作表格指导订单的删除和增加2-1需求说明实现订单表格的删除和增加完成时间：25分钟指导订单的删除和增加2-2实现思路和关键代码使用集合rows和属性length计算当前表格中的行数 使用tableRow对象插入新行时，设置行id属性，方便后续删除 var addTable=document.getElementById(order); var row_index=addTable.rows.length-1; 索引从0开始，所以总长度-1

7、 newRow.id=row+row_index; 插入ID号，产生效果为：，方便后续传递行号参数给删除函数delRow(rowId)完成时间：25分钟共性问题集中讲解常见调试问题及解决办法代码规范问题共性问题集中讲解指导订单的修改2-1需求说明实现表格的修改订单功能点击修改按钮修改订单，点击确定按钮修改生效指导订单的修改2-2实现思路 “修改”按钮、 “确定”按钮相关函数传递的参数使用当前行的id号 修改功能：使用lastChild访问最后一个单元格中的“修改”按钮完成时间：20分钟小结W3C提供了DOM的哪三类标准？HTML DOM对象-table相关对象包括哪些？分别包含哪些常用的属性、

8、方法？正则表达式使用正则表达式的优点简洁的代码严谨的验证文本框中的内容什么是正则表达式正则表达式是一个描述字符模式的对象定义正则表达式表达式的模式定义正则表达式普通方式var reg=new RegExp(white);var reg=new RegExp(white,g);构造函数var reg=/white/;var reg=/white/g;var reg=/表达式/附加参数var reg=new RegExp(表达式, 附加参数)；正则表达式的模式简单模式复合模式var reg=/china/;var reg=/abc8/;var reg=/w+$/;var reg=/w+w+.a-z

9、A-Z2,3(.a-zA-Z2,3)?$/; RegExp对象 RegExp对象的方法方 法描 述exec()检索字符中是正则表达式的匹配，返回找到的值，并确定其位置test()检索字符串中指定的值，返回true或falseString对象String对象的方法方 法描 述match()找到一个或多个正则表达式的匹配search()检索与正则表达式相匹配的值replace()替换与正则表达式匹配的字符串split()把字符串分割为字符串数组RegExp对象的属性RegExp对象的属性属 性描 述globalRegExp对象是否具有标志gignoreCaseRegExp对象是否具有标志imult

10、ilineRegExp对象是否具有标志m正则表达式符号正则表达式常用符号正则表达式重复字符符 号描 述/代表一个模式的开始和结束匹配字符串的开始$匹配字符串的结束s任何空白字符S任何非空白字符d匹配一个数字字符，等价于0-9D除了数字之外的任何字符，等价于0-9w匹配一个数字、下划线或字母字符，等价于A-Za-z0-9_W任何非单字字符，等价于a-zA-z0-9_.除了换行符之外的任意字符符 号描 述n匹配前一项n次n,匹配前一项n次，或者多次n,m匹配前一项至少n次，但是不能超过m次*匹配前一项0次或多次，等价于0,+匹配前一项1次或多次，等价于1,？匹配前一项0次或1次，也就是说前一项是可

11、选的，等价于0,1正则表达式的应用适用场合用户名、密码、电子邮箱、手机号码、身份证号码、生日、邮政编码、固定电话验证年龄对年龄进行验证，年龄必须在0120之间10-99这个范围都是两位数，十位是1-9，个位是0-9，正则表达式为1-9d0-9这个范围是一位，正则表达式为d100-119这个范围是三位数，百位是1，十位是0-1，个位是0-9，正则表达式为10-1d根据以上可知，所有年龄的个位都是0-9，当百位是1时十位是0-1，当年龄为两位数时十位是1-9，因此0-119这个范围的正则表达式为(10-1|1-9)?d年龄120是单独的一种情况，需要单独列出来演示示例2：验证年龄正则表达式：(10

12、-1|1-9)?d验证电子邮件地址验证电子邮件地址电子邮件格式中必须有符号“”和“.”符号前的内容、和.中间的内容都是由字母和数字组成，并且位数不限制，正则表达式为w+符号一般是一个或两个.组成，并且符号.后一般由两位或三位字母组成，正则表达式为 a-zA-Z2,3(.a-zA-Z2,3)?演示示例3：验证电子邮件地址正则表达式：/w+w+(.a-zA-Z2,3)1,2$/练习验证注册页面需求说明使用正则表达式验证博客园注册页面，验证用户名、密码、电子邮箱、手机号码和生日：用户名只能由英文字母和数字组成，长度为4-16个字符，并且以英文字母开头密码只能由英文字母和数字组成，长度为4-10个字符生日的年份在1900-2009之间，生日格式为1980-5-12或1988-05-04的形式完成时间：30分钟 共性问题集中讲解常见调试问题及解决办法代码规范问题共性问题集中讲解小结下面正则表达式中（ ）能正确验证身份证号，身份证号码由15位或18位数字组成。A. var regMycard=/d15$|d18$/;B. var regMyc