fyhshq
Last Updated: February 25, 2016
·
1.068K
· otupman
45975fcc42c585f7ddd9711e1f5198a7

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).

Say Thanks
Respond

4 Responses
Add your response

4645
12417984 10209211765477105 942606612610417330 n

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

over 1 year ago ·
4710
D42a7264714dee5006b9c99d2567a320

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 ·
4711
45975fcc42c585f7ddd9711e1f5198a7

@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 ·
4715
Fd6e76c8f44c263fba2803d24f339b1d

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 ·