我相信对于程序猿都有做笔记的习惯。
我初学到现在也做了不少笔记,以前,总是怕写的文章或者好的内容分享出来就怕被直接copy以后更个名就不再是你的。
但通过博客园,学习到不少东西,人家都不怕什么了,我自然也要学会分享,以后我会把学习到的东西慢慢的分享出来。
以后是对于初学者有帮助的一些JS的方法API,使用即说明。
Author : LukunlinDate : 2015/2/9/10:15Area : China in GuangDong
■JS组成■1,ECMAScript : js的核心标准 , 同时也是一个解析器2, DOM : document object model 文档对象模型(结构)//dom 是关于如何创建、插入、修改、删除页面元素的标准。//有2套DOM,htmlDom跟xmlDom3, 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等于目标点减去nMath.max()求最大值,参数里面可以传参,然后返回最大值Math.min()求最小值,参数里面可以传参,然后返回最小值Math.abs()返回绝对值Math.Pi圆周率(3.141592653无限不循环)Math.pow()平方数(第一参数为一个数字,第2参数为这个数字的多少平方)Math.sqrt()开方(参数为一个)平方的逆运算
更多方法请参考 http://www.Vevb.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 src="" ></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键
新闻热点
疑难解答