Contenidos

1 Selector
2 Sección
- 2.1 Other seccion
- 2.2 Más ejemplos de selector

Selector

Un selector nos permite indicar sobre qué elementos queremos aplicar la acción

Existen las siguientes tipos de selector:

Elemento
Clase
Identificador

Elemento

Es posible seleccionar un elemento directamente según su tipo de etiqueta HTML

$('p');

En este ejemplo hemos seleccionado todos los elementos de tipo párrafo

$(function(){
    $('buttom').click(function(){
        $('p').hide();
    });
});

En este ejemplo ocultaríamos todos los elementos de tipo párrafo cuando pulsemos sobre el elemento de tipo botón

Clase

Se utiliza con el símbolo . y nos permite elegir los elementos con una clase concreta

$('.test');

En este ejemplo hemos seleccionado el elemento de la clase test

$(function(){
    $('buttom').click(function(){
        $('.test').hide();
    });
});

En este ejemplo ocultaríamos todos los elementos de la clase test cuando pulsemos sobre el elemento de tipo botón

Identificador

Se utiliza con el símbolo # y nos permite elegir los elementos con un id concreto

$('#test');

En este ejemplo hemos seleccionado el elemento con el id test

$(function(){
    $('buttom').click(function(){
        $('#test').hide();
    });
});

En este ejemplo ocultaríamos todos los elementos con el id test cuando pulsemos sobre el elemento de tipo botón

Ejemplo práctico

<!DOCTYPE html>
<html>
<head>
<!-- Inserted by miarroba -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<!-- Inserted by miarroba -->
    <script src='jquery-3.4.1.min.js'></script>
    <script
        $(function(){
            $('btn01').click(function(){
                $('#important').hide();
            });
            $('btn02').click(function(){
                $('.color').hide();
            });
            $('btn03').click(function(){
                $('h4').hide();
            });
        });
    </script>
    <style>
    .important {
       font-weight: bold;
       font-size: xx-large;
    }

    .color {
        color: #D5322D;
    }
    </style>
</head>

<body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
   <h1><span id="Seccion">Sección</span></h1>
   <p class='color'>Párrafo a color</p> 
   <p class='color'>Otro párrafo a color</p>
   <p class='important'>Párrafo importante</p>

   <h2><span id="Other_seccion">Other seccion</span></h2>
   <button id='btn01'>Quitar elemento 'important'</button>
   <button id='btn02'>Quitar elementos clase 'color'</button>
   <button id='btn03'>Quitar todos los encabezados de sección</button>
<!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1715329686&k=4573db74489294fe7c9be11ad4038bbf"></script><noscript><img alt="beacon" border="0" width="1" height="1" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1715329686&k=4573db74489294fe7c9be11ad4038bbf&img=1" /></noscript>
<!-- Inserted by miarroba -->
</body>
</html>

Más ejemplos de selector

$('*'); //selecciona todos los elementos

$(this); //selecciona el elemento del HTML actual

$('p.intro'); //selecciona todos los elementos de tipo párrafo que pertenezcan a la clase intro

$('p.first'); //selecciona el primer párrafo

$('ul li:first'); //selecciona el primer li del primer elemento ul

$('ul li:first-child'); //selecciona el primer li de cada elemento ul

$('[href]'); //selecciona todos los elementos que contengan el atributo href

$("a[target='_blank']"); //selecciona todos los elementos a que contengan el atributo target cuyo valor sea '_blank'

$("a[target!='_blank']"); //selecciona todos los elementos a que contengan el atributo target cuyo valor NO sea '_blank'

$(':button'); //selecciona todos los elementos button y todos los input de tipo button

$('tr:even'); //selecciona todos los elementos tr que sean pares

$('tr:odd'); //selecciona todos los elementos tr que sean impares

Cookie	Duración	Descripción
CookieLawInfoConsent	Hasta finalizar la sesión del navegador	Controla la visualización del consentimiento de Cookies, su gestión y visualización en la página web por parte del usuario
qtrans_admin_language	Hasta finalizar la sesión del navegador	Permite al administrador gestionar la traducción de la página web a varios idiomas
qtrans_edit_language	Hasta finalizar la sesión del navegador	Permite al administrador editar la traducción de la página web a varios idiomas
viewed_cookie_policy	Hasta finalizar la sesión del navegador	Controla si la visualización del consentimiento de Cookies es visible actualmente en la página web para el usuario o por el contrario está oculta

Web sobre Informática de Secarcam

Selector

Selector

Elemento

Clase

Identificador

Ejemplo práctico

Más ejemplos de selector

Página web de Sergio Cárcamo García dedicada a la informática y temas relacionados como los lenguajes de programación, la estadística, las matemáticas, etc

Selector

Elemento

Clase

Identificador

Ejemplo práctico

Más ejemplos de selector

Página web de Sergio Cárcamo García dedicada a la informática y temas relacionados como los lenguajes de programación, la estadística, las matemáticas, etc

Política de Cookies