Main content
Computer programming
Course: Computer programming > Unit 7
Lesson 3: DOM modification with jQueryProject: Extreme Makeover, Webpage Edition
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?
- 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"(20 votes)- 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.(33 votes)
- 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?!(1 vote)
- 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);(6 votes)
- 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 ?(1 vote)- 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.(7 votes)
- 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?(4 votes)
- 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.(1 vote)
- On the browser developer tools how can we access JavaScript like HTML elements?(2 votes)
- Does manipulating the content of a webpage using jQuery ultimately changes the content of the webpage for every user loading the same webpage online?(2 votes)
- No, it would be on a per-user basis.(2 votes)
- 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?(1 vote)
- You could definitely do that, with something like follows:
$("img").attr("src", "<link to some image>");
(4 votes)
- 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 thetext
function didn't work. What functions do work in Google?(2 votes)- Try using vanilla Javascript.(1 vote)
- I tried in chrome but it showed that attr is not a function.How can I fix that?(2 votes)
- in the broswer inspect tool where do you put the javascript code(1 vote)
- You can put JavaScript code in the console, just to try it out.(3 votes)