’Query quest

An activity to help understand online documentation by presenting a series of quests that can only be solved by digging through the documentation.

Go fullscreen: ⌃⌥F

’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

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

https://api.jquery.com/ ➔

12:00

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
Start

’Query quest

An activity to help understand online documentation by presenting a series of quests that can only be solved by digging through the documentation.