’Query quest · jQuery, jQ-what‽

’Query quest

What & why

Since jQuery is a bunch of pre-written JavaScript we need to know what’s available.

Searching through & understanding documentation is a critical component of being a developer.

Effectively finding what you need will help you write the code you want.

Set up

Form into pairs
Get a pencil & a piece of paper
Work through each problem by finding a suitable pre-built function in the jQuery documentation
We’ll discuss the answers at the end

https://api.jquery.com/ ➔

Find a jQuery function to make the following change in the HTML:

HTML

<a class="btn">Button!</a>

⬇

<a class="btn btn-ghost">Button!</a>

1

Find a single jQuery function that could make both these changes:

HTML

<a class="btn">Button!</a>

⬇

<a class="btn btn-ghost">Button!</a>

⬇

<a class="btn">Button!</a>

2

Find a jQuery function to add new HTML to the following location:

HTML

<ul>
  <li>List item</li>
</ul>

⬇

<ul>
  <li>List item</li>
  <li>New list item</li>
</ul>

3

Find a jQuery function to make the following change in the HTML:

HTML

<img src="images/thing.jpg" alt="">

⬇

<img src="images/thing-big.jpg" alt="">

4

Find a jQuery function to make the following change in the HTML:

HTML

<div class="tab" hidden></div>

⬇

<div class="tab"></div>

5

Find a jQuery function to change all of these items individually:

HTML

<ul>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

⬇

<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

6

Find a jQuery function that will wait for a user to click on this element:

HTML

<button id="the-btn">Click me!</button>

7

Find a jQuery function that will download a separate HTML file and insert it:

HTML

<div class="tab"></div>

⬇

<div class="tab">
  <h2>Stegosaurus</h2>
  <p>The Stegosaurus is know for its large back plates and spiky tail.</p>
</div>

8

Find a jQuery function that gets the information inside the <div>:

HTML

<div class="tab">
  <h2>Brontosaurus</h2>
  <p>The Brontosaurus is controversial dinosaur—both real and not real.</p>
</div>

9

You’ve selected the <h2> with jQuery, find a function that gets the surrounding element:

HTML

<div class="tab">
  <h2>Ankylosaurus</h2>
</div>

10

Find a jQuery function that gets the information a user typed into the input field:

HTML

<label for="name">Name</label>
<input id="name">

11

Find a jQuery function that will wait for the user to send the form information:

HTML

<form method="post" action="contact.php">
  <div>
    <label for="name">Name</label>
    <input id="name">
  </div>

  <button type="submit">Send</button>
</form>

12