1.js 中 NaN === NaN 值为false;
2.parseInt("abc") === NaN;(不是数字)
3.tab 纯js 实现。可以给当前循环的元素添加.index 属性。当前序号。
4.操作元素时,不要混合操作 style 或者className,交替操纵容易出现费预知情况,因为js 操作改变的是行内样式,优先级高。
5.对象操作属性 可以用点操作符号 ,也可以用中括号操作。 obj.name === obj['name']; 数组和对象中括号 区别是,对象括号里是字面量(字符串)数组的是序号索引,数字类型。 json 对象也可以通过中括号操作。
6.不固定参数求和;通过arguments 参数 ,循环该参数,求和,返回。
7.取反效果if( true ){ } else{ }
8.js 可以更改任何属性。style.属性 跟标签里一致,除了class外 tagObj.style.className = 'winyh';
9.js 定义一个函数,获取/设置css样式。通过传参。obj(操作对象) name(属性名称) value (属性值);通过arguments 参数length 属性来判断是 获取还是设置。style 只能操作行间样式,非行间样式需要通过 currentStyle 【getComputedStyle】来获取 obj.currentStyle.width (获取元素宽度) || getComputedStyle(oDiv, null).width oDiv是需要操作的对象。null 第二个参数随意。(浏览器兼容写法:直接判断 oDiv.currentStyle 是不是为真,即浏览器是否支持 )
function getStyle(obj,name){ if( obj.currentStyle ){ return obj.currentStyle[name] } else { return getComputedStyle(obj,null)[name] }} //无法获取符合样式,如 background 必须传入 backgroundColor
10.两个相同长度的数组,只需要循环一次。通过 arr[i] arrOther[i] 分别获取当前索引下的值。
11.复合样式 background (background-image background-color ) border 单一样式 width.
12.数组的length 既可以获取也可以设置。如清空数组的值 arr.length = 0; arr = [1,2] arr.push(3,4);
12.split()将指定字符串分割成数组。
13.splice()方法向/从数组中添加/删除项目,然后返回被删除的项目。可以实现删除,添加 和替换功能。操作会改变原数组。
1、删除功能,第一个参数为第一项位置,第二个参数为要删除几个。array.splice(index,num) 。返回值为删除内容(数组)。
2,插入功能,第一个参数(插入位置),第二个参数(0),第三个参数(插入的项)array.splice(index,0,insertValue) 返回值为空数组。
var arr = [1,2,3,4,5]; console.log(arr.splice(1,0,8,9,8), arr);// [1, 8, 9, 8, 2, 3, 4, 5]
3,替换功能,第一个参数(起始位置),第二个参数(删除的项数),第三个参数(插入任意数量的项)array.splice(index,num,insertValue) 返回值为删除内容(数组)
14.数组连接 arr1.concat(arr2)
15.join 数组转字符串,指定字符。
var arr = [1,2,3,4,5];var str = arr.join(",");console.log(str);// 1,2,3,4,5 字符串
16.数组的sort()方法 :*只认识字符串。需要对比数字时需要传入回调函数和参数。
arr.sort(function(n1,n2){
/*if(n1<n2){ return -1; } else if(n1>n2){ return 1; } else{ return 0; }*/return n1 - n2;
});17.定时器(定时,延时)停止 ( 定时器返回值是;
返回值是一个数字,代表当前是第几个定时器
)
setTimeout(fn, 1000) 延时
setInterval(fn , 1000 ) 每隔多久执行,无限执行。
clearTimeout() clearInterval() 清除定时器。
18.时钟原理。
如果设置的频率是1s 则 定时器会隔一秒后才开始执行,需要立即执行的情况可以把回调函数封装,在定时器后直接执行一次。
function addZero(n){ if(n<10){ return '0'+n; }else{ return ''+n; } } var time = new Date(); minute = time.getMinutes(); addZero(minute);
把当前时间拼接成字符串,(6位)循环页面的六个图片,然后通过 字符串下标操作字符串。str[i] (ie低版本不兼容 换成 str.charAt(i) ) 。更改 oImg[i].src 属性。
var time = new Date();获取年 time.getFullYear();获取月 time.getMonth()+1;获取日 time.getDate();获取星期几 time.getDay();获取时 time.getHours();获取分 time.getMinutes();获取秒 time.getSeconds();
19.延时提示框效果。多次移入移出时需要清除定时器效果,重置开始定时器。
20.无缝滚动
元素 offsetLeft 属性【对象的直接属性,不在style对象里】 左偏移量。距离浏览器边框,非父元素的偏移量。
1.offsetWidth属性可以返回对象的padding+border+width属性值之和,style.width返回值就是定义的width属性值。
2.offsetWidth属性仅是可读属性,而style.width是可读写的。
3.offsetWidth属性返回值是整数,而style.width的返回值是字符串,并且带有单位。
4.style.width仅能返回以style方式定义的内部样式表的width属性值。
(元素里再获取 oDiv.getElementById("id1“))
改变元素位置需要先把元素设置成脱离标准文档流。然后通过更改left 属性来改变元素位置。
DOM操作
1.获取所有子节点 obj.childNodes (包含了空的文本节点 文本节点没有style属性) || children 属性 获取所有子节点。但是不包含文本节点。子节点只会取到第一层。
2.nodeType 获取节点类型。nodeType == 1 元素节点 nodeType == 3 是文本节点。
3.parentNode 获取父节点。offsetParent 获取元素第一个有定位的父级。
4.firstChild 第一子节点。 lastChild 最后一个子节点。 firstElementChild firstElementChild 可解决兼容性问题。
5.nextSinling 下一个兄弟(同级)元素 previousSibling 上一个兄弟元素。
操作元素属性方法:点操作,中括号操作,以下方法。
设置元素属性 setAttribute("class", "winyh")
获取元素属性 getAttribute("value", ''dfjasfkas");
移除元素属性 removeAttribute("value");
var btn = document.getElementById('btn'); btn.value = 456; btn['value'] = 456; btn.setAttribute('value', 456); //三种操作属性的方式
6.通过 class 获取元素
document.getElementsByClassName("test");// 返回数组
if (arr[i].className = "test") { ... }
封装函数通过class 获取元素集合。
DOM操作应用
1.创建dom元素 document.createELement("input"); 创建的元素可以给它赋值属性 nInput.value = "123";
2.appendChild();给父元素追加子节点 parent.appendChild(ele);
3.insertBefore();给父节点插入元素。 parent.insertBefore(待插入元素, 在谁之前);两个参数。
4.removeChild();在父元素里删除子元素。parent.removeChild(childele);
5.文档碎片 var frag = document.createDoumentFragment(); parent.appendChild(frag)// 低浏览器可以提高性能。
DOM操作应用高级
表格快捷操作 tboies() rows() cells() .innerHTML
新增的li 元素。需要先计算基础数据,然后在基础上++自增;
表格搜索:循环,当前元素满足条件时,标记元素,当不满足时,清空标记。
忽略大小写 可以把比对的两个元素都转换成大写或者小写。
模糊搜索:字符串的search()函数
多关键字搜索,切割搜索的字符串,然后循环。
li排序 把元素类数组对象 循环存入 创建的 Array数组。appendChild()会把子元素先从原来的元素里删除,再插入新父元素中。
图片或者logo 效果淡入淡出效果是:更改图片透明度。opacity:0.3; /*兼容IEde 写法*/filter:Alpha(opacity=50);定时器修改opacity值完成渐变效果。
像素 如果有小数,浏览器渲染时直接取整数,没有四舍五入的过程。Math 向上取整和向下取值整不会考虑四舍五入。直接向上或者向下取整。
JS运动
分享到动画功能:
缓冲动画:动画速度和目标距离是成正比的。不要忘了速度取整。速度需要除以一个缓冲系数。
匀速运动:当剩余距离小于运动速度时,默认为到达了。Math.abs(),最后让left值等于目标值;
重复点击速度加快的问题:因为开启了多个定时器,点击时需要清除定时器,保持每次只有一个定时器在运行。
多物体运动时:让每个运动对象都有定时器。清除时清除对应的定时器。不要公用相关变量。
逐渐显示:从上到下显示,可以初始给高度值为0;然后缓冲增加到指定高度。
opaticy style赋值时 0.3 给 30
链式运动:
scrollTop scrollLeft 滚动条的距离
JS事件对象
e.clientX e.clientY 可视区里鼠标坐标 (绝对坐标需要 + scrollTop + scrollLeft) e.keyCode 按键码
防止拖出可视区:方法
oncontextmenu 事件(鼠标右键)
document.oncontextmenu = function(){ return false;//阻止默认事件,避免右键弹出}
阻止默认时间来实现输入值只可以输入数字(监听keydown事件,判断keyCode 码是否是数字键所属的码,以及删除功能的码 ,如果不是return false 阻止默认事件,阻止输入,按键无效)
拖拽
1.计算拖拽边缘限制运动范围 ::距离不变
2.不能拖出某个对象原理
3.磁性吸附 (判断距离给一个差值)
4.setCapture() 事件捕获。
5.带框的拖拽虚框
6.自定义滚动条 控制div宽高
window.onload = function(){ var oDiv = document.querySelector(".container"); var disX = disY =null; oDiv.onmousedown = function (ev) { e = ev || event; disX = e.clientX - oDiv.offsetLeft; disY = e.clientY - oDiv.offsetTop; document.onmousemove = function (e){ var l = e.clientX - disX;//物体位置 var t = e.clientY - disY;//物体位置 if(l<0){ l = 0; } else if(l>document.documentElement.clientWidth - oDiv.offsetWidth){ l = document.documentElement.clientWidth - oDiv.offsetWidth } if(t<0){ t = 0; } else if(t>document.documentElement.clientHeight - oDiv.offsetHeight){ t = document.documentElement.clientHeight - oDiv.offsetHeight; } oDiv.style.left = l + 'px'; oDiv.style.top = t + 'px'; console.log(e.clientX, e.clientY); } document.onmouseup = function (e){ document.onmousemove = null; document.onmouseup = null; } } }
事件绑定:attachEvent()---带on onclick addEventListener()
if( oBtn.attachEvent ){ ... }
自定义滚动条
BOM应用
1.window.open(url);window.close();只能关闭open方法打开的窗口。用户打开的关闭会有兼容问题
2.document.write()会先清空后写入
3.每一个新打开的窗口都有window对象
4.window.location 当前页面地址。
5.window.navigator.agent (对象包含有关访问者浏览器的信息);
6.可视区 (窗口改变时 可视区尺寸会变化 window.document.clientHeight/Width) 可视区离文档顶部距离(scrollTop 也是滚动距离 document.cocumentElement.scrollTop || document.body.scrollTop)快速回到顶部功能就是让scrollTop属性赋值为0
7.document.cookie 大小限制 4k 时间过期之前一直存在。同一个网站共享同一套cookie. 给cookie 赋值多次不会覆盖,而是添加。
设置过期时间:计算14天后星期几
var odate = new Date();oDate.steDate(oDate.getDate+14);document.cookie = "user=winyh;expires="+oDate
获取cookie 字符串通过 split(“;”)分割;删除cookie 可以直接给过期时间 -1天。
用cookie记住用户名: 提交用户名时 先设置cookie 然后在 页面加载时获取cookie ,赋值给表单输入框。
Ajax
window.onload = function(){ //1.创建ajax 对象 if( window.XMLHttpRequest ){ var oAjax = new XMLHttpRequest(); } else { var oAjax = new ActiveXObject("Microsoft.XMLHTTP"); } //2.链接服务器 //open(方法, 文件地址 , 同异步(布尔值)) oAjax.open("get", "url" , true); //3.发送请求 oAjax.send(); //4.接受返回 oAjax.onreadystatechange = function(){ // readyState 与服务器交互到哪一步了 if( oAjax.readyState == 4 ){ //状态码 请求成功还是失败 if(oAjax.status == 200){ console.log(oAjax.resposeText); } else { console.log(oAjax.status); } } } } // 可以封装函数,将成功和失败的语句封装成成功的函数,失败的函数。将状态或者数据的当作参数传入 封装的处理 函数。
function sentAjax(url, success, fail){ if( window.XMLHttpRequest ){ var oAjax = new XMLHttpRequest(); } else { var oAjax = new ActiveXObject("Microsoft.XMLHTTP"); } oAjax.open("get", url , true); oAjax.send(); oAjax.onreadystatechange = function(){ if( oAjax.readyState == 4 ){ if(oAjax.status == 200){ success(oAjax.resposeText); } else { //当传入失败的回调函数时才执行 if(fail){ fail(oAjax.status); } } } } }
面向对象
抽象
封装
继承
属性和方法
this 指向当前事件发生的对象,当前方法属于谁。
尽量避免在系统对象上定义方法和属性。否则会覆盖、
构造函数 首字母大写,函数内部变量赋值一个 new Object() 然后在对象上添加属性和方法。最后返回 定义的对象。(工厂方式)非设计模式--函数重复,新建很多对象后资源浪费,
var oDiv = document.querySelector(".container"); var disX = disY =null; oDiv.onmousedown = function (ev) { e = ev || event; disX = e.clientX - oDiv.offsetLeft; disY = e.clientY - oDiv.offsetTop; document.onmousemove = function (e){ oDiv.style.left = e.clientX - disX + 'px'; oDiv.style.top = e.clientY - disY + 'px'; console.log(e.clientX, e.clientY); } document.onmouseup = function (e){ document.onmousemove = null; document.onmouseup = null; }}
鼠标跟随效果:
引用没有定义的变量---报错
引用没有定义的属性---underfind
body元素没有内部元素时撑不起来
正则
使用 console.time()
和 console.timeEnd()
来标记循环耗时
console.time('Timer1'); var items = []; for(var i = 0; i < 100000; i++){ items.push({index: i});} console.timeEnd('Timer1');
//这个对象是一个函数function fn() { return 20;}console.log(fn + 10);console.log(fn + 'hello');fn.toString = function() { return 10;}console.log(fn + 10);console.log(fn + 'hello');fn.valueOf = function() { return 5;}console.log(fn + 10); console.log(fn + 'hello');// 输出结果分别是多少?function fn() { return 20;}10function fn() { return 20;}hello2010hello155hello
当函数fn用+连接一个字符串或者是数字的时候,如果我们没有重新定义valueOf和toString,其隐式转换会调用默认的toString()方法,将函数本身内容作为字符串返回;
如果我们自己重新定义toString/valueOf方法,那么其转换会按照我们的定义来,其中valueOf比toString优先级更高