不用看了，赶紧跟着敲一遍！

一、元素查找

//1.Node节点
document.getElementById(id);
document.querySelector(selector);
document.doctype;
document.documentElement;
document.head;
document.title;
document.body;

//2.NodeList,节点数组
document.getElementsByName(name);
document.getElementsByTagName(name);
document.getElementsByClassName(name);
document.querySelectorAll(selector);
document.links;
document.scripts;
document.images;
document.embeds;
document.forms;
document.all;

二、class操作

//add class
el.className += ""+className;
//ie10+
el.classList.add(className);

//has class
function hasClass(el,className){return new RegExp('(^| )' + className + '( |$)','gi').test(el.className);
}
//ie10+
el.classList.contains(className);

//toggle class
function toggleClass(el.className){var classes = el.className.split(' ');var existingIndex = -1;for (var i = classes.length; i--) {if(classes[i] === className){existingIndex = i;}}if(existingIndex >= 0){classes.splice(existingIndex,1);}else{classes.push(className);}el.className = classes.join(' ');
}
//ie10+
el.classList.toggle(className);

//remove class
function removeClass(el,className){el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(" ").join('|') + '(\\b|$)','gi'),' ');
}
//ie10+
el.classList.remove(className);

三、节点操作

//创建
var el = document.createElement(name);

//复制
el.cloneNode(true);//默认为false(克隆节点及其后代，true(克隆节点及其属性，以及后代))

//向节点添加最后一个子节点
parent.appendChild(el);

//在指定节点之前插入新的子节点
parent.insertBefore(el,parent.childNodes[0]);

//insertAdjacentHTML方法
el.insertAdjacentHTML(where,htmlString);
el.insertAdjacentHTML('beforeBegin',htmlString);//在该元素前插入
el.insertAdjacentHTML('afterBegin',htmlString);//在该元素第一个子元素前插入
el.insertAdjacentHTML('beforeEnd',htmlString);//在该元素最后一个子元素后面插入
el.insertAdjacentHTML('afterEnd',htmlString);//在该元素后面插入

//父元素
el.parentNode;

//删除节点
el.parentNode.removeChild(el);

//兄弟节点 ie9+
var siblings = Array.prototype.filter.call(el.parentNode.children,function(child){return child !== el;
});

//下一个兄弟节点
//ie8+
function nextElementSibling(el){do { el = el.nextSibling; } while ( el && el.nodeType !== 1 );return el;
}
//ie9+
el.nextElementSibling;

//上一个兄弟节点
//ie8
function previousElementSibling(el){do{el = el.previousSibling;}while( el && el.nodeType !== 1 );return el;
}
//ie9+
el.prviousElementSibling;

//children
//ie8
var children = [];
for(var i = el.children.length; i--){if(el.children[i].nodeType != 8){children.unshift(el.children[i]);}
}
//ie9+
el.children;

四、属性操作

//获取属性
el.getAttribute('alt');

//设置属性
el.setAttribute('alt','图片描述');

五、内容操作

//获取元素内容
el.innerHTML;
//设置元素内容
el.innerHTML = string;
//获取元素内容（包含元素本身）
el.outerHTML;
//设置元素内容（包含元素本身）
el.outerHTML = string;

//获取文本内容
//ie8
el.innerText;
//ie9+
el.textContent;

//文本设置文本内容
//ie8
el.innerText = string;
//ie9+
el.textContent = string;

六、css操作

//获取css样式
//ie8
el.currentStyle[attrName];
//ie9+
window.getComputedStyle(el)[attrName];

//伪类
window.getComputedStyle(el,":after")[attrName];

//设置css样式
el.style.display = 'none';

七、位置大小

getBoundingClientRect //返回一个对象，包含top,left,right,bottom,width,height

//元素在页面上的偏移量
var rect = el.getBoundingClientRect()
return{top: rect.top + document.body.scrollTop,left: rect.left + document.body.scrollLeft
}

//元素自身宽高（包含border,padding)
el.offsetWidth;
el.offsetHeight;

//带垂直滚动条的页面总高度
document.documentElement.scrollHeight;
//在没有滚动条的情况下，元素内容总高度和宽度
scrollHeight,scrollWidth;

//视口大小
//ie9+
var pageWidth = window.innerWidth,pageHeight = window.innerHeight;
//ie8以下
if(typeof pageWidth != "number"){//ie8if(document.compatMode == "CSS1Compat"){pageWidth = document.documentElement.clientWidth;pageHeight = document.documentElement.clientHeight;}else{//ie6pageWidth = document.body.clientWidth;pageHeight = document.body.clientHeight;}
}

八、事件

//绑定事件
//ie9+
el.addEventListener(eventName,handler,Booleans);//Booleans默认为false(事件在冒泡阶段执行)，true(事件在捕获阶段执行)
//ie8
el.attachEvent('on' + eventName,function(){handler.call(el);
});

//移除事件
//ie9+
el.removeEventListener(eventName,handler);
//ie8
el.detachEvent('on'+eventName,handler);

//事件触发
if(document.createEvent){//ie9+var event = document.createEvent('HTMLEvents');event.initEvent('change',true,false);el.dispatchEvent(event);
}else{//ie8el.fireEvent('onchange');
}

//event对象
var event = window.event || event;

//事件的目标节点
var target = event.target || event.srcElement;

//事件代理
ul.addEventListener('click',function(event){if(event.target.tagName.toLowerCase() === 'li'){console.log(event.target.innerHTML);}
})

九、DOM加载完毕

function ready(fn){if(document.readyState != 'loading'){//ie9+document.addEventListener('DOMContentLoaded',fn);}else{//ie8document.attachEvent("onreadystatechange",function(){if(document.readyState != 'loading'){fn();}})}
}

十、绑定上下文

//ie8
fn.apply(context,arguments);
//ie9+
fn.bind(context);

十一、去除前后空格

//ie8
string.replace(/^\s+|\s+$/g,'');
//ie9+
string.trim();

十二、ajax

//GET
var request = new XMLHttpRequest();
request.open('GET','user.php?name=wushaoxiong&sex=boy',true);//false(同步)
request.send();//ie8
request.onreadystatechange = function(){if(this.readyState === 4){if(this.status >= 200 && this.status < 400){var data = JSON.parse(this.responseText);}else{//报错}}
}
//ie9+
request.onload = function(){if(request.status >= 200 && request.status < 400){var data = JSON.parse(request.responseText);}else{//服务器返回出错}
}
request.onerror = function(){//连接错误
}

//POST
var request = new XMLHttpRequest();
request.open('POST','user.php',true);
request.setRequestHeader('Content-type','application/x-www-form-urlencoded');
request.send(dataString);

十三、节点遍历

function forEach(nodeList,callback){if(Array.prototype.forEach){//ie9+Array.prototype.forEach.call(nodeList,callback);}else{//ie8for(var i = 0; i < nodeList.length; i++){callback(nodeList[i],i);}}
}

十四、从数组中获取随机成员

var items = [1,2,3,4,5,6,7,8,9,0];
var randomItem = items[Math.floor(Math.random()*items.length)];

十五、获取指定范围内的随机数

function random(max,min){return Math.floor(Math.random()*(max-min+1))+min;
}

十六、生成从min到max的数字数组

function numArr(max,min){var arr = [];for(var i = min+1; arr.push(i++) < max;)
}

十七、生成长度为len的随机字符串

function randAlphaNum(len){var str = '';for(str.length < len; str += Math.random().toString(36).substr(2));return str.substr(0,len);
}

十八、打乱数组的排序

function disArr(arr){arr = arr.sort(function(){return Math.random() - 0.5;})
}

十九、数组追加到另一个数组

function pushArr(arr1,arr2){Array.prototype.push.apply(arr1,arr2);
}

二十、参数转换成数组

function objToArr(obj){var arr = Array.prototype.slice.call(obj);
}

二十一、验证是否是数字

function isNumber(n){return !isNaN(parseFloat(n)) && isFinite(n);
}

二十二、验证是否是数组

function isArray(obj){return Object.prototype.toString.call(obj) === '[object Array]';
}

二十三、获取数组中最大值和最小值

function inNum(arr){return maxNum = Math.max.apply(Math,arr);
//  retyrn minNum = Math.min.apply(Math,arr);
}

二十四、截断数组

function cutArr(arr,len){arr.length = len;
}

二十五、在条件中使用逻辑与或

function ifDo(foo,callback){foo==10 && callback(); //相当于if(foo == 10){callback()}foo == 10 || callback(); //if(foo != 10){callback()}
}

二十六、使用map()方法对数组循环

function forMap(arr){arr.map(function(item){return item;})
}

二十七、保留指定小数位数

function cutNum(num,len){num = num.toFixed(len);  //返回字符串
}

二十八、对象序列化（与字符串相互转换）

function objToStr(obj){return str = JSON.stringify(obj);//return obj = JSON.parse(str);
}

不用看了，赶紧跟着敲一遍！相关推荐

电脑必备：通用输入法状态提示，再也不怕按错，再也不用看右下角
ImTip 是一个开源输入法状态提示工具( 仅 639 KB ),虽然发布没多久,已被网友推荐为 Windows 必备软件.在小众有网友留言:"终于遇到她了,你说的这个痛苦,我承受好久了-- ...
超级实用的分时图指标有了本分时图你根本不用看K线了
股市上分时图选股指标不算很多,但也有一些比较实用的简单的可以供炒股小白选择,在这里分享一个我自己用的分时图选股指标,有了这个你根本就不用看K线了. 指标用法 1.四条指标线,一开盘就固定显示,理论上不 ...
（开包即用，不用看代码！）借助Docker自动构建Java(Oracle)镜像
开包即用,不用看代码! 如果着急使用可以直接使用我构建的镜像,请从配置镜像源开始看 Docker中的Java Java可能是程序员最常用的运行时环境了, 即使你不开发Java程序,大量的开发工具也需要 ...
驾校考试秘笈不用看书就能通过！！暂时不考也先留着别等着急的时候没处找去！！！速记方法！...
驾校考试秘笈不用看书就能通过!! 暂时不考也先留着别等着急的时候没处找去!!!速记方法! 1.题目里有"口"的选50米,有"站"的选30米,叫"口 ...
卷毛机器人符文_LOL：卷毛实力推荐版本最恶心辅助，网友：看完了赶紧删！
原标题:LOL:卷毛实力推荐版本最恶心辅助,网友:看完了赶紧删! Fzzf卷毛一直以来是大家很喜欢的一位职业选手,世界第一机器人,卖装备买眼都给大家留下了深刻的映像!在WE时期就帮助队伍拿下大大小小的 ...
不用看网课就能学到python的文章（第一天）
为什么要学python? 在大数据时代,抖音快手火爆全球,作业帮小猿搜题的数据库,都离不开大数据,大数据的科学计算,最重要的语言就是python,网络爬虫(网络爬虫 - 搜狗百科)搜索引擎等等也主要是 ...
老板说，35岁以上的简历不用看了
看到一篇文章,作者是北京一家公司的HR,负责招聘踏实能干薪资低的员工.她今年30岁,老公今年33岁,她的老板告诉她,超过35岁的简历就不用看了! 倘若过了35岁,仍然没有事业有成,就很难有机会成功了. ...
HTML可用于情侣表白的爱心代码~，赶紧跟着操作，让她也拥有属于你的爱心吧。
文章目录前言一.效果图二.操作步骤第一步第二步第三步第四步第五步第六步源码前言最近随着电视剧<点燃我温暖你>的火热播出,剧中帅气学霸李洵的炫酷爱心代码也迅速火出了圈 ...
（置顶）飞控板不用看得高大上，本质就是STM32加那几个传感器，和平衡车板子差不多，是完全可以自己画的，甚至不用画，买个STM32核心板+十轴模块
你自己画一块板子,然后真正飞成了,我觉得你会非常开心的,这种感觉不一样的我觉得,你说是不是. 飞控我们不用看得高大上,本质还是STM32加传感器,可能和平衡车的差不多,所以不用觉得高大上什么的. 真的 ...

不用看了，赶紧跟着敲一遍！

不用看了，赶紧跟着敲一遍！相关推荐

最新文章

热门文章