(转)You might not need jQuery
2024-04-02 10:27:47
You might not need jQuery
You certainly can support IE 9 and below without jQuery, but we don't. Please stop messing with us.
jQuery and its cousins are great, and by all means use them if it makes it easier to develop your application.
If you're developing a library on the other hand, please take a moment to consider if you actually need jQuery as a dependency. Maybe you can include a few lines of utility code, and forgo the requirement. If you're only targeting more modern browsers, you might not need anything more than what the browser ships with.
At the very least, make sure you know what jQuery is doing for you, and what it's not. Some developers believe that jQuery is protecting us from a great demon of browser incompatibility when, in truth, post-IE8, browsers are pretty easy to deal with on their own.
What's the oldest version of IE you need to support?
8
9
10
Your search didn't match any comparisons.
AJAX
Post
jQuery
$.ajax({
type: 'POST',
url: '/my/url',
data: data
});
IE8+
var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.send(data);
JSON
jQuery
$.getJSON('/my/url', function(data) {
});
IE8+
request = new XMLHttpRequest;
request.open('GET', '/my/url', true);
request.onreadystatechange = function() {
if (this.readyState === 4){
if (this.status >= 200 && this.status < 400){
// Success!
data = JSON.parse(this.responseText);
} else {
// Error :(
}
}
request.send();
request = null;
IE9+
request = new XMLHttpRequest;
request.open('GET', '/my/url', true);
request.onload = function() {
if (request.status >= 200 && request.status < 400){
// Success!
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+
request = new XMLHttpRequest
request.open('GET', '/my/url', true)
request.onload = function() {
if (this.status >= 200 && this.status < 400){
// Success!
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()
Request
jQuery
$.ajax({
type: 'GET',
url: '/my/url',
success: function(resp) {
},
error: function() {
}
});
IE8+
request = new XMLHttpRequest;
request.open('GET', '/my/url', true);
request.onreadystatechange = function() {
if (this.readyState === 4){
if (this.status >= 200 && this.status < 400){
// Success!
resp = this.responseText;
} else {
// Error :(
}
}
}
request.send();
request = null;
IE9+
request = new XMLHttpRequest
request.open('GET', '/my/url', true)
request.onload = function() {
if (request.status >= 200 && request.status < 400){
// Success!
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+
request = new XMLHttpRequest
request.open('GET', '/my/url', true)
request.onload = function() {
if (this.status >= 200 && this.status < 400){
// Success!
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()
Effects
Fade In
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;
}
Elements
Add Class
jQuery
$(el).addClass(className);
IE8+
if (el.classList)
el.classList.add(className);
else
el.className += ' ' + className;
IE10+
el.classList.add(className);
Children
jQuery
$(el).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
Each
jQuery
$(selector).each(function(i, el){
});
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){
});
IE9+
var elements = document.querySelectorAll(selector);
Array.prototype.forEach.call(elements, function(el, i){
});
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);
Finding Elements
jQuery
$('.my #awesome selector');
IE8+
document.querySelectorAll('.my #awesome selector');
Get Style
jQuery
$(el).css(ruleName);
IE8+
// Varies based on the properties being retrieved, some can be retrieved from el.currentStyle
// https://github.com/jonathantneal/Polyfills-for-IE8/blob/master/getComputedStyle.js
IE9+
getComputedStyle(el)[ruleName]
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);
Matches Selector
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)(selector);
};
matches(el, '.my-class');
Next
jQuery
$(el).next();
IE8+
// nextSibling can include text nodes
function nextElementSibling(el) {
do { el = el.nextSibling; } while ( el && el.nodeType !== 1 );
return el;
}
el.nextElementSibling || nextElementSibling(el);
IE9+
el.nextElementSibling
Outer Height
jQuery
$(el).outerHeight()IE8+
function outerHeight(el, includeMargin){
var height = el.offsetHeight;
if(includeMargin){
var style = el.currentStyle || getComputedStyle(el);
height += parseInt(style.marginTop) + parseInt(style.marginBottom);
}
return height;
}
outerHeight(el, true);
IE9+
function outerHeight(el, includeMargin){
var height = el.offsetHeight;
if(includeMargin){
var style = getComputedStyle(el);
height += parseInt(style.marginTop) + parseInt(style.marginBottom);
}
return height;
}
outerHeight(el, true);
Outer Width
jQuery
$(el).outerWidth()IE8+
function outerWidth(el, includeMargin){
var height = el.offsetWidth;
if(includeMargin){
var style = el.currentStyle || getComputedStyle(el);
height += parseInt(style.marginLeft) + parseInt(style.marginRight);
}
return height;
}
outerWidth(el, true);
IE9+
function outerWidth(el, includeMargin){
var height = el.offsetWidth;
if(includeMargin){
var style = getComputedStyle(el);
height += parseInt(style.marginLeft) + parseInt(style.marginRight);
}
return height;
}
outerWidth(el, true);
Prev
jQuery
$(el).prev();
IE8+
// prevSibling can include text nodes
function prevElementSibling(el) {
do { el = el.prevSibling; } while ( el && el.nodeType !== 1 );
return el;
}
el.prevElementSibling || prevElementSibling(el);
IE9+
el.prevElementSibling
Remove Class
jQuery
$(el).removeClass(className);
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);
Set Style
jQuery
$(el).css('border-width', '20px');
IE8+
// Use a class if possible
el.style.borderWidth = '20px';
Setting 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)
Events
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, handler);
}
}
addEventListener(el, eventName, handler);
IE9+
el.addEventListener(eventName, eventHandler);
Ready
jQuery
$(document).ready(function(){
});
IE8+
function ready(fn) {
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', fn);
} else {
document.attachEvent('onreadystatechange', function() {
if (document.readyState === 'interactive')
fn();
});
}
}
IE9+
document.addEventListener('DOMContentLoaded', function(){
});
Trigger Custom
Alternatives:
jQuery
$(el).trigger('my-event', {some: 'data'});
IE8+
// Custom events are not natively supported, so you have to hijack a random
// event.
//
// Just use jQuery.
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.createEvent
event = document.createEvent('HTMLEvents');
event.initEvent('change', true, false);
el.dispatchEvent(event);
Utils
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){
});
Deep Extend
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);
Extend
Alternatives:
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){
})
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){
})
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)
Made by @adamfschwartz and @zackbloom at HubSpot.
最新文章
- TCP/IP协议三次握手与四次握手流程解析
- Android开发-自动更新
- 浅谈 SOLID 原则的具体使用
- 用Intent实现activity的跳转
- BizTalk开发系列(十九) BizTalk命名规范
- linux 鼠标中键粘帖功能？！！
- Redis源码研究--跳表
- JSF+EJB+JPA总体思路
- iptables进行端口重定向
- Linux下网络流量实时监控工具大全
- 大数据基础篇(一)：联机分析处理(OLAP) 与 联机事务处理(OLTP)
- Scrapy爬取Ajax（异步加载）网页实例——简书付费连载
- 开源库Magicodes.Storage正式发布
- CentOS 7 minimal网络配置
- Windows和linux 文件互传
- 团队作业第5周 - 测试与发布（Alpha版本）- 天冷记得穿秋裤队
- J4架构应用过程中出现的问题与解决摘录
- zabbix监控日志文件
- 【BZOJ2463】谁能赢呢？（博弈论）
- linux上传下载文件rz，sz