Posted in webdev

11:24 pm, August 18, 2019

You Might Not Need jQuery

<div readability="29.690430172842">
<div class="explanation" readability="14.986311239193">
<div class="inner" readability="25.138328530259">
<p>jQuery and its cousins are great, and by all means use them if it makes it easier to develop your application.</p>
<p>
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.
</p>
<p>
At the very least, make sure you know what <a href="https://docs.google.com/document/d/1LPaPA30bLUBpublLIMF0RlhdnPxePXm7oW02iiT6o" style="color: inherit; text-decoration: none;" name="readabilityLink-1">jQuery is doing for you</a><a href="#readabilityFootnoteLink-1" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[1]</sup></small></a>, 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.
</p>
</div>
</div>

<header class="search"><input type="search" placeholder="Search..." required="" autofocus=""/><div class="field">
<label for="version">What's the oldest version of IE you need to support?</label>

</div>
</header><div class="comparisons" readability="6.7007030079521">
<p>Your search didn't match any comparisons.</p>
<section id="ajax" class="odd"><div class="inner">
<h2>AJAX</h2>

<div id="json" class="comparison">
<h3><a href="#json" style="color: inherit; text-decoration: none;" name="readabilityLink-2">JSON</a><a href="#readabilityFootnoteLink-2" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[2]</sup></small></a></h3>
<div data-browser="jquery" class="browser jquery" readability="6.5">
<h4>jQuery</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="8">
<pre><code>$.getJSON('/my/url', function(data) {

});
</code></pre>
</div>
</div>
<div data-browser="ie8" class="browser ie8" readability="8.5">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="12">
<pre><code>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;
</code></pre>
</div>
</div>
<div data-browser="ie9" class="browser ie9" readability="9">
<h4>IE9+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="13">
<pre><code>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();
</code></pre>
</div>
</div>
<div data-browser="ie10" class="browser ie10" readability="9">
<h4>IE10+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="13">
<pre><code>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();
</code></pre>
</div>
</div>
</div>
<div id="request" class="comparison">
<h3><a href="#request" style="color: inherit; text-decoration: none;" name="readabilityLink-3">Request</a><a href="#readabilityFootnoteLink-3" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[3]</sup></small></a></h3>
<div data-browser="jquery" class="browser jquery" readability="7.5">
<h4>jQuery</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="10">
<pre><code>$.ajax({
type: 'GET',
url: '/my/url',
success: function(resp) {

},
error: function() {

}
});
</code></pre>
</div>
</div>
<div data-browser="ie8" class="browser ie8" readability="8">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="11">
<pre><code>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;
</code></pre>
</div>
</div>
<div data-browser="ie9" class="browser ie9" readability="9">
<h4>IE9+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="13">
<pre><code>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();
</code></pre>
</div>
</div>
<div data-browser="ie10" class="browser ie10" readability="9">
<h4>IE10+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="13">
<pre><code>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();
</code></pre>
</div>
</div>
</div>
<div id="post" class="comparison">
<h3><a href="#post" style="color: inherit; text-decoration: none;" name="readabilityLink-4">Post</a><a href="#readabilityFootnoteLink-4" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[4]</sup></small></a></h3>
<div data-browser="jquery" class="browser jquery" readability="7">
<h4>jQuery</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="9">
<pre><code>$.ajax({
type: 'POST',
url: '/my/url',
data: data
});
</code></pre>
</div>
</div>
<div data-browser="ie8" class="browser ie8" readability="8">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="11">
<pre><code>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);
</code></pre>
</div>
</div>
</div>
</div>
</section><section id="effects"><div class="inner">
<h2>Effects</h2>

<div data-browser="ie8" class="browser ie8" readability="6">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="7">
<pre><code>el.style.display = 'none';
</code></pre>
</div>
</div>
</div>
<div id="fadein" class="comparison">
<h3><a href="#fadein" style="color: inherit; text-decoration: none;" name="readabilityLink-6">Fade In</a><a href="#readabilityFootnoteLink-6" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[6]</sup></small></a></h3>

<div data-browser="ie8" class="browser ie8" readability="8">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="11">
<pre><code>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);
</code></pre>
</div>
</div>
<div data-browser="ie9" class="browser ie9" readability="8">
<h4>IE9+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="11">
<pre><code>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);
</code></pre>
</div>
</div>
<div data-browser="ie10" class="browser ie10" readability="7">
<h4>IE10+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="7">
<pre><code>el.classList.add('show');
el.classList.remove('hide');
</code></pre>
</div>
<div data-lang="css" class="code-block language-css" readability="7">
<pre><code>.show {
transition: opacity 400ms;
}
.hide {
opacity: 0;
}
</code></pre>
</div>
</div>
</div>

</div>
</section><section id="elements" class="odd"><div class="inner">
<h2>Elements</h2>

<div id="addclass" class="comparison">
<h3><a href="#addclass" style="color: inherit; text-decoration: none;" name="readabilityLink-7">Add Class</a><a href="#readabilityFootnoteLink-7" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[7]</sup></small></a></h3>
<div data-browser="jquery" class="browser jquery" readability="6">
<h4>jQuery</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="7">
<pre><code>$(el).addClass(className);
</code></pre>
</div>
</div>
<div data-browser="ie8" class="browser ie8" readability="6">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="7">
<pre><code>if (el.classList)
el.classList.add(className);
else
el.className += ' ' + className;
</code></pre>
</div>
</div>
<div data-browser="ie10" class="browser ie10" readability="6">
<h4>IE10+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="7">
<pre><code>el.classList.add(className);
</code></pre>
</div>
</div>
</div>
<div id="after" class="comparison">
<h3><a href="#after" style="color: inherit; text-decoration: none;" name="readabilityLink-8">After</a><a href="#readabilityFootnoteLink-8" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[8]</sup></small></a></h3>

<div id="before" class="comparison">
<h3><a href="#before" style="color: inherit; text-decoration: none;" name="readabilityLink-9">Before</a><a href="#readabilityFootnoteLink-9" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[9]</sup></small></a></h3>
<div data-browser="jquery" class="browser jquery" readability="6">
<h4>jQuery</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="7">
<pre><code>$(el).before(htmlString);
</code></pre>
</div>
</div>
<div data-browser="ie8" class="browser ie8" readability="6.5">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="8">
<pre><code>el.insertAdjacentHTML('beforebegin', htmlString);
</code></pre>
</div>
</div>
</div>

<div id="contains" class="comparison">
<h3><a href="#contains" style="color: inherit; text-decoration: none;" name="readabilityLink-10">Contains</a><a href="#readabilityFootnoteLink-10" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[10]</sup></small></a></h3>

<div data-browser="ie8" class="browser ie8" readability="6">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="7">
<pre><code>el !== child && el.contains(child);
</code></pre>
</div>
</div>
</div>
<div id="children" class="comparison">
<h3><a href="#children" style="color: inherit; text-decoration: none;" name="readabilityLink-11">Children</a><a href="#readabilityFootnoteLink-11" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[11]</sup></small></a></h3>

<div data-browser="ie8" class="browser ie8" readability="6.5">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="8">
<pre><code>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]);
}
</code></pre>
</div>
</div>

</div>
<div id="containsselector" class="comparison">
<h3><a href="#containsselector" style="color: inherit; text-decoration: none;" name="readabilityLink-12">Contains Selector</a><a href="#readabilityFootnoteLink-12" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[12]</sup></small></a></h3>
<div data-browser="jquery" class="browser jquery" readability="6">
<h4>jQuery</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="7">
<pre><code>$(el).find(selector).length;
</code></pre>
</div>
</div>
<div data-browser="ie8" class="browser ie8" readability="6">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="7">
<pre><code>el.querySelector(selector) !== null
</code></pre>
</div>
</div>
</div>
<div id="each" class="comparison">
<h3><a href="#each" style="color: inherit; text-decoration: none;" name="readabilityLink-13">Each</a><a href="#readabilityFootnoteLink-13" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[13]</sup></small></a></h3>
<div data-browser="jquery" class="browser jquery" readability="6.5">
<h4>jQuery</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="8">
<pre><code>$(selector).each(function(i, el){

});
</code></pre>
</div>
</div>
<div data-browser="ie8" class="browser ie8" readability="9">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="13">
<pre><code>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){

});
</code></pre>
</div>
</div>
<div data-browser="ie9" class="browser ie9" readability="7.5">
<h4>IE9+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="10">
<pre><code>var elements = document.querySelectorAll(selector);
Array.prototype.forEach.call(elements, function(el, i){

});
</code></pre>
</div>
</div>
</div>
<div id="empty" class="comparison">
<h3><a href="#empty" style="color: inherit; text-decoration: none;" name="readabilityLink-14">Empty</a><a href="#readabilityFootnoteLink-14" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[14]</sup></small></a></h3>

</div>
<div id="findelements" class="comparison">
<h3><a href="#findelements" style="color: inherit; text-decoration: none;" name="readabilityLink-15">Find Elements</a><a href="#readabilityFootnoteLink-15" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[15]</sup></small></a></h3>

<div data-browser="jquery" class="browser jquery" readability="6">
<h4>jQuery</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="7">
<pre><code>$('.my #awesome selector');
</code></pre>
</div>
</div>
<div data-browser="ie8" class="browser ie8" readability="6">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="7">
<pre><code>document.querySelectorAll('.my #awesome selector');
</code></pre>
</div>
</div>
</div>
<div id="filter" class="comparison">
<h3><a href="#filter" style="color: inherit; text-decoration: none;" name="readabilityLink-16">Filter</a><a href="#readabilityFootnoteLink-16" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[16]</sup></small></a></h3>
<div data-browser="jquery" class="browser jquery" readability="6">
<h4>jQuery</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="7">
<pre><code>$(selector).filter(filterFn);
</code></pre>
</div>
</div>
<div data-browser="ie8" class="browser ie8" readability="8">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="11">
<pre><code>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);
</code></pre>
</div>
</div>
<div data-browser="ie9" class="browser ie9" readability="6.5">
<h4>IE9+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="8">
<pre><code>Array.prototype.filter.call(document.querySelectorAll(selector), filterFn);
</code></pre>
</div>
</div>
</div>

<div id="getstyle" class="comparison">
<h3><a href="#getstyle" style="color: inherit; text-decoration: none;" name="readabilityLink-17">Get Style</a><a href="#readabilityFootnoteLink-17" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[17]</sup></small></a></h3>

<div data-browser="ie8" class="browser ie8" readability="7">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="9">
<pre><code>// 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
</code></pre>
</div>
</div>
<div data-browser="ie9" class="browser ie9" readability="6">
<h4>IE9+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="7">
<pre><code>getComputedStyle(el)[ruleName];
</code></pre>
</div>
</div>
</div>
<div id="getheight" class="comparison">
<h3><a href="#getheight" style="color: inherit; text-decoration: none;" name="readabilityLink-18">Get Height</a><a href="#readabilityFootnoteLink-18" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[18]</sup></small></a></h3>

<div data-browser="ie8" class="browser ie8" readability="8.5">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="12">
<pre><code>function getHeight(el) {
var d = /^\d+(px)?$/i;
if (window.getComputedStyle) el = parseFloat(getComputedStyle(el, null).height.replace("px", ""));
else {
var c = el.currentStyle.height;
if (d.test(c)) el = parseInt(c);
else {
d = el.style.left;
var e = el.runtimeStyle.left;
el.runtimeStyle.left = el.currentStyle.left;
el.style.left = c || 0;
c = el.style.pixelLeft;
el.style.left = d;
el.runtimeStyle.left = e;
el = c;
}
}
return el
};

getHeight(el);
</code></pre>
</div>
</div>
<div data-browser="ie9" class="browser ie9" readability="7">
<h4>IE9+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="9">
<pre><code>parseFloat(getComputedStyle(el, null).height.replace("px", ""))
</code></pre>
</div>
</div>
</div>
<div id="gettext" class="comparison">
<h3><a href="#gettext" style="color: inherit; text-decoration: none;" name="readabilityLink-19">Get Text</a><a href="#readabilityFootnoteLink-19" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[19]</sup></small></a></h3>

</div>
<div id="hasclass" class="comparison">
<h3><a href="#hasclass" style="color: inherit; text-decoration: none;" name="readabilityLink-20">Has Class</a><a href="#readabilityFootnoteLink-20" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[20]</sup></small></a></h3>
<div data-browser="jquery" class="browser jquery" readability="6">
<h4>jQuery</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="7">
<pre><code>$(el).hasClass(className);
</code></pre>
</div>
</div>
<div data-browser="ie8" class="browser ie8" readability="7">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="9">
<pre><code>if (el.classList)
el.classList.contains(className);
else
new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
</code></pre>
</div>
</div>
<div data-browser="ie10" class="browser ie10" readability="6">
<h4>IE10+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="7">
<pre><code>el.classList.contains(className);
</code></pre>
</div>
</div>
</div>

<div id="getwidth" class="comparison">
<h3><a href="#getwidth" style="color: inherit; text-decoration: none;" name="readabilityLink-21">Get Width</a><a href="#readabilityFootnoteLink-21" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[21]</sup></small></a></h3>

<div data-browser="ie8" class="browser ie8" readability="8.5">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="12">
<pre><code>function getWidth(el) {
var d = /^\d+(px)?$/i;
if (window.getComputedStyle) el = parseFloat(getComputedStyle(el, null).width.replace("px", ""));
else {
var c = el.currentStyle.width;
if (d.test(c)) el = parseInt(c);
else {
d = el.style.left;
var e = el.runtimeStyle.left;
el.runtimeStyle.left = el.currentStyle.left;
el.style.left = c || 0;
c = el.style.pixelLeft;
el.style.left = d;
el.runtimeStyle.left = e;
el = c;
}
}
return el
};

getWidth(el);
</code></pre>
</div>
</div>
<div data-browser="ie9" class="browser ie9" readability="7">
<h4>IE9+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="9">
<pre><code>parseFloat(getComputedStyle(el, null).width.replace("px", ""))
</code></pre>
</div>
</div>
</div>
<div id="matchesselector" class="comparison">
<h3><a href="#matchesselector" style="color: inherit; text-decoration: none;" name="readabilityLink-22">Matches Selector</a><a href="#readabilityFootnoteLink-22" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[22]</sup></small></a></h3>

<div data-browser="ie8" class="browser ie8" readability="9">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="13">
<pre><code>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');
</code></pre>
</div>
</div>
<div data-browser="ie9" class="browser ie9" readability="8.5">
<h4>IE9+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="12">
<pre><code>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');
</code></pre>
</div>
</div>
</div>
<div id="next" class="comparison">
<h3><a href="#next" style="color: inherit; text-decoration: none;" name="readabilityLink-23">Next</a><a href="#readabilityFootnoteLink-23" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[23]</sup></small></a></h3>

<div data-browser="ie8" class="browser ie8" readability="6.5">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="8">
<pre><code>// nextSibling can include text nodes
function nextElementSibling(el) {
do { el = el.nextSibling; } while ( el && el.nodeType !== 1 );
return el;
}

el.nextElementSibling || nextElementSibling(el);
</code></pre>
</div>
</div>

</div>

<div id="offset" class="comparison">
<h3><a href="#offset" style="color: inherit; text-decoration: none;" name="readabilityLink-24">Offset</a><a href="#readabilityFootnoteLink-24" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[24]</sup></small></a></h3>

<div data-browser="ie8" class="browser ie8" readability="7">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="9">
<pre><code>var rect = el.getBoundingClientRect();

{
top: rect.top + document.body.scrollTop,
left: rect.left + document.body.scrollLeft
}
</code></pre>
</div>
</div>
</div>
<div id="outerheightwithmargin" class="comparison">
<h3><a href="#outerheightwithmargin" style="color: inherit; text-decoration: none;" name="readabilityLink-25">Outer Height With Margin</a><a href="#readabilityFootnoteLink-25" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[25]</sup></small></a></h3>

<div data-browser="ie8" class="browser ie8" readability="7">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="9">
<pre><code>function outerHeight(el) {
var height = el.offsetHeight;
var style = el.currentStyle || getComputedStyle(el);

height += parseInt(style.marginTop) + parseInt(style.marginBottom);
return height;
}

outerHeight(el);
</code></pre>
</div>
</div>
<div data-browser="ie9" class="browser ie9" readability="6.5">
<h4>IE9+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="8">
<pre><code>function outerHeight(el) {
var height = el.offsetHeight;
var style = getComputedStyle(el);

height += parseInt(style.marginTop) + parseInt(style.marginBottom);
return height;
}

outerHeight(el);
</code></pre>
</div>
</div>
</div>
<div id="outerwidthwithmargin" class="comparison">
<h3><a href="#outerwidthwithmargin" style="color: inherit; text-decoration: none;" name="readabilityLink-26">Outer Width With Margin</a><a href="#readabilityFootnoteLink-26" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[26]</sup></small></a></h3>

<div data-browser="ie8" class="browser ie8" readability="7">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="9">
<pre><code>function outerWidth(el) {
var width = el.offsetWidth;
var style = el.currentStyle || getComputedStyle(el);

width += parseInt(style.marginLeft) + parseInt(style.marginRight);
return width;
}

outerWidth(el);
</code></pre>
</div>
</div>
<div data-browser="ie9" class="browser ie9" readability="6.5">
<h4>IE9+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="8">
<pre><code>function outerWidth(el) {
var width = el.offsetWidth;
var style = getComputedStyle(el);

width += parseInt(style.marginLeft) + parseInt(style.marginRight);
return width;
}

outerWidth(el);
</code></pre>
</div>
</div>
</div>

<div id="position" class="comparison">
<h3><a href="#position" style="color: inherit; text-decoration: none;" name="readabilityLink-27">Position</a><a href="#readabilityFootnoteLink-27" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[27]</sup></small></a></h3>

<div data-browser="ie8" class="browser ie8" readability="6.5">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="8">
<pre><code>{left: el.offsetLeft, top: el.offsetTop}
</code></pre>
</div>
</div>
</div>
<div id="prepend" class="comparison">
<h3><a href="#prepend" style="color: inherit; text-decoration: none;" name="readabilityLink-28">Prepend</a><a href="#readabilityFootnoteLink-28" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[28]</sup></small></a></h3>

<div data-browser="ie8" class="browser ie8" readability="6.5">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="8">
<pre><code>parent.insertBefore(el, parent.firstChild);
</code></pre>
</div>
</div>
</div>
<div id="positionrelativetoviewport" class="comparison">
<h3><a href="#positionrelativetoviewport" style="color: inherit; text-decoration: none;" name="readabilityLink-29">Position Relative To Viewport</a><a href="#readabilityFootnoteLink-29" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[29]</sup></small></a></h3>
<div data-browser="jquery" class="browser jquery" readability="7">
<h4>jQuery</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="9">
<pre><code>var offset = el.offset();

{
top: offset.top - document.body.scrollTop,
left: offset.left - document.body.scrollLeft
}
</code></pre>
</div>
</div>
<div data-browser="ie8" class="browser ie8" readability="6">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="7">
<pre><code>el.getBoundingClientRect()
</code></pre>
</div>
</div>
</div>
<div id="prev" class="comparison">
<h3><a href="#prev" style="color: inherit; text-decoration: none;" name="readabilityLink-30">Prev</a><a href="#readabilityFootnoteLink-30" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[30]</sup></small></a></h3>

<div data-browser="ie8" class="browser ie8" readability="7">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="9">
<pre><code>// prevSibling can include text nodes
function previousElementSibling(el) {
do { el = el.previousSibling; } while ( el && el.nodeType !== 1 );
return el;
}

el.previousElementSibling || previousElementSibling(el);
</code></pre>
</div>
</div>
<div data-browser="ie9" class="browser ie9" readability="6">
<h4>IE9+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="7">
<pre><code>el.previousElementSibling
</code></pre>
</div>
</div>
</div>
<div id="remove" class="comparison">
<h3><a href="#remove" style="color: inherit; text-decoration: none;" name="readabilityLink-31">Remove</a><a href="#readabilityFootnoteLink-31" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[31]</sup></small></a></h3>

<div data-browser="ie8" class="browser ie8" readability="6">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="7">
<pre><code>el.parentNode.removeChild(el);
</code></pre>
</div>
</div>
</div>

<div id="removeclass" class="comparison">
<h3><a href="#removeclass" style="color: inherit; text-decoration: none;" name="readabilityLink-32">Remove Class</a><a href="#readabilityFootnoteLink-32" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[32]</sup></small></a></h3>
<div data-browser="jquery" class="browser jquery" readability="6">
<h4>jQuery</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="7">
<pre><code>$(el).removeClass(className);
</code></pre>
</div>
</div>
<div data-browser="ie8" class="browser ie8" readability="7.5">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="10">
<pre><code>if (el.classList)
el.classList.remove(className);
else
el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
</code></pre>
</div>
</div>
<div data-browser="ie10" class="browser ie10" readability="6">
<h4>IE10+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="7">
<pre><code>el.classList.remove(className);
</code></pre>
</div>
</div>
</div>
<div id="removeattributes" class="comparison">
<h3><a href="#removeattributes" style="color: inherit; text-decoration: none;" name="readabilityLink-33">Remove Attributes</a><a href="#readabilityFootnoteLink-33" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[33]</sup></small></a></h3>
<div data-browser="jquery" class="browser jquery" readability="6">
<h4>jQuery</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="7">
<pre><code>$(el).removeAttr('tabindex');
</code></pre>
</div>
</div>
<div data-browser="ie8" class="browser ie8" readability="6">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="7">
<pre><code>el.removeAttribute('tabindex');
</code></pre>
</div>
</div>
</div>
<div id="setattributes" class="comparison">
<h3><a href="#setattributes" style="color: inherit; text-decoration: none;" name="readabilityLink-34">Set Attributes</a><a href="#readabilityFootnoteLink-34" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[34]</sup></small></a></h3>
<div data-browser="jquery" class="browser jquery" readability="6.5">
<h4>jQuery</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="8">
<pre><code>$(el).attr('tabindex', 3);
</code></pre>
</div>
</div>
<div data-browser="ie8" class="browser ie8" readability="6.5">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="8">
<pre><code>el.setAttribute('tabindex', 3);
</code></pre>
</div>
</div>
</div>

<div id="setstyle" class="comparison">
<h3><a href="#setstyle" style="color: inherit; text-decoration: none;" name="readabilityLink-35">Set Style</a><a href="#readabilityFootnoteLink-35" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[35]</sup></small></a></h3>
<div data-browser="jquery" class="browser jquery" readability="6.5">
<h4>jQuery</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="8">
<pre><code>$(el).css('border-width', '20px');
</code></pre>
</div>
</div>
<div data-browser="ie8" class="browser ie8" readability="6">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="7">
<pre><code>// Use a class if possible
el.style.borderWidth = '20px';
</code></pre>
</div>
</div>
</div>
<div id="settext" class="comparison">
<h3><a href="#settext" style="color: inherit; text-decoration: none;" name="readabilityLink-36">Set Text</a><a href="#readabilityFootnoteLink-36" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[36]</sup></small></a></h3>

</div>
<div id="setheight" class="comparison">
<h3><a href="#setheight" style="color: inherit; text-decoration: none;" name="readabilityLink-37">Set Height</a><a href="#readabilityFootnoteLink-37" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[37]</sup></small></a></h3>

<div data-browser="ie8" class="browser ie8" readability="7">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="9">
<pre><code>var siblings = Array.prototype.slice.call(el.parentNode.children);

for (var i = siblings.length; i--;) {
if (siblings[i] === el) {
siblings.splice(i, 1);
break;
}
}
</code></pre>
</div>
</div>
<div data-browser="ie9" class="browser ie9" readability="6.5">
<h4>IE9+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="8">
<pre><code>Array.prototype.filter.call(el.parentNode.children, function(child){
return child !== el;
});
</code></pre>
</div>
</div>
</div>
<div id="setwidth" class="comparison">
<h3><a href="#setwidth" style="color: inherit; text-decoration: none;" name="readabilityLink-39">Set Width</a><a href="#readabilityFootnoteLink-39" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[39]</sup></small></a></h3>

<div data-browser="ie8" class="browser ie8" readability="7.5">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="10">
<pre><code>function setHeight(el, val) {
if (typeof val === "function") val = val();
if (typeof val === "string") el.style.height = val;
else el.style.height = val + "px";
}

setHeight(el, val);
</code></pre>
</div>
</div>
</div>
<div id="toggleclass" class="comparison">
<h3><a href="#toggleclass" style="color: inherit; text-decoration: none;" name="readabilityLink-40">Toggle Class</a><a href="#readabilityFootnoteLink-40" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[40]</sup></small></a></h3>
<div data-browser="jquery" class="browser jquery" readability="6">
<h4>jQuery</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="7">
<pre><code>$(el).toggleClass(className);
</code></pre>
</div>
</div>
<div data-browser="ie8" class="browser ie8" readability="8">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="11">
<pre><code>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(' ');
}
</code></pre>
</div>
</div>
<div data-browser="ie9" class="browser ie9" readability="7.5">
<h4>IE9+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="10">
<pre><code>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(' ');
}
</code></pre>
</div>
</div>
<div data-browser="ie10" class="browser ie10" readability="6">
<h4>IE10+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="7">
<pre><code>el.classList.toggle(className);
</code></pre>
</div>
</div>
</div>
</div>
</section><section id="events"><div class="inner">
<h2>Events</h2>
<div id="off" class="comparison">
<h3><a href="#off" style="color: inherit; text-decoration: none;" name="readabilityLink-41">Off</a><a href="#readabilityFootnoteLink-41" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[41]</sup></small></a></h3>
<div data-browser="jquery" class="browser jquery" readability="6.5">
<h4>jQuery</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="8">
<pre><code>$(el).off(eventName, eventHandler);
</code></pre>
</div>
</div>
<div data-browser="ie8" class="browser ie8" readability="10">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="15">
<pre><code>function removeEventListener(el, eventName, handler) {
if (el.removeEventListener)
el.removeEventListener(eventName, handler);
else
el.detachEvent('on' + eventName, handler);
}

removeEventListener(el, eventName, handler);
</code></pre>
</div>
</div>
<div data-browser="ie9" class="browser ie9" readability="6.5">
<h4>IE9+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="8">
<pre><code>el.removeEventListener(eventName, eventHandler);
</code></pre>
</div>
</div>
</div>
<div id="on" class="comparison">
<h3><a href="#on">On</a></h3>
<div data-browser="jquery" class="browser jquery" readability="6.5">
<h4>jQuery</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="8">
<pre><code>$(el).on(eventName, eventHandler);
</code></pre>
</div>
</div>
<div data-browser="ie8" class="browser ie8" readability="10">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="15">
<pre><code>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);
</code></pre>
</div>
</div>
<div data-browser="ie9" class="browser ie9" readability="6.5">
<h4>IE9+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="8">
<pre><code>el.addEventListener(eventName, eventHandler);
</code></pre>
</div>
</div>
</div>
<div id="triggernative" class="comparison">
<h3><a href="#triggernative" style="color: inherit; text-decoration: none;" name="readabilityLink-42">Trigger Native</a><a href="#readabilityFootnoteLink-42" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[42]</sup></small></a></h3>

<div data-browser="ie8" class="browser ie8" readability="7.5">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="10">
<pre><code>if (document.createEvent) {
var event = document.createEvent('HTMLEvents');
event.initEvent('change', true, false);
el.dispatchEvent(event);
} else {
el.fireEvent('onchange');
}
</code></pre>
</div>
</div>
<div data-browser="ie9" class="browser ie9" readability="8">
<h4>IE9+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="11">
<pre><code>// 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);
</code></pre>
</div>
</div>
</div>
<div id="triggercustom" class="comparison">
<h3><a href="#triggercustom" style="color: inherit; text-decoration: none;" name="readabilityLink-43">Trigger Custom</a><a href="#readabilityFootnoteLink-43" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[43]</sup></small></a></h3>

<div data-browser="jquery" class="browser jquery" readability="6.5">
<h4>jQuery</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="8">
<pre><code>$(el).trigger('my-event', {some: 'data'});
</code></pre>
</div>
</div>
<div data-browser="ie8" class="browser ie8" readability="7">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="9">
<pre><code>// Custom events are not natively supported, so you have to hijack a random
// event.
//
// Just use jQuery.
</code></pre>
</div>
</div>
<div data-browser="ie9" class="browser ie9" readability="9">
<h4>IE9+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="13">
<pre><code>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);
</code></pre>
</div>
</div>
</div>
<div id="ready" class="comparison">
<h3><a href="#ready" style="color: inherit; text-decoration: none;" name="readabilityLink-44">Ready</a><a href="#readabilityFootnoteLink-44" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[44]</sup></small></a></h3>
<div data-browser="jquery" class="browser jquery" readability="6">
<h4>jQuery</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="7">
<pre><code>$(document).ready(function(){

});
</code></pre>
</div>
</div>
<div data-browser="ie8" class="browser ie8" readability="8">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="11">
<pre><code>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();
});
}
}
</code></pre>
</div>
</div>
<div data-browser="ie9" class="browser ie9" readability="7">
<h4>IE9+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="9">
<pre><code>function ready(fn) {
if (document.readyState != 'loading'){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
</code></pre>
</div>
</div>
</div>
</div>
</section><section id="utils" class="odd"><div class="inner">
<h2>Utils</h2>
<div id="bind" class="comparison">
<h3><a href="#bind" style="color: inherit; text-decoration: none;" name="readabilityLink-45">Bind</a><a href="#readabilityFootnoteLink-45" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[45]</sup></small></a></h3>

<div data-browser="ie8" class="browser ie8" readability="6.5">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="8">
<pre><code>fn.apply(context, arguments);
</code></pre>
</div>
</div>

</div>
<div id="deepextend" class="comparison">
<h3><a href="#deepextend" style="color: inherit; text-decoration: none;" name="readabilityLink-46">Deep Extend</a><a href="#readabilityFootnoteLink-46" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[46]</sup></small></a></h3>
<div data-browser="jquery" class="browser jquery" readability="7.5">
<h4>jQuery</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="10">
<pre><code>$.extend(true, {}, objA, objB);
</code></pre>
</div>
</div>
<div data-browser="ie8" class="browser ie8" readability="9">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="13">
<pre><code>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);
</code></pre>
</div>
</div>
</div>
<div id="arrayeach" class="comparison">
<h3><a href="#arrayeach" style="color: inherit; text-decoration: none;" name="readabilityLink-47">Array Each</a><a href="#readabilityFootnoteLink-47" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[47]</sup></small></a></h3>
<div data-browser="jquery" class="browser jquery" readability="7">
<h4>jQuery</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="9">
<pre><code>$.each(array, function(i, item){

});
</code></pre>
</div>
</div>
<div data-browser="ie8" class="browser ie8" readability="8.5">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="12">
<pre><code>function forEach(array, fn) {
for (var i = 0; i < array.length; i++)
fn(array[i], i);
}

forEach(array, function(item, i){

});
</code></pre>
</div>
</div>
<div data-browser="ie9" class="browser ie9" readability="6.5">
<h4>IE9+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="8">
<pre><code>array.forEach(function(item, i){

});
</code></pre>
</div>
</div>
</div>
<div id="indexof" class="comparison">
<h3><a href="#indexof" style="color: inherit; text-decoration: none;" name="readabilityLink-48">Index Of</a><a href="#readabilityFootnoteLink-48" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[48]</sup></small></a></h3>

<div data-browser="ie8" class="browser ie8" readability="7.5">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="10">
<pre><code>function indexOf(array, item) {
for (var i = 0; i < array.length; i++) {
if (array[i] === item)
return i;
}
return -1;
}

indexOf(array, item);
</code></pre>
</div>
</div>

</div>
<div id="isarray" class="comparison">
<h3><a href="#isarray" style="color: inherit; text-decoration: none;" name="readabilityLink-49">Is Array</a><a href="#readabilityFootnoteLink-49" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[49]</sup></small></a></h3>

<div data-browser="ie8" class="browser ie8" readability="6.5">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="8">
<pre><code>isArray = Array.isArray || function(arr) {
return Object.prototype.toString.call(arr) == '[object Array]';
};

isArray(arr);
</code></pre>
</div>
</div>

</div>
<div id="extend" class="comparison">
<h3><a href="#extend" style="color: inherit; text-decoration: none;" name="readabilityLink-50">Extend</a><a href="#readabilityFootnoteLink-50" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[50]</sup></small></a></h3>

<div data-browser="jquery" class="browser jquery" readability="7">
<h4>jQuery</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="9">
<pre><code>$.extend({}, objA, objB);
</code></pre>
</div>
</div>
<div data-browser="ie8" class="browser ie8" readability="8">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="11">
<pre><code>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);
</code></pre>
</div>
</div>
</div>

<div id="map" class="comparison">
<h3><a href="#map" style="color: inherit; text-decoration: none;" name="readabilityLink-51">Map</a><a href="#readabilityFootnoteLink-51" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[51]</sup></small></a></h3>
<div data-browser="jquery" class="browser jquery" readability="7">
<h4>jQuery</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="9">
<pre><code>$.map(array, function(value, index){

});
</code></pre>
</div>
</div>
<div data-browser="ie8" class="browser ie8" readability="8.5">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="12">
<pre><code>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){

});
</code></pre>
</div>
</div>
<div data-browser="ie9" class="browser ie9" readability="6.5">
<h4>IE9+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="8">
<pre><code>array.map(function(value, index){

});
</code></pre>
</div>
</div>
</div>
<div id="parsehtml" class="comparison">
<h3><a href="#parsehtml" style="color: inherit; text-decoration: none;" name="readabilityLink-52">Parse Html</a><a href="#readabilityFootnoteLink-52" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[52]</sup></small></a></h3>

<div data-browser="ie8" class="browser ie8" readability="6.5">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="8">
<pre><code>var parseHTML = function(str) {
var el = document.createElement('div');
el.innerHTML = str;
return el.children;
};

parseHTML(htmlString);
</code></pre>
</div>
</div>
<div data-browser="ie9" class="browser ie9" readability="6.5">
<h4>IE9+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="8">
<pre><code>var parseHTML = function(str) {
var tmp = document.implementation.createHTMLDocument();
tmp.body.innerHTML = str;
return tmp.body.children;
};

parseHTML(htmlString);
</code></pre>
</div>
</div>
</div>
<div id="trim" class="comparison">
<h3><a href="#trim" style="color: inherit; text-decoration: none;" name="readabilityLink-53">Trim</a><a href="#readabilityFootnoteLink-53" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[53]</sup></small></a></h3>

<div data-browser="ie8" class="browser ie8" readability="6.5">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="8">
<pre><code>string.replace(/^\s+|\s+$/g, '');
</code></pre>
</div>
</div>

</div>
<div id="type" class="comparison">
<h3><a href="#type" style="color: inherit; text-decoration: none;" name="readabilityLink-54">Type</a><a href="#readabilityFootnoteLink-54" class="readability-DoNotFootnote" style="color: inherit;"><small><sup>[54]</sup></small></a></h3>

<div data-browser="ie8" class="browser ie8" readability="6.5">
<h4>IE8+</h4>
<div data-lang="javascript" class="code-block language-javascript" readability="8">
<pre><code>Object.prototype.toString.call(obj).replace(/^\[object (.+)\]$/, '$1').toLowerCase();
</code></pre>
</div>
</div>
</div>

</div>
</section></div>
<footer/></div><div id="readability-footnotes"><h3>References</h3><ol id="readability-footnotes-list"><li><small><sup><a href="#readabilityLink-1" title="Jump to Link in Article">^</a></sup></small> <a href="https://docs.google.com/document/d/1LPaPA30bLUBpublLIMF0RlhdnPxePXm7oW02iiT6o" name="readabilityFootnoteLink-1">jQuery is doing for you</a><small> (docs.google.com)</small></li><li><small><sup><a href="#readabilityLink-2" title="Jump to Link in Article">^</a></sup></small> <a href="#json" name="readabilityFootnoteLink-2">JSON</a></li><li><small><sup><a href="#readabilityLink-3" title="Jump to Link in Article">^</a></sup></small> <a href="#request" name="readabilityFootnoteLink-3">Request</a></li><li><small><sup><a href="#readabilityLink-4" title="Jump to Link in Article">^</a></sup></small> <a href="#post" name="readabilityFootnoteLink-4">Post</a></li><li><small><sup><a href="#readabilityLink-5" title="Jump to Link in Article">^</a></sup></small> <a href="#hide" name="readabilityFootnoteLink-5">Hide</a></li><li><small><sup><a href="#readabilityLink-6" title="Jump to Link in Article">^</a></sup></small> <a href="#fadein" name="readabilityFootnoteLink-6">Fade In</a></li><li><small><sup><a href="#readabilityLink-7" title="Jump to Link in Article">^</a></sup></small> <a href="#addclass" name="readabilityFootnoteLink-7">Add Class</a></li><li><small><sup><a href="#readabilityLink-8" title="Jump to Link in Article">^</a></sup></small> <a href="#after" name="readabilityFootnoteLink-8">After</a></li><li><small><sup><a href="#readabilityLink-9" title="Jump to Link in Article">^</a></sup></small> <a href="#before" name="readabilityFootnoteLink-9">Before</a></li><li><small><sup><a href="#readabilityLink-10" title="Jump to Link in Article">^</a></sup></small> <a href="#contains" name="readabilityFootnoteLink-10">Contains</a></li><li><small><sup><a href="#readabilityLink-11" title="Jump to Link in Article">^</a></sup></small> <a href="#children" name="readabilityFootnoteLink-11">Children</a></li><li><small><sup><a href="#readabilityLink-12" title="Jump to Link in Article">^</a></sup></small> <a href="#containsselector" name="readabilityFootnoteLink-12">Contains Selector</a></li><li><small><sup><a href="#readabilityLink-13" title="Jump to Link in Article">^</a></sup></small> <a href="#each" name="readabilityFootnoteLink-13">Each</a></li><li><small><sup><a href="#readabilityLink-14" title="Jump to Link in Article">^</a></sup></small> <a href="#empty" name="readabilityFootnoteLink-14">Empty</a></li><li><small><sup><a href="#readabilityLink-15" title="Jump to Link in Article">^</a></sup></small> <a href="#findelements" name="readabilityFootnoteLink-15">Find Elements</a></li><li><small><sup><a href="#readabilityLink-16" title="Jump to Link in Article">^</a></sup></small> <a href="#filter" name="readabilityFootnoteLink-16">Filter</a></li><li><small><sup><a href="#readabilityLink-17" title="Jump to Link in Article">^</a></sup></small> <a href="#getstyle" name="readabilityFootnoteLink-17">Get Style</a></li><li><small><sup><a href="#readabilityLink-18" title="Jump to Link in Article">^</a></sup></small> <a href="#getheight" name="readabilityFootnoteLink-18">Get Height</a></li><li><small><sup><a href="#readabilityLink-19" title="Jump to Link in Article">^</a></sup></small> <a href="#gettext" name="readabilityFootnoteLink-19">Get Text</a></li><li><small><sup><a href="#readabilityLink-20" title="Jump to Link in Article">^</a></sup></small> <a href="#hasclass" name="readabilityFootnoteLink-20">Has Class</a></li><li><small><sup><a href="#readabilityLink-21" title="Jump to Link in Article">^</a></sup></small> <a href="#getwidth" name="readabilityFootnoteLink-21">Get Width</a></li><li><small><sup><a href="#readabilityLink-22" title="Jump to Link in Article">^</a></sup></small> <a href="#matchesselector" name="readabilityFootnoteLink-22">Matches Selector</a></li><li><small><sup><a href="#readabilityLink-23" title="Jump to Link in Article">^</a></sup></small> <a href="#next" name="readabilityFootnoteLink-23">Next</a></li><li><small><sup><a href="#readabilityLink-24" title="Jump to Link in Article">^</a></sup></small> <a href="#offset" name="readabilityFootnoteLink-24">Offset</a></li><li><small><sup><a href="#readabilityLink-25" title="Jump to Link in Article">^</a></sup></small> <a href="#outerheightwithmargin" name="readabilityFootnoteLink-25">Outer Height With Margin</a></li><li><small><sup><a href="#readabilityLink-26" title="Jump to Link in Article">^</a></sup></small> <a href="#outerwidthwithmargin" name="readabilityFootnoteLink-26">Outer Width With Margin</a></li><li><small><sup><a href="#readabilityLink-27" title="Jump to Link in Article">^</a></sup></small> <a href="#position" name="readabilityFootnoteLink-27">Position</a></li><li><small><sup><a href="#readabilityLink-28" title="Jump to Link in Article">^</a></sup></small> <a href="#prepend" name="readabilityFootnoteLink-28">Prepend</a></li><li><small><sup><a href="#readabilityLink-29" title="Jump to Link in Article">^</a></sup></small> <a href="#positionrelativetoviewport" name="readabilityFootnoteLink-29">Position Relative To Viewport</a></li><li><small><sup><a href="#readabilityLink-30" title="Jump to Link in Article">^</a></sup></small> <a href="#prev" name="readabilityFootnoteLink-30">Prev</a></li><li><small><sup><a href="#readabilityLink-31" title="Jump to Link in Article">^</a></sup></small> <a href="#remove" name="readabilityFootnoteLink-31">Remove</a></li><li><small><sup><a href="#readabilityLink-32" title="Jump to Link in Article">^</a></sup></small> <a href="#removeclass" name="readabilityFootnoteLink-32">Remove Class</a></li><li><small><sup><a href="#readabilityLink-33" title="Jump to Link in Article">^</a></sup></small> <a href="#removeattributes" name="readabilityFootnoteLink-33">Remove Attributes</a></li><li><small><sup><a href="#readabilityLink-34" title="Jump to Link in Article">^</a></sup></small> <a href="#setattributes" name="readabilityFootnoteLink-34">Set Attributes</a></li><li><small><sup><a href="#readabilityLink-35" title="Jump to Link in Article">^</a></sup></small> <a href="#setstyle" name="readabilityFootnoteLink-35">Set Style</a></li><li><small><sup><a href="#readabilityLink-36" title="Jump to Link in Article">^</a></sup></small> <a href="#settext" name="readabilityFootnoteLink-36">Set Text</a></li><li><small><sup><a href="#readabilityLink-37" title="Jump to Link in Article">^</a></sup></small> <a href="#setheight" name="readabilityFootnoteLink-37">Set Height</a></li><li><small><sup><a href="#readabilityLink-38" title="Jump to Link in Article">^</a></sup></small> <a href="#siblings" name="readabilityFootnoteLink-38">Siblings</a></li><li><small><sup><a href="#readabilityLink-39" title="Jump to Link in Article">^</a></sup></small> <a href="#setwidth" name="readabilityFootnoteLink-39">Set Width</a></li><li><small><sup><a href="#readabilityLink-40" title="Jump to Link in Article">^</a></sup></small> <a href="#toggleclass" name="readabilityFootnoteLink-40">Toggle Class</a></li><li><small><sup><a href="#readabilityLink-41" title="Jump to Link in Article">^</a></sup></small> <a href="#off" name="readabilityFootnoteLink-41">Off</a></li><li><small><sup><a href="#readabilityLink-42" title="Jump to Link in Article">^</a></sup></small> <a href="#triggernative" name="readabilityFootnoteLink-42">Trigger Native</a></li><li><small><sup><a href="#readabilityLink-43" title="Jump to Link in Article">^</a></sup></small> <a href="#triggercustom" name="readabilityFootnoteLink-43">Trigger Custom</a></li><li><small><sup><a href="#readabilityLink-44" title="Jump to Link in Article">^</a></sup></small> <a href="#ready" name="readabilityFootnoteLink-44">Ready</a></li><li><small><sup><a href="#readabilityLink-45" title="Jump to Link in Article">^</a></sup></small> <a href="#bind" name="readabilityFootnoteLink-45">Bind</a></li><li><small><sup><a href="#readabilityLink-46" title="Jump to Link in Article">^</a></sup></small> <a href="#deepextend" name="readabilityFootnoteLink-46">Deep Extend</a></li><li><small><sup><a href="#readabilityLink-47" title="Jump to Link in Article">^</a></sup></small> <a href="#arrayeach" name="readabilityFootnoteLink-47">Array Each</a></li><li><small><sup><a href="#readabilityLink-48" title="Jump to Link in Article">^</a></sup></small> <a href="#indexof" name="readabilityFootnoteLink-48">Index Of</a></li><li><small><sup><a href="#readabilityLink-49" title="Jump to Link in Article">^</a></sup></small> <a href="#isarray" name="readabilityFootnoteLink-49">Is Array</a></li><li><small><sup><a href="#readabilityLink-50" title="Jump to Link in Article">^</a></sup></small> <a href="#extend" name="readabilityFootnoteLink-50">Extend</a></li><li><small><sup><a href="#readabilityLink-51" title="Jump to Link in Article">^</a></sup></small> <a href="#map" name="readabilityFootnoteLink-51">Map</a></li><li><small><sup><a href="#readabilityLink-52" title="Jump to Link in Article">^</a></sup></small> <a href="#parse_html" name="readabilityFootnoteLink-52">Parse Html</a></li><li><small><sup><a href="#readabilityLink-53" title="Jump to Link in Article">^</a></sup></small> <a href="#trim" name="readabilityFootnoteLink-53">Trim</a></li><li><small><sup><a href="#readabilityLink-54" title="Jump to Link in Article">^</a></sup></small> <a href="#type" name="readabilityFootnoteLink-54">Type</a></li></ol></div>

keywords

No Items Found.

Add Comment

Other Items in webdev

Hugo Font Awesome Icons [ Icons ] - CSS Bundle Daily Dev Tips CSS Background Patterns by MagicPattern GitHub - ganlanyuan/tiny-slider: Vanilla javascript slider for all purposes. GitHub - jonasstrehle/supercookie: ⚠️ Browser fingerprinting via favicon! URL-encoder for SVG Bootstrap Icons · Official open source SVG icon library for Bootstrap GitHub - kognise/water.css: A drop-in collection of CSS styles to make simple websites just a little nicer Toggle light and dark themes in Bootstrap - DEV Deploy your Publish website for free on GitHub Pages - DEV Bootstrap · The most popular HTML, CSS, and JS library in the world. GitHub - diegocard/awesome-html5: A curated list of awesome HTML5 resources Fixing PHP SQLite database is locked warning - Unable to execute statement: database is locked [ php ] - KruXoR openstreetmap.org 50 Developer tools to make your life a little easier https://www.mrlacey.com/2020/07/youve-only-added-two-lines-why-did-that.html?m=1 GitHub - ForEvolve/bootstrap-dark: Bootstrap 4 dark theme that supports togging dark/light themes as well. There is no fluff, it changes the color of Bootstrap and that's it, no new thing to learn or unlearn, just Bootstrap, but Dark! Responsive Web Design Online Testing - isResponsive Trianglify.io · Low Poly Pattern Generator Grid.js - Advanced table plugin HEAD - A free guide to <head> elements Roots | Modern WordPress Development Tools A Local Dev Tool For Every Project | Lando new.css Synchronized responsive testing, development, inspection | Vanamco Gold Price Charts Widgets | GoldBroker.com Trianglify.io · Low Poly Pattern Generator Special tags that Google understands - Search Console Help 404 Error Page Codepen ScrollMagic ♥ Demo AOS - Animate on scroll library Font Awesome v4.7.0 - Icon Search Tool Carbon Offers — LowEndTalk Featherlight – The ultra slim jQuery lightbox. Tailwind CSS - A Utility-First CSS Framework for Rapidly Building Custom Designs HEAD - A free guide to <head> elements API Blueprint | API Blueprint Filtering Data Client-Side: Comparing CSS, jQuery, and React | CSS-Tricks CSS Quickies: CSS Variables - Or how you create a 🌞white/🌑dark theme easily - DEV Community 👩‍💻👨‍💻 Responsive Slider Timeline Colormind - the AI powered color palette generator Get Waves – Create SVG waves for your next design Nuxt.js - The Vue.js Framework CodeSandbox: Online Code Editor Tailored for Web Application Development Hover.css - A collection of CSS3 powered hover effects Live.js - One script closer to Designing in the Browser Color this sofa! – SVG + Blend Mode trick You Might Not Need jQuery

Other Categories in Linx

ai apps articles cloud apps code coffee factorio games hardware health iphone lists minecraft music pi security stock images stock images tech vpn web dev web developer websites windows ai android api apps articles asp audio australia bio bitcoin blog books bootstrap career charts code editors codepens cooking css css animations daily linx data day trips design design elements drawing education emulators entrepreneur factorio fitness flowcharts fonts foobar2000 themes games hardware headphones health home automation html templates icons itunes javascript jquery js linux mac maps media mhx minecraft misc money motivation music network news nginx os osrs pantheon parenting phone phones php pi products programming radio random reading reddit rs3 runescape seo shopping sqlite stock images storage tax tech technology text formatting tools trains video video editor videos wallpapers weather web web design web development web sites webdev windows wine wordpress workout youtube

Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Latest News

## 🚀 AI Giants Hit Bullseye: Anthropic & OpenAI Achieve Product-Market Fit Anthropic and OpenAI have reached a significant milestone, finding product-market fit with their AI technologies, which means their products effectively meet the needs of their customers, driving growth and adoption. This achievement showcases the practical value of their innovations, enabling businesses and individuals to leverage AI for enhanced productivity and efficiency. With this alignment of product and market needs, these companies are poised to transform industries and shape the future of technology.

You Might Not Need jQuery

Add Comment

Other Items in webdev

Other Categories in Linx

Search Linx

Latest from Linx

Welcome

Random Quote

Latest News

Latest Articles

Code

Links

Quick Links

Quick Links

Sections