💲 jQuery Cheatsheet

🔌Your plug to a high-level collection of all the useful functionality jQuery has to offer.

Introduction to jQuery
Learn How Script Tags and Document Ready Work
Target HTML Elements with Selectors Using jQuery's $
Target Elements by Class Using jQuery with addClass()
Target Elements by id Using jQuery
Target the Same Element with Multiple jQuery Selectors
Remove Classes from an Element with jQuery's removeClass()
Change the CSS of an Element Using jQuery's css()
Disable an Element Using jQuery's .prop()
Change Text Inside an Element Using jQuery's html() and text()
Remove an Element Using jQuery's remove()
Use appendTo() to Move Elements with jQuery
Clone an Element Using jQuery's clone()
Target the Parent of an Element Using jQuery's parent()
Target the Children of an Element Using jQuery's children()
Target a Specific Child of an Element Using jQuery's target:nth-child(n)
Target Even Elements Using jQuery :odd or :even selectors
Use the body Element to Modify the Entire Page

Introduction to jQuery

jQuery is one of the many libraries for JavaScript. It is designed to simplify scripting done on the client side. jQuery's most recognizable characteristic is its dollar sign ($) syntax.

With it, you can easily manipulate elements, create animations and handle input events.

⬆ Back to top

Learn How Script Tags and Document Ready Work

Now we're ready to learn jQuery, the most popular JavaScript tool of all time.

Before we can start using jQuery, we need to add some things to our HTML.

First, add a script element at the top of your page. Be sure to close it on the following line.

Your browser will run any JavaScript inside a script element, including jQuery.

Challenge:

Inside your script element, add this code: $(document).ready(function() { to your script. Then close it on the following line (still inside your script element) with: });

We'll learn more about functions later. The important thing to know is that code you put inside this function will run as soon as your browser has loaded your page.

This is important because without your document ready function, your code may run before your HTML is rendered, which would cause bugs.

<!-- Only change code below this line. -->



<!-- Only change code above this line. -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

Solution:

Before you reveal the answer:

You should create a script element making sure it is valid and has a closing tag.
You should add $(document).ready(function() { to the beginning of your script element.
You should close your $(document).ready(function() { function with });

Answer

<!-- Only change code below this line. -->
<script>
  $(document).ready(function() {

  });
</script>
<!-- Only change code above this line. -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

⬆ Back to top

💲 Target HTML Elements with Selectors Using jQuery's `$`

Now we have a document ready function.

Now let's write our first jQuery statement. All jQuery functions start with a $, usually referred to as a dollar sign operator, or as bling.

jQuery often selects an HTML element with a selector, then does something to that element.

Challenge:

Make all of your button elements bounce. Just add this code inside your document ready function:

$("button").addClass("animated bounce");

Note that we've already included both the jQuery library and the Animate.css library in the background so that you can use them in the editor. So you are using jQuery to apply the Animate.css bounce class to your button elements.

<!-- Only change code below this line. -->
<script>
  $(document).ready(function() {

  });
</script>

<!-- Only change code above this line. -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

Solution:

Before you reveal the answer:

You should use the jQuery addClass() function to give the classes animated and bounce to your button elements.
You should only use jQuery to add these classes to the element.
Your jQuery code should be within the $(document).ready(); function.

Answer

<!-- Only change code below this line. -->

<script>
  $(document).ready(function() {
    $("button").addClass("animated bounce");
  });
</script>

<!-- Only change code above this line. -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

⬆ Back to top

⚉ Target Elements by Class Using jQuery with `addClass()`

You see how we made all of your button elements bounce? We selected them with $("button"), then we added some CSS classes to them with .addClass("animated bounce");.

You just used jQuery's .addClass() function, which allows you to add classes to elements.

For example, you can make all the elements with the class text-primary shake by adding the following to your document ready function:

$(".text-primary").addClass("animated shake");

Challenge:

Target your div elements with the class well by using the $(".well") selector.
Use jQuery's .addClass() function to add the classes animated and shake.

Note that, just like with CSS declarations, you type a . before the class's name.

<script>
  $(document).ready(function() {
    $("button").addClass("animated bounce");
  });
</script>

<!-- Only change code above this line. -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

Solution:

Before you reveal the answer:

You should use the jQuery addClass() function to give the classes animated and shake to all your elements with the class well.
You should only use jQuery to add these classes to the element.

Answer

<!-- Only change code below this line. -->

<script>
  $(document).ready(function() {
    $(".well").addClass("animated shake");
  });
</script>
<!-- Only change code above this line. -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

⬆ Back to top

#️⃣ Target Elements by `id` Using jQuery

You can also target elements by their id attributes.

First target your button element with the id target3 by using the $("#target3") selector.

Note that, just like with CSS declarations, you type a # before the id's name.

Then use jQuery's .addClass() function to add the classes animated and fadeOut.

Here's how you'd make the button element with the id target6 fade out:

$("#target6").addClass("animated fadeOut").

Solution:

Before you reveal the answer:

You should select the button element with the id of target3 and use the jQuery addClass() function to give it the class of animated.
You should target the element with the id target3 and use the jQuery addClass() function to give it the class fadeOut.
You should only use jQuery to add these classes to the element.

Answer

<script>
  $(document).ready(function() {
    $("#target3").addClass("animated fadeout");
  });
</script>

<!-- Only change code above this line. -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

⬆ Back to top

💱 Target the Same Element with Multiple jQuery Selectors

Now you know three ways of targeting elements: by type: $("button"), by class: $(".btn"), and by id $("#target1").

Although it is possible to add multiple classes in a single .addClass() call, let's add them to the same element in three separate ways.

Challenge:

Using .addClass(), add only one class at a time to the same element, three different ways:

Add the animated class to all elements with type button.
Add the shake class to all the buttons with class .btn.
Add the btn-primary class to the button with id #target1.

Note You should only be targeting one element and adding only one class at a time. Altogether, your three individual selectors will end up adding the three classes shake, animated, and btn-primary to #target1.

<!-- Only change code below this line. -->

<script>
  $(document).ready(function() {

  });
</script>

<!-- Only change code above this line. -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

Solution:

Your code should use the $("button") selector.
Your code should use the $(".btn") selector.
Your code should use the $("#target1") selector.
You should only add one class with each of your three selectors.
Your #target1 element should have the classes animated‚ shake and btn-primary.
You should only use jQuery to add these classes to the element.

Before you reveal the answer:

Answer

<!-- Only change code below this line. -->

<script>
  $(document).ready(function() {
    $("button").addClass("animated");
    $(".btn").addClass("shake");
    $("#target1").addClass("btn-primary");
  });
</script>

<!-- Only change code above this line. -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

⬆ Back to top

✂️ Remove Classes from an Element with jQuery's `removeClass()`

In the same way you can add classes to an element with jQuery's addClass() function, you can remove them with jQuery's removeClass() function.

Here's how you would do this for a specific button:

$("#target2").removeClass("btn-default");

Challenge:

Remove the btn-default class from all of our button elements.

<!-- Only change code below this line. -->
<script>
  $(document).ready(function() {
    $("button").addClass("animated bounce");
    $(".well").addClass("animated shake");
    $("#target3").addClass("animated fadeOut");

  });
</script>

<!-- Only change code above this line. -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

Solution:

Before you reveal the answer:

The btn-default class should be removed from all of your button elements.
You should only use jQuery to remove this class from the element.
You should only remove the btn-default class.

Answer

<!-- Only change code below this line. -->
<script>
  $(document).ready(function() {
    $("button").removeClass("btn-default");
  });
</script>

<!-- Only change code above this line. -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

⬆ Back to top

🍭 Change the CSS of an Element Using jQuery's `css()`

We can also change the CSS of an HTML element directly with jQuery.

jQuery has a function called .css() that allows you to change the CSS of an element.

Here's how we would change its color to blue:

$("#target1").css("color", "blue");

This is slightly different from a normal CSS declaration, because the CSS property and its value are in quotes, and separated with a comma instead of a colon.

Challenge:

Delete your jQuery selectors, leaving an empty document ready function.
Select target1 and change its color to red.

<!-- Only change code below this line. -->

<script>
  $(document).ready(function() {
    $("button").addClass("animated bounce");
    $(".well").addClass("animated shake");
    $("#target3").addClass("animated fadeOut");
    $("button").removeClass("btn-default");

  });
</script>

<!-- Only change code above this line. -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

Solution:

Before you reveal the answer:

Your target1 element should have red text.
You should only use jQuery to add these classes to the element.

Answer

<!-- Only change code below this line. -->

<script>
  $(document).ready(function() {
    $("#target1").css("color", "red");
  });
</script>

<!-- Only change code above this line. -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

⬆ Back to top

🦼 Disable an Element Using jQuery's `.prop()`

You can also change the non-CSS properties of HTML elements with jQuery. For example, you can disable buttons.

When you disable a button, it will become grayed-out and can no longer be clicked.

jQuery has a function called .prop() that allows you to adjust the properties of elements.

Here's how you would disable all buttons:

$("button").prop("disabled", true);

Challenge:

Disable only the target1 button.

<!-- Only change code below this line. -->

<script>
  $(document).ready(function() {
    $("#target1").css("color", "red");

  });
</script>

<!-- Only change code above this line. -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

Solution:

Before you reveal the answer:

Your target1 button should be disabled.
No other buttons should be disabled.
You should only use jQuery to add these classes to the element.

Answer

<!-- Only change code below this line. -->

<script>
  $(document).ready(function() {
    $("#target1").prop("disabled", true);

  });
</script>

<!-- Only change code above this line. -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

⬆ Back to top

🚧 Change Text Inside an Element Using jQuery's `html()` and `text()`

Using jQuery, you can change the text between the start and end tags of an element. You can even change HTML markup.

jQuery has a function called .html() that lets you add HTML tags and text within an element. Any content previously within the element will be completely replaced with the content you provide using this function.

Here's how you would rewrite and emphasize the text of our heading:

$("h3").html("<em>jQuery Playground</em>");

jQuery also has a similar function called .text() that only alters text without adding tags. In other words, this function will not evaluate any HTML tags passed to it, but will instead treat it as the text you want to replace the existing content with.

Challenge:

Change the button with id target4 by emphasizing its text.

View the MDN web docs for to learn the difference between <i> and <em> and their uses.

Note that while the <i> tag has traditionally been used to emphasize text, it has since been adopted for use as a tag for icons. The <em> tag is now widely accepted as the tag for emphasis. Either will work for this challenge.

 <script> $(document).ready(function() { $("#target1").css("color", "red"); }); </script>  <div class="container-fluid"> <h3 class="text-primary text-center">jQuery Playground</h3> <div class="row"> <div class="col-xs-6"> <h4>#left-well</h4> <div class="well" id="left-well"> <button class="btn btn-default target" id="target1">#target1</button> <button class="btn btn-default target" id="target2">#target2</button> <button class="btn btn-default target" id="target3">#target3</button> </div> </div> <div class="col-xs-6"> <h4>#right-well</h4> <div class="well" id="right-well"> <button class="btn btn-default target" id="target4">#target4</button> <button class="btn btn-default target" id="target5">#target5</button> <button class="btn btn-default target" id="target6">#target6</button> </div> </div> </div> </div>

Solution:

Before you reveal the answer:

You should emphasize the text in your target4 button by adding HTML tags.

The text should otherwise remain unchanged.

You should not alter any other text.

You should be using .html() and not .text().

You should select button id="target4" with jQuery.

Answer

 <script> $(document).ready(function() { $("#target4").html("<em>#target4</em>"); }); </script>  <div class="container-fluid"> <h3 class="text-primary text-center">jQuery Playground</h3> <div class="row"> <div class="col-xs-6"> <h4>#left-well</h4> <div class="well" id="left-well"> <button class="btn btn-default target" id="target1">#target1</button> <button class="btn btn-default target" id="target2">#target2</button> <button class="btn btn-default target" id="target3">#target3</button> </div> </div> <div class="col-xs-6"> <h4>#right-well</h4> <div class="well" id="right-well"> <button class="btn btn-default target" id="target4">#target4</button> <button class="btn btn-default target" id="target5">#target5</button> <button class="btn btn-default target" id="target6">#target6</button> </div> </div> </div> </div>

⬆ Back to top

➖ Remove an Element Using jQuery's remove()

Now let's remove an HTML element from your page using jQuery.

jQuery has a function called .remove() that will remove an HTML element entirely

Challenge:

Remove element target4 from the page by using the .remove() function.

 <script> $(document).ready(function() { $("#target1").css("color", "red"); $("#target1").prop("disabled", true); }); </script>  <div class="container-fluid"> <h3 class="text-primary text-center">jQuery Playground</h3> <div class="row"> <div class="col-xs-6"> <h4>#left-well</h4> <div class="well" id="left-well"> <button class="btn btn-default target" id="target1">#target1</button> <button class="btn btn-default target" id="target2">#target2</button> <button class="btn btn-default target" id="target3">#target3</button> </div> </div> <div class="col-xs-6"> <h4>#right-well</h4> <div class="well" id="right-well"> <button class="btn btn-default target" id="target4">#target4</button> <button class="btn btn-default target" id="target5">#target5</button> <button class="btn btn-default target" id="target6">#target6</button> </div> </div> </div> </div>

Solution:

Before you reveal the answer:

You should use jQuery to remove your target4 element from your page.

You should only use jQuery to remove this element.

Answer

 <script> $(document).ready(function() { $("#target1").css("color", "red"); $("#target1").prop("disabled", true); $("#target4").remove(); }); </script>  <div class="container-fluid"> <h3 class="text-primary text-center">jQuery Playground</h3> <div class="row"> <div class="col-xs-6"> <h4>#left-well</h4> <div class="well" id="left-well"> <button class="btn btn-default target" id="target1">#target1</button> <button class="btn btn-default target" id="target2">#target2</button> <button class="btn btn-default target" id="target3">#target3</button> </div> </div> <div class="col-xs-6"> <h4>#right-well</h4> <div class="well" id="right-well"> <button class="btn btn-default target" id="target4">#target4</button> <button class="btn btn-default target" id="target5">#target5</button> <button class="btn btn-default target" id="target6">#target6</button> </div> </div> </div> </div>

⬆ Back to top

➕ Use appendTo() to Move Elements with jQuery

Now let's try moving elements from one div to another.

jQuery has a function called appendTo() that allows you to select HTML elements and append them to another element.

For example, if we wanted to move target4 from our right well to our left well, we would use:

$("#target4").appendTo("#left-well");

Challenge:

Move your target2 element from your left-well to your right-well.

 <script> $(document).ready(function() { $("#target1").css("color", "red"); $("#target1").prop("disabled", true); $("#target4").remove(); }); </script>  <div class="container-fluid"> <h3 class="text-primary text-center">jQuery Playground</h3> <div class="row"> <div class="col-xs-6"> <h4>#left-well</h4> <div class="well" id="left-well"> <button class="btn btn-default target" id="target1">#target1</button> <button class="btn btn-default target" id="target2">#target2</button> <button class="btn btn-default target" id="target3">#target3</button> </div> </div> <div class="col-xs-6"> <h4>#right-well</h4> <div class="well" id="right-well"> <button class="btn btn-default target" id="target4">#target4</button> <button class="btn btn-default target" id="target5">#target5</button> <button class="btn btn-default target" id="target6">#target6</button> </div> </div> </div> </div>

Solution:

Before you reveal the answer:

Your target2 element should not be inside your left-well.

Your target2 element should be inside your right-well.

You should only use jQuery to move these elements.

Answer

 <script> $(document).ready(function() { $("#target1").css("color", "red"); $("#target1").prop("disabled", true); $("#target4").remove(); $("#target2").appendTo("#right-well"); }); </script>  <div class="container-fluid"> <h3 class="text-primary text-center">jQuery Playground</h3> <div class="row"> <div class="col-xs-6"> <h4>#left-well</h4> <div class="well" id="left-well"> <button class="btn btn-default target" id="target1">#target1</button> <button class="btn btn-default target" id="target2">#target2</button> <button class="btn btn-default target" id="target3">#target3</button> </div> </div> <div class="col-xs-6"> <h4>#right-well</h4> <div class="well" id="right-well"> <button class="btn btn-default target" id="target4">#target4</button> <button class="btn btn-default target" id="target5">#target5</button> <button class="btn btn-default target" id="target6">#target6</button> </div> </div> </div> </div>

⬆ Back to top

📷 Clone an Element Using jQuery's clone()

In addition to moving elements, you can also copy them from one place to another.

jQuery has a function called clone() that makes a copy of an element.

For example, if we wanted to copy target2 from our left-well to our right-well, we would use:

$("#target2").clone().appendTo("#right-well");

 <script> $(document).ready(function() { $("#target1").css("color", "red"); $("#target1").prop("disabled", true); $("#target4").remove(); $("#target2").appendTo("#right-well"); }); </script>  <div class="container-fluid"> <h3 class="text-primary text-center">jQuery Playground</h3> <div class="row"> <div class="col-xs-6"> <h4>#left-well</h4> <div class="well" id="left-well"> <button class="btn btn-default target" id="target1">#target1</button> <button class="btn btn-default target" id="target2">#target2</button> <button class="btn btn-default target" id="target3">#target3</button> </div> </div> <div class="col-xs-6"> <h4>#right-well</h4> <div class="well" id="right-well"> <button class="btn btn-default target" id="target4">#target4</button> <button class="btn btn-default target" id="target5">#target5</button> <button class="btn btn-default target" id="target6">#target6</button> </div> </div> </div> </div>

Challenge:

Did you notice this involves sticking two jQuery functions together? This is called function chaining and it's a convenient way to get things done with jQuery.

Clone your target5 element and append it to your left-well.

Solution:

Before you reveal the answer:

Your target5 element should be inside your right-well.

A copy of your target5 element should also be inside your left-well.

You should only use jQuery to move these elements.

Answer

 <script> $(document).ready(function() { $("#target1").css("color", "red"); $("#target1").prop("disabled", true); $("#target4").remove(); $("#target2").appendTo("#right-well"); $("#target5").clone().appendTo("#left-well"); }); </script>  <div class="container-fluid"> <h3 class="text-primary text-center">jQuery Playground</h3> <div class="row"> <div class="col-xs-6"> <h4>#left-well</h4> <div class="well" id="left-well"> <button class="btn btn-default target" id="target1">#target1</button> <button class="btn btn-default target" id="target2">#target2</button> <button class="btn btn-default target" id="target3">#target3</button> </div> </div> <div class="col-xs-6"> <h4>#right-well</h4> <div class="well" id="right-well"> <button class="btn btn-default target" id="target4">#target4</button> <button class="btn btn-default target" id="target5">#target5</button> <button class="btn btn-default target" id="target6">#target6</button> </div> </div> </div> </div>

⬆ Back to top

💑 Target the Parent of an Element Using jQuery's parent()

Every HTML element has a parent element from which it inherits properties.

For example, your jQuery Playground h3 element has the parent element of <div class="container-fluid">, which itself has the parent body.

jQuery has a function called parent() that allows you to access the parent of whichever element you've selected.

Here's an example of how you would use the parent() function if you wanted to give the parent element of the left-well element a background color of blue:

$("#left-well").parent().css("background-color", "blue")

Challenge:

Give the parent of the #target1 element a background-color of red.

 <script> $(document).ready(function() { $("#target1").css("color", "red"); $("#target1").prop("disabled", true); $("#target4").remove(); $("#target2").appendTo("#right-well"); $("#target5").clone().appendTo("#left-well"); }); </script>  <body> <div class="container-fluid"> <h3 class="text-primary text-center">jQuery Playground</h3> <div class="row"> <div class="col-xs-6"> <h4>#left-well</h4> <div class="well" id="left-well"> <button class="btn btn-default target" id="target1">#target1</button> <button class="btn btn-default target" id="target2">#target2</button> <button class="btn btn-default target" id="target3">#target3</button> </div> </div> <div class="col-xs-6"> <h4>#right-well</h4> <div class="well" id="right-well"> <button class="btn btn-default target" id="target4">#target4</button> <button class="btn btn-default target" id="target5">#target5</button> <button class="btn btn-default target" id="target6">#target6</button> </div> </div> </div> </div> </body>

Solution:

Before you reveal the answer:

Your left-well element should have a red background.

You should use the .parent() function to modify this element.

The .parent() method should be called on the #target1 element.

You should only use jQuery to add these classes to the element.

Answer

 <script> $(document).ready(function() { $("#target1").css("color", "red"); $("#target1").prop("disabled", true); $("#target4").remove(); $("#target2").appendTo("#right-well"); $("#target5").clone().appendTo("#left-well"); $("#target1").parent().css("background-color", "red"); }); </script>  <body> <div class="container-fluid"> <h3 class="text-primary text-center">jQuery Playground</h3> <div class="row"> <div class="col-xs-6"> <h4>#left-well</h4> <div class="well" id="left-well"> <button class="btn btn-default target" id="target1">#target1</button> <button class="btn btn-default target" id="target2">#target2</button> <button class="btn btn-default target" id="target3">#target3</button> </div> </div> <div class="col-xs-6"> <h4>#right-well</h4> <div class="well" id="right-well"> <button class="btn btn-default target" id="target4">#target4</button> <button class="btn btn-default target" id="target5">#target5</button> <button class="btn btn-default target" id="target6">#target6</button> </div> </div> </div> </div> </body>

⬆ Back to top

👩‍👧‍👦 Target the Children of an Element Using jQuery's children()

When HTML elements are placed one level below another they are called children of that element. For example, the button elements in this challenge with the text "#target1", "#target2", and "#target3" are all children of the <div class="well" id="left-well"> element.

jQuery has a function called children() that allows you to access the children of whichever element you've selected.

Here's an example of how you would use the children() function to give the children of your left-well element the color blue:

$("#left-well").children().css("color", "blue");

Challenge:

Give all the children of your right-well element the color orange.

 <script> $(document).ready(function() { $("#target1").css("color", "red"); $("#target1").prop("disabled", true); $("#target4").remove(); $("#target2").appendTo("#right-well"); $("#target5").clone().appendTo("#left-well"); $("#target1").parent().css("background-color", "red"); }); </script>  <div class="container-fluid"> <h3 class="text-primary text-center">jQuery Playground</h3> <div class="row"> <div class="col-xs-6"> <h4>#left-well</h4> <div class="well" id="left-well"> <button class="btn btn-default target" id="target1">#target1</button> <button class="btn btn-default target" id="target2">#target2</button> <button class="btn btn-default target" id="target3">#target3</button> </div> </div> <div class="col-xs-6"> <h4>#right-well</h4> <div class="well" id="right-well"> <button class="btn btn-default target" id="target4">#target4</button> <button class="btn btn-default target" id="target5">#target5</button> <button class="btn btn-default target" id="target6">#target6</button> </div> </div> </div> </div>

Solution:

Before you reveal the answer:

All children of #right-well should have orange text.

You should use the children() function to modify these elements.

You should only use jQuery to add these classes to the element.

Answer

 <script> $(document).ready(function() { $("#target1").css("color", "red"); $("#target1").prop("disabled", true); $("#target4").remove(); $("#target2").appendTo("#right-well"); $("#target5").clone().appendTo("#left-well"); $("#target1").parent().css("background-color", "red"); $("#right-well").children().css("color", "orange"); }); </script>  <div class="container-fluid"> <h3 class="text-primary text-center">jQuery Playground</h3> <div class="row"> <div class="col-xs-6"> <h4>#left-well</h4> <div class="well" id="left-well"> <button class="btn btn-default target" id="target1">#target1</button> <button class="btn btn-default target" id="target2">#target2</button> <button class="btn btn-default target" id="target3">#target3</button> </div> </div> <div class="col-xs-6"> <h4>#right-well</h4> <div class="well" id="right-well"> <button class="btn btn-default target" id="target4">#target4</button> <button class="btn btn-default target" id="target5">#target5</button> <button class="btn btn-default target" id="target6">#target6</button> </div> </div> </div> </div>

⬆ Back to top

👨‍👩‍👦 Target a Specific Child of an Element Using jQuery's target:nth-child(n)

You've seen why id attributes are so convenient for targeting with jQuery selectors. But you won't always have such neat ids to work with.

Fortunately, jQuery has some other tricks for targeting the right elements.

jQuery uses CSS Selectors to target elements. The target:nth-child(n) CSS selector allows you to select all the nth elements with the target class or element type.

Here's how you would give the third element in each well the bounce class:

$(".target:nth-child(3)").addClass("animated bounce");

Challenge:

Make the second child in each of your well elements bounce. You must select the elements' children with the target class.

 <script> $(document).ready(function() { $("#target1").css("color", "red"); $("#target1").prop("disabled", true); $("#target4").remove(); $("#target2").appendTo("#right-well"); $("#target5").clone().appendTo("#left-well"); $("#target1").parent().css("background-color", "red"); $("#right-well").children().css("color", "orange"); }); </script>  <div class="container-fluid"> <h3 class="text-primary text-center">jQuery Playground</h3> <div class="row"> <div class="col-xs-6"> <h4>#left-well</h4> <div class="well" id="left-well"> <button class="btn btn-default target" id="target1">#target1</button> <button class="btn btn-default target" id="target2">#target2</button> <button class="btn btn-default target" id="target3">#target3</button> </div> </div> <div class="col-xs-6"> <h4>#right-well</h4> <div class="well" id="right-well"> <button class="btn btn-default target" id="target4">#target4</button> <button class="btn btn-default target" id="target5">#target5</button> <button class="btn btn-default target" id="target6">#target6</button> </div> </div> </div> </div>

Solution:

Before you reveal the answer:

The second element in your target elements should bounce.

Only two elements should bounce.

You should use the :nth-child() selector to modify these elements.

You should only use jQuery to add these classes to the element.

Answer

 <script> $(document).ready(function() { $("#target1").css("color", "red"); $("#target1").prop("disabled", true); $("#target4").remove(); $("#target2").appendTo("#right-well"); $("#target5").clone().appendTo("#left-well"); $("#target1").parent().css("background-color", "red"); $("#right-well").children().css("color", "orange"); $(".target:nth-child(2)").addClass("animated bounce"); }); </script>  <div class="container-fluid"> <h3 class="text-primary text-center">jQuery Playground</h3> <div class="row"> <div class="col-xs-6"> <h4>#left-well</h4> <div class="well" id="left-well"> <button class="btn btn-default target" id="target1">#target1</button> <button class="btn btn-default target" id="target2">#target2</button> <button class="btn btn-default target" id="target3">#target3</button> </div> </div> <div class="col-xs-6"> <h4>#right-well</h4> <div class="well" id="right-well"> <button class="btn btn-default target" id="target4">#target4</button> <button class="btn btn-default target" id="target5">#target5</button> <button class="btn btn-default target" id="target6">#target6</button> </div> </div> </div> </div>

⬆ Back to top

➗ Target Even Elements Using jQuery :odd or :even selectors

You can also target elements based on their positions using :odd or :even selectors.

Note that jQuery is zero-indexed which means the first element in a selection has a position of 0. This can be a little confusing as, counter-intuitively, :odd selects the second element (position 1), fourth element (position 3), and so on.

Here's how you would target all the odd elements with class target and give them classes:

$(".target:odd").addClass("animated shake");

--

Challenge:

Try selecting all the even target elements and giving them the classes of animated and shake. Remember that even refers to the position of elements with a zero-based system in mind.

 <script> $(document).ready(function() { $("#target1").css("color", "red"); $("#target1").prop("disabled", true); $("#target4").remove(); $("#target2").appendTo("#right-well"); $("#target5").clone().appendTo("#left-well"); $("#target1").parent().css("background-color", "red"); $("#right-well").children().css("color", "orange"); $("#left-well").children().css("color", "green"); $(".target:nth-child(2)").addClass("animated bounce"); }); </script>  <div class="container-fluid"> <h3 class="text-primary text-center">jQuery Playground</h3> <div class="row"> <div class="col-xs-6"> <h4>#left-well</h4> <div class="well" id="left-well"> <button class="btn btn-default target" id="target1">#target1</button> <button class="btn btn-default target" id="target2">#target2</button> <button class="btn btn-default target" id="target3">#target3</button> </div> </div> <div class="col-xs-6"> <h4>#right-well</h4> <div class="well" id="right-well"> <button class="btn btn-default target" id="target4">#target4</button> <button class="btn btn-default target" id="target5">#target5</button> <button class="btn btn-default target" id="target6">#target6</button> </div> </div> </div> </div>

Solution:

Before you reveal the answer:

All of the target elements that jQuery considers to be even should shake.

You should use the :even selector to modify these elements.

You should only use jQuery to add these classes to the element.

Answer

 <script> $(document).ready(function() { $("#target1").css("color", "red"); $("#target1").prop("disabled", true); $("#target4").remove(); $("#target2").appendTo("#right-well"); $("#target5").clone().appendTo("#left-well"); $("#target1").parent().css("background-color", "red"); $("#right-well").children().css("color", "orange"); $("#left-well").children().css("color", "green"); $(".target:nth-child(2)").addClass("animated bounce"); $(".target:even").addClass("animated shake"); }); </script>  <div class="container-fluid"> <h3 class="text-primary text-center">jQuery Playground</h3> <div class="row"> <div class="col-xs-6"> <h4>#left-well</h4> <div class="well" id="left-well"> <button class="btn btn-default target" id="target1">#target1</button> <button class="btn btn-default target" id="target2">#target2</button> <button class="btn btn-default target" id="target3">#target3</button> </div> </div> <div class="col-xs-6"> <h4>#right-well</h4> <div class="well" id="right-well"> <button class="btn btn-default target" id="target4">#target4</button> <button class="btn btn-default target" id="target5">#target5</button> <button class="btn btn-default target" id="target6">#target6</button> </div> </div> </div> </div>

⬆ Back to top

🌐 Use the body Element to Modify the Entire Page

We're done playing with our jQuery playground. Let's tear it down!

jQuery can target the body element as well.

Here's how we would make the entire body fade out:

Challenge:

$("body").addClass("animated fadeOut");

But let's do something more dramatic. Add the classes animated and hinge to your body element.

 <script> $(document).ready(function() { $("#target1").css("color", "red"); $("#target1").prop("disabled", true); $("#target4").remove(); $("#target2").appendTo("#right-well"); $("#target5").clone().appendTo("#left-well"); $("#target1").parent().css("background-color", "red"); $("#right-well").children().css("color", "orange"); $("#left-well").children().css("color", "green"); $(".target:nth-child(2)").addClass("animated bounce"); $(".target:even").addClass("animated shake"); }); </script>  <div class="container-fluid"> <h3 class="text-primary text-center">jQuery Playground</h3> <div class="row"> <div class="col-xs-6"> <h4>#left-well</h4> <div class="well" id="left-well"> <button class="btn btn-default target" id="target1">#target1</button> <button class="btn btn-default target" id="target2">#target2</button> <button class="btn btn-default target" id="target3">#target3</button> </div> </div> <div class="col-xs-6"> <h4>#right-well</h4> <div class="well" id="right-well"> <button class="btn btn-default target" id="target4">#target4</button> <button class="btn btn-default target" id="target5">#target5</button> <button class="btn btn-default target" id="target6">#target6</button> </div> </div> </div> </div>

Solution:

Before you reveal the answer:

You should add the classes animated and hinge to your body element.

Answer

 <script> $(document).ready(function() { $("#target1").css("color", "red"); $("#target1").prop("disabled", true); $("#target4").remove(); $("#target2").appendTo("#right-well"); $("#target5").clone().appendTo("#left-well"); $("#target1").parent().css("background-color", "red"); $("#right-well").children().css("color", "orange"); $("#left-well").children().css("color", "green"); $(".target:nth-child(2)").addClass("animated bounce"); $(".target:even").addClass("animated shake"); $("body").addClass("animated hinge"); }); </script>  <div class="container-fluid"> <h3 class="text-primary text-center">jQuery Playground</h3> <div class="row"> <div class="col-xs-6"> <h4>#left-well</h4> <div class="well" id="left-well"> <button class="btn btn-default target" id="target1">#target1</button> <button class="btn btn-default target" id="target2">#target2</button> <button class="btn btn-default target" id="target3">#target3</button> </div> </div> <div class="col-xs-6"> <h4>#right-well</h4> <div class="well" id="right-well"> <button class="btn btn-default target" id="target4">#target4</button> <button class="btn btn-default target" id="target5">#target5</button> <button class="btn btn-default target" id="target6">#target6</button> </div> </div> </div> </div>

⬆ Back to top

Additional Learning Resources (Coming soon)

If you are new to jQuery, try taking a look at some of these references.

Books

Websites

Inspiration for this project

The idea behind the jQuery Cheetsheet was inspired some people who created similar collections in other programming languages and environments. Here are the ones we like the most:

30 Seconds of Code by charlarangelo

30 Seconds of CSS by atomiks

30 Seconds of Python by kriadmin

30 Seconds of Interviews by fejes713

How to Contribute

Do you have a cool idea for a new snippet, or want to add your own tips? Checkout contributing.md.

Collaborators

_{Fred Siika}

Credits

Icon made by Smashicons from www.flaticon.com is licensed by CC 3.0 BY.
This site was built using GitHub Pages.

⬆ Back to top

fredsiika/jquery-cheatsheet.md

💲 jQuery Cheatsheet

Table of Contents:

Introduction to jQuery

Learn How Script Tags and Document Ready Work

💲 Target HTML Elements with Selectors Using jQuery's `$`

⚉ Target Elements by Class Using jQuery with `addClass()`

#️⃣ Target Elements by `id` Using jQuery

💱 Target the Same Element with Multiple jQuery Selectors

✂️ Remove Classes from an Element with jQuery's `removeClass()`

🍭 Change the CSS of an Element Using jQuery's `css()`

🦼 Disable an Element Using jQuery's `.prop()`

🚧 Change Text Inside an Element Using jQuery's `html()` and `text()`

➖ Remove an Element Using jQuery's `remove()`

➕ Use `appendTo()` to Move Elements with jQuery

📷 Clone an Element Using jQuery's `clone()`

💑 Target the Parent of an Element Using jQuery's `parent()`

👩‍👧‍👦 Target the Children of an Element Using jQuery's `children()`

👨‍👩‍👦 Target a Specific Child of an Element Using jQuery's `target:nth-child(n)`

➗ Target Even Elements Using jQuery `:odd` or `:even` selectors

🌐 Use the `body` Element to Modify the Entire Page

Additional Learning Resources (Coming soon)

Books

Websites

Inspiration for this project

How to Contribute

Collaborators

Credits

fredsiika/jquery-cheatsheet.md

💲 jQuery Cheatsheet

Table of Contents:

Introduction to jQuery

Learn How Script Tags and Document Ready Work

💲 Target HTML Elements with Selectors Using jQuery's $

⚉ Target Elements by Class Using jQuery with addClass()

#️⃣ Target Elements by id Using jQuery

💱 Target the Same Element with Multiple jQuery Selectors

✂️ Remove Classes from an Element with jQuery's removeClass()

🍭 Change the CSS of an Element Using jQuery's css()

🦼 Disable an Element Using jQuery's .prop()

🚧 Change Text Inside an Element Using jQuery's html() and text()

➖ Remove an Element Using jQuery's remove()

➕ Use appendTo() to Move Elements with jQuery

📷 Clone an Element Using jQuery's clone()

💑 Target the Parent of an Element Using jQuery's parent()

👩‍👧‍👦 Target the Children of an Element Using jQuery's children()

👨‍👩‍👦 Target a Specific Child of an Element Using jQuery's target:nth-child(n)

➗ Target Even Elements Using jQuery :odd or :even selectors

🌐 Use the body Element to Modify the Entire Page

Additional Learning Resources (Coming soon)

Books

Websites

Inspiration for this project

How to Contribute

Collaborators

Credits

💲 Target HTML Elements with Selectors Using jQuery's `$`

⚉ Target Elements by Class Using jQuery with `addClass()`

#️⃣ Target Elements by `id` Using jQuery

✂️ Remove Classes from an Element with jQuery's `removeClass()`

🍭 Change the CSS of an Element Using jQuery's `css()`

🦼 Disable an Element Using jQuery's `.prop()`

🚧 Change Text Inside an Element Using jQuery's `html()` and `text()`

➖ Remove an Element Using jQuery's `remove()`

➕ Use `appendTo()` to Move Elements with jQuery

📷 Clone an Element Using jQuery's `clone()`

💑 Target the Parent of an Element Using jQuery's `parent()`

👩‍👧‍👦 Target the Children of an Element Using jQuery's `children()`

👨‍👩‍👦 Target a Specific Child of an Element Using jQuery's `target:nth-child(n)`

➗ Target Even Elements Using jQuery `:odd` or `:even` selectors

🌐 Use the `body` Element to Modify the Entire Page