第二篇、JavaScript常用的API
下面是我整理的一些JavaScript常用的API清单。
目录
元素查找
class操作
节点操作
属性操作
内容操作
css操作
位置大小
事件
DOM加载完毕
绑定上下文
去除空格
Ajax
JSON处理
节点遍历
元素查找
// 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 class el.className += ' ' + className; // has class function hasClass(el,className){ return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.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(' '); } // remove class function remove(el,className){ el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' '); } // ie 10 el.classList.add(className); // add class el.classList.remove(className); // remove class el.classList.contains(className); // has class el.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; }) // 下一个兄弟节点 // ie8 function nextElementSibling(el) { do { el = el.nextSibling; } while ( el && el.nodeType !== 1 ); return el; } nextElementSibling(el); // ie9+ el.nextElementSibling; // 上一个兄弟节点 // ie8 function previousElementSibling(el) { do { el = el.previousSibling; } while ( el && el.nodeType !== 1 ); return el; } previousElementSibling(el); // ie9+ el.previousElementSibling; // Children // ie8 var children = []; for (var i = el.children.length; i--;) { // Skip comment nodes on IE8 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 // 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"){ // ie8 if (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(事件在捕获阶段执行) // 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 { // ie8 el.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 { // ie8 document.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?fname=Bill&lname=Gates', true); // false(同步) request.send(); // ie8 request.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() { // 连接错误 }; // POST var 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 { // ie8 for (var i = 0; i < nodeList.length; i++){ callback(nodeList[i], i); } } } forEach(document.querySelectorAll(selector),function(el, i){ })
第二篇、JavaScript常用的API的更多相关文章
- JavaScript常用的api
打印日志 console.log 类型判断 第一种方式var type = Object.prototype.toString.call(list);console.log(type);第二种方式ty ...
- 第二篇 Mysql常用操作记录(转载)
我们在创建网站的时候,一般需要用到数据库.考虑到安全性,建议使用非root用户.常用命令如下: 1.新建用户 //登录MYSQL@>mysql -u root -p@>密码//创建用户my ...
- 第二篇 HTML 常用元素及属性值
常用元素及属性值 先和同学了解下,一部分常用的元素,区别以及属性,常用在哪里. 标签是由左右尖括号抱起来的,由开始标签开始,再由结束标签结束,里面内容则是元素,比如:<div>< ...
- SlidingMenu第二篇 --- SlidingMenu常用属性介绍
/** * 设置滑动的屏幕范围 * 1. TOUCHMODE_MARGIN 设置为全屏边缘可滑动 * 2. TOUCHMODE_FULLSCREEN 设置为全屏区域都可以滑动 * 3. TOUCHMO ...
- 第二篇 javascript一维数组和二维数组及方法
一.数组 什么是数组 程序=数据+算法 数组就是一种很常见的保存批量数据的数据结构 一.定义数组 var arr1=[]; //定义了一个不包含元素的数组 ,,]; //定义了一个包含三个元素的数组 ...
- JavaScript常用API合集汇总(一)
今天这篇文章跟大家分享一些JavaScript常用的API代码,有DOM操作.CSS操作.对象(Object对象.Array对象.Number对象.String对象.Math对象.JSON对象和Con ...
- 深入理解javascript对象系列第二篇——属性操作
× 目录 [1]查询 [2]设置 [3]删除[4]继承 前面的话 对于对象来说,属性操作是绕不开的话题.类似于“增删改查”的基本操作,属性操作分为属性查询.属性设置.属性删除,还包括属性继承.本文是对 ...
- 【HANA系列】【第二篇】SAP HANA XS使用JavaScript编程详解
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列][第二篇]SAP HANA XS ...
- 《javascript权威指南》读书笔记——第二篇
<javascript权威指南>读书笔记——第二篇 金刚 javascript js javascript权威指南 今天是今年的196天,分享今天的读书笔记. 第2章 词法结构 2.1 字 ...
随机推荐
- ssm框架查询数据并实现分页功能示例
/** * DataGrid对象 * */ @SuppressWarnings("rawtypes") public class DataGrid { private int to ...
- 什么是比特币(bitcoin)
一.什么是比特币? 比特币是一种由开源的P2P软件产生的电子货币,是一种网络虚拟货币.比特币使用遍布整个P2P网络节点的分布式数据库来记录货币的交易,并使用密码学的设计来确保货币流通各个环节安全性.比 ...
- 嗯,记录一些eclipse的快捷键
alt+/:自动补全 ctrl+/:注释 // 再按一下取消注释 ctrl+shift+\:区块注释 /* */ ctrl+shift+\:取消区块注释 ctrl+shift+f:格式化代码 ctrl ...
- Codeforces gym 100685 A. Ariel 暴力
A. ArielTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100685/problem/A Desc ...
- TC SRM 665 DIV2 A LuckyXor 暴力
LuckyXorTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 TC Description A lucky number is a positive int ...
- JS调用Delphi编写的OCX控件
原文:http://www.mamicode.com/info-detail-471283.html 一.使用Delphi XE2编写OCX控件 生成OCX工程: 1.File-New-Other,在 ...
- 获取设备上全部系统app信息
在获取android设备的全部程序信息一文中介绍了获取手机上全部app信息的方法,以下介绍过滤掉系统app的方法: MainActivity: package com.home.getsysapp; ...
- Python Generators(生成器)--yield
参考:http://blog.csdn.net/scelong/article/details/6969276 Python生成器 什么是python生成器,意思是带有一个yield语句的函数,既然它 ...
- syntax error: missing ';' before identifier 'IWebBrowser'
遇到这个错误. google的结果是 去掉 WIN32_LEAN_AND_MEAN 宏定义 然而由于项目中使用了很多第三方库, 如果去掉这个宏, 会导致其他项目编译错了. 关于这个宏有什么用, 可以百 ...
- Number Game poj1143
Description Christine and Matt are playing an exciting game they just invented: the Number Game. The ...