目录
## 一、操作表单
### 1、快速获取表单元素
form.name值
```html
<form action="#">
请输入姓名: <input type="text" name="userName" id=""><br>
请输入密码: <input type="password" name="pass" id=""><br>
性别: <input type="radio" name="nan" id="" group="sex">男
<input type="radio" name="nv" id="" group="sex">女<br>
爱好:
<input type="checkbox" name="basketball" id="" group="hobby"> 打篮球
<input type="checkbox" name="itworker" id="" group="hobby"> 写代码
<input type="checkbox" name="study" id="" group="hobby"> 学习
<input type="checkbox" name="LOL" id="" group="hobby"> 英雄联盟
</form>
```
```javascript
// 快速获取表单元素的方法: form.name值
var form = document.getElementsByTagName('form')[0];
console.log(form);
console.log(form.userName);
console.log(form.pass);
console.log(form.nan);
console.log(form.LOL);
```
### 2、表单事件
1. 提交: onsubmit
1. 在表单提交的时候会触发这个事件
2. 如果这个事件返回true表示可以提交, 如果返回false表示阻止提交
3. 事件加给form元素
2. 重置: onreset
1. 在表单提交的时候会触发这个事件
2. 如果这个事件返回true表示重置, 如果返回false表示阻止重置
3. 事件加给form元素
3. 聚焦: onfocus
4. 失焦: onblur
3.4添加给表单元素, 3在表单的文本选中的时候触发这个事件, 4在表单的文本失去焦点的时候触发这个事件
```javascript
form.onsubmit = function(){
if(form.userName.value == '' || form.pass.value == ''){
alert('请输入账号和密码');
return false;
} else {
return true;
}
}
form.onreset = function(){
// console.log('重置了');
if(confirm('是否重置')){
return true;
} else {
return false;
}
}
form.pass.onfocus = function(){
// 判断当前输入框是否可输入
console.log(1);
}
form.pass.onblur = function(){
// 密码校验、文本输入是否正确
console.log(2);
}
```
### 3、表单方法
1. submit(): 加给form元素, 将指定的form元素提交
2. reset(): 加给form元素, 将指定form元素重置
3. focus(): 表单元素, 将指定的表单元素获取焦点
4. blur(): 表单元素, 将指定的表单元素失去焦点
5. select(): 表单元素, 让form中的表单元素被选中
```javascript
var div = document.getElementsByTagName('div')[0];
div.onclick = function(){
// 提交
// form.submit();
// 重置
// form.reset();
// 获取焦点, 一次只能聚焦一个
form.pass.focus();
// form.userName.focus();
}
setTimeout(function(){
// form.pass.blur();
// 表单元素被选中, 一次只能选中一个
// form.pass.select();
form.nan.select();
}, 5000);
```
## 二、系统对话框
### 1、alert(弹出的内容): 警告框
### 2、带有确认按钮的对话框
- confirm(要弹出的内容), 具有返回值, 点击确定返回true, 点击取消返回false
### 3、带有输入框的对话框
- prompt(提示内容, 默认值), 具有返回值, 点击确定, 返回的是输入框中的内容, 点击取消返回null
### 4、打印预览: print();
### 5、查找: find(要查找的字符);
```javascript
// window: 窗口, window和document的关系:窗口包含文档
// window.alert(1);
var a1 = 1;
// console.log(window);
// 系统对话框
// 1. alert(弹出的内容): 警告框
// 2. 带有确认按钮的对话框: confirm(要弹出的内容), 具有返回值, 点击确定返回true, 点击取消返回false
// var sm = confirm('这是一个新页面, 你知道了吗？');
// console.log(sm);
// 3. 带有输入框的对话框: prompt(提示内容, 默认值), 具有返回值, 点击确定, 返回的是输入框中的内容, 点击取消返回null
// var s = prompt('当前你想跳转到第几页', '');
// console.log(s);
// 4. 打印预览: print();
var btn = document.getElementsByTagName('button')[0];
btn.onclick = function(){
// print();
// find(1);
find('a');
}
// 5. 查找: find(要查找的字符);
```
## 三、浏览器相关
### 1、open与close
1. open: 打开新窗口; open(url, 打开窗口的方式, 特殊字符串, 是否取代之前的网页的浏览记录); 返回新窗口的window
_self: 自身打开 _blank: 打开新的页面
```javascript
var newWindow = open('a.html', '_blank', 'width=800px,height=800px;');
```
2. close: 关闭浏览器 window.close(); 关闭当前浏览器可以省略window
```html
<!-- 行间, window不能省略 -->
<div οnclick="window.close();">关闭</div>
```
```javascript
newWindow.close();
close();
```
### 2、location
location: 最有用的BOM对象之一, 存储有关当前窗口加载的文档的信息, 还有一些导航功能, 既是window的对象属性, 也是document的对象属性
```javascript
console.log(location);
console.log(location.hash); // 地址中的hash值, #content(#后面的内容), 如果没有, 返回空字符
console.log(location.host); // 服务器的名称+端口
console.log(location.hostname); // 服务器名称
console.log(location.port); // 端口
console.log(location.protocol); // 协议
console.log(location.href); // 完整地址
console.log(location.toString()); // 返回完整地址
console.log(location.search); // 获取到?后面的查询字符串(以?开头的字符串)
// 改变地址,跳转页面
location.href = 'https://www.baidu.com';
```
### 3、navigator
appCodeName 浏览器的名称。通常都是Mozilla，即使在非Mozilla浏览器中也是如此
appMinorVersion 次版本信息
appName 完整的浏览器名称
appVersion 浏览器的版本。一般不与实际的浏览器版本对应
buildID 浏览器编译版本
cookieEnabled 表示cookie是否启用
cpuClass 客户端计算机中使用的CPU类型（x86、68K、Alpha、PPC或Other）
javaEnabled() 表示当前浏览器中是否启用了Java
language 浏览器的主语言
mimeTypes 在浏览器中注册的MIME类型数组
onLine 表示浏览器是否连接到了因特网
opsProfile 似乎早就不用了。查不到相关文档
oscpu 客户端计算机的操作系统或使用的CPU
platform 浏览器所在的系统平台
plugins 浏览器中安装的插件信息的数组
preference() 设置用户的首选项
product 产品名称（如 Gecko）
productSub 关于产品的次要信息（如Gecko的版本）
systemLanguage 操作系统的语言
taintEnabled() 已经废弃, 表示是否允许变量被修改（taint）。为了与Netscape Navigator 3向后兼容而保留下来
userAgent 浏览器的用户代理字符串
userLanguage 操作系统的默认语言
userProfile 借以访问用户个人信息的对象
vendor 浏览器的品牌
vendorSub 有关供应商的次要信息
### 4、history
1. 向前进: history.forword(); 向前跳转一个页面
2. 向后退: history.back(); 向后退一个页面
3. 跳转到: history.go(参数); 参数为数字, 跳转到第几个页面, 正数--> 前 负数--->后 0--->刷新
```javascript
history.forward();
history.go(1);
history.go(0);
history.back();
```
### 5、client
元素可视宽高
clientHeight/clientWidth: height/width + 上下/ 左右padding
clientTop: 上边框
clientLeft: 左边框
```javascript
var div = document.getElementsByTagName('div')[0];
console.log(div.clientHeight); // 200 + 20 + 5
console.log(div.clientWidth); // 200 + 10 + 1
console.log(div.clientTop);
console.log(div.clientLeft);
// 屏幕的可视宽高:
console.log(document.documentElement.clientHeight);
console.log(document.documentElement.clientWidth);
// body的可视宽高
console.log(document.body.clientHeight);
console.log(document.body.clientWidth);
```
### 5、client
元素可视宽高
clientWidth/clientHeight: padding + content
clientTop: 上边框
clientLeft: 左边框
### 6、offset
元素的占位(实际)宽高
元素.offsetWidth/元素.offsetHeight: padding + content + border
元素.offsetTop: 当前元素的顶部到定位父元素顶部的距离, 如果没有定位父元素, 到body顶部的距离;
元素.offsetLeft: 当前元素的左边到定位父元素左边的距离, 如果没有定位父元素, 到body左边的距离;
```javascript
console.log(div.offsetHeight); // 20 + 5 + 200 + 20 + 20
console.log(div.offsetWidth); // 251
console.log(div.offsetTop);
console.log(div.offsetLeft);
```
### 7、scroll
页面/元素被卷去的高度
元素.scrollWidth/元素.scrollHeight: 元素实际内容的宽高
元素.scrollTop: 页面/元素被卷去的高度
元素.scrollLeft: 页面/元素被卷去的宽度
onscroll: 窗口滚动条滚动时所触发的事件
页面滚动的距离：
document.documentElement.scrollTop || document.body.scrollTop
document.documentElement.scrollLeft || document.body.scrollLeft
```javascript
window.onscroll = function(){
// console.log(document.documentElement.scrollTop);
// console.log(document.body.scrollTop);
var top = document.documentElement.scrollTop || document.body.scrollTop;
var left = document.documentElement.scrollLeft || document.body.scrollLeft;
console.log(top, left);
}
```
### 8、resize
当窗口大小发生改变的时候，会触发这个函数
```javascript
window.onresize = function(){
console.log(1);
}
```
## 四、事件
### 1、事件处理函数
1. 事件处理函数： 当事件发生时所调用的函数
2. div.onlick = function(){} onlick后面的就是事件处理函数
3. div.onclick = a; a就是事件处理函数
```javascript
var div = document.getElementsByTagName('div')[0];
// div.onclick = function () {
// alert(1);
// }
function a(){
alert(2);
}
div.onclick = a;
```
2. 事件对象
1. 事件对象： 当事件发生的时候, 浏览器会将事件相关的信息(事件类型, 触发源, 鼠标的位置, 距离各个屏幕、元素的位置等等)存储在事件对象中, event
2. ie\chrome\高版本ff: window.event
3. 低版本ff: 事件处理函数的第一个参数传递
4. 兼容: var evs = window.event || ev;
5. 常用属性
```javascript
var evs = window.event || ev;
console.log(evs);
console.log(evs.type); // 事件类型
console.log(evs.target); // 事件触发源, ie8+
console.log(evs.srcElement); // 事件触发源
console.log(evs.target || evs.srcElement);
console.log(evs.clientX, '------', evs.clientY); // 鼠标相对于屏幕的位置
console.log(evs.pageX, '-----', evs.pageY); // 鼠标相对于body的距离
console.log(evs.ctrlKey, evs.altKey, evs.shiftKey); // 判断相对应的键是否被按下, 返回true和false
```
3. 事件绑定
1. 标签.事件 这种方式所添加的事件, 如果给同一个元素添加同一个事件, 那么后面的会覆盖前面的;
2. 事件绑定:
1. 标准: 标签.addEventListener(事件类型(不加on), 事件处理函数(函数名), 是否捕获(默认false));
```javascript
function a(){
console.log(1);
}
function b(){
console.log(2);
}
div.addEventListener('click', a, false);
div.addEventListener('click', b, false);
```
2. ie: 标签.attachEvent(on+事件类型, 事件处理函数);
```javascript
// ie
console.log(div.attachEvent); // 标准： undefined
div.attachEvent('onclick', a);
div.attachEvent('onclick', b);
```
3. 区别：
1. 事件类型: 标准不加on，ie要加on
2. 标准中有捕获, ie中没有
3. 标准中执行顺序是正序执行, ie中是倒叙执行
4. this的指向不同: 标准中指向触发源, ie中指向window
3. 事件解绑
1. 标签.事件 取消事件: 标签.事件 = null;
2. 事件解绑
+ 标准: 标签.removeEventListener(事件类型(不加on), 事件处理函数(函数名), 是否捕获(默认false));
+ ie: 标签.detachEvent(on+事件类型, 事件处理函数);
```javascript
if(div.removeEventListener){
// 标准
div.removeEventListener('click', a, false);
} else {
// ie
div.detachEvent('onclick', a);
}
```
### 2、事件流
1. 事件流
事件流： 当事件发生的时候, 从父节点到子节点之间固定的执行顺序
事件捕获阶段：当事件发生的时候, 将事件从window向子元素依次传递
确定目标阶段: 确定事件目标
冒泡处理阶段: 事件目标开始处理事件, 处理完成之后将事件从子元素依次传递到父元素, 到window结束
2. 阻止冒泡
标准： evs.stopPropagation();
ie: evs.cancelBubble = true;
兼容:
evs.stopPropagation ? evs.stopPropagation() : evs.cancelBubble = true;
一个加()一个不加(), 兼容就用带()来判断
```javascript
var divs = document.getElementsByTagName('div');
function a(ev){
var evs = event || ev;
console.log(evs.stopPropagation); // ie undefined
console.log(this);
// evs.stopPropagation();
// evs.cancelBubble = true;
evs.stopPropagation ? evs.stopPropagation() : evs.cancelBubble = true;
}
/*
阻止冒泡：
标准： evs.stopPropagation();
ie: evs.cancelBubble = true;
兼容:
evs.stopPropagation ? evs.stopPropagation() : evs.cancelBubble = true;
一个加()一个不加(), 兼容就用带()来判断
*/
divs[0].onclick = a; //不是捕获就是冒泡
divs[1].onclick = a;
divs[2].onclick = a;
```
3. 阻止默认事件
标签.事件 return false;
绑定:
标准： evs.preventDefault();
ie: evs.returnValue = false;
兼容：
evs.preventDefault ? evs.preventDefault() : evs.returnValue = false;
```javascript
ujiuye.bind(document, 'contextmenu', function(ev){
console.log(1);
var evs = event || ev;
// return false;
// evs.preventDefault();
// evs.returnValue = false;
evs.preventDefault ? evs.preventDefault() : evs.returnValue = false;
});
```
### 3、键盘事件
按下：onkeydown
擡起: onkeyup
长按: onkeypress
1. onkeypress与onkeydown:
1. down: 特殊键会触发函数, press: 非特殊键(0-9, a-z)
2. down: 始终返回大写字母的ASCII值, press: 区分大小写
3. down: 按住特殊键会一直输出, shift + 1 ---> 16 + 49 shift + 1
press: 按住特殊键不会一直输出, shift+1----> 33 !
```javascript
document.onkeydown = function(ev){
var evs = event || ev;
// // console.log(1);
// console.log(evs); // KeyboardEvent
// console.log(evs.key); // 具体的按键, ie--->undefined
// console.log(evs.keyCode); // 按键的ASCII值
}
document.onkeyup = function(){
// console.log(2);
}
document.onkeypress = function(){
var evs = event || ev;
// console.log(1);
// console.log(evs); // KeyboardEvent
// console.log(evs.key); // 具体的按键, ie--->undefined
console.log(evs.keyCode); // 按键的ASCII值
}
```
### 4、滚轮事件
chrome\ie: onmousewheel
```javascript
document.onmousewheel = function(ev){
var evs = event || ev;
// console.log(evs);
console.log(evs.wheelDelta); // 上: 120 | 正数 下: -120 | 负数
}
```
ff: 必须使用事件绑定的方式来监听, 标签.addEventListener('DOMMouseScroll', 事件处理函数);
```javascript
if (document.addEventListener) {
// ff/chrome
document.addEventListener('DOMMouseScroll', function (ev) {
var evs = event || ev;
// console.log(evs);
console.log(evs.detail); // 上: -3 | 负数 下: +3 | 正数
});
}
```
### 5、事件代理
事件代理: 事件委托, 将子元素本来要做的事情交给父元素, 找到对应子元素后, 由子元素进行后续事件操作
```java
var ul = document.getElementsByTagName('ul')[0];
ul.onclick = function(ev){
var evs = event || ev;
console.log(evs);
var target = evs.target || evs.srcElement;
console.log(target);
if(target.nodeName == 'LI'){
// alert(this.innerText); // this事件处理函数中, 点谁就谁
console.log(target.innerText);
}
}
```
优势： 元素可以发生在未来
```javascript
// var li = document.createElement('li');
// li.innerText = '12345';
// ul.appendChild(li);
ul.innerHTML += '<li>12345</li>';
```
## 五、cookie
### 1、概念
1. cookie: 是浏览器在访问服务器之后, 服务器传给浏览器的一段数据.浏览器需要保存这段数据, 在每次请求的时候, 都必须带上这段数据, 一般是不会轻易删除。
cookie: 指小量信息, 只能存储4kb, 由web服务器创建, 存储在用户计算机中.
2. 优点：
+ 由web服务器创建, 存储在本地的少量数据, 只有4kb
+ 谷歌和欧朋不支持本地存储
+ 没有过期时间, 一般默认浏览结束就销毁cookie
3. 缺点
+ 存储容量有限, 只有4kb
+ 由明文传递, 容易被窃取和盗用
+ cookie每次请求的时候都会自动添加到请求头Request Header, 增加容量
### 2、存储
1. 存储: document.cookie = 'key=value';
2. 注意：一次只能存储一个cookie, 如果key相同, 后面的value会覆盖前面的
```javascript
document.cookie = 'userName=123456';
document.cookie = 'pass=123456';
document.cookie = 'userName=ujiuye';
```
### 3、获取: document.cookie
```javascript
document.cookie = 'age=12';
// 获取： document.cookie
var cookie = document.cookie;
// 每两组之间分割符: '; '
console.log(cookie); // pass=123456; userName=ujiuye; age=12
```
### 4、删除cookie: 让一个cookie的过期时间变成过去时间
如何设置cookie的过期时间: document.cookie = 'key=value;expires=时间'
```javascript
var date = new Date();
date.setSeconds(date.getSeconds() + 10);
console.log(date.toGMTString());
document.cookie = 'height=180;expires=' + date.toGMTString();
// setInterval(function(){
// console.log(document.cookie);
// }, 1000);
```
## 六、正则
### 1、概念：
正则: 是对字符串操作的逻辑公式, 就是用事先定义好的一些特殊字符, 及特殊字符的组合, 组成一个规则字符串, 对字符串添加一种过滤逻辑。
简单来说: 规定文本检索的内容, 通常用来替换、检索文本。
### 2、创建
1. 构造函数创建: new RegExp('要匹配的字符或者规则', '修饰符')
```javascript
var reg = new RegExp('o', 'ig');
console.log(reg);
```
2. 字面量创建: /要匹配的字符或规则/修饰符;
```javascript
var reg1 = /o/ig;
console.log(reg1);
```
### 3、修饰符：
1. g: global, 全局匹配
2. i: ignore case, 忽略大小写
4. 字符串方法
1. 字符串.replace(要匹配字符/正则, 替换字符);
```javascript
var str = '123456123456123123123';
var s = str.replace('1', 'a');
console.log(s);
var reg = /1/;
var reg1 = /1/g;
console.log(str.replace(reg, 'a')); // a23456123456123123123
console.log(str.replace(reg1, 'a')); // a23456a23456a23a23a23
var str = '1234aaa561AAA234561aaa23123123';
var reg = /a/g;
var reg1 = /a/ig;
console.log(str.replace(reg, '。')); // 1234。。。561AAA234561。。。23123123
console.log(str.replace(reg1, '。')); // 1234。。。561。。。234561。。。23123123
```
2. 字符串.split('分割符/正则');
```javascript
var str = 'zabczdefg12345zzz123z123z';
var reg = /z/ig;
console.log(str.split(reg)); // ["", "abc", "defg12345", "", "", "123", "123", ""]
```
3. 字符串.match(字符/正则); 挑选符合条件的字符组成数组返回
```javascript
var str = '1q2w3e4r5t6y7u8i9o0p';
var reg = /\d/ig; // \d数字
console.log(str.match(reg)); // ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"]
```
4. 字符串.search(正则)
```javascript
var str = 'q2w3e4r5t6y7u8i9o0p';
var reg = /\d/ig;
console.log(str.indexOf('1')); // 明确的字符
console.log(str.search(reg));
```
### 4、正则验证方法:
正则验证方法: 一次匹配一项,每次验证如果没有加g, 每次都从0开始, 如果加了g, 每次从上一次查询到的地方开始
1. test: 返回布尔值, true--匹配成功, false---匹配失败 正则.test(字符串);
```javascript
var str = '1q2w3e';
var reg = /\d/ig;
console.log(reg.lastIndex); // 返回本次检验开始的位置下标 0
console.log(reg.test(str));
console.log(reg.lastIndex); // 返回本次检验开始的位置下标 1
console.log(reg.test(str));
console.log(reg.lastIndex); // 返回本次检验开始的位置下标 3
console.log(reg.test(str));
console.log(reg.lastIndex); // 返回本次检验开始的位置下标 5
console.log(reg.test(str)); // false
console.log(reg.lastIndex); // 0
console.log(reg.test(str));
```
2. exec: 具体的检索, 返回能匹配上的数组, null--匹配不上
正则.exec(字符串);
```javascript
console.log(reg.lastIndex); // 0
console.log(reg.exec(str)); // ["1", index: 0, input: "1q2w3e", groups: undefined]
console.log(reg.lastIndex); // 1
console.log(reg.exec(str)); // ["2", index: 2, input: "1q2w3e", groups: undefined]
console.log(reg.lastIndex); // 3
console.log(reg.exec(str));
console.log(reg.lastIndex); // 5
console.log(reg.exec(str)); // null
console.log(reg.lastIndex); // 0
console.log(reg.exec(str));
```
### 5、元字符
1. .(点): 匹配除换行以外的所有字符
```javascript
var str = '\n123';
var reg = /./ig;
console.log(reg.exec(str));
```
2. []: 要匹配的字符, 写在[]中的,任何一个都是要匹配的字符, 只要有一个匹配得上就会返回回来
```javascript
var str = "'123a'";
var reg = /[ab']/ig;
console.log(reg.exec(str));
```
[^] 不要匹配的字符集]
```javascript
var reg = /[^'a]/ig;
console.log(reg.exec(str));
```
3. \d: 匹配数字 \D: 匹配非数字
```javascript
var str = 'web123';
var reg = /\d/ig;
var reg1 = /\D/ig;
console.log(reg.exec(str));
console.log(reg1.exec(str));
```
4. \s: 匹配空格 \S: 匹配非空格
```javascript
var str = 'web 123';
var reg = /\s/ig;
var reg1 = /\S/ig;
console.log(reg.exec(str));
console.log(reg1.exec(str));
```
5. \w: 匹配数字、字母、_ \W: 匹配非数字、字母、_
```javascript
var str = '_1web.123';
var reg = /\w/ig;
var reg1 = /\W/ig;
console.log(reg.exec(str));
console.log(reg1.exec(str));
```
6. \b: 匹配单词边界 \B: 匹配非单词边界
```javascript
var str = 'he is a boyisA';
var reg = /\bis\b/ig;
var reg1 = /\Bis/ig;
console.log(reg.exec(str));
console.log(reg1.exec(str));
```
7. ^: 以什么为开头 $: 以什么为结尾
```javascript
var str = 'web123';
var reg = /^[a-zA-Z]/ig; // 以字母a-zA-Z开头
var reg1 = /\d$/ig;
console.log(reg.exec(str));
console.log(reg1.exec(str));
```
### 7、多个字符
1. a?: 匹配一个或者是0个
2. a*: 匹配0个或者连续多个a, 尽可能多的去匹配‘
3. a+: 匹配至少一个, 并且尽可能多的匹配
4. a{n,m}: 至少匹配n次，至多匹配m次
a{n,}: 至少匹配n次, 至多不限制
a{n}: 只匹配n次
```javascript
// a?: 匹配一个或者是0个
var str = 'web12332232a3232';
var reg = /\d?/ig; // 匹配0个或者一个数字
console.log(reg.exec(str));
// a*: 匹配0个或者连续多个a, 尽可能多的去匹配
var reg = /\w*\d*/ig;
console.log(reg.exec(str));
// a+: 匹配至少一个, 并且尽可能多的匹配
var str = 'web12332232a3232';
var reg = /[a-z]+\d+/ig;
console.log(reg.exec(str));
// a{n,m}: 至少匹配n次，至多匹配m次
var str = 'webweb123123';
var reg = /[a-z]{1,3}\d{3,6}/ig;
console.log(reg.exec(str));
// a{n,}: 至少匹配n次, 至多不限制
var reg = /[a-z]{1,}\d{3,6}/ig;
console.log(reg.exec(str));
// a{n}: 只匹配n次
var reg = /[a-z]{1}\d{3,6}/ig;
console.log(reg.exec(str));
```
5. 特殊字符
1. |: 或
2. (): 分组
```javascript
var str = 'webweb123';
var reg = /web(\d+)(2|3)/ig; // 判断web后面跟的是1或者是2的web返回回来
console.log(reg.exec(str));
console.log(RegExp.$1); // 第一个括号
console.log(RegExp.$2); // 第二个括号
```
3. |: 或
4. ()： 分组
5. (?:): 正向的非获取匹配
6. (?=): 正向肯定预查
7. (?!): 正向否定预查
8. (?<=): 反向肯定预查
9. (?<!): 反向否定预查
```javascript
// 非获取匹配: (?:)(?=)(?!=)(?<=)(?<!)
// (?:): 正向的非获取匹配
var str = 'webbweb123weba';
var reg = /web(?:1|3|b)/ig;
console.log(reg.exec(str));
// (?=): 正向肯定预查
var str = 'webbweb123weba';
var reg = /web(?=\d+)/ig; // 获取后面跟数字的web
console.log(reg.exec(str));
// (?!=): 正向否定预查
var str = 'webbweb123weba';
var reg = /web(?!\d+)/ig; // 获取后面不跟数字的web
console.log(reg.exec(str));
// (?<=): 反向肯定预查
var str = '1webbweb123weba';
var reg = /(?<=\d+)web/ig; // 获取前面跟数字的web
console.log(reg.exec(str));
// (?<!): 反向否定预查
var str = '1webbweb123weba';
var reg = /(?<!\d+)web/ig; // 获取前面不跟数字的web
console.log(reg.exec(str));
```
## 七、面向对象
1. 两种编程模式
面向过程: 注重过程
面向对象: 注重结果
2. 对象的特征: 封装 多态 继承
3. 对象的组成:
属性：静态的, 对象的描述-----变量
方法：动态的, 对象的行为-----函数
### 1、js中的对象
原生对象: String Number Boolean Object Array Function Date RegExp Error
内置对象: Math\Global(全局,window.document)
宿主对象: DOM BOM
全局对象: window
### 2、创建方式
1. 字面量创建：var 变量名 = { 属性名: 属性值}
```javascript
var obj = {
'name': '彭于晏',
'height': 180,
'tip': function(){
console.log('会挣钱');
}
};
// 获取属性
console.log(obj.name);
// 调用方法
obj.tip();
// 适用於单个对象的创建
```
2. 实例创建
```javascript
var obj1 = new Object();
obj1.name = '彭于晏';
obj1.tip = function(){
console.log('会挣钱');
}
console.log(obj1);
console.log(obj1.name);
obj1.tip();
// 代码冗余
```
3. 工厂模式创建
```javascript
function cObj(name,sex) {
var obj1 = new Object();
obj1.name = name;
obj1.sex = sex;
obj1.tip = function () {
console.log('会挣钱');
}
return obj1;
}
var obj = cObj('彭于晏', '男');
var obj1 = cObj('彭于晏2号', '男');
console.log(obj, obj1);
obj.tip();
obj1.tip();
var arr = [123,123];
console.log(typeof obj);
console.log(typeof arr);
// instanceof: 要检验的数据 instanceof 是否由Object创建
console.log(obj instanceof Object); // true
console.log(obj instanceof cObj); // false
// 问题: 识别不清
```
4. 构造函数创建
构造函数的特点:
\1. 函数名首字母大写(不是必须, 为了和普通函数区别, 是约定)
\2. 构造函数调用前面必须要有new, 不加和普通函数一样
\3. 属性和方法直接加在this上
new的时候会发生的事情：
\1. 创建一个空对象
\2. 将空对象的__proto__指向构造函数的原型对象的prototype
\3. this指向空对象, 添加属性和方法, 隐式返回
原型: __proto__, 原型是当对象创建的时候就自带的属性, 用来存储最顶层共享的属性和方法
```javascript
// 1. 构造函数创建
function CreateObj(name, sex) {
// var obj1 = new Object();
this.name = name;
this.sex = sex;
this.tip = function () {
console.log('会挣钱');
}
// return this;
}
// 2. 实例化对象
var obj = new CreateObj('彭于晏', '男');
var obj1 = new CreateObj('彭于晏2号', '男');
console.log(obj, obj1);
console.log(obj.tip == obj1.tip); // false
// 问题： 内存浪费
```
5. 原型创建
1. 原型
+ 原型对象: prototype: 原生对象身上用来存储共享的属性和方法的对象就是原型对象
+ 原型属性: __proto__, 原型是当对象创建的时候就自带的属性, 用来存储最顶层共享的属性和方法
+ 修改原型对象方法, 共享效果
```javascript
// 1. 原型对象: prototype: 原生对象身上用来存储共享的属性和方法的对象就是原型对象
console.log(Array.prototype);
// console.log(Date.prototype);
// 2. 原型属性: __proto__, 原型是当对象创建的时候就自带的属性, 用来存储最顶层共享的属性和方法
var arr = new Array(1,2,3);
console.log(arr.__proto__);
console.log(arr.__proto__ == Array.prototype); // true
// 修改原型对象方法, 共享效果
arr.push(1);
console.log(arr);
Array.prototype.push = function(){
console.log(1);
}
arr.push(9);
console.log(arr);
```
2. 原型创建对象
```javascript
// 1. 原型创建
function CreateObj(name, sex) {
CreateObj.prototype.name = "彭于晏";
CreateObj.prototype.sex = "男";
CreateObj.prototype.tip = function(){
console.log('挣钱');
}
}
var obj = new CreateObj('彭昱畅', '男');
var obj1 = new CreateObj('彭昱畅2号', '男');
console.log(obj, obj1);
console.log(obj.tip == obj1.tip); // true
// 不能传参
```
6. 混合创建
```javascript
// 混合创建： 构造函数(可变的) + 原型创建(不变的, 共享)
// 混合创建
function CreateObj(name, sex) {
this.name = name;
this.sex = sex;
CreateObj.prototype.tip = function () {
console.log('挣钱');
}
}
var obj = new CreateObj('彭于晏', '男');
var obj1 = new CreateObj('彭昱畅', '男');
console.log(obj, obj1);
obj.tip();
obj1.tip();
console.log(obj.tip == obj1.tip); // true
console.log(obj.tips); // true
```
## 八、面向对象继承
1. 原型链: js中属性和方法的查找方式, 先找对象自身, 再找原型属性__proto__(原型对象), 父级的原型属性, 找到null上, 找不到返回报错undefined
2. 命名空间:
```javascript
var nav = '导航';
// 当项目足够大的时候, 分组作业、使用很多第三方库， 命名不够用
var home = {}; // 用来存储所有首页的变量
home.nav = {}; // 用来存储导航(首页)d的变量
home.nav.title = '这是导航';
```
3. this的指向
this: 存在于全页面, 在不同位置有不同的含义
全局---window
普通函数---window
事件函数---触发源
构造函数---创建的新对象
4. 改变this指向
1. call: 函数.call(this的指向, 实参1, 实参2, ....);
2. apply: 函数.apply(this的指向, [实参1, 实参2, ...]);
3. 注意: 直接在函数调用的时候改变this指向 区别: 传参方式不同
4. bind: 函数1.bind(this的指向), 返回一个与函数1一致的函数, 需要调用返回值
```javascript
function fn(a,b){
console.log(this, a, b);
}
fn(10, 20); // window 10 20
// this--->document
fn.call(document, 2, 3);
fn.apply(1, [2, 3]);
var obj = {
'name': 1,
'sayName': function(){
console.log(this);
console.log(this.name);
}
}
var obj1 = {
'name': 2
}
// obj.sayName.call(obj1); // 2
var m = obj.sayName.bind(obj1);
m();
```
5. 原型链继承
```javascript
// 父类构造函数
function Father(name, age){
this.name = name;
this.age = age;
this.arr = [1,2,3];
}
Father.prototype.tip = function(){
console.log('父爱如山');
}
// 子类构造函数
function Son(name, age){}
Son.prototype.tip = function(){
console.log('任性');
}
// 继承操作: 子类构造函数的原型对象 = 父类构造函数的实例化对象(new 函数名)
Son.prototype = new Father('123', 32);
var obj = new Son('456', 12);
var obj1 = new Son('456', 12);
console.log(obj);
console.log(obj.name, obj.age, obj.arr);
console.log(obj1.name, obj1.age, obj1.arr);
obj1.arr.push(5);
console.log(obj.arr, obj1.arr); // [1, 2, 3, 5] [1, 2, 3, 5]
// 问题： 1. 不能传参 2. 如果引用数据类型, 一改全改
```
6. 对象冒充继承
```javascript
// 父类构造函数
function Father(name, age){ // a
this.name = name;
this.age = age;
this.arr = [1,2,3];
}
Father.prototype.tip = function(){
console.log('父爱如山');
}
// 子类构造函数
function Son(name, age){ // b
// 对象冒充
Father.call(this, name, age);
}
Son.prototype.tip = function(){
console.log('任性');
}
var obj = new Son('小明', 32);
var obj1 = new Son('小明2好', 22);
console.log(obj, obj1);
// 问题: 不能继承父类构造函数原型对象上的属性和方法
```
7. 混合继承
```javascript
// 父类构造函数
function Father(name, age){ // a
this.name = name;
this.age = age;
this.arr = [1,2,3];
}
Father.prototype.tip = function(){
console.log('父爱如山');
}
// 子类构造函数
function Son(name, age){ // b
// 对象冒充
Father.call(this, name, age);
}
Son.prototype.tip = function(){
console.log('任性');
}
// 继承操作: 子类构造函数的原型对象 = 父类构造函数的实例化对象(new 函数名)
Son.prototype = new Father();
var obj = new Son('小明', 32);
var obj1 = new Son('小明2好', 22);
console.log(obj, obj1);
```