How jQuery Works

// This code sample simply gives you a very basic concept of jQuery (and other JavaScript libraries). // From this you can learn about how to make the chainning methods, the CSS selectors etc. // There aren’t any HTML collection loop because here I use `document.querySelector()` and // not `document.querySelectorAll()` for selecting the DOM, so that the code snippet will be easier to learn. // **DEMO:** <https://codepad.co/snippet/rrOIewk9/edit> (function() { // the real constructor var _init = function(selector) { // `selector` → for `document.querySelector()` // prevent broken scope of the `_init`’s `this` keyword // by caching the `this` to a variable named as `base` var base = this; // `$('#foo').element` to get the `#foo` base.element = document.querySelector(selector); // `$('#foo').length` to get the `#foo` length in document base.length = base.element.length; // `$('#foo').html('<b>test</b>')` base.html = function(s) { base.element.innerHTML = s; return base; // make it chainable … }; // `$('#foo').css( ... )` base.css = function(prop, val) { // `$('#foo').css({'color': '#000'})` if (typeof prop === "object") { for (var i in prop) { base.element.style[i] = prop[i]; } // `$('#foo').css('color', '#000')` } else { base.element.style[prop] = val; } return base; // make it chainable … }; // etc … base.addClass = function(s) { base.element.classList.add(s); return base; }; base.removeClass = function(s) { base.element.classList.remove(s); return base; }; base.toggleClass = function(s) { base.element.classList.toggle(s); return base; }; }; // end constructor // create the magic `$(selector)` function window.$ = function(selector) { return new _init(selector); }; })(); // test the script! $('h1').html('Lorem ipsum <em>dolor</em> sit amet!').css({ 'color': 'red', 'background': 'yellow' }).css('border', '4px solid green');