Does manipulating the content of a webpage using jQuery ultimately changes the content of the webpage for every user loading the same webpage online?

No, it would be on a per-user basis.

why when i try any of this in some websites it doesnt work , like github for example it tells me smth like typeError: $ is not a function.. or Refrence Error:jQuery is not defined?!

Insert this code into the JavaScript console of the website you are on. It imports the jQuery library: var jq = document.createElement('script'); jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"; document.getElementsByTagName('head')[0].appendChild(jq);

Changed images on my Twitter page and it was fun :) This did not work on Facebook though. Is there a way to tell for certain if a page has included jQuery? Maybe using some commands from the javascript console ?

All you have to do is type `$` in the web console and hit enter. If it is defined then you will get a message showing the jQuery function. If not you'll get an error.

By using the same code but replacing the image link, would it be possible to change all pictures on a website to, let's say Donald Trump, or Nick Cage?

You could definitely do that, with something like follows: ```$("img").attr("src", "<link to some image>");```

in the broswer inspect tool where do you put the javascript code

You can put JavaScript code in the console, just to try it out.

Main content

Computer programming

Course: Computer programming > Unit 7

Lesson 3: DOM modification with jQuery

Project: Extreme Makeover, Webpage Edition

Google Classroom

A large fraction of webpages on the internet include jQuery - so when you visit them, you can open your JavaScript console, and successfully run a line of code like this:

$("body").text("Mwahahaha");

That means you can use jQuery to have fun with webpages that aren't your own, and get an idea for how their HTML is composed.

For example, you can go to Twitter and replace all the images with an image of a very grumpy cat:

$("img").attr("src", "https://pbs.twimg.com/profile_images/616542814319415296/McCTpH_E.jpg");

Look how great our Khan Academy account looks now!

What are some of your favorite websites? Try to find one that has jQuery included (by testing the first line of code) and see what fun ways you can modify it. Some websites limit what resources you can bring into them, so you have to be more creative. For example, Twitter only allows images from Twitter, so I searched for cat images located on twitter.com.

Share the code for your webpage makeovers in the Tips/Thanks below. Let's make the web a more beautiful (or cat-iful) place!

Want to join the conversation?

Sort by:

nicolahoelzl
Posted 8 years ago. Direct link to nicolahoelzl's post “I tested it on a WordPres...”
I tested it on a WordPress webpage and found that
$("img").attr("src", "https://pbs.twimg.com/profile_images/616542814319415296/McCTpH_E.jpg");
didn't work, but
JQuery("img").attr("src", "https://pbs.twimg.com/profile_images/616542814319415296/McCTpH_E.jpg");
did! Is that because the webpage does not have a link to the jQuery library?

When I used $ it showed this error: "TypeError: $ is not a function"
Button navigates to signup pageButton navigates to signup page
(20 votes)
Answer
- pamela.fox
  Posted 8 years ago. Direct link to pamela.fox's post “It's an option in the jQu...”
  It's an option in the jQuery library to expose the function under "$", "jQuery", or both. It looks like WordPress only exposes "jQuery" - maybe because they have another library which has a "$" function.
  Comment on pamela.fox's post “It's an option in the jQu...”
  (33 votes)
Mo
Posted 7 years ago. Direct link to Mo's post “why when i try any of th...”
why when i try any of this in some websites it doesnt work , like github for example it tells me smth like typeError: $ is not a function.. or Refrence Error:jQuery is not defined?!
Button navigates to signup pageButton navigates to signup page
(1 vote)
Answer
- Sebastian Power
  Posted 5 years ago. Direct link to Sebastian Power's post “Insert this code into the...”
  Insert this code into the JavaScript console of the website you are on. It imports the jQuery library:
  
  var jq = document.createElement('script');
  jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";
  document.getElementsByTagName('head')[0].appendChild(jq);
  Comment on Sebastian Power's post “Insert this code into the...”
  (6 votes)
Debojyoti Pramanick
Posted 7 years ago. Direct link to Debojyoti Pramanick's post “Changed images on my Twit...”
Changed images on my Twitter page and it was fun :) This did not work on Facebook though.
Is there a way to tell for certain if a page has included jQuery? Maybe using some commands from the javascript console ?
Button navigates to signup pageComment on Debojyoti Pramanick's post “Changed images on my Twit...”
(1 vote)
Answer
- Robert Stone
  Posted 7 years ago. Direct link to Robert Stone's post “All you have to do is typ...”
  All you have to do is type $ in the web console and hit enter. If it is defined then you will get a message showing the jQuery function. If not you'll get an error.
  Comment on Robert Stone's post “All you have to do is typ...”
  (7 votes)
ahmetkalievsultan
Posted 2 years ago. Direct link to ahmetkalievsultan's post “I tried to change webpage...”
I tried to change webpages by jQuery but it didn't work. I put exact same lines of code, even included jQuery by myself. Can anybody help me?
Button navigates to signup pageButton navigates to signup page
(4 votes)
Answer
- 🪶Wingfeather🪶
  Posted 3 months ago. Direct link to 🪶Wingfeather🪶's post “So if you want to use a l...”
  So if you want to use a line of jQuery to temporarily change webpages, like the "Mwahahahaha" line in the article above, go to the console and type it in at the bottom, then hit enter. Your jQuery will then go into effect, but it will not permanently change the webpage. You cannot permanently change just any random webpage, because that would start to cause problems. It won't even change it for other people; it will just change what your version looks like. It also might not work if the website doesn't have the jQuery library.
  Button navigates to signup page
  (1 vote)
Mahad Sarfraz
Posted 2 years ago. Direct link to Mahad Sarfraz's post “On the browser developer ...”
On the browser developer tools how can we access JavaScript like HTML elements?
Button navigates to signup pageButton navigates to signup page
(2 votes)
Answer
Fredrick Nganga
Posted 2 years ago. Direct link to Fredrick Nganga's post “Does manipulating the con...”
Does manipulating the content of a webpage using jQuery ultimately changes the content of the webpage for every user loading the same webpage online?
Button navigates to signup pageButton navigates to signup page
(2 votes)
Answer
- Shane McGookey
  Posted 2 years ago. Direct link to Shane McGookey's post “No, it would be on a per-...”
  No, it would be on a per-user basis.
  Comment on Shane McGookey's post “No, it would be on a per-...”
  (2 votes)
Evan Silverman
Posted 8 years ago. Direct link to Evan Silverman's post “By using the same code bu...”
By using the same code but replacing the image link, would it be possible to change all pictures on a website to, let's say Donald Trump, or Nick Cage?
Button navigates to signup pageComment on Evan Silverman's post “By using the same code bu...”
(1 vote)
Answer
- Brynden
  Posted 8 years ago. Direct link to Brynden's post “You could definitely do t...”
  You could definitely do that, with something like follows:
  
  $("img").attr("src", "<link to some image>");
  Comment on Brynden's post “You could definitely do t...”
  (4 votes)
MichaelP
Posted 2 years ago. Direct link to MichaelP's post “I tried it. It was really...”
I tried it. It was really fun. Everything turned into MWAHAHAHAHA! I AM IN YOUR WEBPAGE. NOTHING CAN STOP ME NOW. It didn't work on google, though. Google said that both the css function and the text function didn't work. What functions do work in Google?
Button navigates to signup pageComment on MichaelP's post “I tried it. It was really...”
(2 votes)
Answer
- CoraL
  Posted 10 months ago. Direct link to CoraL's post “Try using vanilla Javascr...”
  Try using vanilla Javascript.
  Button navigates to signup page
  (1 vote)
adibatabassum57
Posted 2 years ago. Direct link to adibatabassum57's post “I tried in chrome but it ...”
I tried in chrome but it showed that attr is not a function.How can I fix that?
Button navigates to signup pageComment on adibatabassum57's post “I tried in chrome but it ...”
(2 votes)
Answer
xBigmacx
Posted 7 years ago. Direct link to xBigmacx's post “in the broswer inspect to...”
in the broswer inspect tool where do you put the javascript code
Button navigates to signup pageButton navigates to signup page
(1 vote)
Answer
- Dalendrion
  Posted 7 years ago. Direct link to Dalendrion's post “You can put JavaScript co...”
  You can put JavaScript code in the console, just to try it out.
  Button navigates to signup page
  (3 votes)