正则表达式
创建正则表达式的对象
①使用构造函数: var 变量 = new RegExp("正则表达式","匹配模式");这种方式正则表达式前后不需要//
②使用字面量创建: 也可以直接用 /正则表达式/(匹配模式) 的方式创建
使用typeof检查正则对象,会返回object
第二个参数匹配模式可以是i或g ①i 忽略大小写 ②g 表示全局匹配模式
可以使用test()检查一个字符串是否满足该正则表达式的规则,符合返回true,否则返回false。
常用正则语法:
使用 | 表示或者的意思
[]里的内容也是或的关系
[ab] == a|b
[a-z] 任意小写字母
[A-Z] 任意大写字母
[A-z] 任意字母,中间包括几个特殊字字符
[0-9] 任意数字
[^ ] 除了
^ 表示开头
$ 表示结尾
如果在正则表达式中同时使用^ $则要求字符串必须完全符合正则表达式-
补充语法
* \w * - 任意字母、数字、_ [A-Za-z0-9_] * \W * - 除了字母、数字、_ [^A-Za-z0-9_] * \d * - 任意的数字 [0-9] * \D * - 除了数字 [^0-9] * \s * - 空格 * \S * - 除了空格 * \b * - 单词边界 * \B * - 除了单词边界
量词
通过量词可以设置一个内容出现的次数
量词只对它前边的一个内容起作用
{n} 正好出现n次
{m,n} 出现m-n次
{m,} m次以上
+ 至少一个,相当于{1,}
* 0个或多个,相当于{0,}
? 0个或1个,相当于{0,1}字符串配合正则表达式使用的方法
split()
* - 可以将一个字符串拆分为一个数组
* - 方法中可以传递一个正则表达式作为参数,这样方法将会根据正则表达式去拆分字符串
* - 这个方法即使不指定全局匹配,也会全都插分search()
* - 可以搜索字符串中是否含有指定内容
* - 如果搜索到指定内容,则会返回第一次出现的索引,如果没有搜索到返回-1
* - 它可以接受一个正则表达式作为参数,然后会根据正则表达式去检索字符串
* - serach()只会查找第一个,即使设置全局匹配也没用match()
* - 可以根据正则表达式,从一个字符串中将符合条件的内容提取出来
* - 默认情况下我们的match只会找到第一个符合要求的内容,找到以后就停止检索
* 我们可以设置正则表达式为全局匹配模式,这样就会匹配到所有的内容
* 可以为一个正则表达式设置多个匹配模式,且顺序无所谓
* - match()会将匹配到的内容封装到一个数组中返回,即使只查询到一个结果replace()
* - 可以将字符串中指定内容替换为新的内容
* - 参数:
* 1.被替换的内容,可以接受一个正则表达式作为参数
* 2.新的内容
* - 默认只会替换第一个
DOM
文档对象模型(document object model)
浏览器已经为我们提供 文档节点 对象这个对象是window属性,可以在页面中直接使用,文档节点代表的是整个网页
事件
事件就是用户和浏览器之间的交互行为,比如:点击按钮,鼠标移动、关闭窗口。。。
可以为按钮的对应事件绑定处理函数的形式来响应事件,这样当事件被触发时,其对应的函数将会被调用
btn.onclick = function(){
alert("你还点~~~");
};
像这种为单击事件绑定的函数,我们称为单击响应函数
文档的加载
浏览器在加载一个页面时,是按照自上向下的顺序加载的,读取到一行就运行一行,如果将script标签写到页面的上边,在代码执行时,页面还没有加载,页面没有加载DOM对象也没有加载,会导致无法获取到DOM对象
-
onload事件会在整个页面加载完成之后才触发,为window绑定一个onload事件,该事件对应的响应函数将会在页面加载完成之后执行,这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
window.onload = function(){ ...... }
dom查询
常用方法:
document.getElementById() 根据id获取元素
document.getElementsByTagName() 根据标签名获取元素
document.getElementsByClassName() 根据类名获取元素
.innerHTML 获取当前元素的内容
.childNodes 获取当前元素的所有子节点,返回一个类数组
.firstChild 获取当前元素的第一个子节点
.firstElementChild 获取当前元素的第一个子元素
.previousSibling .nextSibling 获取当前元素的兄弟节点
.nextElementSibling、.previousElementSibling 获取当前元素的兄弟元素
.parentNode 获取当前元素的父节点其他方法
document.documentElement 保存的是html根标签
document.all 代表页面中所有的元素
在document中有一个属性body,它保存的是body的引用 var body = document.body;
document.querySelector() 采用css选择器语法来选择指定元素,注意传入的参数是字符串,只会返回一个,返回多个需要使用document.querySelectorAll()方法
appendChild() 用于向一个父节点中添加一个新的子节点
用法:父节点.appendChild(子节点);
document.createElement() 可以用于创建一个元素节点对象,它需要一个标签名作为参数,
将会根据该标签名创建元素节点对象,并将创建好的对象作为返回值返回
insertBefore() 可以在指定的子节点前插入新的子节点 语法:父节点.insertBefore(新节点,旧节点);
document.createTextNode() 可以用来创建一个文本节点对象,
需要一个文本内容(字符串形式)作为参数,将会根据该内容创建文本节点,并将新的节点返回
replaceChild() 可以使用指定的子节点替换已有的子节点 语法:父节点.replaceChild(新节点,旧节点);
removeChild() 可以删除一个子节点 语法:父节点.removeChild(子节点);
getElementsByClassName()可以根据class属性值获取一组元素节点对象,但是该方法不支持IE8及以下的浏览器