JS学习笔记3

正则表达式
创建正则表达式的对象
①使用构造函数： 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及以下的浏览器

JS学习笔记3

推荐阅读更多精彩内容