(1)正则表达式:
检查字符串是否符合规定的格式 检查字符串是不是电子邮箱的规则等等
严格区分大小写的
1、创建正则表达式对象:
Var reg = new RegExp(“正则表达式”);
Var reg = new RegExp(“正则表达式”,”匹配模式”);
Var reg = /正则表达式/匹配模式/
2、正则表达式:
“abc” 匹配abc这个串
“a | ab” 匹配a或者ab
[ ] 匹配括号里面的其中一个
[ A - Z ] 匹配任意大写字母
[ A - z ] 匹配任意字母
[^0 - 9] 匹配非数字
a{10} 匹配连续的10个a
a{2,5} 匹配连续的a,最少2个最多5个
(ab){3, } 匹配连续的ab,大于等于三个
a+ 匹配包含至少一个 n 的字符串。
a* 匹配包含零个或多个 n 的字符串。
a? 匹配任何包含零个或一个 n 的字符串。
^a 匹配以a开头的串
a$ 匹配以a结尾的串
. 匹配任意一个字符(除了换行和结束符)
\. 匹配一个点
\n 匹配换行
(其他看API)
3、匹配模式:
i 忽略大小写,根据正则表达书匹配
g 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
m 执行多行匹配。
4、RegExp对象方法:
1 RegExp对象.text(字符串) 检查该字符串是否符合该正则表达式
2 RegExp对象.exec(字符串)
检查该穿中是否有符合正则表达式的字串,有则返回位置第一个出现位置
5、支持正则表达式的 String 对象的方法:
1 str.split(正则表达式对象); 将该字符串按正则表达式拆分为一个数组
2 str.search(正则表达式对象); 检查在字符串是否含有正则表达式匹配的内容
3 str.match(正则表达式对象); 将符合正则表达式的串提取出来
(正常找到第一个就是停止,正则表达式对象加上匹配模式g让他全部匹配)
4 str.replace(正则表达式对象,字符串)
将匹配到的位置替换为该字符串
(2)DOM:
DOM: Document Object Model 文档(网页)对象模型
DOM就是让我们操作网页的,把html文件里面的东西都转换为一个对象
(DOM 提供了访问和操作HTML文档的标准方法)
1、简介:
2、事件简介:
事件就是一种操作如:点击鼠标,双击鼠标,关闭窗口,移动鼠标等等
例: onclick 就表示单击的意思
事件通常有三步:
1 获得操作对象
2 为该对象的操作赋一个函数
3 在函数中写操作之后的响应
实现当单击按钮,弹出111提示
有两种方式实现:
方式一:(这种方式不推荐,js代码和Html代码写在一块,结构和行为耦合)
<button type="button" onclick="alert('111')">
我是一个按钮
</button>
方式二:
<button id="but1">我是一个按钮</button>
<script >
var but1 = document.getElementById("but1"); //获得该按钮对象
but1.onclick = function(){ //为该对象的单击行为写一个函数
alert("111"); (响应函数)
};
</script>
常见的响应操作:
onclick 单击
ondblclick 双击
onkeydown 某个键被按下
onkeyup 某个键松开
onkeypress 某个键被按下并松开
onload 页面被加载完毕
(有很多的事件: 详细的去看API的DOM Event 对象)
onload 事件讲解:
这个事件常用在把script标签都写在最前面
网页的代码执行顺序是一行一行的,当我们要把js代码写在最前面,当html文档中的某些标签没有创建的时候,当然不能创建他的对象.
使用ohload事件,可以等整体的js代码写在最前面,
他的作用是等页面全部加载完,在加载js代码
响应函数什么时候执行,并不是跟着代码一行一行执行,
而是当有该事件被触发才会执行响应函数
3、事件对象:
当响应函数被触发的时候,浏览器每次将一个事件对象转为实参传入响应函数
该事件对象封装了当前事件的一切相关信息
(比如说:鼠标坐标,键盘那个键被按下等等)
通过该事件对象可以获得相关的属性
(API的DOM event查看不同事件的相关属性)
在其他浏览器都会往响应函数中传入一个事件对象
但在IE8及以下的浏览器中是将我们事件对象作为window的event属性保存的
怎么实现全部浏览器的兼并?????
4、事件的冒泡(Bubble)
(1) 什么是冒泡事件:
就是相同事件向外层传导,不会向里传导,后代元素被触发,其祖先元素的相同事件也会被触发
大部分情况下冒泡都是有用的(不需要取消冒泡),少数情况下冒泡没有用
(2)怎么取消事件的冒泡???
如果不希望发生冒泡,可以通过事件的对象(event)取消冒泡。
在响应函数中添加event.cancelBubble = true ; (取消冒泡)
只会对该响应有作用,该事件不会传给父类元素对象
(3)冒泡的应用:
事件的委派
将事件统一绑定给共同的祖先元素,这样当点击该元素的时候,
就会一直冒泡到祖先元素上,从而通过祖先元素的响应函数处理事件
5、事件的绑定:
方法一:
对象.响应事件 = function(){ //响应函数的实现};
存在的弊端:当对同一个响应事件绑定多个响应函数的时候,会出现后面把前面响应函数覆盖的情况
方法二:
对象.addEventListener(“不带on的响应事件”,响应函数,false);
把该响应函数绑定在该响应事件上,一个元素的同一个事件可以绑定多个响应函数
注意:
1 第一个参数为事件的字符串,开头不带有on
2 第三个参数表示是否在捕获阶段触发事件,一般传入false
3 事件触发按绑定函数的绑定顺序分别执行响应函数
4 IE8及其以下不支持,其他都支持
方法三:
对象.attachEvent(“响应事件”,响应函数)
把该响应函数绑定在该响应事件上,一个元素的同一个事件可以绑定多个响应函数
注意:
1 第一个参数为事件的字符串,开头带有on
2 事件触时,发先绑定后执行
3 只支持IE8以下
方法四:
怎么实现所有浏览器兼容可以??
定义一个函数
6、事件的传播:
关于事件的传播 微软公司和网景公司 有不同的设计,最后W3C结合两家公司做出一个方案
W3C将事件的传播分为了三个阶段:
1.捕获阶段:
从祖先元素往响应事件的目标元素捕获
2.目标阶段:
捕获结束,到达被触发的目标元素的事件上
3.冒泡阶段
由目标元素往祖先元素上冒泡,依次触发祖先元素事件
可以在 对象.addEventListener()函数的最后一个参数设置true,会在捕获阶段触发
(该方法不支持IE8及其以下,相应的IE8及其以下没有捕获阶段)
7、常见鼠标和滚轮事件
8、常见键盘事件:
事件绑给谁??
键盘事件一般绑定给可以获得焦点的对象或者document
焦点??
如:点击一个文本框,可以输入东西,光标一直闪烁
在文本框中输入内容,是文本框的默认行为,
如果在onkeydown取消(return false)默认行为,不会输入内容到文本框
(各种事件更多还是去看API)
(4)BOM
DOM是网页html对象模型
BOM是浏览器对象模型
BOM中提供了通过js操作浏览器的方法
BOD中提供的对象:
Window 代表整个浏览器窗口,同时window也是网页中的全局变量
Navigator 代表当前浏览器的信息,通过该对象识别不同的浏览器
Location 代表当前浏览器的地址栏信息(通过location可以获得地址栏信息和跳转页面)
History 代表浏览器的历史记录(可以通过该对象操作浏览器的历史记录)
(由于隐私的原因该对象不能获取到具体的历史记录,只能操作浏览器向前或者向后翻页,该操作只在当次访问的时候有效)
Screen 代表用户的屏幕显示器的相关信息
BOD的这些对象在浏览器中都是转为Window对象的属性来保存的
可以通过window.navigator或者navigator来访问
(1)Navigator对象常见的属性和方法:
Navigator对象的属性可以识别浏览器
appName 返回浏览器的名称。
appVersion 返回浏览器的平台和版本信息。
appCodeName 返回浏览器的代码名。
appMinorVersion 返回浏览器的次级版本。
userAgent 返回由客户机发送服务器的 user-agent 头部的值。
(等等方法去看API的Navigator)
但是由于历史的原因Navigator对象的大部分属性都不能帮我们识别浏览器了
现在只用userAgent来判断识别浏览器,当然可以通过一些浏览器特有的属性来判断
(2)History对象常见的属性和方法:
可以通过该对象操作浏览器的历史记录,由于隐私的原因该对象不能获取到具体的历史记录,
只能操作浏览器向前或者向后翻页,该操作只在当次访问的时候有效
Length 属性 返回浏览器历史记录列表的URL列表
back() 加载history列表的前一个URL(和浏览器的后退按钮一样)
forward() 加载history列表的下一个URL
go(int) 跳转到指定的页面(go(1)向前跳转一个页面,go(-2)往后跳转2个页面)
(3)location对象常见的方法和属性:
封装了浏览器的地址栏信息
直接打印location,为当前页面的地址
(如果改location,则浏览器会跳转到该网站,还会生成相应的历史记录)
href 属性 保存当前的浏览器地址url
assiqn(“地址”) 跳转到新网页,生成历史记录
reload() 重新加载当前网页(reload(ture) 把当前网页缓存刷新的时候重置)
replace(“地址”) 用新的文档替换当前文档,不生成历史记录
(5)定时器:(window方法或属性)
setInterval(函数,a) 定时调用
可以将一个函数每隔一段(a毫秒)时间调用一次
该函数的返回值为一个Number值,为该定时器的唯一标识
对该函数定时执行的时候,先把上一个关掉,以防一次开启多个定时器
clearInterval(唯一标识) 关闭相应的定时器
(与setInterval结合使用)
(可以传入任意的标识,只有遇到有效的标识才起作用,否则无操作)
(6) 延时器:(window方法或属性)
setTimeout(函数,延时)
在指定的毫秒数后调用执行函数,只执行一次
该函数的返回值为一个Number值,为该定时器的唯一标识
clearTimeout()
取消由 setTimeout() 方法设置的延时 timeout。
漂浮广告制作
折叠菜单制作
(添加一个css样式就折叠,这个样式通过限制高度隐藏下面内容)
下拉菜单制作
加入收藏和设置首页制作