Contenidos [Hide]

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');
xxxxxxxxxx
 
1
$('p');

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

$(function(){
    $('buttom').click(function(){
        $('p').hide();
    });
});
xxxxxxxxxx
 
1
$(function(){
2
    $('buttom').click(function(){
3
        $('p').hide();
4
    });
5
});

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');
xxxxxxxxxx
 
1
$('.test');

En este ejemplo hemos seleccionado el elemento de la clase test

$(function(){
    $('buttom').click(function(){
        $('.test').hide();
    });
});
xxxxxxxxxx
 
1
$(function(){
2
    $('buttom').click(function(){
3
        $('.test').hide();
4
    });
5
});

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');
xxxxxxxxxx
 
1
$('#test');

En este ejemplo hemos seleccionado el elemento con el id test

$(function(){
    $('buttom').click(function(){
        $('#test').hide();
    });
});
xxxxxxxxxx
 
1
$(function(){
2
    $('buttom').click(function(){
3
        $('#test').hide();
4
    });
5
});

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 async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<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>
<!-- 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="/hosting__contador__visitas__unicas.php?h=1579157&t=1743942174&k=c4564e75e1c7407542478c36afed14d7&__muid="></script>
<!-- Inserted by miarroba -->
</body>
</html>
x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<!-- Inserted by miarroba -->
5
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
6
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
7
<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>
8
<!-- Inserted by miarroba -->
9
    <script src='jquery-3.4.1.min.js'></script>
10
    <script
11
        $(function(){
12
            $('btn01').click(function(){
13
                $('#important').hide();
14
            });
15
            $('btn02').click(function(){
16
                $('.color').hide();
17
            });
18
            $('btn03').click(function(){
19
                $('h4').hide();
20
            });
21
        });
22
    </script>
23
    <style>
24
    .important {
25
       font-weight: bold;
26
       font-size: xx-large;
27
    }
28
29
    .color {
30
        color: #D5322D;
31
    }
32
    </style>
33
</head>
34
35
<body>
36
<!-- Inserted by miarroba -->
37
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
38
<!-- Inserted by miarroba -->
39
   <h1><span id="Seccion">Sección</span></h1>
40
   <p class='color'>Párrafo a color</p> 
41
   <p class='color'>Otro párrafo a color</p>
42
   <p class='important'>Párrafo importante</p>
43
44
   <h2><span id="Other_seccion">Other seccion</span></h2>
45
   <button id='btn01'>Quitar elemento 'important'</button>
46
   <button id='btn02'>Quitar elementos clase 'color'</button>
47
   <button id='btn03'>Quitar todos los encabezados de sección</button>
48
<!-- Inserted by miarroba -->
49
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1743942174&k=c4564e75e1c7407542478c36afed14d7&__muid="></script>
50
<!-- Inserted by miarroba -->
51
</body>
52
</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
xxxxxxxxxx
 
1
$('*'); //selecciona todos los elementos
2
3
$(this); //selecciona el elemento del HTML actual
4
5
$('p.intro'); //selecciona todos los elementos de tipo párrafo que pertenezcan a la clase intro
6
7
$('p.first'); //selecciona el primer párrafo
8
9
$('ul li:first'); //selecciona el primer li del primer elemento ul
10
11
$('ul li:first-child'); //selecciona el primer li de cada elemento ul
12
13
$('[href]'); //selecciona todos los elementos que contengan el atributo href
14
15
$("a[target='_blank']"); //selecciona todos los elementos a que contengan el atributo target cuyo valor sea '_blank'
16
17
$("a[target!='_blank']"); //selecciona todos los elementos a que contengan el atributo target cuyo valor NO sea '_blank'
18
19
$(':button'); //selecciona todos los elementos button y todos los input de tipo button
20
21
$('tr:even'); //selecciona todos los elementos tr que sean pares
22
23
$('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