YeaseonZhang

YOU MIGHT NOT NEED JQUERY

在早期,JQuery在浏览器的兼容上为我们解决了痛点,但是随着浏览器/JavaScript的革新,我们对于浏览器的兼容要求越来越宽松,现在我们基本上兼容IE8/IE9就ok了。

很多Jquery实现的功能,我们使用原生js实现起来也不是很麻烦。

本文转载YOU MIGHT NOT NEED JQUERY,主要为了方便自己查阅

Ajax

JSON

JQuery

1
2
3
$.getJSON('/my/url', function (data) {

})

IE9+

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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 {
// error
}
};

request.onerror = function () {
// There was a connection error of some sort
};

request.send()

Post

JQuery

1
2
3
4
5
$.ajax({
type: 'POST',
url: '/my/url',
data: data
});

IE8+

1
2
3
4
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

JQuest

1
2
3
4
5
6
7
8
9
10
$.ajax({
type: 'GET',
url: '/my/url',
success: function (res) {

},
error: function () {

}
})

IE9+

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var request = new XMLHttpReQuest();
request.open('GET', '/my/url', true);

request.onload = function () {
if (request.status >= 200 && request.status < 400 ) {
// success
var res = resquest.responseText;
} else {
// error
}
};

request.onerror = function () {

};

request.send();

Effects

Fade In

JQuery

1
$(el).fadeIn();

IE9+

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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);

Hide

JQuery

1
$(el).hide();

IE8+

1
el.style.display = 'none';

Show

JQuery

1
$(el).show();

IE8+

1
el.style.display = '';

Elements

Add Class

JQuery

1
$(el).addClass(className);

IE8+

1
2
3
4
5
if (el.classList) {
el.classList.add(className);
} else {
el.className += ' ' + className;
}

After

JQuery

1
$(el).after(htmlString);

IE8+

1
el.insertAdjacentHTML('afterend', htmlString);

Append

JQuery

1
$(parent).append(el);

IE8+

1
parent.appendChild(el);

Before

JQuery

1
$(el).before(htmlString);

IE8+

1
el.insertAdjacentHTML('beforebegin', htmlString);

Children

JQuery

1
$(el).children();

IE9+

1
el.children;

Clone

JQuery

1
$(el).clone();

IE8+

1
el.cloneNode(true);

Contains

JQuery

1
$.contains(el, child);

IE8+

1
el !== child && el.contains(child);

Contains Selector

JQuery

1
$(el).find(selector).length;

IE8+

1
el.querySelector(selector) !== null;

Each

JQuery

1
2
3
$(selector).each(function (i, el) {

});

IE9+

1
2
3
4
var elements = document.querySelectorAll(selector);
Array.prototype.forEach.call(elements, function(el, i) {

});

Empty

JQuery

1
$(el).empty();

IE9+

1
el.innerHTML = '';

Filter

JQuery

1
$(selector).filter(filterFn);

IE9+

1
Array.prototype.filter.call(document.querySeletorAll(selector), filterFn);

Find Children

JQuery

1
$(el).find(selector);

IE8+

1
el.querySelectorAll(selector);

Find Elements

JQuery

1
$('.my #awesome selextor');

IE8+

1
document.querySelectorAll('.my #awesome selector');

Get Attributes

JQuery

1
$(el).attr('tabindex');

IE8+

1
el.getAttribute('tabindex');

Get Html

JQuery

1
$(el).html();

IE8+

1
el.innerHTML;

Get Outer Html

JQuery

1
$('<div>').append($(el).clone()).html();

IE8+

1
el.outerHTML;

Get Style

JQuery

1
$(el).css(ruleName);

IE9+

1
getComputedStyle(el)[ruleName];

Get Text

JQuery

1
$(el).text();

IE9+

1
el.textContent;

Has Class

JQuery

1
$(el).hasClass(className);

IE8+

1
2
3
4
5
if (el.classList) {
el.classList.contains(className);
} else {
new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
}

Matches

JQuery

1
$(el).is($(otherEl));

IE8+

1
el === otherEl

Matches Selector

JQuery

1
$(el).is('.my-class');

IE9+

1
2
3
4
5
var matches = function (el, selector) {
return (el.matches || el.matchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector).call(el, selector);
};

matches(el, '.my-class');

Next

JQuery

1
$(el).next();

IE9+

1
el.nextElementSibling

Offset

JQuery

1
$(el).offset();

IE8+

1
2
3
4
5
6
var rect = el.getBoundingClientRect();

{
top: rect.top + document.body.scrollTop,
left: rect.left + document.body.scrollLeft
}

Offset Parent

JQuery

1
$(el).offsetParent();

IE8+

1
el.offsetParent || el

Outer Height

JQuery

1
$(el).outerHeight();

IE8+

1
el.offsetHeight;

Outer Height With Margin

JQuery

1
$(el).outerHeight(true);

IE9+

1
2
3
4
5
6
7
8
9
function outerHeight(el) {
var height = el.offsetHeight;
var style = getComputedStyle(el);

height += parseInt(style.marginTop) + parseInt(style.marginBottom);
return height;
}

outerHeight(el);

Parent

JQuery

1
$(el).parent();

IE8+

1
el.parentNode;

Position

JQuery

1
$(el).position();

IE8+

1
2
3
4
{
left: el.offsetLeft,
top: el.offsetTop
}

Position Relative To Viewport

JQuery

1
2
3
4
5
var offset = el.offset();
{
top: offset.top - document.body.scrollTop,
left: offset.left - document.body.scrollLeft
}

IE8+

1
el.getBoundingClientRect();

Prepend

JQuery

1
$(parent).prepend(el);

IE8+

1
parent.insertBefore(el, parent.firstChild);

Prev

JQuery

1
$(el).prev();

IE9+

1
el.previousElementSibling

Remove

JQuery

1
$(el).remove();

IE8+

1
el.parentNode.removeChild(el);

Remove Class

JQuery

1
$(el).removeClass(className);

IE8+

1
2
3
4
5
if (el.classList) {
el.classList.remove(className);
} else {
el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi', ' ');
}

Replace From Html

JQuery

1
$(el).replaceWith(string);

IE8+

1
el.outerHTML = string;

Set Attributes

JQuery

1
$(el).attr('tabindex', 3);

IE8+

1
el.setAttribute('tabindex', 3);

Set Html

JQuery

1
$(el).html(string);

IE8+

1
el.innerHTML = string;

Set Style

JQuery

1
$(el).css('border-width', '20px');

IE8+

1
el.style.borderWidth = '20px';

Set Text

JQuery

1
$(el).text(string);

IE9+

1
el.textContent = string;

Siblings

JQuery

1
$(el).siblings();

IE9+

1
2
3
Array.prototype.filter.call(el.parentNode.children, function() {
return child !== el;
});

Toggle Class

1
$(el).toggleClass(className);

IE9+

1
2
3
4
5
6
7
8
9
10
11
12
13
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(' ');
}

Events

Off

JQuery

1
$(el).off(eventName, eventHandler);

IE9+

1
el.remoreEventListener(eventName, eventHandler);

On

JQuery

1
$(el).on(eventName, eventHandler);

IE9+

1
el.addEventListener(eventName, eventHandler);

Ready

JQuery

1
2
3
$(document).ready(function () {

})

IE9+

1
2
3
4
5
6
7
function ready(fn) {
if (document.attachEvent ? document.readyState === 'complete' : document.readyState !== 'loading') {
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}

Tigger Custom

JQuery

1
$(el).trigger('my-event', {some: 'data'});

IE9+

1
2
3
4
5
6
7
8
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.dispathchEvent(event);

Trigger Native

JQuery

1
$(el).trigger('change');

IE9+

1
2
3
var event = document.createEvent('HTMLEvents');
event.initEvent('change', true, false);
el.dispatchEvent(event);

UTILS

Bind

JQuery

1
$.proxy(fn, context);

IE9+

1
fn.bind(context);

Array Each

JQuery

1
2
3
$.each(array, function (i, item) {

});

IE9+

1
2
3
array.forEach(function(item, i) {

});

Deep Extend

JQuery

1
$.extend(true, {}, objA, objB);

IE8+

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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') {
out[key] = deepExtend(out[key], obj[key]);
} else {
out[key] = obj[key];
}
}
}
}

return out;
}

Extend

JQuery

1
$.extend({}, objA, objB);

IE8+

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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

1
$.inArray(item, array);

IE9+

1
array.indexOf(item);

Is Array

JQuery

1
$.isArray(arr);

IE9+

1
Array.isArray(arr);

Map

JQuery

1
2
3
$.map(array, function (value, index){

});

IE9+

1
2
3
array.map(function (value, index) {

});

Now

JQuery

1
$.now();

IE9+

1
Date.now();

Parse Html

JQuery

1
$.parseHTML(htmlString);

IE9+

1
2
3
4
5
6
7
var parseHTML = function (str) {
var tmp = document.implementation.createHTMLDocument();
tmp.body.innerHTML = str;
return tmp.body.children;
};

parseHTML(htmlString);

Parse JSON

JQuery

1
$.parseJSON(string);

IE8+

1
JSON.parse(string);

Trim

JQuery

1
$.trim(string);

IE9+

1
string.trim();

Type

JQuery

1
$.type(obj);

IE8+

1
Object.prototype.toString.call(obj).replace(/^\[object (.+)\]$/, '$1').toLowerCase();