DOM Document Object Model 文档对象模型
就是把 HTML 文档模型化,当作对象来处理
DOM 提供的一系列属性和方法可以视作一个工具箱,极大地方便了我们对文档的处理。
父节点 当前节点的父级
子节点 当前节点的子级
兄弟节点 和当前节点同属一个父级的节点
- onclick = "return false;"
- 1
- function getInnerText(element) {
- 2
- if (typeof element.innerText === "string") {
- 3
- return element.innerText;
- 4
- } else {
- 5
- return element.textContent;
- 6
- }
- 7
- }
- 8
- function setInnerText(element, content) {
- 9
- if (typeof element.innerText === "string") {
- 10 element.innerText = content;
- 11
- } else {
- 12 element.textContent = content;
- 13
- }
- 14
- }
onfocus();
onblur();
1 表示元素节点 2 表示属性节点 3 表示文本节点 8 表示注释节点
/* 所有获取节点相关属性都没有兼容性问题 */
childNodes // 子节点
children // 子元素 虽然不是早期 DOM 标准中的方法,但是所有浏览器都支持
nextSibling // 下一个兄弟节点
nextElementSibling // 下一个兄弟元素 有兼容性问题
previousSibling// 上一个兄弟节点
previousElementSibling // 上一个兄弟元素 有兼容性问题
firstChild // 第一个节点
firstElementChild // 第一个子元素 有兼容性问题
lastChild // 最后一个子节点
lastElementChild // 最后一个子元素 有兼容性问题
parentNode // 父节点 (一定是元素节点,所以无需处理)
通过对象的 style 属性只能设置和获取行内样式
获取样式的时候 如果行内没有该样式 输出空字符串
设置样式的时候 赋的值是一个字符串 如果这个属性有单位 一定要节点加单位
不严格的说:
// 如果样式很多 通过 直接控制类名 的方式加样式
// 如果样式比较少 通过直接设置比较方便
严格来说:
// 从标准的角度讲 即使是样式比较少的时候 设置样式也要用类名
// 但是有一类情况 是无论如何也必须直接通过 JS 加的 那就是涉及到计算的时候
在父元素中的最后追加子元素
father.appendChild(要追加的元素);
在父元素中的某个子元素前面插入子元素
father.insertBefore(要插入的元素, 插到这个元素的前面);
从父元素中移除子元素
father.removeChild(要移除的子元素);
方式一:直接在文档中书写
document.write("内容")
方式二:改变元素对象内部的 HTML
innerHTML="内容"
方式三:创建或克隆节点并追加
createElement();
cloneNode();
通过这两种方法创建出来的元素只是保存在内存中,必须放到页面上才行!
把字符串变为文档对象
把当前对象挂接到 DOM 树上
渲染引擎根据新的 DOM 树重新渲染
能不用递归尽量不用递归 递归非常消耗资源
我们一般用递归的情况也不多 但是回调就很常用了
console.log(fn6.name);// 函数名
console.log(fn6.length);// 形参个数
console.log(fn6.arguments);// 实参列表
JS 没有重载
但是通过 arguments 可以模拟重载
- 1
- function getMax(a, b, c) {
- 2
- if (getMax.arguments.length === 2) {
- 3
- return a > b ? a: b;
- 4
- }
- 5
- if (getMax.arguments.length === 3) {
- 6
- return (a > b ? a: b) > c ? (a > b ? a: b) : c;
- 7
- }
- 8
- }
- 1
- function sort(arr, fn) {
- 2
- for (var) {
- 3
- var flag = true;
- 4
- for (var) {
- 5
- if (fn(arr[j], arr[j + 1]) > 0) {
- 6
- var temp = arr[j];
- 7 arr[j] = arr[j + 1];
- 8 arr[j + 1] = temp;
- 9 flag = false;
- 10
- }
- 11
- }
- 12
- if (flag) {
- 13
- break;
- 14
- }
- 15
- }
- 16
- return arr;
- 17
- }
typeof 变量 // 判断这个变量是什么数据类型的
instanceof---- 作用: 判断这个对象是不是这个类型的 ----- 返回值
1. 开辟空间, 存储新创建的对象
2. 把 this 设置为当前的对象
3. 设置该构造函数中的属性和方法的值
4. 返回当前创建好的对象
- 1
- function Student(name, sex, age) { //name就是名字,//sex--性别,age---年龄
- 2 //设置属性和方法的值,不需要new Object();不需要返回值
- 3 //对象直接用this
- 4 //this.name是对象的属性,后面的name是用户传的参数
- 5 this.name = name; //名字
- 6 this.age = age;
- 7 this.sex = sex;
- 8 this.sayHi = function() {
- 9 console.log("阿涅哈斯诶呦!");
- 10 console.log("我的名字:" + this.name + "性别" + this.sex + "年龄" + this.age);
- 11
- };
- 12
- }
- 13 //创建对象
- 14
- var stu = new Student("小明", "男", 18);
- 15 stu.sayHi();
JSON 格式的数据都是键值对, 这些键值对, 键 --- 是字符串, 值 ---- 字符串
遍历
for 循环遍历的是有一定长度的数据(数组)
for-in 循环 --- 主要遍历的就是对象 --- 键值对 (对象)
基本类型 --- 值类型 ---String Undefined Number Boolean Null
复杂类型 --- 引用类型 --Object 数组 --Array,Date.....
基本类型的值存储在 ---- 栈中
复杂类型的地址 (引用) 存储在栈中,--- 地址指向的空间中的对象(对象)--- 存储在堆中
创建对象并返回对象 --- 返回的是对象的地址 (对象在堆空间中的地址)
基本类型传值的时候,传递的是 值
复杂类型 (引用类型) 传递的时候, 传递的是: 地址(引用)
- 1 isArray();这个方法是判断变量是不是数组2 toString();这个方法是转字符串类型3 join();这个方法可以把数组中每个元素按照分隔符的方式转换成字符串返回4 push();追加元素的5 pop(); //删除数组中最后一个元素,返回值是被删除的这个元素
- 6 shift();这个方法删除数组中的第一个元素,
- 返回值就是被删除的元素7 unshift();这个方法向数组中第一个元素之前插入一个新的元素 (或者是插入多个元素),
- 返回值是数组的新的长度8 find();在某个数组中查找满足条件的元素,
- 找到则返回该元素,找不到则返回undfined 9 concat(); //新的数组和旧的数组拼接,产生一个新的数组
- 10 slice();可以从原来的数组中截取出来指定的一部分元素,产生新的数组11 splice();第一个参数是开始的下标,
- 第二个参数是要替换的个数;可以有第三个参数,第四个参数.......;该方法返回的是一个数组,
- 如果没有替换则返回空数组.12 indexOf();
- ES5,
- 查找某个元素,第一个参数是要查找的元素,
- 第二个参数是开始查找的下标,
- 找到了则返回该元素的索引,找不到则返回 - 1 13 lastIndexOf();
- ES5,
- 这个方法也是查找元素,
- 从后面向前面找,
- 找到则返回对应的下标,
- 找不到则返回 - 1,
- 序号规则是按照数组中的元素的序号顺序进行返回14 >>> >>下面几种方法,ES5,都是在遍历数组中的每一个元素,并且利用回调函数处理数组中的每一个元素,所有的回调函数都是采用(数据项,序号)的方式调用15 arr.every(fn(v, i) {});
- ES5,
- 传入一个函数,
- 判断每个数组中的元素是否满足条件,
- 如果都满足在回调函数中则返回true,有一个不满足条件的则返回false。16 arr.some(fn(v, i) {});
- ES5,
- 传入一个函数,
- 判断每个数组中的元素是否满足条件,
- 如果都不满足在回调函数中则返回false,有一个满足条件的则返回ture。17 arr.map(fn(v, i) {});
- ES5,
- map这个方法可以传入一个回调函数。比如直接传入了一个Math.sqrt方法,
- sqrt方法是为某个数字开平方的,
- 调用map方法传入Math.sqrt的时候,
- 去掉了括号,
- 也没有传入参数 (map方法内部帮我们遍历并且传入数组的每个元素) 18 arr.filter(fn(v, i) {});
- ES5,变量数组中每一个元素,并且按照某个要求去判断该元素是否符合要求,如果符合,那么回调函数返回true,如果不满足,回调函数返回false,该方法会将返回true的元素组织起来构成一个新的数组。全为false返回空数组19 arr.ForEach(function(v, i) {});
- ES5,单纯的循环操作。没有返回值,也没有跳出,这样的循环就是迭代。
ES:Number, Boolean, String, Math, Array, Date, Error, RegExp, Object, Function--- 系统自带的就是内置对象
BOM: window, document, history, location...
DOM: html, body, div, ...
var dt=new Date();// 显示的是星期,月份,年份,小时,分钟,秒
var dt=Date.now();// 毫秒 --- 为了进行计算
var dt=+new Date();// 毫秒
两种格式的日期转换
console.log(dt.valueOf());// 显示的是毫秒
var dt=new Date(1471769122820); // 显示年份等
- 1 console.log(Math.max(1, 2, 3, 4, 5)); //这些数字中的最大值
- 2 console.log(Math.min(1, 2, 3, 4, 5)); //返回多个数中的最小值
- 3 console.log(Math.floor(45.84334)); //向下取整
- 4 console.log(Math.ceil(5.4443)); //向上取整
- 5 console.log(Math.round(67.55)); //四舍五入 console.log(Math.random());//随机数0-1
- 6 console.log(parseInt(Math.random() * 10 + 1)); //随机数1-10
- 7 console.log(parseInt(Math.random() * 100 + 1)); //随机数1-100
- 8 console.log(Math.abs( - 100)); //返回绝对值
- 9 console.log(Math.pow(4, 3)); //4的3次幂
- 10 console.log(Math.sqrt(16)); //开平方
- 11 console.log(Math.sin(4)); //返回正弦值
1. 基本类型不能直接调用属性和方法
2. 对象可以直接调用属性和方法
属性: length, 获取字符串的长度
方法:
charAt(下标); 获取该下标位置的字符串
charCodeAt(下标); 获取对应下标字符串的 ASCII 的码值
concat(字符串); 拼接字符串的
slice(开始下标, 结束下标); 截取一段字符串的
substring(开始的下标, 结束的下标); 截取指定部分的字符串
substr(开始的下标,截取的个数); 截取指定长度的字符串
toLocaleUpperCase 字符串转大写
toLocaleLowerCase 字符串转小写
indexOf 查找指定的字符串,找到则返回下标,找不到返回 - 1
lastIndexOf 从后面向前面找指定的字符串,找不到也是返回的是 - 1
trim 切掉字符串前面和后面的空格
split 切割指定的字符串的,返回的是一个数组
replace 替换指定的字符串,返回的是一个新的字符串
DOM: 中的顶级对象是 document---- 太监 (大总管)
BOM: 中的顶级对象是 window------ 皇上
整个浏览器就是 window, 页面中的 document 也属于 window
变量, 函数, 对象都属于 window
但是: 写代码的时候, window 可以直接省略
- 1
- if (window.confirm("你确定要退出吗?")) {
- 2 //执行到这里,证明用户点击了确定按钮
- 3 console.log("点击了确定");
- 4
- } else {
- 5 //证明了用户点击了取消的按钮
- 6 console.log("点击了取消");
- 7
- }
- 8 window.prompt("请输入用户名");
location.href 是一个属性. 可以跳转到指定的页面
- 1 win = window.open("09test.html", "_blank", "width=200,height=200,top=100,left=100,resizable=no");
- 2 win.close(); //此时close方法 无论open中第一个参数是不是地址都可以关闭窗口
- 3 win.moveTo(300, 300); //把新打开的窗口移动到距离左侧和上面300px
- 4 win.moveBy(20, 20); //每次移动20px
- 5 win.resizeTo(400, 400); //窗口的大小发生了改变
- 6 win.resizeBy(40, 40);
setInterval 计时器, 该计时器返回来的是该计时器的 id
参数:
1.--- 要执行的函数
2.--- 时间: 1000 毫秒 ----
返回值: 是当前这个计时器的 id
clearInterval 销毁计时器的, 需要的参数就是计时器的 id
setTimeout(function () {alert(" 啊!.....");},1000);
clearTimeout(timeId);
- 1 console.log(window.location.hash); //获取地址栏中有#后面的内容
- 2 console.log(window.location.host);
- 3 console.log(window.location.hostname);
- 4 console.log(window.location.pathname);
- 5 console.log(window.location.port);
- 6 console.log(window.location.protocol);
- 7 console.log(window.location.search);
- 8 location.href = ""; -------属性9 location.assign("http://www.baidu.com"); //---方法
- 10 location.replace("http://www.baidu.com"); //---方法----地址不会记录到历时中----后退点不了
- 11 location.reload(); //刷新的---一般情况在页面中谁不会来一个按钮点一下刷新
console.log(window.navigator.userAgent);
console.log(window.navigator.platform);
window.history.forward();
window.history.back();// 后退
- 1 document.getElementById("txt").onkeydown = function(e) {
- console.log(e.keyCode);
- };
- 2 window.onresize = function() {
- 3
- if (document.body.clientWidth > 960) {
- 4 console.log("您用的是电脑浏览的该页面");
- 5
- } else if (document.body.clientWidth > 500) {
- 6 console.log("您用的是平板浏览的该页面");
- 7
- } else {
- 8 console.log("您用的是手机浏览的页面");
- 9
- }
- 10
- }
- 11
- }; // 判断浏览器窗口大小
- 12 document.onclick = function(e) {
- 13 document.title = e.screenX + "===" + e.screenY; //screenX和screenY是相对于屏幕的左上角
- 14 console.log(e);
- 15
- };
- 16 screenX和screenY是相对于屏幕左上角的坐标17 e.button是鼠标左右键和滚轮的值18 e.keyCode是获取用户按下的是哪一个键盘中的键19 e.shiftKey判断用户是否按下了shift键20 this是当前触发事件的对象21 target是事件源对象-----源头---IE8中不支持22 window.event.srcElement是事件源对象----源头---谷歌支持
window.onbeforeunload=function () { alert(" 您确定要关闭当前页面吗?");};
window.onunload=function () {alert(" 页面已经关闭了 ");};
- 1 document.onmousemove = function(e) {
- 2 e = e || window.event; // 兼容代码
- 3 document.title = e.clientX + "===" + e.clientY; // clientX和clientY----事件参数获取
- 4 imgObj.style.position = "absolute";
- 5 imgObj.style.left = e.clientX + "px";
- 6 imgObj.style.top = e.clientY + "px";
- 7 imgObj.style.left = e.pageX + "px"; //pageX--包含可视区域的横坐标和隐藏区域
- 8 imgObj.style.top = e.pageY + "px"; //pageY---包含可视区域的纵坐标和隐藏区域
- 9
- };10注意:11 1.如何获取某个事件处理的函数中的参数: arguments.length 12 arguments---是一个对象,
- 可以看成是一个数组13 2.获取可视区域的横纵坐标: 14 > 事件参数.clientX和事件参数.clientY 15 > 事件参数: 就是某个事件处理的函数中传入的参数: 16 > 事件参数可以使用arguments[0]来代替17 IE8中事件处理的函数中没有参数,
- 如何在IE8浏览器中用到这个事件参数 ? 18答: window.event 19解决事件参数兼容问题: 20 e = e ? e: window.event;或者e = e || window.event;
- 21 > 图片能够跟着鼠标移动是设置了图片的left和top分别等于clientX和clientY 22 clientX和clientY是获取的可视区域的横纵坐标23 > 如果页面有滚动条了,
- 此时卷出去的区域应该用pageX和pageY 24 > e.type来获取事件的类型 (没有on)
- 1
- function addEvent(element, eventName, fn) {
- 2
- var oldEvent = element["on" + eventName];
- 3
- if (oldEvent == null) { //表示该事件没有处理函数
- 4 element["on" + eventName] = fn; //注册事件了
- 5
- } else {
- 6 //有事件了---先调用原来的事件,再重新注册新的事件
- 7 element["on" + eventName] = function() {
- 8 //调用原来的事件-注册新的事件
- 9 oldEvent();
- 10 fn();
- 11
- };
- 12
- }
- 13
- }
三种注册事件的方式:
1 对象. on 事件名字 = 事件处理函数;
2 对象. addEventListener("事件的名字", 事件处理函数, false);
3 对象. attachEvent("on 事件的名字", 事件处理函数);
注册事件方式的区别:
1.btnObj.onclick=fn; 这种方式任何浏览器都支持
2.btnObj.addEventListener(); 谷歌和火狐浏览器支持
3.btnObj.attachEvent();IE8 支持
同一个元素同时注册多个相同的事件,addEventListener 和 attachEvent 区别:
前者三个参数, 后者两个参数
前者第一个参数是事件的名字,没有 on
后者第一个参数是事件的名字, 有 on
addEventListener 方法中第三个参数如果是 false 则是事件冒泡, 如果是 true 则是事件捕获
注册事件有三种方式:
移除事件有三种方式:
1. 对象. on 事件的名字 = null
举例子: btnObj.onclick=null;
2. 对象. removeEventListener("事件的类型", 该事件对应的处理函数的名字, false);
举例子: btnObj.removeEventListener("click",f1,false);
3. 对象. detachEvent("on 事件的类型", 改时间对应的处理函数的名字);
举例子: btnObj.detachEvent("onclick",f1);
- 1
- var eventArg = {
- 2 myAddEventListener: function(element, eventName, fn) {
- 3 //判断注册事件的方法是否存在----当前浏览器是否支持这种写法
- 4
- if (element.addEventListener) { //谷歌和火狐
- 5 element.addEventListener(eventName, fn, false);
- 6
- } else if (element.attachEvent) { //IE8
- 7 element.attachEvent("on" + eventName, fn);
- 8
- } else {
- 9 element["on" + eventName] = fn;
- 10
- }
- 11
- },
- 12 myRemoveEventListener: function(element, eventName, fn) {
- 13
- if (element.removeEventListener) { //谷歌和火狐
- 14 element.removeEventListener(eventName, fn, false);
- 15
- } else if (element.detachEvent) { //IE8
- 16 element.detachEvent("on" + eventName, fn);
- 17
- } else { //所有浏览器都支持
- 18 element["on" + eventName] = null;
- 19
- }
- 20
- }
- 21
- };
如果通过 addEventListener 注册事件, 该事件中的 this 就是当前的触发事件的对象
如果是按钮注册点击事件, 点击的时候 this 就是按钮对象
如果通过 attachEvent 注册事件, 该事件中的 this 是 window 对象 ====IE8 中
事件冒泡:
有一个元素 A, 在 A 元素内又有一个元素 B, 此时 A 和 B 都注册了相同的事件,如果 B 的事件被触发了, 那么此时 A 元素对应的事件也会被触发。
捕获阶段 -------1
目标阶段 -------2
冒泡阶段 -------3
通过事件参数 --e.eventPhase 可以获取当前事件经历的是什么阶段
如果是 1 则是捕获阶段
如果是 2 则是目标阶段: 第一次点谁谁就是目标
目标阶段之后就是冒泡阶段
以上是结合第三个参数是 false 的情况而言
另一种情况: 第三个参数是 true 的时候, 只有捕获阶段和目标阶段
先捕获, 然后再目标
一般网页中都是有事件冒泡的, 一般情况我们不用捕获
两种方式:
第一种: 方法 e.stopPropagation();
第二种: 属性 window.event.cancelBubble=true;
- 1 small.onmousemove = function(e) {
- 2
- var w = e.pageX - mask.offsetWidth / 2;
- 3
- var h = e.pageY - mask.offsetHeight / 2;
- 4
- var x = w - 100;
- 5
- var y = h - 100;
- 6 x = x < 0 ? 0 : x;
- 7 y = y < 0 ? 0 : y;
- 8 x = x > this.offsetWidth - mask.offsetWidth ? this.offsetWidth - mask.offsetWidth: x;
- 9 y = y > this.offsetHeight - mask.offsetHeight ? this.offsetHeight - mask.offsetHeight: y;
- 10 mask.style.left = x + "px";
- 11 mask.style.top = y + "px";
- 12 //按比例移动图片;遮挡层移动的距离/图片的移动距离=遮挡层最大移动距离/图片的最大移动距离--->图片移动的距离=遮挡层移动的距离*图片的最大移动距离/遮挡层最大移动距离
- 13
- var maxMaskMove = this.offsetWidth - mask.offsetWidth; //遮挡层移动最大距离
- 14
- var maxImgMove = img.offsetWidth - big.offsetWidth; //图片移动最大距离
- 15
- var imgMoveLeft = x * maxImgMove / maxMaskMove;
- 16
- var imgMoveTop = y * maxImgMove / maxMaskMove;
- 17 //设置图片的移动
- 18 img.style.marginLeft = -imgMoveLeft + "px";
- 19 img.style.marginTop = -imgMoveTop + "px";
- 20
- };
scrollHeight: 文本内容的高度
scrollWidth: 文本内容的宽度
width 和 height 和 scrollHeight 及 scrollWidth 没关系的 (没有内容一致)
scrollTop: 竖着的滚动条拉动后, 文本出去的高度
scrollLeft: 横着的滚动条拉动后, 文本出去的内容
- 1
- function scroll() {
- 2
- return {
- 3 left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
- 4 top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0 5
- };
- 6
- }
- 1 //根据id获取对应的元素
- 2
- function my$(id) {
- 3
- return document.getElementById(id);
- 4
- }
- 5
- /*
- 6 * element---任意的元素
- 7 * attr---属性
- 8 * */
- 9
- function getAttrValue(element, attr) {
- 10
- return element.currentStyle ? element.currentStyle[attr] : window.getComputedStyle(element, null)[attr] || 0;
- 11
- }
- 12
- /*
- 13 * element----要移动的元素
- 14 * target----移动的目标
- 15 * 初级版本
- 16 * */
- 17
- function animate1(element, target) {
- 18 clearInterval(element.timeId);
- 19 element.timeId = setInterval(function() {
- 20 //获取当前的位置
- 21
- var current = element.offsetLeft;
- 22 //每次移动多少步
- 23
- var step = (target - current) / 10; //(目标-当前)/10
- 24 step = step > 0 ? Math.ceil(step) : Math.floor(step);
- 25 current = current + step;
- 26 element.style.left = current + "px";
- 27
- if (current == target) {
- 28 clearInterval(element.timeId);
- 29
- }
- 30 console.log("target:" + target + "current:" + current + "step:" + step);
- 31
- },
- 10);
- 32
- }
- 33
- /*
- 34 * 终版动画函数
- 35 * */
- 36
- function animate(element, json, fn) {
- 37 clearInterval(element.timeId);
- 38 element.timeId = setInterval(function() {
- 39
- var flag = true; //假设都达到了目标
- 40
- for (var attr in json) {
- 41
- if (attr == "opacity") { //判断属性是不是opacity
- 42
- var current = getAttrValue(element, attr) * 100;
- 43 //每次移动多少步
- 44
- var target = json[attr] * 100; //直接赋值给一个变量,后面的代码都不用改
- 45
- var step = (target - current) / 10; //(目标-当前)/10
- 46 step = step > 0 ? Math.ceil(step) : Math.floor(step);
- 47 current = current + step;
- 48 element.style[attr] = current / 100;
- 49
- } else if (attr == "zIndex") { //判断属性是不是zIndex
- 50 element.style[attr] = json[attr];
- 51
- } else { //普通的属性
- 52 //获取当前的位置----getAttrValue(element,attr)获取的是字符串类型
- 53
- var current = parseInt(getAttrValue(element, attr)) || 0;
- 54 //每次移动多少步
- 55
- var target = json[attr]; //直接赋值给一个变量,后面的代码都不用改
- 56
- var step = (target - current) / 10; //(目标-当前)/10
- 57 step = step > 0 ? Math.ceil(step) : Math.floor(step);
- 58 current = current + step;
- 59 element.style[attr] = current + "px";
- 60
- }
- 61
- if (current != target) {
- 62 flag = false; //如果没到目标结果就为false
- 63
- }
- 64
- }
- 65
- if (flag) { //结果为true
- 66 clearInterval(element.timeId);
- 67
- if (fn) { //如果用户传入了回调的函数
- 68 fn(); //就直接的调用,
- 69
- }
- 70
- }
- 71 console.log("target:" + target + "current:" + current + "step:" + step);
- 72
- },
- 10);
- 73
- }
clientX clientY clientWidth clientHeight
pageX pageY pageWidth pageHeight
offsetLeft offsetTop offsetWidth offsetHeight
. 通配符(. 除了 \ n 以外的任意一个内容)
[] 表示的是范围: 表示的是范围中的任意一个
[0-9]表示的是: 0 到 9 之间 (包含) 任意一个数字
[a-z] 表示所有的小写字母中的一个
[A-Z] 表示的是所有的大写字母中的任意一个
[a-zA-Z] 表示的是所有的字母中的任意一个
[9] 表示的就是 9
[o]o
[0-9a-zA-Z] 表示的是任意的一个数字或者任意的一个字母
() 表示的是分组 (为了更明确这个正则表达式的意思), 提升优先级, 组号从左往右数圆括号
| 表示的是或者的意思
[0-9]|[a-z] 0-9 之间的任意一个数字或者是小写字母中的任意一个字母
* 表示的是该符号前面的表达式出现了 0 次到多次
+ 表示的是该符号前面的表达式出现了 1 次到多次
? 表示的是该符号前面的表达式出现了 0 次到一次
{} 表示的是前面的表达式出现了多少次, 具体是多少次: 大括号中的写法
\d 表示的是任意的一个数字和 [0-9] 一样
\D 表示的是非数字
\s 空白符号
\S 非空白符号
\w 非特殊符号
\W 特殊符号
^:1. 以什么内容开头, 必须以什么开始
2. 取反
用法:
^[0-9] 必须以数字开头
^[a-z0-9] 必须以数字或者以小写字母开始
^[0-9a-zA-Z] 必须以数字或者是字母开头
^\d 必须以数字开头
[^0-9] 取反 字母或者特殊符号
[^0-9a-zA-Z] 特殊符号
$ : 必须以什么内容结尾
[0-9]$ "hsgd7y273d9"
[a-zA-Z]$
^[0-9a-z][a-z]$
创建正则表达式对象的方式:
1. var reg=new RegExp(/ 正则表达式 /
2. var reg=/ 正则表达式 /; reg.test("hello998");
3. / 正则表达式 /. 方法名 (参数);
str=str.replace(/ 帅 / g," 呆 "); //g 表示的是全局 //i 表示的是小写的
str=str.replace(/^\s+|\s+$/g,"");
while((index=reg.exec(str))!=null){console.log(index.index); } // 如果结果为 null 没有匹配的
如果匹配到了数据,那么返回值是数据,如果没有匹配到,返回 null
var result=str.match(/ 帅 / g); // match 根据正则表达式匹配字符串中的内容, 如果没有 g, 匹配的是第一个, 如果有 g 匹配的是全局的
来源: http://www.cnblogs.com/hongqin/p/5988735.html