freeCodeCamp/curriculum/challenges/espanol/03-front-end-development-libraries/jquery/target-html-elements-with-selectors-using-jquery.md

id, title, challengeType, forumTopicId, required, dashedName

id	title	challengeType	forumTopicId	required	dashedName
bad87fee1348bd9bedc08826	Apunta a elementos HTML con selectores usando jQuery	6	18319	link https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css	target-html-elements-with-selectors-using-jquery

--description--

Ahora tenemos una función document ready.

Ahora vamos a escribir nuestra primera declaración de jQuery. Todas las funciones de jQuery comienzan con un $, usualmente conocido como un operador de signo de dólares.

jQuery a menudo selecciona un elemento HTML con un selector, y luego le hace algo a ese elemento.

Por ejemplo, hagamos que todos tus elementos button reboten. Simplemente agrega este código dentro de tu función document ready:

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

Ten en cuenta que ya hemos incluido tanto la librería jQuery como la librería Animate.css en segundo plano para que puedas usarlos en el editor. Así que estás usando jQuery para aplicar la clase Animate.css bounce a tus elementos button.

--hints--

Debes usar la función de jQuery addClass() para dar las clases animated y bounce a tus elementos button.

assert($('button').hasClass('animated') && $('button').hasClass('bounce'));

Solo debes usar jQuery para agregar estas clases al elemento.

assert(!code.match(/class.*animated/g));

Tu código de jQuery debe estar dentro de la función $(document).ready();.

assert(
  code.replace(/\s/g, '').match(/\$\(document\)\.ready\(function\(\)\{\$/g)
);

--seed--

--seed-contents--

<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>

--solutions--

<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>