元素操作
Add Class
//JQUERY$(el).addClass(className);//js//谷歌浏览器，火狐浏览器，IE8+if (el.classList) el.classList.add(className);else el.className += ' ' + className;//谷歌浏览器，火狐浏览器，IE10+el.classList.add(className);
After
//JQUERY$(el).after(htmlString);//js 谷歌浏览器，火狐浏览器，IE8+el.insertAdjacentHTML('afterend', htmlString); Append
//JQUERY$(parent).append(el);//js谷歌浏览器，火狐浏览器，IE8+parent.appendChild(el);
Before
//JQUERY$(el).before(htmlString);//js谷歌浏览器，火狐浏览器，IE8+el.insertAdjacentHTML('beforebegin', htmlString); Children
//JQUERY$(el).children();//js//谷歌浏览器，火狐浏览器，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 Clone
//JQUERY$(el).clone();//谷歌浏览器，火狐浏览器，IE8+el.cloneNode(true);
Contains
//JQUERY$.contains(el, child);//谷歌浏览器，火狐浏览器，IE8+el !== child && el.contains(child);
Contains Selector
//JQUERY$(el).find(selector).length;//谷歌浏览器，火狐浏览器，IE8+el.querySelector(selector) !== null
Each
//JQUERY$(selector).each(function(i, el){});//js谷歌浏览器，火狐浏览器，IE8+function forEachElement(selector, fn) { var elements = document.querySelectorAll(selector); for (var i = 0; i < elements.length; i++) fn(elements[i], i);}forEachElement(selector, function(el, i){});//js谷歌浏览器，火狐浏览器，IE9+var elements = document.querySelectorAll(selector);Array.prototype.forEach.call(elements, function(el, i){}); Empty
//JQUERY $(el).empty(); //js谷歌浏览器，火狐浏览器，IE8+ while(el.firstChild) el.removeChild(el.firstChild); //js谷歌浏览器，火狐浏览器，IE9+ el.innerHTML = '';
过滤filter
//JQUERY$(selector).filter(filterFn);//谷歌浏览器，火狐浏览器，IE8+function filter(selector, filterFn) { var elements = document.querySelectorAll(selector); var out = []; for (var i = elements.length; i--;) { if (filterFn(elements[i])) out.unshift(elements[i]); } return out;}filter(selector, filterFn);//谷歌浏览器，火狐浏览器，IE9+Array.prototype.filter.call(document.querySelectorAll(selector), filterFn); 查找子元素
//JQUERY$(el).find(selector);//谷歌浏览器，火狐浏览器，IE8+el.querySelectorAll(selector);
查找、选择器
//JQUERY$('.my #awesome selector');//谷歌浏览器，火狐浏览器，IE8+document.querySelectorAll('.my #awesome selector'); 获取属性值attr
//JQUERY $(el).attr('tabindex'); //谷歌浏览器，火狐浏览器，IE8+ el.getAttribute('tabindex'); 获取Html内容
//JQUERY$(el).html();//jsel.innerHTML
获取CSS样式
//JQUERY$(el).css(ruleName);//谷歌浏览器，火狐浏览器，IE9+getComputedStyle(el)[ruleName];
获取文本内容
//JQUERY$(el).text();//谷歌浏览器，火狐浏览器，IE8+el.textContent || el.innerText//谷歌浏览器，火狐浏览器，IE9+el.textContent
Has Class
//JQUERY$(el).hasClass(className);//谷歌浏览器，火狐浏览器，IE8+if (el.classList) el.classList.contains(className);else new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);//谷歌浏览器，火狐浏览器，IE10+el.classList.contains(className); 元素比较
JQUERY$(el).is($(otherEl));//jsel === otherEl
比较类名
//JQUERY$(el).is('.my-class');//谷歌浏览器，火狐浏览器，IE8+var matches = function(el, selector) { var _matches = (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector); if (_matches) { return _matches.call(el, selector); } else { var nodes = el.parentNode.querySelectorAll(selector); for (var i = nodes.length; i--;) { if (nodes[i] === el) return true; } return false; }};matches(el, '.my-class');//谷歌浏览器，火狐浏览器，IE9+var matches = function(el, selector) { return (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector).call(el, selector);};matches(el, '.my-class'); Next
//JQUERY$(el).next();//谷歌浏览器，火狐浏览器，IE8+// nextSibling can include text nodesfunction nextElementSibling(el) { do { el = el.nextSibling; } while ( el && el.nodeType !== 1 ); return el;}el.nextElementSibling || nextElementSibling(el);//谷歌浏览器，火狐浏览器，IE9+el.nextElementSibling Offset
//JQUERY$(el).offset();//js谷歌浏览器，火狐浏览器，IE8+var rect = el.getBoundingClientRect(){ top: rect.top + document.body.scrollTop, left: rect.left + document.body.scrollLeft} Outer Width
//JQUERY$(el).outerWidth();//jsel.offsetWidth
Parent
//JQUERY$(el).parent();//jsel.parentNode
Position
//JQUERY$(el).position();//js{left: el.offsetLeft, top: el.offsetTop} Prev
//JQUERY$(el).prev();//谷歌浏览器，火狐浏览器，IE8+// prevSibling can include text nodesfunction previousElementSibling(el) { do { el = el.previousSibling; } while ( el && el.nodeType !== 1 ); return el;}el.previousElementSibling || previousElementSibling(el);//谷歌浏览器，火狐浏览器，IE9+el.previousElementSibling Remove
//JQUERY$(el).remove();//js谷歌浏览器，火狐浏览器，IE8+el.parentNode.removeChild(el);
Remove Class
//JQUERY$(el).removeClass(className);//js谷歌浏览器，火狐浏览器，IE8+if (el.classList) el.classList.remove(className);else el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');//谷歌浏览器，火狐浏览器，IE10+el.classList.remove(className); Replace From Html
//JQUERY$(el).replaceWith(string);//谷歌浏览器，火狐浏览器，IE8+el.outerHTML = string;
Set Attributes
//JQUERY$(el).attr('tabindex', 3);//谷歌浏览器，火狐浏览器，IE8+el.setAttribute('tabindex', 3); Set Html
//JQUERY$(el).html(string);//谷歌浏览器，火狐浏览器，IE8+el.innerHTML = string;
Set Style
//JQUERY$(el).css('border-width', '20px');//谷歌浏览器，火狐浏览器，IE8+// Use a class if possibleel.style.borderWidth = '20px'; Set Text
//JQUERY$(el).text(string);//谷歌浏览器，火狐浏览器，IE8+if (el.textContent !== undefined) el.textContent = string;else el.innerText = string;//谷歌浏览器，火狐浏览器，IE9+el.textContent = string;
Siblings
//JQUERY$(el).siblings();//谷歌浏览器，火狐浏览器，IE8+var siblings = Array.prototype.slice.call(el.parentNode.children);for (var i = siblings.length; i--;) { if (siblings[i] === el) { siblings.splice(i, 1); break; }}//谷歌浏览器，火狐浏览器，IE9+Array.prototype.filter.call(el.parentNode.children, function(child){ return child !== el;}); Toggle Class
//JQUERY$(el).toggleClass(className);//谷歌浏览器，火狐浏览器，IE8+if (el.classList) { el.classList.toggle(className);} else { 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(' ');}//谷歌浏览器，火狐浏览器，IE9+if (el.classList) { el.classList.toggle(className);} else { var classes = el.className.split(' '); var existingIndex = classes.indexOf(className); if (existingIndex >= 0) classes.splice(existingIndex, 1); else classes.push(className); el.className = classes.join(' ');}//谷歌浏览器，火狐浏览器，IE10+el.classList.toggle(className); 事件
Off
//JQUERY$(el).off(eventName, eventHandler);//谷歌浏览器，火狐浏览器，IE8+function removeEventListener(el, eventName, handler) { if (el.removeEventListener) el.removeEventListener(eventName, handler); else el.detachEvent('on' + eventName, handler);}removeEventListener(el, eventName, handler);//谷歌浏览器，火狐浏览器，IE9+el.removeEventListener(eventName, eventHandler); On
//JQUERY$(el).on(eventName, eventHandler);//谷歌浏览器，火狐浏览器，IE8+function addEventListener(el, eventName, handler) { if (el.addEventListener) { el.addEventListener(eventName, handler); } else { el.attachEvent('on' + eventName, function(){ handler.call(el); }); }}addEventListener(el, eventName, handler);谷歌浏览器，火狐浏览器，IE9+el.addEventListener(eventName, eventHandler); Ready
//JQUERY$(document).ready(function(){});//谷歌浏览器，火狐浏览器，IE8+function ready(fn) { if (document.readyState != 'loading'){ fn(); } else if (document.addEventListener) { document.addEventListener('DOMContentLoaded', fn); } else { document.attachEvent('onreadystatechange', function() { if (document.readyState != 'loading') fn(); }); }}//谷歌浏览器，火狐浏览器，IE9+function ready(fn) { if (document.readyState != 'loading'){ fn(); } else { document.addEventListener('DOMContentLoaded', fn); } 指定事件触发
//JQUERY$(el).trigger('my-event', {some: 'data'});//js谷歌浏览器，火狐浏览器，IE9+if (window.CustomEvent) { var event = new CustomEvent('my-event', {detail: {some: 'data'}});} else { var event = document.createEvent('CustomEvent'); event.initCustomEvent('my-event', true, true, {some: 'data'});}el.dispatchEvent(event); Trigger Native
//JQUERY$(el).trigger('change');//谷歌浏览器，火狐浏览器，IE8+if (document.createEvent) { var event = document.createEvent('HTMLEvents'); event.initEvent('change', true, false); el.dispatchEvent(event);} else { el.fireEvent('onchange');}//谷歌浏览器，火狐浏览器，IE9+// For a full list of event types: https://developer.mozilla.org/en-US/docs/Web/API/document.createEventvar event = document.createEvent('HTMLEvents');event.initEvent('change', true, false);el.dispatchEvent(event); 技巧
Array Each
//JQUERY$.each(array, function(i, item){});谷歌浏览器，火狐浏览器，IE8+function forEach(array, fn) { for (i = 0; i < array.length; i++) fn(array[i], i);}forEach(array, function(item, i){});//谷歌浏览器，火狐浏览器，IE9+array.forEach(function(item, i){}); 深度扩展
//JQUERY$.extend(true, {}, objA, objB);//谷歌浏览器，火狐浏览器，IE8+var deepExtend = function(out) { out = out || {}; for (var i = 1; i < arguments.length; i++) { var obj = arguments[i]; if (!obj) continue; for (var key in obj) { if (obj.hasOwnProperty(key)) { if (typeof obj[key] === 'object') deepExtend(out[key], obj[key]); else out[key] = obj[key]; } } } return out;};deepExtend({}, objA, objB); proxy
//JQUERY$.proxy(fn, context);//谷歌浏览器，火狐浏览器，IE8+fn.apply(context, arguments);//谷歌浏览器，火狐浏览器，IE9+fn.bind(context);
bind
//jQuery$.extend({}, objA, objB);//谷歌浏览器，火狐浏览器，IE8+var extend = function(out) { out = out || {}; for (var i = 1; i < arguments.length; i++) { if (!arguments[i]) continue; for (var key in arguments[i]) { if (arguments[i].hasOwnProperty(key)) out[key] = arguments[i][key]; } } return out;};extend({}, objA, objB); Index Of
//JQUERY$.inArray(item, array);//谷歌浏览器，火狐浏览器，IE8+function indexOf(array, item) { for (var i = 0; i < array.length; i++) { if (array[i] === item) return i; } return -1;}indexOf(array, item);谷歌浏览器，火狐浏览器，IE9+array.indexOf(item); Is Array
//JQUERY$.isArray(arr);//谷歌浏览器，火狐浏览器，IE8+isArray = Array.isArray || function(arr) { return Object.prototype.toString.call(arr) == '[object Array]';}isArray(arr);//谷歌浏览器，火狐浏览器，IE9+Array.isArray(arr); Map
//JQUERY$.map(array, function(value, index){});//js谷歌浏览器，火狐浏览器，IE8+function map(arr, fn) { var results = []; for (var i = 0; i < arr.length; i++) results.push(fn(arr[i], i)); return results;}map(array, function(value, index){});//谷歌浏览器，火狐浏览器，IE9+array.map(function(value, index){}); Now
//JQUERY$.now();//谷歌浏览器，火狐浏览器，IE8+new Date().getTime();//谷歌浏览器，火狐浏览器，IE9+Date.now();
Parse Html
//JQUERY$.parseHTML(htmlString);谷歌浏览器，火狐浏览器，IE8+var parseHTML = function(str) { var el = document.createElement('div'); el.innerHTML = str; return el.children;};parseHTML(htmlString);谷歌浏览器，火狐浏览器，IE9+var parseHTML = function(str) { var tmp = document.implementation.createHTMLDocument(); tmp.body.innerHTML = str; return tmp.body.children;};parseHTML(htmlString); 解析 Json
//JQUERY$.parseJSON(string);//谷歌浏览器，火狐浏览器，IE8+JSON.parse(string);
Trim
//JQUERY$.trim(string);//谷歌浏览器，火狐浏览器，IE8+string.replace(/^\s+|\s+$/g, '');//谷歌浏览器，火狐浏览器，IE9+string.trim();
Type
//JQUERY$.type(obj);谷歌浏览器，火狐浏览器，IE8+Object.prototype.toString.call(obj) .replace(/^\[object (.+)\]$/, "$1") .toLowerCase();
ajax
新AJAX方法fetch()
基本Fetch用法
让我们先用一个例子来比较一下使用 XMLHttpRequest 和使用 fetch 之间的不同。我们要请求一个URL，获取JSON格式的返回结果。
原来的XMLHttpRequest
一个 XMLHttpRequest 请求需要两个监听器来捕捉 success 和 error 两种情形，而且需要调用 open() 和 send() 方法。
function reqListener() { var data = JSON.parse(this.responseText); console.log(data); }function reqError(err) { console.log('Fetch Error :-S', err); }var oReq = new XMLHttpRequest(); oReq.onload = reqListener; oReq.onerror = reqError; oReq.open('get', './api/some.json', true); oReq.send(); Fetch方法：
我们的 fetch 请求的代码基本上是这样的：
fetch('./api/some.json') .then( function(response) { if (response.status !== 200) { console.log('Looks like there was a problem. Status Code: ' + response.status); return; } // Examine the text in the response response.json().then(function(data) { console.log(data); }); } ) .catch(function(err) { console.log('Fetch Error :-S', err); }); 用fetch执行表单数据提交
在WEB应用中，提交表单是非常常见的操作，用fetch来提交表单数据也是非常简洁。
fetch里提供了 method 和 body 参数选项。
fetch(url, { method: 'post', headers: { "Content-type": "application/x-www-form-urlencoded; charset=UTF-8" }, body: 'foo=bar&lorem=ipsum' }) .then(json) .then(function (data) { console.log('Request succeeded with JSON response', data); }) .catch(function (error) { console.log('Request failed', error); }); 在Fetch请求里发送用户身份凭证信息
如果你想在fetch请求里附带cookies之类的凭证信息，可以将 credentials 参数设置成 “include” 值。
fetch(url, { credentials: 'include' }) JSON
//JQUERY $.getJSON('/my/url', function(data) { });//谷歌浏览器，火狐浏览器，IE8+var request = new XMLHttpRequest();request.open('GET', '/my/url', true);request.onreadystatechange = function() { if (this.readyState === 4) { if (this.status >= 200 && this.status < 400) { // Success! var data = JSON.parse(this.responseText); } else { // Error :( } }};request.send();request = null;//谷歌浏览器，火狐浏览器，IE9+var request = new XMLHttpRequest();request.open('GET', '/my/url', true);request.onload = function() { if (request.status >= 200 && request.status < 400) { // Success! var data = JSON.parse(request.responseText); } else { // We reached our target server, but it returned an error }};request.onerror = function() { // There was a connection error of some sort};request.send();//谷歌浏览器，火狐浏览器，IE10+var request = new XMLHttpRequest();request.open('GET', '/my/url', true);request.onload = function() { if (this.status >= 200 && this.status < 400) { // Success! var data = JSON.parse(this.response); } else { // We reached our target server, but it returned an error }};request.onerror = function() { // There was a connection error of some sort};request.send(); Post
//JQUERY$.ajax({ type: 'POST', url: '/my/url', data: data});//谷歌浏览器，火狐浏览器，IE8+var request = new XMLHttpRequest();request.open('POST', '/my/url', true);request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');request.send(data); Request
//JQUERY$.ajax({ type: 'GET', url: '/my/url', success: function(resp) { }, error: function() { }});//谷歌浏览器，火狐浏览器，IE8+var request = new XMLHttpRequest();request.open('GET', '/my/url', true);request.onreadystatechange = function() { if (this.readyState === 4) { if (this.status >= 200 && this.status < 400) { // Success! var resp = this.responseText; } else { // Error :( } }};request.send();request = null;//谷歌浏览器，火狐浏览器，IE9+var request = new XMLHttpRequest();request.open('GET', '/my/url', true);request.onload = function() { if (request.status >= 200 && request.status < 400) { // Success! var resp = request.responseText; } else { // We reached our target server, but it returned an error }};request.onerror = function() { // There was a connection error of some sort};request.send();//谷歌浏览器，火狐浏览器，IE10+var request = new XMLHttpRequest();request.open('GET', '/my/url', true);request.onload = function() { if (this.status >= 200 && this.status < 400) { // Success! var resp = this.response; } else { // We reached our target server, but it returned an error }};request.onerror = function() { // There was a connection error of some sort};request.send(); 特效
淡入淡出
//JQUERY$(el).fadeIn();//谷歌浏览器，火狐浏览器，IE8+function fadeIn(el) { var opacity = 0; el.style.opacity = 0; el.style.filter = ''; var last = +new Date(); var tick = function() { opacity += (new Date() - last) / 400; el.style.opacity = opacity; el.style.filter = 'alpha(opacity=' + (100 * opacity)|0 + ')'; last = +new Date(); if (opacity < 1) { (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16); } }; tick();}fadeIn(el);//谷歌浏览器，火狐浏览器，IE9+function fadeIn(el) { el.style.opacity = 0; var last = +new Date(); var tick = function() { el.style.opacity = +el.style.opacity + (new Date() - last) / 400; last = +new Date(); if (+el.style.opacity < 1) { (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16) } }; tick();}fadeIn(el);//谷歌浏览器，火狐浏览器，IE10+el.classList.add('show');el.classList.remove('hide');.show { transition: opacity 400ms;}.hide { opacity: 0;} Hide
//JQUERY$(el).hide();//谷歌浏览器，火狐浏览器，IE8+el.style.display = 'none';
Show
//JQUERY$(el).show();//谷歌浏览器，火狐浏览器，IE8+el.style.display = '';