r1 软件使用
ctrl+shift+p html
html5结构: ! tab
ul>li{内容}*5 tab
光标定位到指定的多个位置 ctrl
选中多个 ctrl+d
预览：右键复制文件路径
2、DOM高级
1查找节点
1) getElementById(id名) id名
2) getElementsByTagName(标签名) nodeList 节点列表 数组 [0]
3) getElementsByName(name名) 表单 nodeList 节点列表 数组 [0]
4） getElementsByClassName(样式名) IE9以下浏览器不兼容 报错
5） css选择器 IE9以下浏览器不兼容
[id选择器 类选择器 标签选择器]
querySelector(css选择器) 只能获取第一个元素
querySelectorAll(css选择器) 获取所有的元素 ，nodeList 数组
6）特殊的集合
document.forms 获取所有的表单元素 等价于document.getElementsByTagName("form")
elements 获取所有的表单对象元素 nodeList数组 elements[0] 获取的第一个表单元素
elements.length 表单元素的个数
document.images 获取页面中所有的图片 等价于document.getElementsByTagName("img")
创建图片标签 var ing=new Image;
document.links 获取所有带href属性的超链接
等价与 document.getElementsTagName(“a”)
document.anchors 获取所有带name属性的超链接
2、节点方法:
增删改查
插入节点
父节点.appendChild(子节点)
父节点.insertBefore(新节点，哪个节点前)
创建节点
创建文本节点 document.createTextNode(文本)
创建元素节点 document.createElement(元素名)
删除节点
父节点 .removeChild(子节点)
替换节点
父节点.replaceChild(新节点，要替换的节点)
复制节点（克隆节点）
要复制的节点.cloneNode() false 只复制结构不复制内容
true 结构 内容都复制
3、 DOM中HTML属性(特性):
标准属性 href id title class checked src
获取属性：
元素.属性名
设置属性：
元素.属性名=属性值
.checked=true
.title="标题"
.src=""
.className="bg" //特殊
自定义属性 data-time="2015/12/2" data-pic=""
元素.属性名 无法获取和改变自定义属性的值。
获取属性:
元素.getAttribute("属性名")
设置属性:
元素.setAttribute("属性名","属性值")
删除属性：
元素.removeAttribute("属性名")
既可以设置标准属性，也可以设置自定义属性。
4、节点属性：
节点类型 nodeType 1元素节点 2属性节点 3文本节点 8 注释节点 9 文档节点
节点名称 nodeName 标签名 属性名 #text
节点值 nodeValue null 属性值 文本本身
5、节点之间的关系:
parentNode 父节点 子节点 childNodes.length childNodes[0] firstChild lastChild childNodes[childNodes.length-1]
兄弟节点 下一个兄弟节点 nextSibling 上一个兄弟节点 previousSibling
————————————————————————
DOM表格操作
table : thead 一个
tbody 多个
tfoot 一个
查找表格的元素：thead tbody tfoot cells rows
//获取表头 对象.tHead 一个
//获取表尾 对象.tFoot 一个
//获取主体部分 对象.tBodies 多个 nodeList 数组
//获取行 对象.rows nodList 数组 rows[0]
//获取单元格 对象.cells nodeList 数组 cells[0]
//插入行 对象.insertRow(index)
//插入单元格 对象.insertCell(index)
//删除行 对象.deleteRow(index)
//删除单元格 对象.deleteCell(index)
1全选：
_______________________________
css样式的问题：
行内样式
获取样式：
节点.style.css属性
节点.style[css属性] 常量直接写 ，变量呢？[变量名] 变量或者参数。
返回值： 是一个带单位的字符串
设置样式：
节点.style.css属性=值
节点.style[css属性]=值
非行内样式：
获取非行内样式
标准浏览器（非IE）
getComputedStyle(obj,null).css属性
getComputedStyle(obj,null)[css属性]
IE浏览器下
obj.currentStyle.css属性
obj.currentStyle[css属性]
function getStyle(obj,style){
if(obj.currentStyle){
return obj.currentStyle[style]
}
else{
return getComputedStyle(obj,null)[style]
}
}
------------------------------
元素大小, js盒模型 返回值： 只能获取不能设置，没有单位，是数值类型。
偏移量：元素在屏幕上占用的所有可见空间。
尺寸： offsetWidth 元素自身的宽度 width+border+padding
offsetHeight 元素自身的高度 height+border+padding
位置： offsetLeft 元素左边框距离父元素的距离（如果没有定位，就是相对于浏览器窗口。如果有定位，是对有定位的父级元素）
offsetTop 元素上边框距离父元素的距离
客户端（客户区）大小
clientWidth width+padding
clientHeight height+padding
(浏览器窗口大小） 可视区大小 视口
宽度：document.documentElement.clientWidth
高度：document.documentElement.clientHeight
宽度 document.documentElement.clientWidth || document.body.clientWidth
高度 document.documentElement.clientHeight || document.body.clientHeight
滚动大小 包含滚动内容的元素大小。
scrollTop 滚动条向上滚动的距离
scrollLeft 滚动条向左滚动的距离
top= document.documentElement.scrollTop || document.body.scrollTop
document.documentElement.scrollTop=0
document.body.scrollTop=0
scrollWidth 在没有滚动条的情况下，元素内容的总宽度。
scrollHeight 在没有滚动条的情况下，元素内容的总高度。
_____________________
事件：
事件的概念：文档或者浏览器窗口中发生一些特定交互瞬间。（用户或者浏览器自身执行的某种动作）
事件流： 页面接收事件的顺序。
IE 微软公司：事件冒泡流
N 网景公司： 事件捕获流
DOM2事件流分三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段
事件对象: 所有与事件相关的信息。事件的类型 鼠标的位置 事件的目标
阻止冒泡： DOM下： event.stopPropagation() IE: event.cacelBubble=true
阻止默认行为： DOM下： event.preventDefault() IE: event.returnValue=false return false
1）如何访问事件对象？
标准浏览器下 DOM中：作为函数的第一个参数存在
IE浏览器中 IE中： 作为window对象的属性存在 window.event
function(e){}
var event=e(第一个参数） || window.event
2) 动作：
阻止事件冒泡行为
标准浏览器下 DOM中 : event.stopPropagation() 停止传播
IE浏览器下： event.cancelBubble=true 取消冒泡
跨浏览器兼容阻止冒泡：
function stopPropagation(e){
if(e.stopPropagation){
e.stopPropagation()
}
else{
e.cancelBubble=true
}
}
——————————————
3）动作：
阻止默认行为
DOM中：event.preventDefault() 阻止默认行为
IE中: event.returnValue=false 返回值=false // return false
function preventDefault(e){
if(e.preventDefault){
e.preventDefalut();
}
else{
e.returnValue=false
}
}
4) type 事件类型 click mouseover mouseout
语法格式：event.type
返回值： click mouseover mouseout
5) 事件目标 :你实际操作的目标对象 ，不一定是你绑定事件的对象
target
DOM: event.target
IE: event.srcElement
target=event.target || event.srcElement
6)事件委托：利用冒泡的原理，只指定一个事件处理程序，就可以管理某一类型的所有事
件。
鼠标划过多li添加背景，鼠标离开删除背景。
7）事件对象的在浏览器中坐标 水平 event.clientX 垂直坐标 event.clientY
事件对象在屏幕上的坐标 水平 event.screenX 垂直坐标 event.screenY
事件对象的属性：
访问事件对象event=e || window.event
类型 event. type 目标:event.target || event.srcElement 鼠标的位置： event.clientX event.clientY
方法：阻止冒泡 ，阻止默认行为
事件处理程序：
HTML事件处理程序： 在HTML中绑定的事件。缺点：不能实现行为和结构的分离。
DOM0事件处理程序：
优点：简单， 跨浏览器兼容。
缺点： 不能同时绑定多个事件。
添加（绑定）：
语法：对象.on事件类型=fn;
说明：
fn 匿名函数也可以是有名函数；
btn.onclick=function(){}
btn.onclick=say 只写函数名
删除：
语法：对象.on事件类型=null;
DOM2事件处理程序：
优点：同时绑定多个事件处理程序。
添加(绑定） 语法：对象.addEventListener(事件名，函数，布尔值) false 冒泡阶段 true 捕获阶段
删除： 语法：对象.removeEventListener(参数与添加的参数完全相同) //不能删除匿名函数
IE事件处理程序：
优点：同时绑定多个事件处理程序。
添加 语法： 对象.attachEvent(on+事件名,函数)
删除： 语法： 对象.detachEvent(on+事件名，函数) 参数与添加的的时候完全一样
跨浏览器的事件处理程序:
addHandler()
3、事件类型：
UI事件：不一定与用户操作有关
load unload scroll error resize select
window.onload=function(){ }
resize
添加样式:
对象.style.cssText="color:red;font-size:12px; background:red"
对象.style.background=''
焦点事件:
focus 获取焦点事件
blur 失去焦点事件
键盘事件：
keydown 按下任意键时，触发
keypress 按下字母键时候，触发
keyup 释放按键的时候，触发
keyCode 获取按键的ascii码
回车键 13
空格键 32
A-Z 65-
0-9 48
左上右下 37 38 39 40
鼠标事件：
click
mouseover 划过
mouseout 离开
mousedown
mouseup
mousemove
dbclick
mouseenter 进入 不冒泡
mouseleave 离开 不冒泡
_______________________________________
表单：
表单的提交和重置的方式：
1) 提交的三种方法 按钮提交
图像域 提交
提交 自定义提交按钮
表单提交的方法: 表单对象.submit()
2) 重置,reset 与提交一样。 reset()
表单元素的事件：
blur
focus
change select下拉列表框内容发生改变的时候
text textarea 对文本框和文本域来说，是内容发生改变并且取消焦点的时候
select：
选中：selected
获取选中的索引 select.selectedIndex
value的取值意义： select.value 获取的是值2.优先获取的是value="值1"，如果
没有值1，获取值2。
表单元素的三个方法：
focus()
blur()
select()
select 属性：
multiple 多选
size 长度 个数
options 返回的是一个数组
select.options.length
select.options[index]
option 属性：
options[index].text 文本
options[index].value 值
options[index].index 下标
selected 选中
创建option元素： new Option(text,value)
添加option元素： select.add(newOption,undefined)
删除option元素： select.remove(index)
删除所有的option 有两种方法: select.innerHTML='' select.options.length=0
________________________
正则表达式：由字母、数字、特殊符号构成的描述字符模式的表达式。
功能：1.模式的匹配
2.文本的检索
3.替换功能。
创建正则表达式：
一、创建：
1）显式创建 用构造函数的 var reg=new RegExp('表达式') 数据类型：对象类型
var reg=new RegExp('表达式','修15:54 2016/8/10饰符') i
2) 隐式创建 直接量语法 /表达式/ 包含在一对/斜杠之间的字字符 表达式没有引号
二、正则表达式的方法：
1) test()
功能：用于检测内容是否与正则相匹配
返回值：布尔值，true匹配，false不匹配
语法：reg（Object）.test(内容)
2） exec()
功能：用于检测内容是否与正则相匹配
返回值:能匹配成功 数组 不匹配 null
语法： regObject.exec(内容)
说明：数组的第一个元素：匹配的内容
数组的index元素： 匹配内容的第一个字符索引下标
数组的input元素: 原始字符串
数组的第二个元素到 index元素之间的：是分组的匹配的内容 ()+ (){3,4}.如果没有undefined
三、 修饰符：
修饰符：
i 忽略大小写
m 多行匹配
g 全文匹配
四、 元字符
[....] 匹配括号内的任意一个字符 [0123456789] [abc] [0-9] [a-z] [A-Z] [0-9]{6}
[^....] 匹配除了括号内的任意字符
\d 代表数字 [0-9]
\D 非数字 [^0-9]
\w 代表的是字母数字下划线 [a-zA-Z0-9_]
\W 代表的是非字母数字下划线
. 除了换行符以外任意字符
\s 空格字符
\S 非空格字符
\b 单词的边界
\n
\t
\r
五、重复: 设置重复的次数
{n} 匹配前一项n次
{n,m} 匹配前一项最少n次，最多m次 用户名只能是数字 长度在5-12之间 reg=/[0-9]{5,12}/
{n,} 匹配前一项最少n次
？ 匹配0到1次 {0,1}
+ 匹配1到多次 {1，}
* 匹配0到多次 {0，}
六、限定符：
^XX 以^开头
XX$ 以$结束
七、转义字符：
语法：\元字符
元字符： [ ] {} () ? * + / ^ $ .
附加:
选择：|或者
分组():将多个匹配项组合为一个整体
汉字：[\u4e00-\u9fa5] 有事100 有酒罚我
[\x00-\xff] 单字符
[^\x00-\xff] 双字符
字符串的方法：
replace() :
语法：str.replace(要替换的(旧),替换为的(新的))
功能：替换掉符合匹配的字符串。
返回值:是一个新字符串，原字符不变。
要替换的：可以是字符串 也可以是正则表达式,支持全文匹配
练习：替换法轮功
split(): 把字符串转化位数组
str="aaa ， bbb， ccc"
str="6226 7895 454544 3443"
语法：str.split('分隔符')
返回值：数组,原字符串不变
search()： 返回匹配字符串的下标。
语法：str.search(reg/字符串)
match(): 返回匹配字符串的值。
语法格式：str.match(reg/字符串)
返回值：如果没有全局匹配的话；找到了返回第一个，数组。 找不到返回null
如果全局匹配的化， 找不到null. 找到了返回所有的，数组。
str="aaa bbb ccc" 每个单词的第一个字母变成大写
str1='Aaa Bbb Ccc'
________________________________
//作用域链 :
//从里往外依次寻找，一直到到全局变量。但是不能从外往里找变量。
//匿名函数
//函数表达式 ：先定义后执行
//匿名函数的自执行 (要执行的匿名函数)(匿名函数的执行)
闭包：就是能够读取其他函数内部变量的函数，
只有函数内部的子函数才能读取局部变量，
因此可以把闭包简单理解成“定义在一个函数内部的函数”.
闭包的优点：
1、读取函数内部的变量
2、让函数内部变量的值始终保持在内存中。
闭包的缺点：
1、由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大。
2、在IE中可能导致内存泄露。
3、闭包会在父函数外部，改变父函数内部变量的值，不要随便改变父函数内部变量的值。
闭包只能使用包含函数中任何变量的最后一个值（最终值）。
一般情况，要把销毁，等待释放，垃圾回收。
_________________
对象：由属性和方法构成。
属性：
属性即变量，用于存取数据。
方法：
方法即函数，用于完成特定功能。
对象分类：
全局对象、内置对象及自定义对象。
内置对象包括：
string字符串对象
Math数学对象
Array数组对象
Date日期对象
RegExp正则表达式对象
全局对象:即window对象。
全局对象的函数（方法）：
isNaN() isFinite() paseInt() paseFloat()
alert() confirm() setInterval() setTimeout() clearInterval() clearTimeout()
创建自定义对象
1、通过Object()构造函数或字面量方式创建
（1）通过Object()构造函数 显示创建
语法：var 对象名=new Object();
(2)通过字面量（隐式创建）
语法：var 对象名={};
添加属性和方法：
添加属性：对象名.属性名=属性值;
添加方法：对象名.方法名=function(){};
第二种方式：
将添加的属性和方法放到字面量{}中。
属性名：属性值,
方法名:function(){}
注意：属性与属性与方法之间用逗号隔开
在自定义对象中this即该对象。
第一种方式适用于创建单个对象，单体对象。
缺点：使用同一个接口创建很多对象，会产生大量的重复代码。
2、工厂模式
定义：
function createObj(name,sex,age){
var o=new Object()
o.name=name;
o.sex=sex;
o.say=function(){
alert("你的名字是"+this.name+"你的性别是"+this.sex);
}
return o
}
调用： var p1=createObj("张三","男",19)
p1.constructor 指向不到createObj
工厂模式缺点：没有解决对象识别的问题
如何检测一个的对象的构造函数是谁呢？ constructor 构造函数
3、构造函数的模式
定义：
function CreateObj(name,sex,age ){
this.name=name;
this.sex=sex;
this.age=age;
this.say=function(){
alert("你的名字是"+this.name+"你的性别是"+this.sex);
}
}
调用：
var p1=new CreateObj("张三","男"，18)
var p2=new CreateObj("李四","女"，20)
var arr= new Array()
var time= new Date()
var reg= new RegExp()
var str= new String()
构造函数模式与工厂模式的区别：
? 1、没有显式地创建对象；
? 2、直接将属性和方法赋给了this 对象；
? 3、没有return 语句。
? 4、通常构造函数名始终以大写字母开头，非构造函数名不以大写字母开头
构造函数的缺点：
使用构造函数模式创建对象的问题：每个方法都要在每个实例上重新创建一遍，浪费内存空间
人（对象） 丁丁 （实例）
用构造函数创建一个对象的过程会经历4个步骤：
(1) 创建一个新对象； new Person()
(2) 将构造函数的作用域赋给新对象（因此this 就指向了这个新对象）； this= p1 this =p2
(3) 执行构造函数中的代码（为这个新对象添加属性）；
(4) 返回新对象
4、原型的模式
1)原型对象是什么
每个函数都有一个prototype（原型）属性，这个属性是一个指针， 指向一个对象，这个对象即原型对象.
使用原型对象优点：是可以让所有对象实例共享它所包含的属性和方法
2）如何创建原型对象
构造函数名.prototype.属性名=值
构造函数名.prototype.方法名=function(){
}
其中：值可以为简单值(数值，字符串等)，也可以是函数(即方法).
3） 多个对象实例共享原型所保存的属性和方法的基本原理:
搜索-->对象实例-->原型对象
对象实例添加某个属性只会阻止我们访问原型中的那个属性，但不会修改原型中的那个属性值
原型中的是属性和方法是所有实例共享的，他的添加顺序不影响实例的调用。
4） 检测某个对象实例和原型之间是否存在对应关系：isPrototypeOf()
构造函数名.prototype.isPrototypeOf(实例)
Person.prototype.isPrototypeOf(p1) 存在关系true 不存在关系 false
var arr=new Array()
5)检测一个属性是存在于实例中，还是存在于原型中：hasOwnProperty()
语法格式：实例名.hasOwnProperty(属性) 属性属于实例，返回真，属于原型返回假。
例如：p1.hasOwnProperty("name")
6）确定原型和实例的关系
实例名 instanceof 构造函数名 返回值：true false
-------------------
继承：原型链继承
subTye.prototype=new SuperType() //子类型的原型指向父类型的对象实例 缺点：不能传参数 来自于包含引用类型值的原型。
借用构造函数继承
function SubTye(name,sex){ // 或者对象冒充 伪造对象
SuperType.call(this,name,sex)
SuperType.apply(this,数组名)
}
组合继承:
原型链和借用构造函数继承一起使用
错误处理和调试：
error: 错误事件
加载对象 window 第二个img 当图片无法加载的时候
window.onerror=function(){
}
要求这放在js脚本的最前面。
onerror: 传递3个三参数
message:错误消息
url: 错误所在的URL
line：行号
错误类型：
类型转化错误
数据类型错误
通信错误
网友评论