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();