2.2 Seletores

<script>

$(document).ready(function(){

alert('jQuery ok');

});

</script>

Se uma janela de alerta apareceu no seu navegador, então você executou seu exemplo jQuery.

Em que local devo colocar o script do jQuery? Durante os exercícios propostos neste livro, você pode colocar o seu código <script> dentro da tag <head>. Entretanto à medida que você avança no desenvolvimento de sites, o seu código jQuery deve ser colocado em um arquivo externo e nomeado com a extensão js. Esse arquivo será importado através da tag script, por exemplo:

<script src="meuScript.js"></script>

No exemplo acima, o seu código ficará localizado dentro do arquivo meuScript.js.

2.2 Seletores

Antes de realizar alguma operação no jQuery, precisamos selecionar quais são os elementos ou tags alvos, aos quais serão aplicadas as funções do jQuery. Para selecionarmos essas tags ou elementos, usamos seletores que possuem uma sintaxe semelhante ao CSS. O operador $() é uma função especial do jQuery que permite selecionar qualquer elemento existente na árvore DOM. Passamos como parâmetro ao $() o nome da tag, classe ou id que desejamos selecionar. Vejamos alguns exemplos:

Como selecionar todas as tags <p> de uma página? Basta passar como parâmetro para a função $() o nome da tag, sem os parênteses <>:

$("p")

Como selecionar todas as tags cuja classe é "destaque"? Passamos como parâmetro o nome da classe CSS, lembrando que toda classe começa com um "."

$(".destaque")

Como selecionar a tag cujo id é "menu"? Passando o nome do id da tag como parâmetro. Todo id inicia-se com o sinal de hash ou cerquilha (#). Pela especificação do HTML, o id não pode se repetir, portanto só poderá haver uma única tag com um determinado id. No exemplo abaixo, a tag cujo id é "menu" deve ser única, ou seja, não pode haver outro elemento com esse mesmo id. É muito importante que essa regra seja respeitada para o funcionamento correto do jQuery e CSS.

$("#menu")

Como selecionar apenas os links que estão dentro do menu cujo id é "menu"? Usando o mesmo conceito do CSS, definindo primeiro o elemento menu, seguido de um espaço e do nome da tag. A leitura que se faz do seletor abaixo é: retorna todas as tags <a> contidas no elemento cujo id é "menu".

$("#menu a")