JavaScript常用API总结
下面是我整理的一些JavaScript常用的API清单。
目录
1:元素查找
2:class操作
3:节点操作
4:属性操作
5:内容操作
6:css操作
7:位置大小
8:事件
9:DOM加载完毕
10:绑定上下文
11:去除空格
12:Ajax
13:JSON处理
14:节点遍历
元素查找
--------------------------------------------------------------------
注:如果你对python感兴趣,我这有个学习Python基地,里面有很多学习资料,感兴趣的+Q群:895817687
--------------------------------------------------------------------
// Node
document.getElementById(id) // document.getElementById('test')
document.querySelector(selectors) // document.querySelector('#test div')
document.doctype
document.documentElement
document.head
document.title
document.body// NodeList
document.getElementsByClassName(names) // document.getElementsByClassName('test')
document.getElementsByName(name) // document.getElementsByName('demo')
document.getElementsByTagName(name) // document.getElementsByTagName('div')
document.getElementsByTagNameNS(namespace, name) // document.getElementsByTagNameNS('http://www.w3.org/1999/xhtml', 'div')
document.querySelectorAll(selectors) // document.querySelectorAll('#test div')
document.links
document.scripts
document.images
document.embeds
document.forms
class操作
// ie8// add classel.className += ' ' + className;// has classfunction hasClass(el,className){return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);}// toggle classfunction 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(' ');}// remove classfunction remove(el,className){el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');}// ie 10el.classList.add(className); // add classel.classList.remove(className); // remove classel.classList.contains(className); // has classel.classList.toggle(className); // toggle class
节点操作
// 创建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;})// 下一个兄弟节点// ie8function nextElementSibling(el) {do { el = el.nextSibling; } while ( el && el.nodeType !== 1 );return el;}nextElementSibling(el);// ie9+el.nextElementSibling;// 上一个兄弟节点// ie8function previousElementSibling(el) {do { el = el.previousSibling;} while ( el && el.nodeType !== 1 );return el;}previousElementSibling(el);// ie9+el.previousElementSibling;// Children// ie8var children = [];for (var i = el.children.length; i--;) {// Skip comment nodes on IE8if (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// 获取文本内容// ie8el.innerText// ie9+el.textContent// 设置文本内容// ie8el.innerText = string// ie9+el.textContent = stringCSS操作// 获取css样式// ie8el.currentStyle[attrName]// ie9+window.getComputedStyle(el)[attrName]// 伪类window.getComputedStyle(el , ":after")[attrName];// 设置CSS样式el.style.display = 'none';
位置大小
// getBoundingClientRect返回一个对象,包含top,left,right,bottom,width,height// width、height 元素自身宽高// top 元素上外边界距窗口最上面的距离// right 元素右外边界距窗口最上面的距离// bottom 元素下外边界距窗口最上面的距离// left 元素左外边界距窗口最上面的距离// width 元素自身宽(包含border,padding)// height 元素自身高(包含border,padding)// 元素在页面上的偏移量var rect = el.getBoundingClientRect()return {top: rect.top + document.body.scrollTop,left: rect.left + document.body.scrollLeft}// 元素自身宽(包含border,padding)el.offsetWidth// 元素自身高(包含border,padding)el.offsetHeight// 元素的左外边框至包含元素的左内边框之间的像素距离el.offsetLeft// 元素的上外边框至包含元素的上内边框之间的像素距离el.offsetTop //通常认为 <html> 元素是在 Web 浏览器的视口中滚动的元素(IE6 之前版本运行在混杂模式下时是 <body> 元素)//因此,带有垂直滚动条的页面总高度就是 document.documentElement.scrollHeight// 在没有滚动条的情况下,元素内容的总高度scrollHeight// 在没有滚动条的情况下,元素内容的总宽度scrollWidth// 被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置scrollLeft// 被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置scrollTop// 视口大小// ie9+var pageWidth = window.innerWidth,pageHeight = window.innerHeight;if (typeof pageWidth != "number"){ // ie8if (document.compatMode == "CSS1Compat"){pageWidth = document.documentElement.clientWidth;pageHeight = document.documentElement.clientHeight;} else { // ie6混杂模式pageWidth = document.body.clientWidth;pageHeight = document.body.clientHeight;}}
事件
// 绑定事件// ie9+el.addEventListener(eventName, handler , Booleans); // Booleans默认false(事件在冒泡阶段执行),true(事件在捕获阶段执行)// ie8el.attachEvent('on' + eventName, function(){handler.call(el);});// 移除事件// ie9+el.removeEventListener(eventName, handler); // ie8el.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();}});}}
绑定上下文
// ie8fn.apply(context, arguments);// ie9+fn.bind(context);
去除空格
// ie8string.replace(/^\s+|\s+$/g, '');// ie9+string.trim();
ajax
// GETvar request = new XMLHttpRequest();request.open('GET', 'user.php?fname=Bill&lname=Gates', true); // false(同步)request.send();// ie8request.onreadystatechange = function() {if (this.readyState === 4) {if (this.status >= 200 && this.status < 400) {// Success!var data = JSON.parse(this.responseText);} else {// 错误}}};// ie9+request.onload = function() {if (request.status >= 200 && request.status < 400) {// Success!var data = JSON.parse(request.responseText);} else {// 服务器返回出错}};request.onerror = function() {// 连接错误};// POSTvar request = new XMLHttpRequest(); request.open('POST', 'user.php', true); // false(同步)request.setRequestHeader("Content-type","application/x-www-form-urlencoded");request.send(dataString);
JSON处理
JSON.parse(string);JSON.String(Object)
节点遍历
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);}}}forEach(document.querySelectorAll(selector),function(el, i){})
JavaScript常用API总结相关推荐
- Javascript常用API合集
常用API合集 一.节点 1.1 节点属性 Node.nodeName //返回节点名称,只读 Node.nodeType //返回节点类型的常数值,只读 Node.nodeValue //返回Tex ...
- Javascript常用API及事件原理相关笔记(一)
1.定义Date日期对象的四种方式及对日期对象进行操作 <!DOCTYPE html> <html lang="en"> <head><m ...
- JavaScript一些常用 API整理汇总
JavaScript一些常用 API整理汇总 Array new Set() 数组去重 const arr = [3,4,4,5,4,6,5,7]; console.log(new Set(arr)) ...
- 【repost】Javascript操作DOM常用API总结
Javascript操作DOM常用API总结 文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认 ...
- javascript:常用API学习Math.random, toString,slice(),substr(),Math.ceil()
javascript:常用API学习 1.获得随机数:Math.random() 如何随机获得整数? 2.如何转进制:十进制转二进制?: 变量名.toString(进制数) 3. 36进制:能把一个小 ...
- 【Day.js】一个轻量2KB的处理时间和日期的JavaScript 库,常用API记录与分享
关于时间的操作,一直在使用momentjs这个库.方便灵巧,功能强大.唯一的缺点:包大小为200K.精简的方案:如dayjs和miment. dayjs本身就是对标momentjs进行开发的: Day ...
- JavaScript基础(四)对象、数组、对象与数组的常用API
目录 一.对象 1. 对象的创建 2. 对象属性的访问 3. 遍历对象属性 4. 检测属性是否存在 5. 对象的方法 二.数组对象 1. 数组的创建 2. 访问数组 3. 数组长度 4. 数组的遍历 ...
- 7 种 Javascript 常用设计模式学习笔记
7 种 Javascript 常用设计模式学习笔记 由于 JS 或者前端的场景限制,并不是 23 种设计模式都常用. 有的是没有使用场景,有的模式使用场景非常少,所以只是列举 7 个常见的模式 本文的 ...
- js find的用法_React常用库Immutable.js常用API
JavaScript 中的对象一般是可变的(Mutable),因为使用了引用赋值,新的对象简单的引用了原始对象,改变新的对象将影响到原始对象.如 foo={a: 1}; bar=foo; bar.a= ...
最新文章
- linux grub修复 手动引导进入系统
- python基础教程:包的创建及导入
- 键盘压缩背景,ios滚动不流畅,禁止遮罩层下面内容滚动
- postsharp初体验
- SAP Odata filter的语法
- 如何查看服务器账户密码信息文件,如何查询服务器的数据库账号密码
- linux后台不挂断运行 nohup命令
- Incorporating Lexical Priors into Topic Models(即交互式主题模型的应用)论文阅读
- Java线程中断的理解(转载)
- 工业企业数据库处理——2.匹配样本
- 调研我国在需求分析方法、工具方面所做出的成果
- 武汉大学计算机国家网络安全学院怎么样,武汉大学国家网络安全学院怎么样?...
- 互联网晚报 | 10月21日 星期四 | 微信支付上线品牌视频号;快手短剧日活用户达2.3亿;《长津湖》票房升至中国影史第三...
- c++打印素数表(线性筛)
- mysql报08S01的错误- SQL Error: 0, SQLState: 08S01 偶发
- 沧小海笔记本之A7系列FPGA资源介绍
- J2EE开发实战基础系列一 HelloWorld
- 六顶思考帽(edward de bono)
- 局域网内抢网速_为什么4G的网速越来越慢?
- aircrack-ng破解wifi密码
热门文章
- 时间戳类型的字符串 {Timestamp@15601} “2021-07-14 18:56:53.0“ 变成带T的Object类型 2021-07-14T10:56:53.000+0000 处理
- 【JVM调优工具篇】使用MAT工具分析dump文件(查看GC Roots)
- springboot+mybatis实现数据分页(三种方式)
- XCTF WEB cookie
- Vitaly and Night
- kuka机器人外部轴异步_(技术)机器人维保10个常见问题解答
- 学习心得体会、备忘录整理
- Fiddler抓包使用教程-模拟低速网络环境
- RxJava 和 RxAndroid 五(线程调度)
- Android-Universal-Image-Loader 框架使用