jQuery对于前端开发者来说是非常有用的一个javascript库,它能够屏蔽各种浏览器之间的差异,减少开发者代码的书写,大大的提供开发的效率。
但是有的时候你可能在开发的时候只需要用到极少量的jQuery代码,那么你就要考虑一下你是否需要引入jQuery库作为依赖。
在下面的介绍中,我们列出了一些jQuery函数及其对应的纯javascript函数的实现方法,并列出了可以实现的IE版本,如果你只需要以下的某些功能,不妨以纯js代码来实现。
AJAX
JSON
jQuery
$.getJSON('/my/url', function(data) { });
javascript(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 });
javascript(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() { } });
javascript(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();
动画效果
Fade In
jQuery
$(el).fadeIn();
javascript(IE10+)
el.classList.add('show'); el.classList.remove('hide');
.show { transition: opacity 400ms; } .hide { opacity: 0; }
Hide
jQuery
$(el).hide();
javascript(IE8+)
el.style.display = 'none';
Show
jQuery
$(el).show();
javascript(IE8+)
el.style.display = '';
DOM元素
Add Class
jQuery
$(el).addClass(className);
javascript(IE10+)
el.classList.add(className);
After
jQuery
$(el).after(htmlString);
javascript(IE8+)
el.insertAdjacentHTML('afterend', htmlString);
Append
jQuery
$(parent).append(el);
javascript(IE8+)
parent.appendChild(el);
Before
jQuery
$(el).before(htmlString);
javascript(IE8+)
el.insertAdjacentHTML('beforebegin', htmlString);
Children
jQuery
$(el).children();
javascript(IE9+)
el.children
Clone
jQuery
$(el).clone();
javascript(IE8+)
el.cloneNode(true);
Contains
jQuery
$.contains(el, child);
javascript(IE8+)
el !== child && el.contains(child);
Contains Selector
jQuery
$(el).find(selector).length;
javascript(IE8+)
el.querySelector(selector) !== null
Each
jQuery
$(selector).each(function(i, el){ });
javascript(IE9+)
var elements = document.querySelectorAll(selector); Array.prototype.forEach.call(elements, function(el, i){ });
Empty
jQuery
$(el).empty();
javascript(IE9+)
el.innerHTML = '';
过滤
jQuery
$(selector).filter(filterFn);
javascript(IE9+)
Array.prototype.filter.call(document.querySelectorAll(selector), filterFn);
查找子元素
jQuery
$(el).find(selector);
javascript(IE9+)
el.querySelectorAll(selector);
获取属性
jQuery
$(el).attr('tabindex');
javascript(IE9+)
el.getAttribute('tabindex');
获取 Html元素
jQuery
$(el).html();
javascript(IE9+)
el.innerHTML
Get Outer Html
jQuery
$('<div>').append($(el).clone()).html();
javascript(IE9+)
el.outerHTML
获取样式
jQuery
$(el).css(ruleName);
javascript(IE9+)
getComputedStyle(el)[ruleName];
获取文本
jQuery
$(el).text();
javascript(IE9+)
el.textContent
判断Class是否存在
jQuery
$(el).hasClass(className);
javascript(IE10+)
el.classList.contains(className);
匹配
jQuery
$(el).is($(otherEl));
javascript(IE10+)
el === otherEl
匹配选择器
jQuery
$(el).is('.my-class');
javascript(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();
javascript(IE9+)
el.nextElementSibling
Offset
jQuery
$(el).offset();
javascript(IE9+)
var rect = el.getBoundingClientRect() { top: rect.top + document.body.scrollTop, left: rect.left + document.body.scrollLeft }
Offset Parent
jQuery
$(el).offsetParent();
javascript(IE8+)
el.offsetParent || el
外部高度
jQuery
$(el).outerHeight();
javascript(IE8+)
el.offsetHeight
带Margin的外部高度
jQuery
$(el).outerHeight(true);
javascript(IE9+)
function outerHeight(el) { var height = el.offsetHeight; var style = getComputedStyle(el); height += parseInt(style.marginTop) + parseInt(style.marginBottom); return height; } outerHeight(el);
带Margin的外部宽度
jQuery
$(el).outerWidth(true);
javascript(IE9+)
function outerWidth(el) { var width = el.offsetWidth; var style = getComputedStyle(el); width += parseInt(style.marginLeft) + parseInt(style.marginRight); return width; } outerWidth(el);
外部宽度
jQuery
$(el).outerWidth();
javascript(IE8+)
el.offsetWidth
父元素
jQuery
$(el).parent();
javascript(IE8+)
el.parentNode
位置
jQuery
$(el).position();
javascript(IE8+)
{left: el.offsetLeft, top: el.offsetTop}
相对于Viewport的位置
jQuery
var offset = el.offset(); { top: offset.top - document.body.scrollTop, left: offset.left - document.body.scrollLeft }
javascript(IE8+)
el.getBoundingClientRect()
Prepend
jQuery
$(parent).prepend(el);
javascript(IE8+)
parent.insertBefore(el, parent.firstChild);
前一个兄弟节点
jQuery
$(el).prev();
javascript(IE9+)
el.previousElementSibling
移除节点
jQuery
$(el).remove();
javascript(IE8+)
el.parentNode.removeChild(el);
移除class
jQuery
$(el).removeClass(className);
javascript(IE10+)
el.classList.remove(className);
替换
jQuery
$(el).replaceWith(string);
javascript(IE8+)
el.outerHTML = string;
设置属性
jQuery
$(el).attr('tabindex', 3);
javascript(IE8+)
el.setAttribute('tabindex', 3);
设置HTML
jQuery
$(el).html(string);
javascript(IE8+)
el.innerHTML = string;
设置样式
jQuery
$(el).css('border-width', '20px');
javascript(IE8+)
// Use a class if possible el.style.borderWidth = '20px';
设置文本
jQuery
$(el).text(string);
javascript(IE9+)
el.textContent = string;
兄弟节点
jQuery
$(el).siblings();
javascript(IE9+)
Array.prototype.filter.call(el.parentNode.children, function(child){ return child !== el; });
切换class
jQuery
$(el).toggleClass(className);
javascript(IE10+)
el.classList.toggle(className);
事件
Off
jQuery
$(el).off(eventName, eventHandler);
javascript(IE9+)
el.removeEventListener(eventName, eventHandler);
On
jQuery
$(el).on(eventName, eventHandler);
javascript(IE9+)
el.addEventListener(eventName, eventHandler);
Ready
jQuery
$(document).ready(function(){ });
javascript(IE9+)
function ready(fn) { if (document.readyState != 'loading'){ fn(); } else { document.addEventListener('DOMContentLoaded', fn); } }
自定义trigger函数
jQuery
$(el).trigger('my-event', {some: 'data'});
javascript(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函数
jQuery
$(el).trigger('change');
javascript(IE9+)
// 完整的事件类型请查看: https://developer.mozilla.org/en-US/docs/Web/API/document.createEvent var event = document.createEvent('HTMLEvents'); event.initEvent('change', true, false); el.dispatchEvent(event);
工具类
Array Each
jQuery
$.each(array, function(i, item){ });
javascript(IE9+)
array.forEach(function(item, i){ });
Deep Extend
jQuery
$.extend(true, {}, objA, objB);
javascript(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);
Bind
jQuery
$.proxy(fn, context);
javascript(IE9+)
fn.bind(context);
Extend
jQuery
$.extend({}, objA, objB);
javascript(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);
javascript(IE9+)
array.indexOf(item);
Is Array
jQuery
$.isArray(arr);
javascript(IE9+)
Array.isArray(arr);
Map
jQuery
$.map(array, function(value, index){ });
javascript(IE9+)
array.map(function(value, index){ });
Now
jQuery
$.now();
javascript(IE9+)
Date.now();
Parse Html
jQuery
$.parseHTML(htmlString);
javascript(IE9+)
var parseHTML = function(str) { var tmp = document.implementation.createHTMLDocument(); tmp.body.innerHTML = str; return tmp.body.children; }; parseHTML(htmlString);
Parse Json
jQuery
$.parseJSON(string);
javascript(IE8+)
JSON.parse(string);
Trim
jQuery
$.trim(string);
javascript(IE9+)
string.trim();
Type
jQuery
$.type(obj);
javascript(IE9+)
Object.prototype.toString.call(obj).replace(/^\[object (.+)\]$/, "$1").toLowerCase();