Selección de un elemento con jQuery

Los selectores de jQuery le permiten seleccionar y manipular elementos HTML. Los selectores de jQuery se utilizan para "buscar" (o seleccionar) elementos HTML en función de su nombre, identificación, clases, tipos, atributos, valores de atributos y mucho más. Se basa en los selectores CSS existentes y, además, tiene algunos selectores personalizados propios. Todos los selectores en jQuery comienzan con el signo de dólar y paréntesis: $ ().

El selector de elementos

El selector de elementos de jQuery selecciona elementos en función del nombre del elemento html.

Sintaxis

Puede seleccionar todos los <p>elementos en una página como esta:

$("p")

Ejemplos

Selecciona el primer elemento <li> del primer <ul> para eso se usa $("ul li:first").hide();

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("ul li:first").hide();
  });
});
</script>
</head>
<body>
<p>Lista 1:</p>
<ul>
  <li>Cafe</li>
  <li>Leche</li>
  <li>Te</li>
</ul>
<p>Lista 2:</p>
<ul>
  <li>Cafe</li>
  <li>Leche</li>
  <li>Te</li>
</ul>
<button>Click para ocultar primer renglon</button>
</body>
</html>

Ver ejemplo anterior

Selecciona el primer elemento <li> todos los <ul> para eso se usa $("ul li:first-child").hide()

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("ul li:first-child").hide();
  });
});
</script>
</head>
<body>
<p>Lista 1:</p>
<ul>
  <li>Cafe</li>
  <li>Leche</li>
  <li>Te</li>
</ul>
<p>Lista 2:</p>
<ul>
  <li>Cafe</li>
  <li>Leche</li>
  <li>Te</li>
</ul>
<button>Click para ocultar primer renglon</button>
</body>
</html>

Ver ejemplo anterior

La sintaxis para tener la referencia de todos los elementos de cierto tipo (a, p, h1, etc.):

$("nombre del elemento")

Es decir es casi igual que obtener la referencia de un elemento particular mediante el id, solo difiere en que no le antecedemos el caracter #.

Podemos con esto definir funciones comunes a un conjunto de elementos.

ProblemaConfeccionar una tabla con 5 filas. Hacer que cambie de color la fila que se presiona con el mouse. Obtener la referencia a todos los elementos 'tr'.

<!DOCTYPE html>
<html>

<head>
  <title>Ejemplo de jQuery</title>
  <meta charset="UTF-8">
</head>

<body>
  <table border="1">
    <tr>
      <td>1111111111</td>
      <td>1111111111</td>
      <td>1111111111</td>
      <td>1111111111</td>
    </tr>
    <tr>
      <td>2222222222</td>
      <td>2222222222</td>
      <td>2222222222</td>
      <td>2222222222</td>
    </tr>
    <tr>
      <td>3333333333</td>
      <td>3333333333</td>
      <td>3333333333</td>
      <td>3333333333</td>
    </tr>
    <tr>
      <td>4444444444</td>
      <td>4444444444</td>
      <td>4444444444</td>
      <td>4444444444</td>
    </tr>
    <tr>
      <td>5555555555</td>
      <td>5555555555</td>
      <td>5555555555</td>
      <td>5555555555</td>
    </tr>
  </table>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="func4.js"></script>
</body>

Ver ejemplo anterior

func4.js

let x = $(document);
x.ready(inicializarEventos);

function inicializarEventos() {
  let x = $("tr");
  x.click(presionFila);
}

function presionFila() {
  let x = $(this);
  x.css("background-color", "#eeeeee");
}

Con la siguiente sintaxis obtenemos la referencia a todos los elementos HTML de tipo 'tr':

  let x = $("tr");
  x.click(presionFila);

y a todos ellos los enlazamos con la función presionFila

Cuando se presiona cualquiera de las filas de la tabla se ejecuta la siguiente función:

function presionFila() {
  let x = $(this);
  x.css("background-color", "#eeeeee");
}

Para obtener la referencia de que elemento en particular disparó el evento podemos hacerlo de la siguiente manera:

  let x = $(this);

this una función de JavaScript que se usa en conjunto con jQuery mediante el selector $(this) y nos permite obtener la referencia del elemento que emitió el evento y a partir de esta referencia llamar al método css.

(adsbygoogle = window.adsbygoogle || []).push({});

Selección de un elemento con jQuery

El selector de elementos