Last Updated: February 25, 2016
·
2.072K
· otupman

Bring jQuery in via the console

Sometimes having jQuery available in a non-jQuery project is handy; for example, when dealing with AngularJS jqLite doesn't currently appear to like selectors, plus it doesn't have all the functionality of jQuery.

So if you read this Stackoverflow post you'll see that someone has written the code to use from the command line to include jQuery.

However I find I have to copy + paste each line in. Bleh.

Here's a quick one-liner copy+paste version that will include jQuery:

var includeJQuery = function() { var jq = document.createElement('script'); jq.src = "http://code.jquery.com/jquery-latest.min.js"; document.getElementsByTagName('head')[0].appendChild(jq); jQuery.noConflict(); }

Then just type includeJQuery() (okay, it's two lines, sorry).

4 Responses
Add your response

Couldn't you do something like : (function() { /* your stuff*/ })() ?

over 1 year ago ·

Even better, you can save this as a Snippet in Chrome Developer Tools (be sure to enable the Snippets experiment in CDT settings)

over 1 year ago ·

@manudwarf - you're right, however I wanted to ensure that the jQuery.noConflict() was called, which isn't possible within an anonymous function because jQuery isn't present in the scope.

This is the one-liner:

(function() { var jq = document.createElement('script'); jq.src = "http://code.jquery.com/jquery-latest.min.js"; document.getElementsByTagName('head')[0].appendChild(jq);})()

@dpashkevich - oh, wow, that's awesome, I'd not spotted that feature before. Thanks for the tip!

over 1 year ago ·

The way you prevent to ensure that jQuery was called is wrong.
The script you append to head would load jquery async.
So jQuery.noConflict() would executed before jquery load.

over 1 year ago ·