Since I will likely need this one day:
- [Wayback] Load jQuery Only If Not Present | CSS-Tricks – CSS-Tricks
- [WayBack] Make Your Own Bookmarklets With jQuery – Smashing Magazine
- [Wayback] Better, Stronger, Safer
jQuerifyBookmarklet | Learning jQuery
Searching for the above, I ended up in some kind of YouTube vortex or time sink. This happens a lot when learning new stuff, so lets dump a bit more of what I learned along the way.
Watch your $
For checking for the availability of version of jQuery, lots of links I found use $(). or $. constructs which depend on the context of $ being the global alias for the jQuery. When mixing libraries, this global symbol (yes, unlike many languages $ and _ are valid and heavily symbols in JavaScript) can be used by any of these libraries and if you are not absolutely sure about your context, using them is a plain risk:Â [Wayback/Archive] Global Variables Are Bad.
Adding to the confusion, there are both the jQuery() and jQuery, which seem to be distinctly different. To add to the confusion, there is also jquery.
Since JavaScript is weakly typed, any typos are for you (in the sense of “you, the developer”) to figure out.
Some links from the vortex are below.
Confirmation of my fear of a using global names
- [Wayback/Archive] Why does JQuery have dollar signs everywhere? – Stack Overflow (thanks [Wayback/Archive] Sachin Kainth for asking, and [Wayback/Archive] User T.J. Crowder for answering)
$ is just a shortcut forÂjQuery. The idea is that everything is done with the one global symbol (since the global namespaces is ridiculously crowded),ÂjQuery, but you can useÂ$ (because it’s shorter) if you like:// These are the same barring your using noConflict (more below) var divs = $("div"); // Find all divs var divs = jQuery("div"); // Also find all divs, because console.log($ === jQuery); // "true"If you don’t want to use the alias, you don’t have to. And if you wantÂ$ to not be an alias forÂjQuery, you can useÂnoConflict and the library will restoreÂ$to whatever it was before jQuery took it over. (Useful if you also use Prototype or MooTools.) - [Wayback/Archive] What does the dot after dollar sign mean in jQuery when declaring variables? – Stack Overflow
Q
I see variables declared as:$.root = $("body");and$root = $("body");What is the difference between the two?A (thanks [Wayback/Archive] Sampson)
Functions in JavaScript are objects. And like most objects in JavaScript, you can arbitrarily add properties to them. TheÂ$Â function is just that, a function. So if you want to pop a property onto it and reference a jQuery collection, or reference, you can.By adding the collection as a property on theÂ$Â function, it is one less variable in the current scope. You can examine the keys of the jQuery function before and after if you’d like to see how it affects the function’s topography and (enumerable) property list:Object.keys($); // ["fn", "extend", "expando"..."parseHTML", "offset", "noConflict"] $.root = $("body"); // [<body>] Object.keys($); // ["fn", "extend", "expando"..."parseHTML", "offset", "noConflict", "root"]
jQuery documentation
- [Wayback/Archive] jQuery() | jQuery API Documentation – returning an empty set
Returning an Empty Set
Calling theÂjQuery() method with no arguments returns an empty jQuery set (with aÂ.length property of 0). Similarly, if an argument ofÂnull,Âundefined, an empty array ([]), or an empty string ("") is passed, the set contains no elements. - [Wayback/Archive]
.jquery| jQuery API Documentation
TheÂ.jquery property is assigned to the jQuery prototype, commonly referred to by its aliasÂ$.fn. It is a string containing the version number ofÂjQuery, such as “1.5.0” or “1.4.4”.Examples:
Determine if an object is a jQuery object12345678910var a = { what: "A regular JS object" },b = $( "body" );if ( a.jquery ) { // Falsy, since it's undefinedalert( "a is a jQuery object!" );}if ( b.jquery ) { // Truthy, since it's a stringalert( "b is a jQuery object!" );}Get the current version of jQuery running on the page1alert( "You are running jQuery version: " + $.fn.jquery ); - [Wayback/Archive] Types | jQuery API Documentation: Prototype
Prototype
All objects have a prototype property. Whenever the interpreter looks for a property, it also checks in the object’s prototype if the property is not found on the object itself. jQuery uses the prototype extensively to add methods to jQuery instances. Internally, jQuery makesÂjQuery.fn an alias ofÂjQuery.prototype so you can use either one (though plugin developers have standardized onÂfn).1234567891011121314var form = $("#myform");console.log( form.clearForm ); // undefined// jQuery.fn === jQuery.prototypejQuery.fn.clearForm = function() {return this.find( ":input" ).each(function() {this.value = "";}).end();};// works for all instances of jQuery objects, because// the new method was added to the prototypeconsole.log( form.clearForm ); // functionform.clearForm(); - [Wayback/Archive] jQuery.fn.extend() | jQuery API Documentation
TheÂ
jQuery.fn.extend()Â method extends the jQuery prototype ($.fn) object to provide new methods that can be chained to theÂjQuery()function.This seems to be a construction that lots of people use to shoehorn truckloads of functionality into an almost global context. Doing that requires careful naming of each method, which the example does not make clear.
A really important jQuery documentation problem is the lack of a separate documentation entry statingjQuery.fn = jQuery.prototypewhich is in the source code (more recent versions have it on different lines):- [Wayback/Archive] jquery/core.js at 1.7.1 · jquery/jquery – line 76
jQuery.fn = jQuery.prototype = { // The current version of jQuery being used jquery: version, - [Wayback/Archive] jquery/core.js at 1.7.1 · jquery/jquery – line 192
// The current version of jQuery being used
jquery: "@VERSION",
- [Wayback/Archive] jquery/core.js at 1.7.1 · jquery/jquery – line 76
- [Wayback/Archive] jQuery.noConflict() | jQuery API Documentation
Many JavaScript libraries useÂ$ as a function or variable name, just as jQuery does. In jQuery’s case,Â$ is just an alias forÂjQuery, so all functionality is available without usingÂ$. If you need to use another JavaScript library alongside jQuery, return control ofÂ$ back to the other library with a call toÂ$.noConflict(). Old references ofÂ$ are saved during jQuery initialization;ÂnoConflict() simply restores them.If for some reason two versions of jQuery are loaded (which is not recommended), callingÂ$.noConflict( true ) from the second version will return the globally scoped jQuery variables to those of the first version.…If necessary, you can free up theÂjQuery name as well by passingÂtrue as an argument to the method. This is rarely necessary, and if you must do this (for example, if you need to use multiple versions of the jQuery library on the same page), you need to consider that most plug-ins rely on the presence of theÂjQueryvariable and may not operate correctly in this situation. - [Wayback/Archive] jQuery – MDN Web Docs Glossary: Definitions of Web-related terms | MDN
jQuery is a JavaScript Library that focuses on simplifying DOM manipulation, AJAX calls, and Event handling.jQuery uses a format,Â$(selector).action() to assign an element(s) to an event. To explain it in detail,Â$(selector) will call jQuery to selectÂselector element(s), and assign it to an event API calledÂ.action().Before writing this post, I had no idea what jQuery was and why it had the word Query in the name (I wrongly associated it with a server-side JavaScript SQL library).
JavaScript documentation
- [Wayback/Archive] Object prototypes – Learn web development | MDN
Prototypes are the mechanism by which JavaScript objects inherit features from one another.
…
Every object in JavaScript has a built-in property, which is called its prototype. The prototype is itself an object, so the prototype will have its own prototype, making what’s called a prototype chain. The chain ends when we reach a prototype that hasÂ
null for its own prototype.…
Prototypes are a powerful and very flexible feature of JavaScript, making it possible to reuse code and combine objects.In particular they support a version of inheritance. Inheritance is a feature of object-oriented programming languages that lets programmers express the idea that some objects in a system are more specialized versions of other objects. - [Wayback/Archive] Object – JavaScript | MDN
Nearly all objects in JavaScript are instances ofÂ
Object; a typical object inherits properties (including methods) fromÂObject.prototype, although these properties may be shadowed (a.k.a. overridden). However, anÂObjectmay be deliberately created for which this is not true (e.g. by [Wayback/Archive]Object.create(null)), or it may be altered so that this is no longer true (e.g. with [Wayback/Archive]Object.setPrototypeOf).Changes to theÂObject prototype object are seen by all objects through prototype chaining, unless the properties and methods subject to those changes are overridden further along the prototype chain. This provides a very powerful although potentially dangerous mechanism to override or extend object behavior. - [Wayback/Archive] javascript – How does the “this” keyword work? – Stack Overflow has a few very precise and elaborate answers. Too much to quote here so I just thank these people:
- [Wayback/Archive] Maxim Gershkovich for asking
- [Wayback/Archive] Sebastian Simon for answering
- [Wayback/Archive] Mahesha999 for answering
Note $ is used to prefix variables too
[Wayback/Archive] jquery – Why use $ (dollar sign) in the name of javascript variables? – Stack Overflow (thanks [Wayback/Archive] Simon and [Wayback/Archive] Konerak):
TheÂ$ in the variable name is only part of the name, but the convention is to use it to start variable names when the variable represents a jQuery object.var $myHeaderDiv = $('#header'); var myHeaderDiv = document.getElementById('header');Now later in your code, you know theÂ$myHeaderDiv is already a jQuery object, so you can call jQuery functions:$myHeaderDiv.fade();To get from the DOM-variable to the jQuery variable:
var $myHeaderDiv = jQuery(myHeaderDiv); //assign to another variable jQuery(myHeaderDiv).fade(); //use directly //or, as the $ is aliased to the jQuery object if you don't specify otherwise: var $myHeaderDiv = jQuery(myHeaderDiv); //assign $(myHeaderDiv).fade(); //useTo get from the jQuery variable to the DOM-variable.
var myHeaderDiv = $myHeaderDiv.get(0);
Finding the jQuery version
Via [Wayback/Archive] detect jquery version – Google Search:
- [Wayback/Archive] How to check what version of jQuery is loaded? – Stack Overflow – Answer (question by [Wayback/Archive] Luke101, answer by [Wayback/Archive] Darin Dimitrov)
if (typeof jQuery != 'undefined') { // jQuery is loaded => print the version alert(jQuery.fn.jquery); }no - [Wayback/Archive] How to check what version of jQuery is loaded? – Stack Overflow – Comment by [Wayback/Archive] Uzbekjon:
There are 2 ways to check currently loaded jquery version:Â
jQuery.fn.jquery andÂjQuery().jquery (shorthands:Â$.fn.jqueryÂ$().jquery). I wrote about it in details with links to jquery source code if you’d like to dig deeper- [Wayback/Archive] jQuery Howto: How to check jQuery version?
jQuery.fn = jQuery.prototype = {    // The current version of jQuery being used    jquery: version,
- [Wayback/Archive] jQuery Howto: How to check jQuery version?
- [Wayback/Archive] How to check what version of jQuery is loaded? – Stack Overflow – Comment:
Don’t useÂ
jQuery().jquery. It creates a jQuery object for nothing, just use what the answer says.– user9016207
Via [Wayback/Archive] jquery fn – Google Search:
- [Wayback/Archive] javascript – What does
jQuery.fnmean? – Stack Overflow (thanks [Wayback/Archive] ajsie and [Wayback/Archive] Andy E)
jQuery.fn = jQuery.prototype = { // ... }That meansÂjQuery.fn.jquery is an alias forÂjQuery.prototype.jquery, which returns the current jQuery version. Again from the source code:// The current version of jQuery being used jquery: "@VERSION",- [Wayback/Archive] jquery/core.js at 1.7.1 · jquery/jquery – line 76
jQuery.fn = jQuery.prototype = { - [Wayback/Archive] jquery/core.js at 1.7.1 · jquery/jquery – line 192
// The current version of jQuery being used
jquery: "@VERSION",
- [Wayback/Archive] jquery/core.js at 1.7.1 · jquery/jquery – line 76
- [Wayback/Archive] javascript – Get jQuery version from inspecting the jQuery object – Stack Overflow (thanks [Wayback/Archive] Jeff and [Wayback/Archive] Devy):
for the cases where your page is loading with other javascript libraries like mootools that are conflicting with theÂ$ symbol, you can useÂjQuery instead.For instance,ÂjQuery.fn.jquery orÂjQuery().jquery would work just fine:
–jeroen
The Wiert Corner - irregular stream of stuff 
