Content

1 Selector
2 Section
- 2.1 Other section
- 2.2 More examples of selector

Selector

A selector allows us to specify what elements we want to apply the action

There are the following types of selector:

Item
Class
Id

Item

It is possible to select an element directly according to their type of HTML tag

$('p');

In this example we have selected all of the elements of type paragraph

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

In this example will be hidden all the elements of type paragraph when you press on the item type button

Class

It is used with the symbol . and allows us to select elements with a specific class

$('.test');

In this example we have selected the element of the test class

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

In this example will be hidden all the elements of the test class when you press on the item type button

Id

Used with the # symbol and allows us to select elements with an id specific

$('#test');

In this example we have selected the element with the id test

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

In this example will be hidden all the elements with the id test when you press the element type button

Practical example

<!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">Section</span></h1>
   <p class='color'>Paragraph color</p> 
   <p class='color'>Another paragraph color</p>
   <p class='important'>Important paragraph</p>

   <h2><span id="Other_seccion">Other section</span></h2>
   <button id='btn01'>Remove item 'important'</button>
   <button id='btn02'>Remove items in class 'color'</button>
   <button id='btn03'>Remove all section headers</button>
<!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1714250125&k=395bf9fe4ec4c7c61137228f18873db1"></script><noscript><img alt="beacon" border="0" width="1" height="1" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1714250125&k=395bf9fe4ec4c7c61137228f18873db1&img=1" /></noscript>
<!-- Inserted by miarroba -->
</body>
</html>

More examples of selector

$('*'); //select all items

$(this); //select the current HTML element

$('p.intro'); //select all paragraph type elements that belong to the intro class

$('p.first'); //select the first paragraph

$('ul li:first'); //select the first li of the first ul element

$('ul li:first-child'); //select the first li of each ul element

$('[href]'); //select all the elements that contain the href attribute

$("a[target='_blank']"); //select all the elements that contain the target attribute whose value is '_blank'

$("a[target!='_blank']"); //select all the elements that contain the target attribute whose value is NOT '_blank'

$(':button'); //select all button elements and all button type inputs

$('tr:even'); //select all tr elements that are even

$('tr:odd'); //select all tr elements that are odd

Cookie	Duration	Description
CookieLawInfoConsent	Until the end of the browser session	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	Until the end of the browser session	Permite al administrador gestionar la traducción de la página web a varios idiomas
qtrans_edit_language	Until the end of the browser session	Permite al administrador editar la traducción de la página web a varios idiomas
viewed_cookie_policy	Until the end of the browser session	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

Secarcam's Computer Science Web

Selector

Selector

Item

Class

Id

Practical example

More examples of selector

Web page of Sergio Cárcamo Garcia dedicated to the computing and related topics such as programming languages, statistics, mathematics, etc

Selector

Item

Class

Id

Practical example

More examples of selector

Web page of Sergio Cárcamo Garcia dedicated to the computing and related topics such as programming languages, statistics, mathematics, etc

Cookie policy