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

---
id: bad87fee1348bd9bedc08826
title: Apunta a elementos HTML con selectores usando jQuery
challengeType: 6
forumTopicId: 18319
required:
  - 
    link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
dashedName: 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 <dfn>selector</dfn>, 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:

```js
$("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`.

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

Solo debes usar jQuery para agregar estas clases al elemento.

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

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

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

# --seed--

## --seed-contents--

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

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