The Wiert Corner – irregular stream of stuff

Jeroen W. Pluimers on .NET, C#, Delphi, databases, and personal interests

  • My badges

    Mastodon

  • Twitter Updates

  • My Flickr Stream

    20140508-Delphi-2007--Project-Options--Cannot-Edit-Application-Title-HelpFile-Icon-Theming20140430-Fiddler-Filter-Actions-Button-Run-Filterset-now20140424-VMware-Fusion-6.0.3.-no-reclaimable
    More Photos

  • Pages

  • All categories

  • Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 1,860 other subscribers
«
»

Load jQuery Only If Not Present

Posted by jpluimers on 2023/07/26

Since I will likely need this one day:

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 object
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var a = { what: "A regular JS object" },
    b = $( "body" );
    if ( a.jquery ) { // Falsy, since it's undefined
    alert( "a is a jQuery object!" );
    }
    if ( b.jquery ) { // Truthy, since it's a string
    alert( "b is a jQuery object!" );
    }
    Get the current version of jQuery running on the page
    1
    alert( "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).
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    var form = $("#myform");
    console.log( form.clearForm ); // undefined
    // jQuery.fn === jQuery.prototype
    jQuery.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 prototype
    console.log( form.clearForm ); // function
    form.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 stating jQuery.fn = jQuery.prototype which is in the source code (more recent versions have it on different lines):
  • [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 jQuery variable 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 Object may 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:

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

To 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:

Via [Wayback/Archive] jquery fn – Google Search:

–jeroen

This entry was posted on 2023/07/26 at 12:00 and is filed under Development, JavaScript/ECMAScript, jQuery, Scripting, Software Development, Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

«
»