For this exercise, we're going to use a table of the Presidents of the United States of America.
Let's try out a few things, just to get our hands dirty. We'll use the console in the Chrome developer tools to validate our work.
- Select each
tr
element. - Select the first
tr
element only. - Select the third
tr
element only. - Select all of the elements with the class of
name
. - Select all of the elements with either the class of
name
orterm
. - Select all of the checked—umm—checkboxes. (You'll probably want to check some checkboxes first.)
- Select all of the
td
elements with the class ofnumber
that appear in a row of atr
with the class ofwhig
.
Once we have an element in our sites, we probably want to do something with it, right?
In this case, let's add some CSS styling. We can add and remove classes pretty easily in jQuery.
$('.federalist').addClass('red');
$('.federalist').removeClass('red');
Keeping track of state is hard. jQuery is here to help. What if we were in a position where we want to add a class if an element had it, but remove it if it didn't? jQuery's hasClass
method is certainly helpful in this case.
$('.federalist').hasClass('federalist'); // Returns true, obviously.
But, it seems like this is a common pattern and there should be a better way to do this, right?
The other option is to use toggleClass
, which will either add or remove the class depending on whether or not the class currently exists.
$('.federalist').toggleClass('red');
(Do this like 17 times for good measure.)
- Add the class of
red
to all of the Republicans. - Add the class of
blue
to all of the Democrats. - Add the class of
yellow
to the term column of the table. - Take all the whig presidents and give them a purple background and white text.
Let's talk about a few DOM traversal methods.
Here are some of the all-stars of the DOM traversing world:
The parent()
method will take the currently selected element and go one level up the DOM tree.
See the Pen jQuery Parent by Amy Holt (@ameseee) on CodePen.
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>This one will include all of the parents—all the way up to the <body>
of the page. Additionally, you can pass it a selector. $('.some-selector').parents('.active')
will traverse up the DOM, but only return the elements with the class of .active
.
See the Pen jQuery Parents by Amy Holt (@ameseee) on CodePen.
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>This method returns all of the direct childen of the given selection. It will not search their children. Like parents()
, children()
will also take a selector. $('.some-selector').children('.active')
will go through the children of the current query and only return the elements with the class of .active
.
See the Pen jQuery Children by Amy Holt (@ameseee) on CodePen.
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>siblings()
will select all of the sibling elements based on the current query. Like its friends, it will also take a selector if you're polite.
See the Pen jQuery Siblings by Amy Holt (@ameseee) on CodePen.
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>One you have queried for some elements using jQuery, you can use find()
to drill down a little deeper.
It's useful to think of find()
as a more powerful alternative for children()
. The children()
method will look only one level down the tree. find()
will search the children, the grandchildren, the great-grandchildren, and so on. The method will look at anything you currently have selected and then search within those results.
See the Pen jQuery Find by Amy Holt (@ameseee) on CodePen.
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>Which one do you use? It depends, do you want to traverse all the way down the tree or just down one level.
- Add the
green
class to anyone who served right after a president who died. - Find all of the presidents who only served one term and add the class
red
. - Add the class of
blue
to the parent of a checked checkbox. - Add the class of
yellow
to the siblings of the parent (td
, in this case) of an unchecked checkbox.
Let's take a look at some approaches of changing content in the DOM.
text()
is like using innerText
or textContent
. There is an important difference. The vanilla DOM manipulation tools allow you to assign the new value to innerText
. The jQuery methods on the other hand work on everything as if it were a method.
Let's compare and contrast.
var vanilla = document.querySelector('.some-element');
var jq = $('.some-element');
vanilla.textContent = 'New text.';
jq.text('New text.');
html()
is to text()
as innerHTML
is to innerText
. Basically, change the HTML contents of a bigger element, not just the text of it. As a fun experiment, select an element and try to replace the contents to <script>alert('HACKED!');</script>
using both text()
and html()
. Let me know how it goes for you.
html()
replaces the entire contents of an element. append()
adds new content onto the end of it.
html()
replaces the entire contents of an element. prepend()
adds new content onto the beginning of it.
In order to take both append()
and prepend()
for a spin, let's try the following code in the exercise below.
See the Pen Append/Prepend by Amy Holt (@ameseee) on CodePen.
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>- Find all of the presidents who died in office (hint: they have a
died
class on theirtr
). - Append
<span class="died">(Died)<span>
to the theterm
column. - Bonus: Add a radio button before the number in each row.