✅ ASP.NET MVC - Seletores

Índice

A estrutura na qual vamos trabalhar no lado do cliente é a Árvore DOM do documento HTML, esta árvore é uma estrutura hierárquica onde cada elemento que vemos na web é representado por seu respectivo rótulo.
A importância de conhecer essa estrutura é que ela nos permitirá localizar os diferentes elementos, com isso podemos pegar o valor que eles contêm ou incluir texto, conteúdo de outras páginas, podemos processar um controlador de nossa aplicação e gerar uma visualização dentro de um página sem ter que recarregá-la, etc.
Referência a um elemento
Como mencionamos anteriormente, o HTML Tem uma estrutura onde contém os seus elementos, para manipular estes elementos devemos aprender a criar referências para eles, com uma referência podemos ter a certeza de que vamos pegar no (s) elemento (s) desejado (s) e poder modificá-los.
Maneira mais eficazUma das formas mais populares e eficazes é com o seletor de id, como sabemos, os rótulos podem ter identificadores exclusivos para diferenciar os elementos de um HTML.
Vamos ver na imagem a seguir um código onde podemos levar graças a Javascript um elemento usando sua propriedade id:

No código que vimos, temos um rótulo HTML div, tem um id, esta propriedade é a que mencionamos que nos ajudará a localizar e selecionar o elemento no SOL, dentro de um bloco Javascript graças ao objeto documento, Podemos usar um de seus métodos para obter um elemento pelo id e neste caso colocamos o mesmo da div e finalmente com o método innerText, atribuímos um novo texto a ele.
Ao vermos isso, a página foi enriquecida, apesar de ser um exemplo bastante simples, é o mais básico que devemos saber para construir uma base sólida.
Melhorando com jQuery
Como sabemos Javascript às vezes você pode pecar por ter que escrever muito código para fazer poucas coisas, neste ponto, digite jQuery empacotar essas funcionalidades e códigos, permitindo-nos resolver as mesmas funções com atalhos e menos código, ainda é Javascript mas escrito de uma forma mais simples.
No exemplo a seguir, veremos como reescrevemos o exemplo anterior usando jQuery:

Como podemos ver, resumimos o número de chamadas de método usando simplesmente o método .text () aplicado a um seletor $ (), dependendo de como chamamos nosso elemento jQuery nos permite acessar id, classes, incluindo por tipo de elementos, seus filhos, etc.
Por exemplo, se quisermos fazer o mesmo exemplo anterior, mas neste caso o rótuloem vez de ter um id, tem uma classe:

Olá mundo!

Aqui, vemos que, em vez de chamar o seletor com $ ("# Seletor"), fazemos isso com $ (". selector"), o problema com isso é que se tivermos mais de um elemento com a mesma classe, iremos afetá-lo.
Com isso, terminamos este tutorial, onde nos aprofundamos um pouco mais no conceito de seletores e como usá-los com Javascript normal como com jQuery diminuindo assim a quantidade de código que escrevemos.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo