freeCodeCamp Challenge Guide: Target HTML Elements with Selectors Using jQuery

Target HTML Elements with Selectors Using jQuery


Problem Explanation

  • jQuery selectors allow you to select and manipulate HTML elements.
  • These selectors start with the dollar sign and parentheses: $()
  • You can “find” (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more.

Example:

//You can select all <p> elements on a page like this  =  $("p")
$(document).ready(function() {
  $("button").click(function() {
    $("p").hide();
  });
});

Solutions

Solution 1 (Click to Show/Hide)
<script>
  $(document).ready(function(){
    $("button").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>
6 Likes

For the love of god make sure you add capital letters when you’re supposed to. It will save you much pain. Not that i’d know…

19 Likes

Also be aware to put a space between animated and bounce.

7 Likes