web API

以后是对于初学者有帮助的一些JS的方法API,使用即说明

■JS组成■
1,ECMAScript : js的核心标准 , 同时也是一个解析器
2, DOM : document object model 文档对象模型(结构)//dom 是关于如何创建、插入、修改、删除页面元素的标准。//有2套DOM,htmlDom跟xmlDom
3, BOM : browser object model 浏览器对象模型

〓框〓
alert 警告 执行就 +'\n'+
console 打印对象,它底下有2个特殊方法time,tiemend,测试执行时间,标准下跟IE11下兼容
confirm 确认框
prompt 提示
break 跳出(此次循环)
continue 跳过(本次循环)
delete 删除(一般删除对象跟对象的属性用,返回值为布尔值,成功删除就为true)
write 写,跟innerHTML不同,不会替换原来有的

■单词跟属性■
this 就是它,本身(当前元素发生事件后,可以调用这个他,在一个事件下的话,this都是等于当前发生事件的元素)
1, 在事件处理函数中的this : 事件发生在谁身上,this就是谁。
2,函数加小括号直接执行,this一定是window. 3,定时器中的this,是 window
4, 属性的方法中的this,就是这个属性所属的对象。

new 运算符,创建,具体参数,请看标题“面向对象”

null 空的(一般取一个变量为空,后面再往这个变量里面存东西或者存一个数值)
return 返回值(在函数下才能有)写了返回值,那么这个这个函数被调用的时候,就是他return后面的东西,要2个括号才能调用到return后面的
arguments 传参实参的集合,有下标。(当函数的实参不能确定,或者数量不一的时候用这个)
element 元素
length 元素的(个数),(数量)
value 价值,内涵 //里面的东西
innerHTML 这个元素里面的内容,里面还可以加HTML的标签,DIV级除外
switch if判断的强化版,对于每个条件都详细,方才执行代码 !(在文本JS条件中有案例)!
while for循环的简化版
void 运算符,但不返回运算结果
cssText 获取到元素后,可以直接修改,也就是说不用再单独去获取元素的width啊,height啊,直接cssText = 'width:';

■获取样式■

getComputedStyle() 获取经过计算后的样式值,如: getComputedStyle(获取的元素).width IE6到8不兼容
currentStyle 这个是上条的专门兼容IE的,如: 获取到的元素变量.currentStyle.width 主流不兼容这个时候简单判断一下,为了↓
获取是什么浏览器执行什么代码可以写个判断 如:(三目) 某获取到元素.currentStyle? 条件1:条件2;

■定时器■
ˇ开启ˇ
setInterval 间隔每秒发生事件(连续)
setTimeout 时间到了后发生一次事件(如果出现渲染问题,找到问题所在,然后就用延迟定时器)
定时器里的第一个参数是每次执行的函数,第2为时间,第3个参数是传参,然后这个被传的参数会在定时器的第一个参数也就是函数里的第一个参数就是被传进去的参数

ˇ停止ˇ
clearInterval 停止间隔定时器
clearTimeout 停止延迟定时器

操作元素和创建第三种方式
元素.getAttribute('属性名称',2) 获取属性
元素.setAttribute('名称','值') 设置属性
元素.removeAttribute('') 删除属性

都有兼容问题, 1,当操作的属性是关键字或保留字的时候,IE6/7会不一样. 例如 标准 class IE6/7 就得 className ||一下就OK
2,当操作两层及以上属性的时候,只有ie浏览器支持,其它浏览器都不支持。

好处 1,可以操作行间的自定义属性。 2,可以获取src\href等的相对地址。(设置第2个参数为2,IE6/7下也是相对)

图片预加载
通过 new Image() 这个对象预加载src 然后 这个对象的onload事件完成的时候换下一张要预加载的图片的url

元素创建与输出
var 变量=document.createElement('标签名') 创建元素并且保存到一个变量里面,方便输出到某个地方去

父级.appendChild( oLi ) 追加(也就是放到最尾)放到这个父级下
父级.insertBefore(oLi,父级.firstChild) 放到父级的第一个子节点下,也就是放到第一位,如果不写第2个参数,就默认追加,也就是放到最后
父级.removeChild(要删除的子节点) 从一个节点里面删除指定的子节点。也可以 this 删除自己。删除后会把删除的对象作为返回值返回
并且,内存当中还是存在这个DOM元素的,也就是没有真正的清除,这个时候把返回来的对象,赋值为空类型就在内存当中完全删除了

父级.replaceChild(oLi,oUl.children[0]) 替换,参数必须设置两个(用来替换的节点,被替换掉的子节点)
注意注意《追加》《第一个》《替换》如果不是操作创建的元素,而是操作已有的元素,那么直接移动那个元素,不会复制

■Math数学方法■
Math.ceil() 向上取整,只要有小数(不包括0)就进一位整数
Math.floor() 向下取整,只要有小数就不要小数.保留前面的整数。但如果负数的话,保留数情况相反
Math.round() 小数为四舍五入,方法去保留整数
Math.random() 随机出现0到1的(0.几)的小数(指南说有可能为0)公式 Math.random()*k+n n等于起点 k等于目标点减去n
Math.max() 求最大值,参数里面可以传参,然后返回最大值
Math.min() 求最小值,参数里面可以传参,然后返回最小值
Math.abs() 返回绝对值
Math.Pi 圆周率(3.141592653无限不循环)
Math.pow() 平方数(第一参数为一个数字,第2参数为这个数字的多少平方)
Math.sqrt() 开方(参数为一个)平方的逆运算

更多方法请参考 http://www.w3school.com.cn/jsref/jsref_obj_math.asp

■类型■
typeof 用来判断类型的查看变量类型的属于运算符

function 函数
number 数字
boolean 布尔值
string 字符串
object 对象
undefined 未定义的

上面是按照typeof 的形式去判断类型的,按照ECMAScript标准的话,一般有两个类型,就是简单类型跟引用类型,首先标准下的类型有
  1. object(引用类型) 2. number(数字简单) 3. string(字符串简单) 4. boolean (布尔值简单) 5. null(空值简单) 6. undefined(未定义简单)

■类转换型■
显示类型转换 强制
Number 尽量转成数字类型
parseInt 从左到右转换成整数遇见非数字后,非数字后面的统统不要,而且转换的东西基本上只能是字符串或前面带数字类型的东西,(它认符号)
parseFloat 从左到右转换,保留小数。其他如上

NAN 转换失败也算是数字类型里的非数字。布尔值等于假false,而且他不等于他本身。
isNaN 判断不是数字,值为布尔值.不是数字就为真.但他是通过Number()判断为是不是数字的.

隐式类型转换
'200'-3 变成数字类型了
然后 - * / % ++ -- 都会把字符串变成数字类型,
200+ '3' 变成字符串了
!100 取反,!,就是取反,一般取的都是布尔值
如果是 == 全等 或者 ===强等的话, '2'==2;是真,比的是里面的,'2' === 2;为假,强等判断所有条件类型都要一样.

■JSON,属于特别的方法■(IE6/7没有这个对象跟方法的,所以可以在JSON官网下,下载一个JS库来做引用然后就可以兼容)

JSON 系统已经内置的对象,不需要再存在一个变量里就可以用这个对象(使用这个对象的方法进行转换的时候都是用严格模式进行转换的)

JSON.parse() 把json形式的字符串转换成源生的js代码(安全性高,必须是严格模式的)
JSON.stringify() 把一个对象转换成一段字符串

eval() 可以把任何的字符串转成源生的javascript代码(这个方法是原生的,兼容所有,但是安全性不高)

■程序真假值■

真 非0的数字,非空字符串,true,函数,能找到的元素,[],{}

假 0,NaN,空字符串,false,不能被找到的元素,null,未定义

■DOM知识点归纳■

节点类型
元素节点① 属性节点② 文本节点③(包括回车换行等空字符) 注释节点⑧ document节点⑨(可以用iframe标签查找到本节点位置)

层级关系
父节点 (统称:祖先节点) 、 子节点 (统称:子孙节点) 、 兄弟节点

查看节点类型
查看节点类型 nodeType 属性
查看节点名称 nodeName 属性 (获取到的都是大写,支持所有节点)
查看节点名称 tagName 属性 (获取到的都是大写,只有在元素上生效)
查看节点的值 nodeValue 属性 (只有属性,文本,注释节点才有值)

节点
.parentNode 父节点

.childNodes 子节点 (在标准浏览器下IE8以上,会把换行解析成一个子节点,所以写操作的时候,会报错)
.children 子节点 (非标准,但得到所有浏览器支持)(只返回元素的节点,不返回文本节点)

.cloneNode() 复制节点 1.参数为布尔值(true就完全复制这个节点下的子孙节点) 2.只复制节点的结构 3.复制后存在内存里或者变量里

.firstChild 第一个子节点 (在标准浏览器下IE8以上,会获取到空白文本节点)
.firstElementChild 获取第一个子元素节点 (不会获取到空白文本节点,但 ie6/7/8不支持 )

.lastChild 获取最后一个子节点 (在标准浏览器下IE8以上,会获取到空白文本节点)
.lastElementChild 获取最后一个子元素节点 (不会获取到空白文本节点,但 ie6/7/8不支持 )

.nextSibling 下一个兄弟(同级)节点 (在标准浏览器下IE8以上,会获取到空白文本节点)
.nextElementSibling 下一个兄弟(同级)节点 (不会获取到空白文本节点,但 ie6/7/8不支持 )

.previousSibling 上一个兄弟(同级)节点 (在标准浏览器下IE8以上,会获取到空白文本节点)
.previousElementSibling 上一个兄弟(同级)节点 (不会获取到空白文本节点,但 ie6/7/8不支持 )

.offsetParent 找祖先节点有定位的属性的 ① 如果上面所有祖先节点都没有定位属性的话,IE6/7下就是HTML节点,标准浏览器下为body节点.
② 如果祖先节点有定位属性,就找到离它最近的那个祖先节点
③ 如果当前的节点没有定位属性又有浮动,IE6/7下就直接找到上一个祖先节点。标签浏览器下还是找到祖先有定位的节点
④ 如果当前节点有display:none; IE11以下的IE浏览器参考①②,其他的浏览器都显示为null

offset
.offsetLeft/Top 返回当前元素的外边框外开始,到他的offsetParent的内边框的距离.( IE6/7当前节点的offsetParent没触发haslayout(BFC)属性时,取值会不准确 )
offsetWidth/Height 返回当前元素自身的整个元素的宽高。也就是 width/height + padding + border
并且他们在这个元素为隐藏的时候,获取到的值都是 0

client
Width,Height,Left,Top 同上,但是他不会把border算进去 也就是他只算 自身 + padding (所以可视区的宽高都是它计算的)

DOM表格节点
tHead 表格头节点,只有一个
tBodies 表格正文(复数,所以有下标)
tFoot 表格尾,只有一个
rows 行,节点(复数,所以有下标)
cells 列,节点(复数,所以有下标)

■BOM窗口■
window.open() 打开新窗口(4个参数)1.'地址'(为空打开就为空) 2.方式(为空就默认新窗)
window.close() 关闭
window.navigator.userAgent 版本信息/用户代理信息( 操作系统、浏览器品牌、浏览器版本号、浏览器内核 )
window.location 地址栏信息(它是对象)
.href 当前的url地址,类型string
.search 获取地址栏的查询部分信息(?到#号之间的所有内容) 修改search的值会导致页面重新加载。
.hash 获取地址栏的锚信息(#号后面的所有内容) 修改hash值不会重新加载页面。

window.innerWidth/Height 获取可视区宽高,标准下才可获取 ie6/7/8下不支持,而且有可能滚动条也会获取 但可以用DOM方法代替,如下行
document.documentElement.clientWidth/Height (所有浏览器都支持)也可以是 关于详细的请参照 offset跟client

window.pageXOffset/YOffset 获取滚动条距离的X轴或者Y轴的度数 IE跟火狐下为0,也就是不支持 除了IE跟火狐,其他都OK
可以用DOM方法代替 document.body.scrollTop(谷歌) || document.documentElement.scrollTop(火狐,IE通用)
而且如果要判断一个元素在不在可视区上,就可以用这个元素的offsetTop > 滚动条距离 + 可视区距离

document.body.scrollHeight 获取内容高度或者宽度/内容撑出来的高度或者宽度
document.body.scrollWidth ①在谷歌下,如果内容度数小于可视区度数,则采用的是可视区高度
②在ie8以上ie浏览器和firefox下:如果元素的高度没有内容高度高,padding-bottom 和 padding-right 失效,
③在不同浏览器和不同元素中,scrollHeight有可能会计算边框,也有可能不会计算边框。
④ie6/7下始终表示内容撑出来的高度。也就是无论大于或者小于设置好的宽或者高,都是撑出来的度数

document.referrer 记录用户从哪个URL里到当前页面

■iframe通信■

关于 iframe 标签引用的页面 操作这个引用页面的元素,首先要获取当前document下的iframe标签,然后这个变量的 contentWindow 就相当于引用过来的 window了

如果想操作引用当前页面的那个页面,那么就在被引用的页面的 window.parent.document 就可以操作当前页面的父级,也就是引用这个页面的那个页面
如果要找到引用当前页面的最顶级父级文档的window,那就是window.top,找父级,那就是 window.parent
并且为了防钓鱼网站,就可以在window.onload的时候 判断一下 window.top是不是我当前域名下的最顶层:如下

if(window = window.top){
window.top.location.href = window.location.href
}

用open打开的窗口,想获取新打开底下的窗口,直接接收open方法执行后函数的返回值就是新打开创建的window
用open打开的窗口,通过新窗控制用open打开他的窗口的window 用 window.opener.document.body

■鼠标键盘事件■
对象.onload 页面加载完成
对象.onunload 关闭当前页面

对象.onmouseover 鼠标移入
对象.onmouseenter 鼠标移入(事件自身不冒泡)
对象.onmouseout 鼠标离开
对象.onmouseleave 鼠标离开(事件自身不冒泡)
对象.onmousemove 鼠标移动时发生

对象.onclick 点击发生
对象.ondblclick 双击发生

对象.oncontextmenu 鼠标右键后发生
对象.onfocus 获得焦点 ( 有焦点的元素都是可以被编辑的 )
对象.onblur 失去焦点 关于焦点( 让一个元素得到焦点 .focus() 让一个元素失去焦点 .blur() 获取焦点的文本 .select() )没有参数

对象.onmousedown 鼠标按键被按下
对象.onmouseup 鼠标按键被松开

对象.onkeydown 按下一个键盘按键
对象.onkeyup 键盘按键被按下后松开
对象.onkeypress 输入按键类的才响应(少用)

对象.onhashchange 当页面的hash值发生改变之后

■窗口事件■
window.onscroll 当前页面滚动的时候触发
window.onresize 当窗口发生改变的时候触发

■移动端事件■
单手指事件

ontouchstart 按下的时候(相当于down)
ontouchmove 移动的时候(相当于move)
ontouchend 松开的时候(相当于up)

移动evtnt对象
ev.touches 当前位于屏幕上的所有手指的一个列表对象集合
ev.targetTouches 位于当前DOM元素上的手指的一个列表对象集合
ev.changedTouches 涉及当前事件的手指的一个列表对象集合

属性 pageX/Y 相对屏幕的位置点,跟client是一样的

■滚轮事件■
document.onmousewheel 鼠标滚轮时候发生( 火狐除外(在FF下会解析成自定义属性),所有 ev.wheelDelta 的值都是滚下为 -120 滚上为 120 而且绑定方式为通常都可以 )

DOMMouseScroll 鼠标滚轮时候发生( 火狐独有 )而且绑定方式只能是用第二种绑定方式 addEventListener 去绑定函数 如下
对象.addEventListener('DOMMouseScroll',function(ev){},false); 可以直接判断 if(document.addEventListener) 来执行兼容
方向属性为 ev.detail 值向下正3 值向上-3 取消默认事件不能通过返回假,用 if( oBar.releaseCapture ){ oBar.releaseCapture(); };

■事件总结■
event 记录事件发生时的详细信息(标准下event对象是事件处理函数的第一个参数)(IE所有下event 是一个全局对象)
可记录:1,在哪个元素上触发的事件 2,在可视区的坐标位置。 3,点击的是鼠标的哪个键。 4,按下了键盘的哪个键。

ev.target 事件源是指触发当前事件的源头是哪个元素。(IE下的对象是 srcElement,||一下就可以了)
ev.cancelBubble = true 取消事件往父级冒泡,默认为false,true就是取消.当在子事件的里面.
ev.clientX/Y 鼠标在可视区里的X,跟Y

ev.keyCode 键盘获取的键值
ev.shiftKey 获取键盘shift键,被按下的时候就为true
ev.ctrlKey 获取键盘ctrl键,被按下的时候就为true
ev.altKey 获取键盘alt键,被按下的时候就为true

.call 函数特有方法,用来改变this的指向 如:fn.call(某个对象,后面的参数接下去正常继续按顺序传参)面向对象需要此方法继承
.apply(参数1,参数2) 第一个参数也是改变this指向,第2个参数是一个arr,而且会把这个arr返回给调用它的obj

事件默认的事件
一般在图片或者右键跟其他,都有个系统的默认事件清除默认事件 return:false 就可以了(但要清楚事件发生在什么时候,IE6/7下文字拖拽在move下发生的,所以在那里return)

事件绑定

例如 有一个函数叫 fn1 正常绑定它 window.onload = fn1;

第二种绑定方式可绑定多个不被覆盖,而且顺序是最后一个先执行再往上。
标准浏览器下 对象.addEventListener() 如:window.addEventListener('load',fn1,false) 参数为(行为,函数,捕捉)(当这个函数需要传参的时候用匿名后在里面调用那函数)
IE6/7/8下 对象.attachEvent() 如上。 1.参数中的行为要加'on' 2.会把函数中的this改到window(可用特定函数方法改这个this的指向)

注销事件绑定
一般普通事件绑定的直接让那个事件等于null即可注销绑定

对象.removeEventListener() 注销被 addEventListener()绑定的事件,而且要在同一个阶段注销。
对象.detachEvent() 注销被 attachEvent()绑定的事件

匿名函数是没有办法被注销的。

事件的阶段

1.捕捉阶段(找到要触发事件的节点)
2.执行阶段(找到节点了,就可以执行函数了)
3.冒泡阶段(自己的事件处理完了,就可以传递给父级了)

注(一般不可能用到这个方法) ie6/7/8下是没有事件捕获的。但IE下所有都有一个叫全局捕获 对象.setCapture(); 开始 对象.releaseCapture() 释放捕获

■数组合集■
var arr = new Array(); 用对象定义一个数组,参数的如果是数字就被认为是这个数组的长度,是内容就正常.数组的长度是可以修改的

.unshift() 往数组前面添加(IE6,7的返回值是未定义正常的是新的长度)
.push() 往数组最后一位添加

.shift() 删除数组第一个,返回被删除的那个.不接收参数,方法只删除一个
.pop() 删除数组最后一个,如上

.splice(0,1) 全能方法,参数1为(起始位置,包括),参数2为(删除位置,不包括),如果后面还有参数都是添加或替换的意思,返回删除的东西,同时会修改调用这个方法的数组

.sort() 排序,对数组进行简单的排序,它取的是数组每个里面内容的第一个的内容进行字符串编码,然后对比字符串编码的大小改变排序,
参数也可以传一个函数函数的(a,b)可以进行打乱排序

.concat() 把2个或多个数组连接成一个新的数组,如,数组对象.concat(另外的数组)
.reverse() 把数组里的顺序颠倒过来

■字符串合集■
var str = new String(); 用对象定义一个字符串

.charAt() 从整个字符串里面找到某个,只能获取到一个参数,参数为下标

.charCodeAt() 把被传进的参数编程一个字符串编码
.fromCharCode() 被传进去的数字编码会被转换成字符串

.substring() 截字符串,被传参为一个数字的时候,从被传参的第一个数字位置开始找到后面的,如果有两个参数,无论顺序,按小到大的参数,找到位置里的字符串
.slice() 跟上面一样是截字符串,不同的是它不具备交换位置顺序去找,但不同的是他的负数会倒回字符串最后一位去计算
.indexOf() 左往右找到被传参字符串的位置,只找一次,当如果这个字符串参数后面跟一个,然后非负数数字(负数默认为0)的话就表示从第几个开始找后面的
被传参的字符串可以是多个,但获取到的位置是被传参的第一个字符串的位置(找不到结果为-1就假)
.lastIndexOf() 右往左找到被传参字符串的位置,只找一次,其他跟上面一样。
.toUpperCase() 把字符串里面的英文全部转换成大写,不接收参数
.toLowerCase() 把字符串里面的英文全部转换成小写,不接收参数
.split() 分隔,被传参的是带引号的,而且是字符串里的某个,转换的都是一个数组,如果传进的是一个空字符串,就是字符串每个分隔成一个数组的一个
传参进去的那个分隔符的字符串会被当做分隔符,就会消失,而且分隔后,不管左右有没东西,没有,就加个未定义进去.被传参的字符串如果后面还有个数字
的话,那就是限制这个数组多长的意思,如果原来的length小,那么会左往右,只要这个数字的长度,后面的不要了(这个为可选参数)

.join() 把数组转换成字符串,如果不传参,默认为传了一个',',因为他必须有一个参数隔开数组的个数,再链接到一起链接成一个字符串

特定方法
encodeURI('string') window底下的方法,可把字符串作为 UTF-8 进行编码
encodeURIComponent('string') 如上,但会把一些转义符号也进行编码

decodeURI() 把UTF-8编码过的内容进行解码
decodeURIComponent() 如上,但会把一些转义符号编码的也进行解码出来

FormData对象 FormData对象是一个构造函数,他不但可以用来模拟URL里的QueryString,还能把对象进行进制化来提交,一般用来用户上传文件的时候会用的
使用方法? var a = new FormData(); a.append( key,val ); 上传的话 a.append( 后台接收的文件名,用户的文件对象 );然后把返回数值扔到AJAX提交就OK

■正则表达式■
new RegExp() 正则第一种方法(好处是里面不单单能传字符串,还能传变量)(不过第一次会先把字符串转义,所以如\n的东西要\n才能被正确转义)
/正则/特定属性(修饰符) 正则第二种方法

方法
正则.test(str) 判断字符串是否有正则匹配到的内容,返回布尔值
str.search(正则) 返回正则匹配到字符串第一个出现的位置 ( 跟indexof一样匹配失败返回-1 )
str.match(正则) 查找字符串中符合正则表达式匹配的整个的全部内容,并把匹配的结果作为数组对象返回 (匹配失败返回 null 类型)

正则.exec(str) 如上,但是不支持多次,也就是不支持g查找,只返回第一次匹配到的全部内容和所有匹配的子项与匹配到的位置跟拿来匹配的字符串都做为数组返回。
str.split(正则) 分隔查找到字符串里面符合正则匹配到的为分隔线,把左右两边的数据分隔,然后分别添加到数组,并返回这个数组
正则.compile("新正则") 可以在某个过程中,重新修改正则的规则(有待测试,证实结论2015/2/6/00:30)

str.replace(正则,替换内容)
替换返回被替换后的str,不直接对原有的str进行修改。第2个参数可以是函数(匹配到一次执行一次),并函数的(a,b,c,d)除a是匹配到全部以外,其他是按照顺序的子项
语法
/\d+|[1234-6^7-9 | abc | \w]/g 找到是数字的,+把连接起来(量词),g是修饰符,找到全部找完,默认是单找一个(正则特性,懒惰),|(一样是‘或’的意思)

在这个//里,要找到什么就直接写就是找到什么。比如找abc就直接写/abc/,但不会匹配到ab这样的只有满足全部条件abc才会被找到
| 的意思就是或者的意思 是一个单竖线
()表示的是一个整体,被包的是一个整体的意思,并且从左边到右边,左边第一个被包起来的是整个匹配到的字符串的一个第一个子项
[] 里面的也会被解析成只找一位,里面的会被单独拆出来当做一位去查找。也可以说是 | 的意思。不过他的特点是可以用链接式,如 1-9 a-z 就相当于在里面写了 [1到9]
^ 在 [] 的意思就是以外的东西,如 ^6-7 等于 67以外的所有,注意,不在【】里面的话,它的意思是行首,字符串开头
$ 行尾
. 的意思是除了换行的任意字符 (但如果是.的话 就是真正的符号 . 的意思)
i是修饰符,就是匹配的规则不区分大小写

\d{2,6} 最少2次,最多6次
{2,} 最少2次,最多不限
{2} 只能2次

  • 最少0次,最多不限
    ? 最少0次,最多1次 等同{0,1}
  • 最少1次,最多不限 等同{1,}

(?=要匹配的) 前向申明,意思就是要匹配的必须 跟在 前面的后一位,但是又不要匹配到 被前向申明匹配到的
(?!要匹配的) 反前向申明,也就是要匹配的不能在前面的后一位出现,其他的都可以,同样只匹配到前面一位。被申明的都是不会匹配到的,只是要求在后面

表达运算
\数字 整个表达式里的第几个子项的指向,也就是\num的这一位必须是子项匹配到的而不是匹配子项的那个条件,如/(a)(b)(c)\1/ 那成功的话就要是 abca

\d 一个数字
\D 非数字
\w 数字,字母,下划线
\W 非数字,非字母,非下划线
\s 空格
\S 非空格
\b 边界符(这个是看不到的,首先要满足/w的表达)(起始,结束,包括匹配元素前面或后面有空格的话,也会算是开始跟结束,但是匹配的是不能算是空格的)
\B 非边界符
\f 换页符
\n 换行符
\r 回车符
\t 制符表
\v 垂直制符表

■cookie储存■
document.cookie = '名=值'; 储存数据
document.cookie 返回数据(返回的全部cookie)
更多其他方法,查看API吧!

注意项 1.cookie 的大小是有限制的 2.cookie 的条数是有限制的 3.cookie 可以设置有效期
4.不同浏览器所产生的cookie是不能相同访问 5.只能访问自己域名下的cookie,不能访问其它域名的cookie
6.cookie 是一个字符串信息,也只能存放字符串信息 7.有固定格式,一次设置多个的时候值后面+ 分号空格 跟下一个要存的区分开来
7.默认情况下,当浏览器关闭时,cookie自动失效除非设置了一个未来的过期时间

■AJAX■

Ajax对象创建
var xhr = new XMLHttpRequest() 首先要申明AJAX对象 (注意,IE6这个对象没有,并且如果判断的话,也要在前面加上window后拿去判断)
new ActiveXObject('Microsoft.XMLHTTP') (IE6里面的插件,去支持AJAX)

并且它有2种方法提交
1.get 通过地址栏的“?”后面传递数据,如果多个数据还会用“&”连接起来。并且会被缓存,传输到后端如果有中文的时候还要进行转URL编码
GET方式提交的地址是会被浏览器缓存的,要解决这个混存问题就可以在提交数据的时候顺便把时间戳也加到数据的最后一个

2.post 通过请求头传输,它传输输入是在send方法的时候把输入当参数传过去的。不会被缓存,

无论是ajax还是cookie 在传输带有中文的时候应该先转换成URI编码,可用window下的 encodeURI('string') 方法进行转换,但post传的时候因为申明了请求头,已经进行了转码

对象.responseText 服务器返回的内容就存在这个属性里面(默认string类型)
对象.readyState Ajax的工作状态(0.初始化。 1.载入,发送请求。 2.载入完成。收到发送的所有请求并返回。 3.解析响应的内容。 4.完成,解析完成,可以继续下面的操作)
这个方法一般用在 onreadystatechange事件里面 如果状态完成,就可以执行改做的事情了

对象.status 服务器的状态值。(查询 HTTP状态吗 一般为3位数字的数值)(一般为200就是请求到正确的后端文件)(可以确认Ajax的工作是否正常完成了,还是报错)

属性,方法
对象.open 打开,并传输到指定地址(一:方式(get,post),二:文件跟get的?的传输,三是否异步)
对象.setRequestHeader('content-type', 'application/x-www-form-urlencoded') 申明发送的数据类型(这一步一般是post方式的时候才需要,get方式不需要)
对象.send() open是打开的话,send就是确认的意思了。(而且POST提交方式的数据是放到这里来的,数据方式是一样的)

属性,事件
对象.onreadystatechange 监听Ajax的状态值发生改变的时候触发的事件

■时间■
new Date 获取到当前本地时间(全部)
+new Date 获取当前时间的毫秒,也就是把时间对象转换成了时间戳

获取
getFullYear() 年
getMonth() 月份,从0开始,所以 +1
getDate() 天 | 日
getDay() 星期 从0开始,0表示星期日,所以判断

getHours() 时
getMinutes() 分
getSeconds() 秒
getMilliseconds() 毫秒

设置(用这些方法会转换成时间戳)
new Date().setFullYear(2015); 设置年份到具体的某一年
new Date().setMonth(4); 设置月份到指定的月
new Date().setDate(20); 设置日期到指定的某一天

转换为字符串
时间对象.toUTCString() 时间对象.toGMTString()

ˇ月份取值ˇ
January、February、March、April、May、June、
一 二 三 四 五 六

July、August、September、October、November、December
七 八 九 十 十一 十二

ˇDate对象参数ˇnew新

数字形式:new Date(2013,4,1,9,48,12);

字符串形式:new Date('June 10,2013 12:12:12');

ˇ时间转换公式ˇ

天:Math.floor(t/86400)

时:Math.floor(t%86400/3600)

分:Math.floor(t%86400%3600/60)

秒:t%60

更多详细请参照 http://www.w3school.com.cn/jsref/jsref_obj_date.asp

■面向对象■
四种概念 (抽象) 封装 继承 多态

创建对象

  1. var a = Object();
  2. var a = {};

当 new 一个函数 的时候,这个函数就是一个构造函数。
1.会在内部自动创建一个null对象
2.并且会把这个构造函数的this指向null对象
3.如果这个构造函数里面没有 return 语句,默认就 retuen this 赋给 null 对象
4.如果有 return 语句
①return出去的是一个对象类型的值,那么返回值就是这个对象
②return出去的是一个非对象类型的值,那么如上,返回this,也就是指向 null 对象

prototype 函数原型,函数的属性,当一个函数被创建的时候,也会自动的创建一个prototype的空对象
proto 对象底下的原型对象,原型链上的对象

↓当我们去调用一个对象的属性或者方法的时候,它首先会在对象自身上面查找这个属性或者方法,
↑如果没有查找到,那么他会依据proto对象来查找是否存在该属性或者方法,如果有则调用

js中有一个约定,如果一个函数是构造函数,那么命名采用大驼峰命名,首字母大写。

fn1.prototype.fn2=function(){
var _this = this;

for(var i=0;i this.aInp[i].onclick=function(){
_this.fn3(this);
};
};
};

内置方法
对象.hasOwnProperty(‘参数’) 返回布尔值,看这个参数是不是这个对象底下的属性。是返回真。不是跟没有都返回假。
对象.constructor 返回对象的构造函数.一般用来查看或判断构造函数的(注:这个指向是可读可写的,所以一般也可以用来修正构造函数的指向)
对象1 instanceof 对象2 返回布尔值,看对象1跟对象2在原型链上是否有关系。有就返回真(instanceof属于运算符,所以不是用“.”而是用“ ” )
对象.toString(参数) 把对象转换成字符串(参数为进制)。还可以拿来判断数据的类型。例如:object.prototype.toString.call(判断的) == ''

继承
属性继承 子函数继承父构造函数的话,就如 子函数=function(){ 父.call(this) };

方法继承1 (继承父级的原型下的所有方法)就是把父级的对象赋值给子级的对象。 如: 子对象.prototype = 父对象.prototype (浅拷贝)

继承2 for in 循环 去 循环父级的prototype 给 子级的 prototype 如下(深拷贝)

var a = {父}; var b = {子};
for(var i in a){
if( typeof a[i] == 'object' ){
var newa = JSON.stringify(a[i]); //如果是一个对象,那么就先转换成一个字符串
var newobj = JSON.parse(aa); //然后再次转换回对象,就不存在内存引用了
b[i] = newobj;
};
};

继承3 模拟后端的类继承。(用构造函数看作类去继承)子.prototype = new 父的构造函数(); 然后创建出一个 子对象 var 子 = new 子构造函数();
(此方法是模拟的,相对的问题也比较多)比如子对象的.constructor 返回的是父级的构造函数。所以一般情况下还要去改 子构造函数.proto.const(简) = 子构造函数
而且这样创建出来的新的子对象,是会互相影响的。影响复用性。所以要做属性跟方法继承的分离,而且不要直接去new 父的构造函数,而是创建一个函数表达式。
然后让这个函数的.prototype = 父的.prototype,然后 子.prototype 都去 =new 新的函数();

继承4 原型继承也是直接用一个空函数,利用这个函数的.prototype = 父对象 ,并且返回值 new 这个空函数名();

■闭包■
当一个函数被执行完以后,里面的变量就是局部变量会被垃圾回收机制给清理。也就是当这个函数下次被调用的时候,里面的变量会被重新申明。如下

function fn1(){
var a = 0;
};

当每次调用这个fn1的话,里面的a都会被重新申明为0,就是一个初始值,但是如果这个变量 a 被当前函数里的另外一个函数里(另一个作用域下)所引用或找到的话,那么就不会被回收。
也就是不被回收的话。就表示长期驻扎在内存当中。这样可以避免全局变量的污染,因为在全局下是找不到这个当前作用域下的变量的。如下

①function aaa(){
var a = 0; //因为下面被引用着,所以这个a,当这个当前aaa函数执行完后也不会被垃圾回收

function bbb(){
alert(a);
};
};

②function aaa(){
var a = 0;

function bbb(){
alert(a);
};
return bbb;
};

var c = aaa();
c();

那既要用到一个是必须的全局变量,又不能让全局里去找到它的话,那就要用到闭包的写法拉,下发如下:

①function aaa(){
var a = 1; //把要申明的全局变量写在当前函数里面
return function(){ //要执行的语句或者执行的代码,写到 return 函数里
a++; //修改所谓的全局变量,其实是被引用着的局部变量,然后使得外层某个变量被引用着,所以不会被回收,当下次执行aaa的时候也不会重新申明
alert(a); //自己要执行的语句
};
};

var b = aaa();
b(); //结果的话就跟 a 这个变量写在全局函数里是一样的但是不同的是如下
alert(a); //他不能被全局下找到,这样就能保证不会给全局造成过多的变量造成全局污染

②var ss = (function (){ //模块化
var a = 1; //里面的所谓的全局变量其实也就是相当于模块化的成员

return function(){
a++;
alert(a);
};

})()

模块化的常用写法跟实现成员跟私有方法

var ss = (function(){
var a = 1;
//在这个底下的所有所谓的全局变量跟方法都属于私有的,
function aaa(){
a++;
alert(a);
};

function bbb(){
a++;
alert(a);
};

return { a:aaa,b:bbb } //然后直接返回一个对象,把私有的东西封装到这个对象下,外部可以通过对象调用,但直接找是找不到的
})();

你可能感兴趣的:(web API)