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>


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>


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>


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.