2

I would like to do some jQuery DOM manipulations after a page is loaded by manually calling the functions thru a (/the web inspection) console. I tried doing that in Safari web inspection console of course, but it seems the jQuery is directly implemented in the browser console ($$(selector) is the syntax for selecting all elements with selector selector)and they seem to be only inspection functions (i.e., cannot make modifications). I find that awkward because I can manually delete tags in the loaded DOM and it reflects in the browser viewport. So for example to get to the point, what would prevent me from running something like:

$('p').css('color','red')

I think this question may have come up in the past in SO, but entries I found were quite out of date (2~3 years is a long time, right?).

I'm also concerned with being able to manually load the jQuery library if the site I am visiting doesn't have it included.

EDIT: to restate my question, I was trying to use jQuery functions in Safari Web Inspector Console while browsing on a website that doesn't load the jQuery library. I updated the title of the question too.

JackyJohnson
  • 3,106
  • 3
  • 28
  • 35
  • You should always link the questions you found on SO that are related, even if they are outdated. If they are still valid then there is no reason why a new answer should be written. Safari does not provide it's own jQuery in the console, everything you can access in the console was load either by the page, or by an installed extension. Using the console on e.g. SO in Safari works perfectly fine. – t.niese Jan 28 '15 at 03:50
  • What exactly is your question? I"ve read your post multiple times and I find several statements, but I can't figure out exactly what you want help with. – jfriend00 Jan 28 '15 at 04:01
  • So I tried the function in stackoverflow and yes it works as expected, which means my problem is that I am trying to use jQuery on a site that doesn't actually load the jQuery library. How do I load it then? – JackyJohnson Jan 28 '15 at 04:04
  • possible duplicate of [Include jQuery in the JavaScript Console](http://stackoverflow.com/questions/7474354/include-jquery-in-the-javascript-console) – Goodword Jan 28 '15 at 04:13

1 Answers1

1

I just found this stack overflow post, which answers your question.

Copying from the post: "run this in your browser's javascript console, then jQuery should be available...

var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
// ... give time for script to load, then type.
jQuery.noConflict();

NOTE, if the site has scripts that conflict with jQuery (other libs, etc..) you could still run into problems."

Alternatively, you could copy and paste the whole jquery libary into your console. Here is a link to the latest version of Jquery: http://code.jquery.com/jquery-latest.min.js

Community
  • 1
  • 1
Goodword
  • 1,565
  • 19
  • 27
  • I asked the question in the post you linked, but since it's old, I'm asking again here. Is appending the jQuery script tag the only of adding the jQuery object to the runtime? – JackyJohnson Jan 28 '15 at 04:18
  • you could type the whole jquery library into your console...it's not that hard actually. Here's a link to the latest version: http://code.jquery.com/jquery-latest.min.js. Just copy and paste the code from that link into your console. – Goodword Jan 28 '15 at 04:21
  • I just double checked that these work in this method works in the chrome browser. (wasn't entirely sure when I posted). Pretty sweet. – Goodword Jan 28 '15 at 04:27
  • Yes, it is, I realized that as soon as I read your comment. It pays to pick someone's brain! Thx! – JackyJohnson Jan 28 '15 at 04:30
  • can also make a bookmarklet out of it and trigger from browser bookmarks – charlietfl Jan 28 '15 at 04:31
  • you can even try chrome extensions like jQuerify/jquery-injector – Arkantos Jan 28 '15 at 06:35