A finalidade do uso do jQuery é poder controlar o comportamento de todas as partes de um documento HTML. Basicamente, vamos usar o jQuery para identificar os elementos HTML no documento e aplicar seus métodos.
Função construtora $() e jQuery()
O construtor $() é encarregado de encontrar os elementos do HTML. Existem outras bibliotecas JavaScript além do jQuery e o uso em conjunto pode gerar conflitos já que muitas dessas bibliotecas também usam o $() como construtor. Para contornar este problema você poderá fazer uso de jQuery().
Para usar o construtor e selecionar o documento, você usaria $(document). Para selecionar todos os parágrafos de um documento você poderia usar $(“h1”), ou seja, passe para a função construtora o elemento que deseja selecionar.
Método Ready
Em JavaScript, quando desejamos executar algum bloco de código assim que o documento estiver totalmente carregado, usamos window.onload.
O equivalente em jQuery para este método é mostrado a seguir:
$(document).ready(function(){
execute o código que estiver aqui
});
Você também pode omitir o parâmetro document da seguinte forma:
$().ready(function(){
execute o código que estiver aqui
});
Estas duas abordagens são chamadas de sintaxe formal e sua leitura é mais intuitiva. Você também pode usar a sintaxe abreviada e aplicar o método ready:
$(function(){
execute o código que estiver aqui
});
O método ready possui uma grande vantagem em relação ao método em JavaScript. Em JavaScript todos os elementos da página precisam ser carregados como a marcação, estilos e imagens. O método ready necessita apenas que a marcação da página esteja disponível.
Selecionando Elementos
Vimos que é possível selecionar elementos utilizando a função construtora $(). Porém, selecionar todos os elementos de um mesmo tipo não é muito útil. Vamos ver em detalhes a seleção de elementos nos próximos posts. Por hora vamos ver um exemplo simples onde adicionamos texto e algum estilo css a um elemento div com o atributo id configurado com o valor “box”.
$(document).ready(function(){
$('#caixa').text('Elemento com classe caixa selecionado!');
$('#caixa').css('color','red')
});
Então é isso. No próximo post a gente aprende mais sobre a seleção de elementos.
Aquele abraço!