Já abordámos a programação HTMLprogramação PHP anteriormente e agora é altura de iniciarmos o nosso Guia jQuery! A esta altura você provavelmente já consegue criar as suas próprias páginas HTML / CSS com alguma qualidade, mas aquilo que se pretende não é apenas alguma qualidade, mas sim a melhor qualidade. Para adicionar mais qualidade, beleza e também funcionalidade aos seus websites, deverá considerar utilizar jQuery como um complemento que o ajudará a alcançar o que pretende. jQuery não poder ser utilizado sem Javascript, pois sem Javascript você não poderá adicionar os comportamentos, sofisticadas interacções e outras funcionalidades ao seu website. Certamente deverá saber também que Javascript é considerado um “monstro” da programação, super complexo que nem todos conseguem dominar, e é aí que está o segredo jQuery guardado. Alguns dos gigantes da internet, como o Google, WordPress ou Amazon utilizam jQuery nas suas páginas. Porquê? É isso que lhe vamos dar a entender com o Guia jQuery da Escola Criatividade!

jQuery

Não perca os artigos anteriores relacionados com jQuery e Javascript:

Nesta segunda parte do Guia jQuery vamos-lhe indicar quais os primeiros passos a tomar antes de aplicar jQuery nas suas páginas, para que o faça de uma força ordenada e esquematizada!

1. PREPARAR A PÁGINA

Antes de qualquer interação com os elementos HTMl de uma página, esses elementos têm de estar previamente carregados, pois apenas é possível alterá-los depois de estarem carregados. Assim, teremos de recorrer a uma função jQuery que executa as alterações que queremos introduzir na página da forma mais rápida possível – e graças a isto, a ideia que chega ao visitante é que as páginas são carregadas muito rapidamente. Para se assegurar que a biblioteca jQuery está carregada correctamente, pode executar um simples teste como aquele que lhe vamos mostrar abaixo:

$(document).ready(function() {
    alert('Bem-Vindo à Escola Criatividade! Esta mensagem assegura que a biblioteca está carregada correctamente.');
});

Em termos escritos, o código acima é tão simples como: quando o documento estiver pronto, corra a função. Este é um dos snippets mais utilizados e que provavelmente mais irá ver ao longo da sua carreira ou simples curiosidade com jQuery.

2. COMO SELECCIONAR

A seleccção de elementos em jQuery é considerada a sua jóia, a obra prima da biblioteca, pois uma das grandes diferenças entre você ser um novato ou um perto a lidar com jQuery reside precisamente na quantidade de tempo que você emprega a seleccionar os elementos. Todos os selectores são inseridos na função jQuery “jQuery(<selector>)” ou então no alias “$(<selector>)”. Imaginando que quer seleccionar um elemento de um documento, tem de ter em atenção que deve ser tão específico quanto necessário, pois a intenção é utilizar o selector que lhe dá acesso àquilo que pretende alterar. Veja alguns exemplos de selectores que pode utilizar:

$('tr') // Linha de uma tabela
$('p') // Parágrafo
$('div') // Uma div
$('h1') // Cabeçalho H1

Se quiser ir mais longe e seleccionar os elementos pelo seu ID utilizado na programação CSS, utilize o seguinte modelo:

$('#selector')

Se quiser ir mais longe e seleccionar os elementos pela sua Class utilizada na programação CSS, utilize o seguinte modelo:

$('.class')

Se necessitar de ser mais específico, pode combinar o tipo de elemento com o seu ID ou class, tal como acontece em CSS. Então, especificando um tipo de elemento junto com uma Class, o selector irá apenas seleccionar elementos que correspondam a esse tipo de elemento e a essa Class, ao invés de seleccionar todos os elementos daquela class, ou daquele elemento. Caso ainda assim seja impossível seleccionar apenas o elemento que pretende, é preferível criar uma class única e executar o trabalho.

Depois desta pequena introdução, podemos-lhe já dar alguns exemplos práticos do uso dos selectores jQuery:

Exemplos:

$(this).hide() // Esconde o elemento actual

$("p").hide() // Esconde todos os parágrafos

$("p.teste").hide() // Esconde todos os parágrafos com a classe="teste"

$("#test").hide() // Esconde o elemento com o id="teste"

Os selectores permitem-lhe seleccionar e manipular elementos HTML. Como referimos anteriormente, é possível seleccionar por nome, nome de atributo ou conteúdo.

1 – Selectores de elementos

jQuery utiliza selectores CSS para seleccionar elementos HTML

$("p") selecciona os elementos <p>

$("p.intro") seleccionar todos os elementos <p> com class="intro".

$("p#demo") selecciona o primeito elemento <p> com id="demo".

2 – Selectores de Atributos

jQuery utiliza expressões XPath para seleccionar elementos com dados atributos.

$("[href]") // Selecciona todos os elementos com um atributo href

$("[href='#']") // Seleccionar todos os elementos com um valor href igual a "#"

$("[href!='#']") // Selecciona todos os elementos com um valor href não igual a "#"

$("[href$='.jpg']") // Selecciona todos os elementos com um atributo href que acabe em ".jpg"

3 – Selectores CSS

Os selectores CSS podem ser utilizados para alterar propriedades CSS de elementos HTML

No exemplo a seguir alteramos a cor de fundo de todos os elementos “p” para amarelo

$("p").css("background-color","yellow");

3. EFEITOS JQUERY

Existem infinitas possibilidades e combinações de efeitos em jQuery que poderá utilizar, e aproveitando alguns itens dos artigos 6 Efeitos jQuery para introduzir em seus websites!15 Efeitos jQuery Fantásticos e Gratuitos vamos-lhe apresentar aqueles que pensamos serem os melhores:

Sliding Boxes

Lightbox

Super Slick jQuery Menu

Efeito Fotografia

iCarousel

No próximo artigo, dando continuidade ao Guia jQuery iremos fazer uma aula prática para aplicar estilizações a elementos num documento HTML. Fique atento!

Abraço e até já!

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos

RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz