JavaScript知识点-周4.md

一、操作表单

1、快速获取表单元素

form.name值 <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> // 快速获取表单元素的方法: 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、表单事件

事件方法提交onsubmit重置onreset聚焦onfocus失焦onblur

提交: onsubmit

在表单提交的时候会触发这个事件

如果这个事件返回true表示可以提交, 如果返回false表示阻止提交

事件加给form元素

重置: onreset

在表单提交的时候会触发这个事件

如果这个事件返回true表示重置, 如果返回false表示阻止重置

事件加给form元素

聚焦: onfocus

失焦: onblur

3.4添加给表单元素, 3在表单的文本选中的时候触发这个事件, 4在表单的文本失去焦点的时候触发这个事件

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、表单方法

方法用法submit()加给form元素, 将指定的form元素提交reset()加给form元素, 将指定form元素重置focus()表单元素, 将指定的表单元素获取焦点blur()表单元素, 将指定的表单元素失去焦点select()表单元素, 让form中的表单元素被选中 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(要查找的字符)

// 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

open: 打开新窗口; open(url, 打开窗口的方式, 特殊字符串, 是否取代之前的网页的浏览记录); 返回新窗口的window

_self: 自身打开 _blank: 打开新的页面

var newWindow = open('a.html', '_blank', 'width=800px,height=800px;'); close: 关闭浏览器 window.close(); 关闭当前浏览器可以省略window <!-- 行间, window不能省略 --> <div onclick="window.close();">关闭</div> newWindow.close(); close();

2、location

location: 最有用的BOM对象之一, 存储有关当前窗口加载的文档的信息, 还有一些导航功能, 既是window的对象属性, 也是document的对象属性 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

Navigator 对象包含有关浏览器的信息 appCodeName浏览器的名称。通常都是Mozilla，即使在非Mozilla浏览器中也是如此appMinorVersio次版本信息appName完整的浏览器名称appVersion浏览器的版本。一般不与实际的浏览器版本对应buildID浏览器编译版本cookieEnabled表示cookie是否启用cpuClass客户端计算机中使用的CPU类型（x86、68K、Alpha、PPC或Other）javaEnabled()表示当前浏览器中是否启用了Javalanguage浏览器的主语言mimeTypes在浏览器中注册的MIME类型数组onLine表示浏览器是否连接到了因特网oscpu客户端计算机的操作系统或使用的CPUplatform浏览器所在的系统平台plugins浏览器中安装的插件信息的数组preference()设置用户的首选项product产品名称（如 Gecko）productSub关于产品的次要信息（如Gecko的版本）systemLanguage操作系统的语言taintEnabled()已经废弃, 表示是否允许变量被修改（taint）。为了与Netscape Navigator 3向后兼容而保留下来userAgent浏览器的用户代理字符串userLanguage操作系统的默认语言userProfile借以访问用户个人信息的对象vendor浏览器的品牌vendorSub有关供应商的次要信息

4、history

向前进: history.forword(); 向前跳转一个页面

向后退: history.back(); 向后退一个页面

跳转到: history.go(参数); 参数为数字, 跳转到第几个页面, 正数–> 前 负数—>后 0—>刷新

history.forward(); history.go(1); history.go(0); history.back();

5、client

元素可视宽高 : clientHeight/clientWidth: height/width + 上下/ 左右padding

clientTop: 上边框 clientLeft: 左边框

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);

6、offset

元素的占位(实际)宽高

元素.offsetWidth/元素.offsetHeight: padding + content + border

元素.offsetTop: 当前元素的顶部到定位父元素顶部的距离, 如果没有定位父元素, 到body顶部的距离;

元素.offsetLeft: 当前元素的左边到定位父元素左边的距离, 如果没有定位父元素, 到body左边的距离;

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

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

当窗口大小发生改变的时候，会触发这个函数 window.onresize = function(){ console.log(1); }

四、事件

1、事件处理函数

事件处理函数： 当事件发生时所调用的函数

div.onlick = function(){} onlick后面的就是事件处理函数

div.onclick = a; a就是事件处理函数

var div = document.getElementsByTagName('div')[0]; div.onclick = function () { alert(1); } function a(){ alert(2); } div.onclick = a;

2、事件对象

事件对象： 当事件发生的时候, 浏览器会将事件相关的信息(事件类型, 触发源, 鼠标的位置, 距离各个屏幕、元素的位置等等)存储在事件对象中, event

ie\chrome\高版本ff: window.event

低版本ff: 事件处理函数的第一个参数传递

兼容: var evs = window.event || ev;

常用属性

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、事件绑定

标签.事件 这种方式所添加的事件, 如果给同一个元素添加同一个事件, 那么后面的会覆盖前面的;

事件绑定

标准: 标签.addEventListener(事件类型(不加on), 事件处理函数(函数名), 是否捕获(默认false)); function a(){ console.log(1); } function b(){ console.log(2); } div.addEventListener('click', a, false); div.addEventListener('click', b, false); ie: 标签.attachEvent(on+事件类型, 事件处理函数); // ie console.log(div.attachEvent); // 标准： undefined div.attachEvent('onclick', a); div.attachEvent('onclick', b); 区别 标准事件绑定ie事件绑定事件类型: 标准不加onie要加on有捕获ie中没有执行顺序是正序执行ie中是倒叙执行this的指向不同: 标准中指向触发源ie中指向window

4、事件解绑

标签.事件 取消事件: 标签.事件 = null;

事件解绑

标准: 标签.removeEventListener(事件类型(不加on), 事件处理函数(函数名), 是否捕获(默认false));

ie: 标签.detachEvent(on+事件类型, 事件处理函数);

if(div.removeEventListener){ // 标准 div.removeEventListener('click', a, false); } else { // ie div.detachEvent('onclick', a); }

5、事件流

事件流

事件流： 当事件发生的时候, 从父节点到子节点之间固定的执行顺序

事件捕获阶段：当事件发生的时候, 将事件从window向子元素依次传递

确定目标阶段: 确定事件目标

冒泡处理阶段: 事件目标开始处理事件, 处理完成之后将事件从子元素依次传递到父元素, 到window结束

阻止冒泡

标准： evs.stopPropagation();

​ ie: evs.cancelBubble = true;

兼容:

​ evs.stopPropagation ? evs.stopPropagation() : evs.cancelBubble = true;

​ 一个加()一个不加(), 兼容就用带()来判断

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;

阻止默认事件

标签.事件 return false;

绑定:

​ 标准： evs.preventDefault();

​ ie: evs.returnValue = false;

兼容： ​ evs.preventDefault ? evs.preventDefault() : evs.returnValue = false;

u.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; });

6、键盘事件

按下onkeydown抬起onkeyup长按onkeypress onkeypress与onkeydown区别 onkeypressonkeydown非特殊键(0-9, a-z)特殊键会触发函数区分大小写始终返回大写字母的ASCII值按住特殊键不会一直输出, shift+1----> 33 !按住特殊键会一直输出, shift + 1 —> 16 + 49 shift + 1 document.onkeydown = function(ev){ var evs = event || ev; 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(evs.key); // 具体的按键, ie--->undefined console.log(evs.keyCode); // 按键的ASCII值 }

7、滚轮事件

chrome\ie: onmousewheel document.onmousewheel = function(ev){ var evs = event || ev; console.log(evs); console.log(evs.wheelDelta); // 上: 120 | 正数 下: -120 | 负数 } ff: 必须使用事件绑定的方式来监听, 标签.addEventListener(‘DOMMouseScroll’, 事件处理函数); if (document.addEventListener) { // ff/chrome document.addEventListener('DOMMouseScroll', function (ev) { var evs = event || ev; console.log(evs); console.log(evs.detail); // 上: -3 | 负数 下: +3 | 正数 }); }

8、事件代理

事件代理: 事件委托, 将子元素本来要做的事情交给父元素, 找到对应子元素后, 由子元素进行后续事件操作 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); } } 优势： 元素可以发生在未来 var li = document.createElement('li'); li.innerText = '12345'; ul.appendChild(li); ul.innerHTML += '<li>12345</li>';

五、cookie

1、概念

cookie: 是浏览器在访问服务器之后, 服务器传给浏览器的一段数据.浏览器需要保存这段数据, 在每次请求的时候, 都必须带上这段数据, 一般是不会轻易删除。

cookie: 指小量信息, 只能存储4kb, 由web服务器创建, 存储在用户计算机中.

优缺点

优点缺点由web服务器创建, 存储在本地的少量数据存储容量有限, 只有4kb谷歌和欧朋不支持本地存储谷歌和欧朋不支持本地存储没有过期时间, 一般默认浏览结束就销毁cookiecookie每次请求的时候都会自动添加到请求头Request Header, 增加容量

2、存储

存储: document.cookie = ‘key=value’;

注意：一次只能存储一个cookie, 如果key相同, 后面的value会覆盖前面的

document.cookie = 'userName=123456'; document.cookie = 'pass=123456'; document.cookie = 'userName=ujiuye';

3、获取: document.cookie

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=时间’ 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、js中的对象

原生对象String Number Boolean Object Array Function Date RegExp Error内置对象Math\Global(全局,window.document)宿主对象DOM BOM全局对象window

2、创建方式

1. 字面量创建：var 变量名 = { 属性名: 属性值}

var obj = { 'name': '彭于晏', 'height': 180, 'tip': function(){ console.log('会挣钱'); } }; // 获取属性 console.log(obj.name); // 调用方法 obj.tip(); // 适用于单个对象的创建

2. 实例创建

var obj1 = new Object(); obj1.name = '彭于晏'; obj1.tip = function(){ console.log('会挣钱'); } console.log(obj1); console.log(obj1.name); obj1.tip(); // 代码冗余

3. 工厂模式创建

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, 原型是当对象创建的时候就自带的属性, 用来存储最顶层共享的属性和方法

// 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. 原型创建

原型

原型对象: prototype: 原生对象身上用来存储共享的属性和方法的对象就是原型对象

原型属性: proto, 原型是当对象创建的时候就自带的属性, 用来存储最顶层共享的属性和方法

修改原型对象方法, 共享效果

// 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); 原型创建对象 // 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. 混合创建

// 混合创建： 构造函数(可变的) + 原型创建(不变的, 共享) // 混合创建 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、命名空间

var nav = '导航'; // 当项目足够大的时候, 分组作业、使用很多第三方库， 命名不够用 var home = {}; // 用来存储所有首页的变量 home.nav = {}; // 用来存储导航(首页)d的变量 home.nav.title = '这是导航';

3、this的指向

this存在于全页面, 在不同位置有不同的含义全局指向–>window普通函数指向–>window事件函数指向–>触发源构造函数指向–>创建的新对象对象中的方法指向–>该对象

4、改变this指向

改变this指向方法call函数.call(this的指向, 实参1, 实参2, …)apply函数.apply(this的指向, [实参1, 实参2, …])bind函数1.bind(this的指向), 返回一个与函数1一致的函数, 需要调用返回值 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、 原型链继承

// 父类构造函数 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、 对象冒充继承

// 父类构造函数 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、 混合继承

// 父类构造函数 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);