Need to catch up? Here’s your recap below.
1: Starting at index.html
2: Adding some style with CSS
4: What is Bootstrap?
This week let’s have a chat about jQuery.
The jQuery library is served either via a local file in your website file system or via a CDN – or Content Distribution Network. Using a CDN means you don’t need to host the library yourself, but you need to monitor the support of the version. If you don’t, the version you are using might become deprecated or unsupported and you’ll have some fun times ahead! If you download the repo, you have to do the management and upgrades yourself, but your link will never "disappear". Check out all the ways to access jQuery on their Downloads page.
While you are on the download page, why don’t you grab the uncompressed, Development version of jQuery. Save it to your web page’s directory. It can be on the same level as the index file, or in a resources file.
jQuery is one of the building blocks of many front-end frameworks, including SAPUI5. (Basically, all of this is relevant if you are building a UI5 app )
Now that i’ve babbled about all that non-sense, let’s actually see it in action.
Open up your index.htm file for your web page that we’ve been working on. (I know its been a while, so I’ll give you a minute to find it.) Make sure you have jQuery download, or if you feel comfortable doing so, you can use a CDN.
We can load in the library by calling a script tag in the header just like we did with the js files we did a couple weeks ago. If you downloaded the jQuery Development library and saved the file in the top level folder of you web app, your script tag should look a little something like this.
If you are accessing it via CDN, the src will be a URL. Make sure to save the changes.
Now, we can use the jQuery library!
Let’ see how much jQuery simplifies things for us. Open up your script.js file.
Rename your onPictureButtonClicked function to onOldPictureButtonClicked or something like that. We want to be able to reuse the function name, but let’s keep the old code for reference.
Now create a new onPictureButtonClicked function.
To access the jQuery library, we can use the $ token. This is a shortcut for calling jQuery functions. Inside the function, make a call to toggle the image. Here’s how you do that:
Save your changes and open the index.html file in the browser. Clicking the button still does the same thing, but with 1 line of code!
How did that work?
With jQuery, we can shortcut the getElementById call using the selectors.
We can use selectors to get tags, class, or ids. In our example, we prepended myImage, which is our ID for our image, with the #. # is used to denote ID. We want to select anything with ID myImage. If you want to select based on css class (so from the attribute), use a . (period). To select a tag, don’t add anything.
See how simplified accessing the DOM is now?
We always want our text attributes to reflect what the item is doing, so go into your index.html file in an editor. Update the text of the button from Load Picture to Toggle Picture. Save your changes.
jQuery also makes DOM traversal easier. Let’s take a look at how to target related tags. And by related, I do mean relatives
Let’s add a new button to our index.html file. Under the H1 tag, create a new button. This button will have the text value of Border Div’s Children. What it will do is a wrap a border around all elements that are inside a div tag! The button will need a onclick callback function. And it is always a good idea to add a unique ID. Don’t remember how to add a button? You can use the code below.
Save your changes!
Now we need to actually implement the callback function so let’s head over to the script.js file.
Create a new empty function for the new button’s callback. If you need some help with that, copy the code below.
Now we need to actually border all the div’s children. How do you we do that when all the children are different types, classes, and ids?
That’s what makes jQuery so helpful! It has prebuilt methods to help us traverse the DOM tree. jQuery has a children method which will retrieve all tags that are between the opening and closing tag for that element. How do we get the children? By calling the .children() function from the selector, we can target all children of the select item. That looks like this: