Skip to main content

11 Cursos de JQuery – Filtros


Tutorial #11 del curso de Jquery, en este tutorial damos por finalizado la parte de filtros de jquery complementando a los selectores, recuerda que puedes ampliar más información consultando la documentación de jquery.

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Filtros - Por texto dado, contenido vacío, concreto, por atributo</title>

    <style type="text/css">

  table {

    width: 210px;
    border: 1px solid black;
  }
    </style>
  </head>
  <body>
   <p>Ediciones Eni</p>
   <p>Especialistas</p>
   <p>En Colombia</p>
   <br>
   <table>
     <tr>
       <td>1</td>
       <td>2</td>
       <td></td>
     </tr>
     <tr>
       <td></td>
       <td>5</td>
       <td>6</td>
     </tr>
     <tr>
       <td>7</td>
       <td></td>
       <td></td>
     </tr>
   </table>

   <br>

   <p>Parrafo 1</p>
   <p><a href="">Enlace</a></p>
   <p>Parrafo 2</p>

   <br>
   <ul>
     <li class="negrita">item de la lista 1</li>
     <li>item de la lista 2</li>
     <li class="negrita">item de la lista 3</li>
     <li class="negrita">item de la lista 4</li>
     <li>item de la lista 5</li>
   </ul>

    <script src="js/jquery-2.1.3.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
      $('p:contains(En)').css('background','#9cf');

      $('td:empty').css('background','#9cf');

      $('p:has(a)').css('background','#9cf');

      $('li[class]').css('border','1px solid black');
    });
    </script>
  </body>
</html>

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.