jQuery permite selecionar elementos em uma página da Web com facilidade. Você pode encontrar qualquer coisa que você quer em uma página e, em seguida, usar jQuery para adicionar efeitos especiais, reagem às ações do usuário, ou mostrar e ocultar o conteúdo dentro ou fora do elemento que você selecionou. Todas estas tarefas começar com saber como selecionar um elemento. Aqui está uma lista útil que você pode usar para selecionar quase qualquer coisa na sua página Web.
Menu
| Para selecionar por | Usa isto |
|---|---|
| tipo de elemento (por exemplo, | $ ( "Img") |
| Todos os elementos | $ ( "*") |
| ID (por exemplo, id = "thisIsTheID") | $ ( "# ThisIsTheID") |
| Classe (por exemplo, class = "someClass") | $ ( ". SomeClass") |
| Ordem (por exemplo, o primeiro ou o último | $ ( "Img: em primeiro lugar") $ ( "Img: last") |
| Atributo, (por exemplo, para obter o atributo de comprimento | $ ( "Img [altura]"). Length |
| Controladora (por exemplo, o pai de ) | $ ( "Div: pai") |
| Criança (por exemplo, o primeiro ou o último filho de ) | $ ( "Div: first-child") $ ( "Div: last-child") |
efeitos jQuery são muito divertidos e pode transformar uma simples página web, estática em uma experiência dinâmica e interativa para o visitante do site. Parte do interesse visual que jQuery oferece é a capacidade de exibir, ocultar, slide, e fade elementos. Os exemplos que se seguem todos usam este código de exemplo:
Minha página de teste
Aqui está um resumo rápido sobre como aplicar estes efeitos a um elemento em uma página da Web.
| Efeito | Código |
|---|---|
| Esconder | $ ( ": Submit") click (function () {. $ ( "Div") hide (). - }) - |
| exposição | $ ( ": Submit") click (function () {. $ ( "# Showme") show (). - }) - |
| Deslize para baixo | $ ( ": Submit") click (function () {. $ ( "# Showme") slideDown (). - }) - |
| Deslize para cima | $ ( ": Submit") click (function () {. $ ( "# Hideme") slideUp (). - }) - |
| fade in | $ ( ": Submit") click (function () {. $ ( "# Showme") fadeIn (). - }) - |
| Desaparecer | $ ( ": Submit") click (function () {. $ ( "# Hideme") fadeOut (). - }) - |
jQuery oferece maneiras fáceis de obter os dados em sua página da Web. Em particular, você pode inserir qualquer conteúdo que você quiser, em qualquer lugar na sua página. Os exemplos que se seguem todos usam este código de exemplo:
Minha página de teste
Aqui está um resumo rápido sobre como inserir conteúdo antes, depois e dentro de um elemento em uma página da Web:
| Para colocar conteúdo | Código |
|---|---|
| Em frente e do lado de fora do (antes) | $ ( ": Submit") click (function () {. $ ( "Div"). Antes ( "Antes de ") - }) - |
| Na parte de trás e fora do (depois de) | $ ( ": Submit") click (function () {. $ ( "Div"). Depois ( "Depois ") - }) - |
| Dentro do conteúdo, mas beforeexisting (precedido) | $ ( ": Submit") click (function () {. . $ ( "Div") prepend ( "New Content!") - }) - |
| Dentro do mas afterexisting conteúdo (acréscimo) | $ ( ": Submit") click (function () {. $ ( "Div") anexa ( "New Content!"). - }) - |
Como você ganhar experiência com jQuery, é provável que você tem perguntas sobre técnicas mais avançadas jQuery. E depois que você usa jQuery plug-ins, você vai ser viciado e quiser obter mais. jQuery.com fornece lotes de apoio técnico e a lista oficial de jQuery plug-ins. Visite estes sites adicionais para respostas às suas perguntas jQuery e para outras maneiras de estender como você usa jQuery em suas páginas da Web: