目录

  • 1 JavaScript快速入门
    • 1.1 如何插入javascrip代码
    • 1.2 引用javascritp外部文件
    • 1.3 JavaScript在页面中位置
    • 1.4 JavaScript语句和符号
    • 1.5 JavaScript注释
    • 1.6 案例1-1 script标签在html中书写位置
    • 1.7 案例1-2  JavaScript引入方式
    • 1.8 JavaScript变量
    • 1.9 JavaScript判断语句
    • 1.10 JavaScript函数
    • 1.11 案例1-4 比较两个数大小
    • 1.12 案例1-8 改变网页皮肤颜色
    • 1.13 案例1-9 验证用户名和密码
  • 2 基本语法
    • 2.1 变量
      • 2.1.1 标识符
      • 2.1.2 保留关键字
      • 2.1.3 变量的使用
      • 2.1.4 变量的赋值
    • 2.2 变量的数据类型
      • 2.2.1 数据类型分类
      • 2.2.2 基本数据类型
      • 2.2.3 数据类型检测
      • 2.2.4 数据类型检测总结
      • 2.2.5 数据类型转换
      • 2.2.6 数据类型转换(程序1)
      • 2.2.7 数据类型转换(程序2)
      • 2.2.8 数据类型转换(程序3)
      • 2.2.9 数据类型转换(程序4)
      • 2.2.10 数据类型转换(程序5)
      • 2.2.11 数据类型转换(程序6)
    • 2.3 表达式
    • 2.4 运算符
      • 2.4.1 算数运算符
      • 2.4.2 字符串运算符
      • 2.4.3 赋值运算符
      • 2.4.4 比较运算符
      • 2.4.5 逻辑运算符
      • 2.4.6 三元运算符
      • 2.4.7 位运算符
      • 2.4.8 运算符优先级
    • 2.5 流程控制
      • 2.5.1 选择结构
      • 2.5.2 if单分支语句
      • 2.5.3 if...else双分支语句
      • 2.5.4 if...else双分支举例
      • 2.5.5 if...else多路分支语句
      • 2.5.6 if...else多路分支举例
      • 2.5.7 switch...case多路分支
      • 2.5.8 while循环语句
      • 2.5.9 do...while语句
      • 2.5.10 for语句
      • 2.5.11 九九乘法表
      • 2.5.12 判断素数
      • 2.5.13 判断红白黑球个数
  • 3 数组
    • 3.1 初始数组
    • 3.2 创建数组
    • 3.3 数组的基本操作
    • 3.4 常见二维数组操作
    • 3.5 数组排序
      • 3.5.1 冒泡排序
      • 3.5.2 选择排序
      • 3.5.3 插入排序
    • 3.6 常见数组方法
    • 3.7 案例 猴子选大王
    • 3.8 案例 省份城市的三级联动
  • 4 函数
    • 4.1 函数的定义与调用
    • 4.2 变量的作用域
    • 4.3 匿名函数
    • 4.4 嵌套与递归
    • 4.5 闭包函数
  • 5 对象
    • 5.1 面向对象概述
    • 5.2 自定义对象
    • 5.3 构造函数
    • 5.4 内置对象
      • 5.4.1 String对象
      • 5.4.2 Number对象
      • 5.4.3 Math对象
      • 5.4.4 Date对象
  • 6 BOM
    • 6.1 什么是BOM
    • 6.2 window对象
      • 6.2.1 弹出窗口
      • 6.2.2 窗口打开关闭
      • 6.2.3 定时器
      • 6.2.4 限时秒杀
    • 6.3 location对象
    • 6.4 history对象
    • 6.5 navigator对象
    • 6.6 screen对象
    • 6.7 动手实践
      • 6.7.1 限时秒杀
      • 6.7.2 定时跳转
      • 6.7.3 红绿灯倒计时
      • 6.7.4 显示时间与日期
  • 7 DOM
    • 7.1 DOM对象简介
    • 7.2 HTML元素操作
    • 7.3 DOM节点操作
    • 7.4 轮播特效
    • 7.5 购物车实现方法1
      • 7.5.1 购物车结构
      • 7.5.2 购物车样式
      • 7.5.3 购物车业务逻辑
    • 7.6 购物车实现方法2
      • 7.6.1 结构页面
      • 7.6.2 样式
      • 7.6.3 页面逻辑
    • 7.7 京东
  • 8 事件
    • 8.1 事件处理
      • 8.1.1 代码
      • 8.1.2 举例
    • 8.2 事件对象
      • 8.2.1 冒泡处理
      • 8.2.2 target与currentTarget
      • 8.2.3 禁止粘贴、右键、复制、剪切
    • 8.3 事件操作
      • 8.3.1 页面事件
      • 8.3.2 鼠标事件
      • 8.3.3 键盘事件
      • 8.3.4 表单事件
    • 8.4 图片无缝滚动
    • 8.5 看了又看
    • 8.6 放大镜
    • 8.7 商品详情页放大镜效果
      • 8.7.1 页面结构
      • 8.7.2 页面样式
      • 8.7.3 页面逻辑
    • 8.8 飘动的广告
    • 8.9 猜拳游戏
    • 8.10 瀑布流
    • 8.11 手风琴效果
  • 9 正则表达式
    • 9.1 认识正则表达式
    • 9.2 字符类别与集合
    • 9.3 字符限定与分组
    • 9.4 与正则相关的方法
    • 9.5 页面注册
      • 9.5.1 注册页面结构
      • 9.5.2 注册页面样式
      • 9.5.3 注册页面逻辑
    • 9.6 身份证验证
    • 9.7 成员注册
  • 10 初识jQuery
    • 10.1 jQuery课程简介
    • 10.2 jQuery的引入.html
    • 10.3 jQuery实现第一页面
    • 10.4 jQuery对象与DOM对象
    • 10.5 jQuery对象转化成DOM对象
    • 10.6 DOM对象转化成jQuery对象
  • 11 jQuery选择器
    • 11.1 jQuery选择器之ID选择器
    • 11.2 jQuery选择器之类选择器
    • 11.3 jQuery选择器之标签选择器
    • 11.4 jQuery选择器之全局选择器
    • 11.5 jQuery选择器之层级选择器
    • 11.6 jQuery选择器之组合选择器
    • 11.7 jQuery选择器之基本过滤选择器
    • 11.8 jQuery选择器之内容过滤选择器
    • 11.9 jQuery选择器之属性过滤选择器
    • 11.10 ​jQury选择器之可见选择器
    • 11.11 jQuery选择器之表单元素选择器
    • 11.12 jQuery选择器之表单对象属性选择器
    • 11.13 jQuery选择器之子元素过滤选择器
    • 11.14 jQuery子元素过滤选择器补充
    • 11.15 jQuery选择器之特殊选择器$(this)
  • 12 jQuery属性与样式
    • 12.1 jQuery属性与样式之.arrt()与removeAttr()
    • 12.2 jQuery属性与样式之.html()与.text()
    • 12.3 jQuery属性与样式之.val()
    • 12.4 jQuery属性与样式之样式的操作
    • 12.5 jQuery属性与样式之.css()
    • 12.6 jQuery尺寸方法
    • 12.7 jQuery的offset()方法
    • 12.8 jQuery之checkbox各种选中操作
  • 13 jQueryDOM操作
    • 13.1 jQueryDOM的创建
    • 13.2 jQuery元素内插入节点的方法
    • 13.3 jQuery元素外插入节点的方法
    • 13.4 jQuery节点的删除方法
    • 13.5 jQuery节点的复制方法
    • 13.6 jQuery节点的替换方法
    • 13.7 jQuery节点的包裹方法6
  • 14 jQuery遍历
    • 14.1 jQuery遍历祖先节点的方法
    • 14.2 jQuery遍历后代节点的方法
    • 14.3 jQuery遍历同胞节点的方法
    • 14.4 jQuery遍历之基本过滤方法
    • 14.5 jQuery遍历之高级过滤方法
    • 14.6 jQuery实现新闻滚动
    • 14.7 jQuery实现选项卡
  • 15 jQuery效果
    • 15.1 jQuery效果-隐藏与显示
    • 15.2 jQuery效果-逐个显示与隐藏
    • 15.3 jQuery效果-淡入淡出
    • 15.4 jQuery效果-滑动
    • 15.5 jQuery效果-动画
    • 15.6 jQuery效果-手动轮播
    • 15.7 jQuery效果-自动轮播
  • 16 jQuery事件
    • 16.1 jQuery鼠标事件之click与dblclick事件
    • 16.2 jQuery鼠标事件之mousedown与mouseup事件
    • 16.3 jQuery鼠标事件之mouseenter与mouseleave事件
    • 16.4 jQuery鼠标事件之mouseover与mouseout事件
    • 16.5 jQuery鼠标事件之hover
    • 16.6 jQuery鼠标事件之mousemove事件
    • 16.7 jQuery鼠标事件之focusin与focuout事件
    • 16.8 jQuery表单事件之focus与blur事件
    • 16.9 jQuery表单事件之select事件
    • 16.10 jQuery表单事件之submit事件
    • 16.11 jQuery表单事件之change事件
    • 16.12 jQuery事件举例-轮播
    • 16.13 jQuery事件的绑定
    • 16.14 jQuery事件委托
    • 16.15 jQuery事件冒泡的处理
    • 16.16 jQuery键盘事件之keyup、keydown、keypress事件
    • 16.17 通过键盘事件控制元素移动
    • 16.18 通过jQuery键盘事件进行表单元素验证
  • 17 jQuery案例
    • 17.1 jQuery案例一无缝滚动
    • 17.2 jQuery案例二放大镜
    • 17.3 jQuery案例三瀑布流
    • 17.4 jQuery案例四简单的树形菜单
    • 17.5 jQuery案例五居中放大
    • 17.6 jQuery案例六右侧在线客服
    • 17.7 jQuery案例七五星评分
    • 17.8 jQuery案例八抽奖
    • 17.9 jQuery案例九购物车
    • 17.10 jQuery案例十手风琴
    • 17.11 jQuery案例十一轮播
    • 17.12 jQuery案例十二进度条
    • 17.13 jQuery案例十三普通图表
    • 17.14 jQuery案例十三数组图表
    • 17.15 jQuery案例十三多数组图表
    • 17.16 jQuery案例十四轮播与手风琴结合
    • 17.17 jQuery案例十五滚动楼层效果
    • 17.18 jQuery案例十六右侧悬浮楼层滚动
    • 17.19 jQuery仿天猫页面楼层跳转
  • 18 jQueryMoblie基础
    • 18.1 jqueryMoblie HelloWorld
    • 18.2 jQueryMoblie按钮
    • 18.3 jQueryMoblie列表
  • 19 jQuerymobile案例
    • 19.1 作品展示
    • 19.2 可折叠列表
    • 19.3 可折叠集合
    • 19.4 多级折叠
    • 19.5 搜索过滤
  • 20 实训
    • 20.1 JavaScript程序设计实训内容及要求
    • 20.2 实训报告
认识正则表达式

1.什么是正则表达式

正则表达式(Regular Expression,简称regexp)

是一种描述字符串结构的语法规则。

是一个特定的格式化模式,用于验证各种字符串是否匹配这个特征,进而实现高级的文本查找、替换、截取内容等操作。

应用:在项目开发中,手机号码指定位数的隐藏、数据采集、敏感词的过滤以及表单的验证等功能,都可以利用正则表达式来实现。

适用领域:在操作系统(Unix、Linux等)、编程语言(C、C++、Java、PHP、Python、JavaScript等)。

举例:以文本查找为例,若在大量的文本中找出符合某个特征的字符串(如手机号码),就将这个特征按照正则表达式的语法写出来,形成一个计算机程序识别的模式(Pattern),然后计算机程序就会根据这个模式到文本中进行匹配,找出符合规则的字符串。

2.如何使用正则

在开发中,经常需要根据正则匹配模式完成对指定字符串的搜索和匹配。

RegExp对象提供的exec()方法

String对象提供的match()方法

exec()方法

exec()方法用于在目标字符串中搜索匹配,一次仅返回一个匹配结果。

例如,在指定字符串str中搜索abc。

var str = 'AbC123abc456';

varreg = /abc/i;// 定义正则对象

reg.exec(str); // 匹配结果: ["AbC", index: 0, input:"AbC123abc456"]

“/abc/i”中的“/”是正则表达式的定界符,“abc”表示正则表达式的模式文本,“I”是模式修饰标识符,表示在str中忽略大小写。

exec()方法的参数是待匹配的字符串str,匹配成功时,该方法的返回值是一个数组,否则返回null。

从exec()的返回结果中可以看出,该数组保存的第1个元素(AbC)表示匹配到的字符串;第2个元素index表示匹配到的字符位于目标字符串中的索引值(从0开始计算);第3个参数input表示目标字符串(AbC123abc456)。

match()方法

String对象中的match()方法除了可在字符串内检索指定的值外,还可以在目标字符串中根据正则匹配出所有符合要求的内容,匹配成功后将其保存到数组中,匹配失败则返回false。

var str = "It's is the shorthand ofit is";

var reg1 = /it/gi;

str.match(reg1);    // 匹配结果:(2) ["It","it"]

var reg2 = /^it/gi; 

str.match(reg2);    // 匹配结果:["It"]

var reg3 = /s/gi; 

str.match(reg3);    // 匹配结果:(4) ["s", "s","s", "s"]

var reg4 = /s$/gi;

str.match(reg4);    // 匹配结果:["s"]

定位符“^”,可用于匹配字符串开始的位置。

定位符“$”,可用于匹配字符串结尾的位置。

g表示全局匹配,用于在找到第一个匹配之后仍然继续查找。

3.获取正则对象

在JavaScript应用中,使用正则表达式之前首先需要创建正则对象。除了前面讲解过的字面量方式创建外,还可以通过RegExp对象的构造函数的方式创建。

//① 字面量方式

/pattern/flags

//② RegExp对象构造函数方式

newRegExp(pattern [, flags])

RegExp(pattern [, flags])

pattern是由元字符和文本字符组成的正则表达式模式文本。

元字符是具有特殊含义的字符,如“^”、“.”或“*”等。

文本字符就是普通的文本,如字母和数字等。

flags表示模式修饰标识符,用于进一步对正则表达式进行设置。


模式修饰符,还可以根据实际需求多个组合在一起使用。

例如,既要忽视大小写又要进行全局匹配,则可以直接使用gi,并且在编写多个模式修饰符时没有顺序要求。

因此,模式修饰符的合理使用,可使正则表达式变得更加简洁、直观。

为了让读者更好的理解正则对象的获取,以匹配特殊字符“^”、“$”、“*”、“.”和“\”为例进行对比讲解。

varstr = '^abc\\1.23*edf$';

var reg1 = /\.|\$|\*|\^|\\/gi; // 字面量方式创建正则对象

var reg2 = RegExp('\\.|\\$|\\*|\\^|\\\\', 'gi'); // 构造函数方式创建正则对象

str.match(reg1);    // 匹配结果:(5) ["^", "\",".", "*", "$"]

str.match(reg2);    // 匹配结果:(5) ["^", "\",".", "*", "$"]

选择符“|”表示“或”,查找条件只要其中一个条件满足即可成立。

JavaScript中字符串存在转义问题,因此代码中str里的“\\”表示反斜线“\”。

在正则中匹配特殊字符时,也需要反斜线(\)对特殊字符进行转义。例如,“\\\\”经过字符串转义后变成“\\”,然后正则表达式再用“\\”去匹配“\”。

注意:构造函数方式与字面量方式创建的正则对象,虽然在功能上完全一致,但它们在语法实现上有一定的区别,前者的pattern在使用时需要对反斜杠(\)进行转义。而后者的pattern在编写时,要放在定界符“/”内,flags标记则放在结尾定界符之外。

参考代码

<script type="text/javascript">

var str = "ABC123abc";

var reg1 = /abc/; //定义正则对象

var res1 = reg1.exec(str);//匹配结果

console.log(res1);//abc,index:6

var reg2 = /abc/i;//"i":模式修饰符,忽略大小写;"abc"是表示正则表达式的模式文本;"/"正则表达式的定界符

var res2 = reg2.exec(str);

console.log(res2);//ABC,index:0

var reg3 = /abcd/i;

var res3 = reg3.exec(str);

console.log(res3);//null

/*

方法说明:

exec()方法用于在目标字符串中搜索匹配,一次仅返回一个匹配结果

*/

</script>

<script>

var str = "It's is the shorthand of it is";

var reg1 = /it/gi;//"g"模式修饰符:用于在目标字符串中进行全局匹配

var res1 = str.match(reg1);

console.log(res1);//(2)["It","it"]

var reg2 = /abc/gi;

var res2 = str.match(reg2);

console.log(res2);//null

//定位符"^",用于确定字符在字符串中的位置,"^"用于匹配字符串开始的位置

//"$",用于匹配字符串结束的位置

var reg3 = /^it/gi;

var res3 = str.match(reg3);

console.log(res3);//["It"]

var reg4 = /is$/gi;

var res4 = str.match(reg4);

console.log(res4);//["is"]

var reg5 = /^it$/gi;

var res5 = str.match(reg5);

console.log(res5);//null

var reg6 = /^i.*s$/gi;

var res6 = str.match(reg6);

console.log(res6);//["It's is the shorthand of it is"]

</script>

<!--

RegExp对象构造函数方式

new RegExp(pattern [,flags])

pattern:模式文本,由元字符和文本字符组成的正则表达式模式文本

flags:模式修饰符

说明:

元字符:具有特殊含义的字符,如“^”、“.”或“*”、“$”、“?”

文本字符:如字母和数字

-->

<script type="text/javascript">

var str = "^abc\\1.23*edf$";

var reg1 = /\.|\^|\*|\$|\\/gi;//字面量方式创建正则对象

var res1 = str.match(reg1);

console.log(res1);

var reg2 = RegExp('\\.|\\^|\\*|\\$|\\\\','gi');//构造函数方式创建正则对象

var res2 = str.match(reg2);

console.log(res2);

/*

选择符“|”,可以理解为“或”,经常用于查找的条件有多个,只要有其中一个条件满足即可成立的情况。

字符串中“\\”表示反斜线“\”

同时,早正则匹配特殊字符时,也需要反斜线(\),对特殊字符进行转义。

*/

/*

模式修饰符,还可以根据实际需求多个组合在一起使用。

例如,既要忽视大小写又要进行全局匹配,则可以直接使用gi,并且在编写多个模式修饰符时没有顺序要求。

因此,模式修饰符的合理使用,可使正则表达式变得更加简洁、直观。

*/

</script>