Using jQuery at Console?

Question

I'm learning more about jQuery and would like to use it interactively at the JavaScript console in Chrome. Is that possible? I envision something like this, but it doesn't work:

> use('jquery.js')
jquery loaded
> $("span").html("Hello World!")

This would cause "Hello World!" to be inserted between the span tags and displayed.

Solution 1

There is no "use" so of course it will not work.

You can append it to a page.

var scr = document.createElement("script");
scr.src = "http://code.jquery.com/jquery-1.9.1.min.js";
document.body.appendChild(scr);

Solution 2

If you have jQuery included in the page that you have the console open on you should be free to use it in the console.

Solution 3

The simpliest way to do this, is to edit the header of the page and add a <script> tag pointing to jQuery. Then you will be able to execute the code in your console.

Solution 4

You may want to check out http://jsfiddle.net/ or http://codepen.io/pen/

You can still access the scripts you create via the chrome console and it will be easier to share with others if you have any questions.

Solution 5

If you want to use jQuery frequently from the console you can easily write a userscript. First, install Tampermonkey if you are on Chrome and Greasemonkey if you are on Firefox. Write a simple userscript with a use function like this:

var scripts = []
function use(libname){
var src;
if(scripts.indexOf(libname)==-1){
switch(libname.toLowerCase()){  
case "jquery":
src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js";
break;
case "angularjs":
src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js";
break;
}
}else{
console.log("Library already in use.");
return;
}
if(src){
scripts.append(libname);
var script = document.createElement("script");
script.src = src;
document.body.appendChild(scr);
}else{
console.log("Invalid Library.");
return;
}
}

View more solutions

Comments

[dmi3y]

see comment from Wryte, it states the same

[Bergi]

Ok, that's an obvious and simple solution of course. I had expected that you don't own the page where you opened the console and wanted to use jQuery there.

[Yuvraj Patil]

You may need to use protocol 'https' instead of 'http' of jquery lib file

[Blake Frederick]

Using http, Firefox throws the following error Blocked loading mixed active content “http://code.jquery.com/jquery-1.9.1.min.js”