Sie sind hier : basti1012.de/ tutorialshtml / jquery-vs-valilla-alternativen.php

Vergleich Jquery zu Vanilla

Wenn Sie dagegen eine Bibliothek entwickeln, nehmen Sie sich bitte einen Moment Zeit, um zu prüfen, ob Sie tatsächlich jQuery als Abhängigkeit benötigen. Möglicherweise können Sie ein paar Zeilen mit Hilfsprogrammcode einfügen und auf die Anforderung verzichten. Wenn Sie nur auf modernere Browser zielen, benötigen Sie möglicherweise nicht mehr als das, was mit dem Browser geliefert wird.

Stellen Sie sicher, dass Sie wissen, was jQuery für Sie tut und was nicht.
Einige Entwickler glauben, dass jQuery uns vor einem großen Dämon der Inkompatibilität von Browsern schützt, wenn Browser nach IE8 wirklich recht einfach mit Browsern umgehen können.

Ihre Suche ergab keine Vergleiche.

AJAX

JSON

jQuery

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



});

IE8+

var request = new XMLHttpRequest();

request.open('GET', '/my/url', true);



request.onreadystatechange = function() {

  if (this.readyState === 4) {

    if (this.status >= 200 && this.status < 400) {

      // Success!

      var data = JSON.parse(this.responseText);

    } else {

      // Error :(

    }

  }

};



request.send();

request = null;

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 {

    // We reached our target server, but it returned an error



  }

};



request.onerror = function() {

  // There was a connection error of some sort

};



request.send();

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

});

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



  }

});

IE8+

var request = new XMLHttpRequest();

request.open('GET', '/my/url', true);



request.onreadystatechange = function() {

  if (this.readyState === 4) {

    if (this.status >= 200 && this.status < 400) {

      // Success!

      var resp = this.responseText;

    } else {

      // Error :(

    }

  }

};



request.send();

request = null;

IE9+

var request = new XMLHttpRequest();

request.open('GET', '/my/url', true);



request.onload = function() {

  if (request.status >= 200 && request.status < 400) {

    // Success!

    var 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+

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

Effects

Alternatives:

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;

}

Hide

jQuery

$(el).hide();

IE8+

el.style.display = 'none';

Show

jQuery

$(el).show();

IE8+

el.style.display = '';

Elements

Alternatives:

Add Class

jQuery

$(el).addClass(className);

IE8+

if (el.classList)

  el.classList.add(className);

else

  el.className += ' ' + className;

IE10+

el.classList.add(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();

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

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



});

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



});

Empty

jQuery

$(el).empty();

IE8+

while(el.firstChild)

  el.removeChild(el.firstChild);

IE9+

el.innerHTML = '';

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

Find Children

jQuery

$(el).find(selector);

IE8+

el.querySelectorAll(selector);

Find Elements

Alternatives:

jQuery

$('.my #awesome selector');

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

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

Get Text

jQuery

$(el).text();

IE8+

el.textContent || el.innerText

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

IE10+

el.classList.contains(className);

Matches

jQuery

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

IE8+

el === otherEl

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).call(el, selector);

};



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

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

IE8+

function outerHeight(el) {

  var height = el.offsetHeight;

  var style = el.currentStyle || getComputedStyle(el);



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

  return height;

}



outerHeight(el);

IE9+

function outerHeight(el) {

  var height = el.offsetHeight;

  var style = getComputedStyle(el);



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

  return height;

}



outerHeight(el);

Outer Width

jQuery

$(el).outerWidth();

IE8+

el.offsetWidth

Outer Width With Margin

jQuery

$(el).outerWidth(true);

IE8+

function outerWidth(el) {

  var width = el.offsetWidth;

  var style = el.currentStyle || getComputedStyle(el);



  width += parseInt(style.marginLeft) + parseInt(style.marginRight);

  return width;

}



outerWidth(el);

IE9+

function outerWidth(el) {

  var width = el.offsetWidth;

  var style = getComputedStyle(el);



  width += parseInt(style.marginLeft) + parseInt(style.marginRight);

  return width;

}



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

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

IE10+

el.classList.remove(className);

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+

// Use a class if possible

el.style.borderWidth = '20px';

Set 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, function(){

      handler.call(el);

    });

  }

}



addEventListener(el, eventName, handler);

IE9+

el.addEventListener(eventName, eventHandler);

Ready

jQuery

$(document).ready(function(){



});

IE8+

function ready(fn) {

  if (document.readyState != 'loading'){

    fn();

  } else if (document.addEventListener) {

    document.addEventListener('DOMContentLoaded', fn);

  } else {

    document.attachEvent('onreadystatechange', function() {

      if (document.readyState != 'loading')

        fn();

    });

  }

}

IE9+

function ready(fn) {

  if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){

    fn();

  } else {

    document.addEventListener('DOMContentLoaded', fn);

  }

}

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

var event = document.createEvent('HTMLEvents');

event.initEvent('change', true, false);

el.dispatchEvent(event);

Utils

Bind

jQuery

$.proxy(fn, context);

IE8+

fn.apply(context, arguments);

IE9+

fn.bind(context);

Array Each

jQuery

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



});

IE8+

function forEach(array, fn) {

  for (var 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')

          out[key] = 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){



});

Now

jQuery

$.now();

IE8+

new Date().getTime();

IE9+

Date.now();

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

Parse Json

jQuery

$.parseJSON(string);

IE8+

JSON.parse(string);

Trim

jQuery

$.trim(string);

IE8+

string.replace(/^\s+|\s+$/g, '');

IE9+

string.trim();

Type

jQuery

$.type(obj);

IE8+

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