intro jQuery
In this lab, we’ll talk about DOM manipulation using jQuery.
jQuery
jQuery was first introduced in 2006, and is an extension of the Javascript language. It’s designed to make it much easier to navigate the DOM than Javascript by itself, and it’s extremely popular. I’d recommend using it on really any site where you’re going to be integrating Javascript to manpulate the DOM.
Adding jQuery to your project is super simple. All you need is to include this line in the header of your HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
This requests the jQuery file from Google, and adds it to your page just like a normal Javascript file. You can also download the file here, and add it to your code just like you would a normal JS file.
To test out jQuery, we’re going to take the file we were looking at last week, and add jQuery to it instead.
Q: How do I know when I’m looking at jQuery, rather than just Javascript?
A: You’ll see a ‘$’ sign in the code. The $ doesn’t do anything by itself: all is means is that the stuff coming after that symbol will be jQuery, rather than just plain Javascript. I used to find these pretty offputting in code, but they become a lot friendlier once you’re used to them!
Javascript file placement
Make sure you add the jQuery script tag above the script tag for the file you want to use it in! Remember how HTML reads JS files in in order? This applies to things like jQuery too: you can’t use any functions in a file that the HTML hasn’t loaded yet. It’s always worth putting library files like this at the top of your code.
There’s a second, more subtle issue you can have with JS files, where things that are meant to manipulate DOM elements just …don’t work? This is often because the page hasn’t loaded before the JS file has been. There are two ways to get around this:
- put your JS file after the page body (your ‘footer’). This way, the browser has read in the whole document before it reads your file.
2. The ‘proper’ way, if you’re using jQuery: wrap all the code that gets executed as the page loads in this:
$( document ).ready(function() {
//your code goes here!
});
This doesn’t run until the whole page has loaded, and so you can put it in your <head> tag without worry! (you can also do this in vanilla js using ‘window.onload’)
jQuery selectors
This is the good stuff! Remember how last week we were writing out document.getElementById('heading') just to get a single element? Selectors in jQuery are way more convenient. They operate using pretty similar syntax to CSS. For example, to select an element with the id heading:
$('#heading')
What if we wanted to change some CSS using jQuery? Last week, we used this Javascript code:
function changeHeading () {
document.getElementById('heading').style.backgroundColor="lightblue"
}
If we wanted to do the same thing in jQuery we could use:
function changeHeading () {
$('#heading').css({"background-color": "yellow"})
}
What’s so great about this? Well, first of all it’s shorter. But also, it’s kind of neat: it lets us write CSS inside the brackets, instead of having to write out the special Javascript version of the same term. Note that things like functions stay the same when you use jQuery: it’s still just javascript but now with some extra tools to manipulate the DOM.
Just like CSS, we can also select all HTML elements of a type, and select elements by class.
For example, the following code will give all <p> elements a pink background:
$("p").css({"background-color": "pink"});
While this will make all elements of class ‘green’, green:
$(".green").css({"background-color": "limegreen"});
Notice how, just like CSS, we use a ‘#’ to select by id, and a ‘.’ to select by class (and nothing at all to select by element type!).
jQuery methods
There are some neat in-built functions in jQuery that we can use to manipulate DOM elements without using CSS. For example, the following function will hide all p elements on the page
function hideParagraphs () {
$("p").hide()
}
And this function will show them all again:
function showParagraphs () {
$("p").show()
}
We can actually condense both these things into a single function, using the toggle() method. This will toggle between showing and hiding the elements
function toggleParagraphs () {
$("p").hide()
}
jQuery events
The other nice thing about jQuery is that it lets us handle page events very neatly. Say we wanted something to happen every time someone clicked a <p> element. Instead of giving each element an HTML onclick event property, we can just put the following in our Javascript page:
$("p").click(function(){
$("p").css({"background-color": "pink"});
});
This changes the background-color property of all HTML elements of type <p>.
Q: What’s up with this (function(){ } thing?
A: This is something called an “anonymous function”. This is going to become very useful to us in a second, but for now, think of it as a function that’s only ever going to be used by one process, so it doesn’t need a proper name. It uses the keyword function() to tell the browser it’s a function, and all the code gets put inside the curly braces.
‘this’
What if we only wanted to change the p element we clicked on?
For this, we can use a nifty little thing called the this keyword. Essentially, this stands in for this thing that we're currently doing something to. It crops up all over JS, and it can be a really useful tool for writing interactive code.
$("p").click(function(){
$(this).css({"background-color": "pink"});
});
Q: Why isn’t this in quotation marks?
A: It’s a variable – something that can be replaced with whatever we’re thinking about right now. In this case, it stands in for the element we just clicked on.
Q: Where did this come from?
A: this gets made every time we click a p element. It’s different each time, depending on the element we clicked on! The anonymous function is what allows us to use this: if we were calling a separate function every time we clicked a p element, it wouldn’t know what this was.
Tutorial: functions revisited
We’re going to try and perfom the role of functions together!
-
event listener: you’re now a HTML element, congrats! Take your random element out of the bag, and remember it’s properties. watch out for your event to get triggered!
-
functions: now, instead of having the javascript inline, we’re going to use functions, and variables. Whoever’s function it is will perform the action. Whenever someone points at you, they’ll tell you the values of the variables going into your function