2018年01月聚合文章--YOU MIGHT NOT NEED JQUERY

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

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

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

Ajax

JSON

JQuery

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

})

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 {
        // 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

JQuest

$.ajax({
    type: 'GET',
    url: '/my/url',
    success: function (res){

    },
    error: function (){

    }
})

IE9+

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

$(el).fadeIn();

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

Hide

JQuery

$(el).hide();

IE8+

el.style.display = 'none';

Show

JQuery

$(el).show();

IE8+

el.style.display = '';

Elements

Add Class

JQuery

$(el).addClass(className)；

IE8+

if (el.classList) {
    el.classList.add(className);
} else {
    el.className += ' ' + className;
}

After

JQuery

$(el).after(htmlString);

IE8+

el.insertAdjacentHTML('afterend', htmlString);

Append

JQuery

$(parent).append(el);

IE8+

parent.appendChild(el);

Before

JQuery

$(el).before(htmlString);

IE8+

el.insertAdjacentHTML('beforebegin', htmlString);

Children

JQuery

$(el).children();

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){

});

IE9+

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

});

Empty

JQuery

$(el).empty();

IE9+

el.innerHTML = '';

Filter

JQuery

$(selector).filter(filterFn);

IE9+

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

Find Children

JQuery

$(el).find(selector);

IE8+

el.querySelectorAll(selector);

Find Elements

JQuery

$('.my #awesome selextor');

IE8+

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

Get Attributes

JQuery

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

IE8+

el.getAttribute('tabindex');

Get Html

JQuery

$(el).html();

IE8+

el.innerHTML;

Get Outer Html

JQuery

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

IE8+

el.outerHTML;

Get Style

JQuery

$(el).css(ruleName);

IE9+

getComputedStyle(el)[ruleName];

Get Text

JQuery

$(el).text();

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

Matches

JQuery

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

IE8+

el === otherEl

Matches Selector

JQuery

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

IE9+

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

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

JQuery

$(el).next();

IE9+

el.nextElementSibling

Offset

JQuery

$(el).offset();

IE8+

var rect = el.getBoundingClientRect();

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

Offset Parent

JQuery

$(el).offsetParent();

IE8+

el.offsetParent || el

Outer Height

JQuery

$(el).outerHeight();

IE8+

el.offsetHeight;

Outer Height With Margin

JQuery

$(el).outerHeight(true);

IE9+

function outerHeight(el){
    var height = el.offsetHeight;
    var style = getComputedStyle(el);

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

outerHeight(el);

Parent

JQuery

$(el).parent();

IE8+

el.parentNode;

Position

JQuery

$(el).position();

IE8+

{
    left: el.offsetLeft,
    top: el.offsetTop
}

Position Relative To Viewport

JQuery

var offset = el.offset();
{
    top: offset.top - document.body.scrollTop,
    left: offset.left - document.body.scrollLeft
}

IE8+

el.getBoundingClientRect();

Prepend

JQuery

$(parent).prepend(el);

IE8+

parent.insertBefore(el, parent.firstChild);

JQuery

$(el).prev();

IE9+

el.previousElementSibling

Remove

JQuery

$(el).remove();

IE8+

el.parentNode.removeChild(el);

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', ' ');
}

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+

el.style.borderWidth = '20px';

Set Text

JQuery

$(el).text(string);

IE9+

el.textContent = string;

Siblings

JQuery

$(el).siblings();

IE9+

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

Toggle Class

$(el).toggleClass(className);

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

Events

Off

JQuery

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

IE9+

el.remoreEventListener(eventName, eventHandler);

On

JQuery

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

IE9+

el.addEventListener(eventName, eventHandler);

Ready

JQuery

$(document).ready(function (){

})

IE9+

function ready(fn){
    if (document.attachEvent ? document.readyState === 'complete' : document.readyState !== 'loading') {
        fn();
    } else {
        document.addEventListener('DOMContentLoaded', fn);
    }
}

Tigger Custom

JQuery

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

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.dispathchEvent(event);

Trigger Native

JQuery

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

IE9+

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

UTILS

Bind

JQuery

$.proxy(fn, context);

IE9+

fn.bind(context);

Array Each

JQuery

$.each(array, function (i, item){

});

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') {
                    out[key] = deepExtend(out[key], obj[key]);
                } else {
                    out[key] = obj[key];
                }
            }
        }
    }

    return out;
}

Extend

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

IE9+

array.indexOf(item);

Is Array

JQuery

$.isArray(arr);

IE9+

Array.isArray(arr);

Map

JQuery

$.map(array, function (value, index){

});

IE9+

array.map(function (value, index){

});

Now

JQuery

$.now();

IE9+

Date.now();

Parse Html

JQuery

$.parseHTML(htmlString);

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

IE8+

JSON.parse(string);

Trim

JQuery

$.trim(string);

IE9+

string.trim();

Type

JQuery

$.type(obj);

IE8+

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

注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。

[聚合文章] YOU MIGHT NOT NEED JQUERY

Ajax

JSON

Post

Request

Effects

Fade In

Hide

Show

Elements

Add Class

After

Append

Before

Children

Clone

Contains

Contains Selector

Each

Empty

Filter

Find Children

Find Elements

Get Attributes

Get Html

Get Outer Html

Get Style

Get Text

Has Class

Matches

Matches Selector

Next

Offset

Offset Parent

Outer Height

Outer Height With Margin

Parent

Position

Position Relative To Viewport

Prepend

Prev

Remove

Remove Class

Replace From Html

Set Attributes

Set Html

Set Style

Set Text

Siblings

Toggle Class

Events

Off

On

Ready

Tigger Custom

Trigger Native

UTILS

Bind

Array Each

Deep Extend

Extend

Index Of

Is Array

Map

Now

Parse Html

Parse JSON

Trim

Type