Jquery Básico

Por Cid Andrade do Blog Tecnologia e Educação

Este artigo apresenta os métodos mais importantes para uso da framework JQuery. Tudo o que você precisa saber para começar a trabalhar com JQuery está aqui e na Introdução a JQuery. Se desejar veja como selecionar elementos com JQuery.

Função JQuery

A função JQuery é representada por um $ e serve para selecionar elementos do documento. Esta função é a fundamental para o uso de JQuery. Uma vez feita uma seleção, podemos manipular estes elementos de diversas maneiras. Ela sempre retorna um objeto JQuery, definido internamente no framework.

Vejamos as possibilidades de uso da função JQuery:

• jQuery(expressão, [contexto]):jQuery. A expressão é um seletor de elemento do documento, tal como os seletores de CSS. O uso de contexto nesta função será tratado em outro artigo. Exemplo:
  $("div > p").css("border", "1px solid gray");
• jQuery(html, [proprietário]):jQuery. Cria um elemento com o conteúdo do primeiro parâmetro e o insere em outro elemento. O uso do proprietário nesta função não será tratado neste artigo. Exemplo:
  $("<div><p>Boa noite!</p></div>").appendTo("body")
• jQuery(elementos):jQuery. Seleciona um elemento HTML da página. Exemplo:
  $(document.body).css("background", "blue");
• jQuery(callback):jQuery. Equivalente ao $(document).ready().

Métodos de acesso a objetos JQuery

Diversos métodos que podem ser aplicados aos objetos JQuery retornados pela função JQuery. São:

• each(calback):jQuery. Executa uma função (callback) no contexto de cada objeto encontrado. Exemplo:
  $("div").each(function(i)){ this.style.color="red"; }
• size():int. Retorna número de elementos no objeto. Exemplo:
  alert($("div").size())
• length:int. Retorna número de elementos no objeto, sendo idêntica a size(). Exemplo:
  alert($("div").length)
• selector:String. Retorna um seletor que represente o seletor passado para uma função jQuery. Útil para desenvolvedores de plugins e não será tratado neste artigo.
• context:elemento. Retorna nó DOM. Semelhante ao selector, também não será tratado neste artigo.
• eq(posição):jQuery. Retorna um elemento de um conjunto. O primeiro tem o índice 0. Exemplo:
  $("p").eq(1).css("color","red")
• get():Array<elemento>. Retorna diversos elementos DOM. Útil para operar sobre grande conjunto de elementos. Exemplo:
  $("div").get().reverse()
  retornaria um vetor com todos elementos DIV na ordem inversa
• get(índice):elemento. Retorna um elemento de um conjunto de elementos DOM. Forma alternativa à função JQuery.
• index(sujeito):int. Procura um elemento e retorna o índice dele. Exemplo:alert($("div").index(this))

Métodos de manipulação de dados

Estes métodos fazem manipulação de dados associados a elementos jQuery.

• data(nome):variável. Retorna o dado armazenado sobre determinado nome em um elemento. Exemplo:
  $("div").data("v1")
• data(nome,valor):jQuery. Retorna a um dado com determinado nome um valor. Exemplo:
  $("div").data("v1","jQuery")
• removeData(nome):jQuery. Remove dado armazenado com determinado nome. Exemplo:
  $("div").removeData("v1")

Além destas, há alguns métodos de manipulação de dados que operam sobre filas, que são formadas por um vetor de funções.