O objeto JQuery e seus seletores
Continuando o post anterior sobre jQuery, iremos descrever o objeto jQuery.
A maioria das funcionalidades do jQuery é iniciada pela objeto $. O $ no jQuery possui diversas funcionalidades, que podem ser:
- Obtenção de objetos a partir de seletores.
Ex.: Obtendo todos os objetos que contenham a classe "dinamico":
alert($(".dinamico").length)
- "Window onload" (funções que irão ser executadas após o término do carregamento da página).
Ex.: Executando função com mensagem simples:
$(function(){
alert("A página já carregou!")
})
- Funções úteis (a serem descritas em um próximo post).
Ex.: Removendo espaços do final e começo de uma string:
alert($.trim(" texto ").length)
- Ajax
Ex.: Requisição ajax por get
$.get("exemplo-ajax.php", function(resposta){
alert(resposta)
})
- Criar conteúdo dinâmicamente
Ex.: Adicionando um novo paragrafo ao corpo da página:
$('<p>Novo Paragrafo</p>').appendTo(document.body)
Seletores
Seletores são declarações que igualam um ou vários elementos do HTML. São eles que mapeiam o HTML no css:
| Seletor | Descrição |
|---|---|
| TAG | Traz todos os elementos que sejam da TAG selecionada. Ex.: alert($('p').length) |
| #ID | Traz o elemento que tenha o ID selecionado. Ex.: $('#conteudo').css('background-color', '#ccc') |
| .CLASSE | Traz todos os elementos que tenham a CLASSE selecionada. Ex.: $('.content-center').css('text-align', 'center') |
| [PROPRIEDADE=VALOR] | Traz todos os elementos que tenham a PROPRIEDADE com o VALOR selecionado. Ex.: $('[name=nome]').val('Gabriel Verta') |
| SELETOR1 SELETOR2 | Traz todos os elementos que SELETOR2 que estejem dentro do SELETOR1. Ex.: $('div label').addClass('required') |
Existe uma lista extensa de seletores para jQuery, que podem ser vistas na documentação oficial do jQuery. Tentei criar um site com uma forma dinâmica de ver estes seletores em jQuery, espero que entendam como funciona o site. 
