Include jQuery in the JavaScript Console

javascript

prompt-engineering

functions

async

byAnton Shumikhin·Nov 8, 2024

Easily load jQuery into any web page's console using this script:

var script = document.createElement('script');
script.src = "//cdn.jsdelivr.net/jquery/latest/jquery.min.js";
document.head.appendChild(script);

Voila! jQuery methods are now at your service.

To ensure no collision with pre-existing jQuery, check if it's already loaded:

if (typeof jQuery === 'undefined') {
    /* Load jQuery */
}

Preventing you from disrupting the existing version that the website may depend on.

Handling potential script conflicts

Safeguarding against disruptions

To prevent conflicts with the website's jQuery, use noConflict() mode to keep your loaded jQuery independent:

script.onload = function () {
    // Because no one likes conflicts, especially Not JavaScript!
    jQuery.noConflict();
    console.log('jQuery', jQuery.fn.jquery, 'loaded in no-conflict mode');
};

Modifying to suit your needs

For a specific version of jQuery, just adjust the src:

script.src = "https://code.jquery.com/jquery-3.4.1.min.js"; // Use it like you're shopping for your favorite jQuery version.

Quick-Load jQuery bookmarklet

You can have a one-click solution by creating a bookmarklet which adds jQuery:

Name: jQuery Quick Load | URL: javascript:(function(){/* Your magic script here */})();

Modern methods of jQuery insertion

Vibrant new approach

JavaScript now supports dynamic imports, allowing us to load scripts asynchronously minus the page refresh:

(async () => {
    if (typeof jQuery === 'undefined') {
        // I don't always import jQuery, but when I do, I do it dynamically.
        await import('//cdn.jsdelivr.net/jquery/latest/jquery.min.js');
        console.log('jQuery loaded dynamically');
    }
})();

Double-checking jQuery presence

Always verify your jQuery is ready for action:

console.log(typeof jQuery !== 'undefined' ? 'jQuery is reporting for duty.' : 'jQuery MIA. Dispatching search party.');

A nifty tool: jQueryify

Streamline the loading process using jQueryify bookmarklet. So, you can inject jQuery swiftly without manual checks:

javascript:(function(e,s){e.src=s;e.onload=function(){jQuery.noConflict();console.log('jQuery',jQuery.fn.jquery,'loaded')};document.head.appendChild(e);})(document.createElement('script'),'//code.jquery.com/jquery-latest.min.js')

Hot tips for effective jQuery usage

Using jQuery elements

After adding jQuery, indulge in its power for DOM manipulation. Such as counting table rows:

$(document).ready(function () {
    var rowCounter = $('table tr').length;
    console.log('Table has enough rows to play Tetris:', rowCounter);
});

Browser compatibility consideration

Remember, dynamic imports are recent and may not work in older browsers:

(async () => {
    // Trying to use import(), hoping the browser is a Millennial or gen Z.
    try {
        await import('//cdn.jsdelivr.net/jquery/latest/jquery.min.js');
    } catch (err) {
        // Falling back to ancient methods for our respected elder browsers.
        var script = document.createElement('script');
        script.src = '//cdn.jsdelivr.net/jquery/latest/jquery.min.js';
        document.head.appendChild(script);
    }
})();

Shopping for better syntax with arrow functions

Arrow functions can simplify syntax when working with dynamic imports and async tasks:

const loadJQuery = async () => {
    if (typeof jQuery === 'undefined') {
        // When I grow up, I want to be an arrow function.
        await import('//cdn.jsdelivr.net/jquery/latest/jquery.min.js');
        console.log('jQuery', jQuery.fn.jquery, 'loaded using arrow function');
    }
};
loadJQuery();