jQuery é uma biblioteca Javascript que simplifica a programação JavaScript™ e AJAX (JavaScript assíncrono + XML, Javascript assíncrono e XML). Ao contrário de outras bibliotecas Javascript, jQuery tem sua própria filosofia que facilita a escrita de código. Este artigo levará você a entender a filosofia do jQuery, discutir seus recursos e funções e fornecer alguns exemplos de ajax e como usar plug-ins para estender o jQuery.
1. O que é jQuery?
jQuery é uma excelente biblioteca Javascript. Nasceu em 2006 e foi criada por John Resig. Quer você seja um novato em JavaScript, mas queira experimentar a complexidade do DOM (Document Object Model) e Ajax, ou seja um especialista em JavaScript, mas esteja cansado de repetir os chatos scripts DOM e Ajax, jQuery será sua melhor escolha Sua melhor escolha .
jQuery irá ajudá-lo a manter seu código simples e conciso. Você não precisa mais escrever muitos loops repetitivos ou scripts de chamada DOM. Usando jQuery, você encontrará rapidamente os pontos-chave e expressará suas ideias com o mínimo de código.
A filosofia do jQuery é na verdade muito simples: simples e reutilizável. Quando você entender e concordar com essa ideia, poderá começar a perceber como o uso do jQuery pode tornar sua programação fácil e agradável!
2. Alguns conceitos simples
Aqui está um exemplo simples para mostrar como o jQuery afeta o código que você escreve. O que você faz é realmente muito simples, como adicionar um evento de resposta de clique a todos os links em uma determinada área da página. Você pode usar Javascript geral e DOM para escrevê-lo. Consulte a Listagem 1 para obter o código:
Listagem 1. Script DOM sem. jQuery
var external_links = document.getElementById('external_links');var links = external_links.getElementsByTagName('a');for (var i=0;i < links.length;i++) {var link = links.item(i) ;link.onclick = function() {return confirm('You are going to visit: ' + this.href);};} Se você usar jQuery, a implementação será a seguinte: Listagem 2. Script DOM com jQuery$(' #external_links a').click( function() {return confirm('Você vai visitar: ' + this.href);}); Com jQuery, você pode encontrar rapidamente os pontos-chave e expressar apenas o que precisa, sem ser prolixo. Não há necessidade de percorrer esses elementos, a função click() cuida de tudo. E você não precisa escrever muito código para manipular o DOM. Tudo que você precisa é usar alguns caracteres para definir o elemento que você está procurando. Vamos dar uma olhada em como esse código funciona, com alguns truques. Primeiro, observe a função $() – uma das funções mais úteis e poderosas em jQuery. Na maioria das vezes, você usa essa função para selecionar elementos do documento. Neste exemplo, use essa função para passar strings For em cascata. Sintaxe de folhas de estilo (CSS), o jQuery pode encontrar facilmente esse elemento. Se você conhece um pouco sobre seletores CSS básicos, acho que essa sintaxe deve parecer bastante familiar. O espaço a seguir significa que o jQuery precisa encontrar todos os elementos <a> dentro do elemento #external_links. É um pouco difícil expressá-lo em linguagem falada - também é bastante problemático escrever em script DOM, porém, em CSS, nada é mais simples. do que isso. A função $() retorna um objeto jQuery contendo todos os elementos que correspondem ao seletor css. O conceito de um objeto jQuery é como uma matriz, mas pode conter muitos objetos jQuery. função para vincular uma resposta de evento de clique a cada elemento em um objeto jQuery.
Você também pode passar um elemento ou uma matriz de elementos para a função $(), que adicionará todos os elementos compactados em um objeto jQuery. esse recurso para objetos como janelas. Por exemplo, você pode usar esta função para carregar eventos, como este:
window.onload = function() {// faça isso quando a página terminar de carregar};
$(window).load(function() {// execute isto quando toda a página tiver sido baixada}); Como você sabe, esperar o carregamento de uma janela é extremamente doloroso porque a página inteira deve ser carregada, incluindo tudo que está nela. imagem da página Em alguns casos, você precisa carregar a imagem primeiro, mas na maioria das vezes, você só precisa ver a marcação de hipertexto (HTML) para resolver esse problema criando um evento muito especial pronto no documento. o método de uso é o seguinte: $(document).ready(function() {// faça essas coisas quando o HTML estiver pronto}); Este código cria um objeto jQuery do elemento do documento e o chama quando o DOM html o documento está pronto Esta instância Você pode chamar esta função um número ilimitado de vezes.
Na verdadeira codificação no estilo jQuery, há também uma forma abreviada desta função. Basta passar uma função para a função $():
$(function() {// execute isto quando o download do HTML terminar}); Até agora, mostrei três maneiras diferentes de usar a função $(). A quarta maneira, você pode usar uma String para criar um elemento. O resultado é um objeto jQuery contendo este elemento. A Listagem 3 mostra um exemplo de adição de um parágrafo à página:
Listagem 3. Criando e anexando um parágrafo simples
$('<p></p>'). !').css('background', 'yellow').appendTo("body"); Como você pode ver no exemplo acima, outro recurso muito poderoso do jQuery é o encadeamento de métodos (encadeamento de métodos), toda vez que você chama um método em um objeto jQuery, este método também retornará um objeto jQuery. Isso significa que se você precisar chamar vários métodos em um objeto jQuery, não será necessário escrever seletores CSS repetidamente.
$('#message').css('background', 'yellow').html('Hello!').show();3.jQuery torna o Ajax extremamente simples. Usando jQuery, o Ajax não pode se tornar mais simples. tem uma série de funções que podem tornar coisas simples realmente simples e tornar coisas complexas tão simples quanto possível. Um uso comum do Ajax é carregar um trecho de código HTML em uma determinada área da página. Para fazer isso, basta selecionar. o elemento e use a função load(). Aqui está um exemplo de atualização de algumas estatísticas $('#stats').load('stats.html'); página lateral. Como você deve ter adivinhado, é muito simples usar jQuery. Você pode optar por usar $.post() ou $.get(), é claro, dependendo de suas necessidades específicas. objeto de dados opcional e uma função de retorno de chamada A Listagem 4 é um exemplo simples de envio de dados e uso de uma função de retorno de chamada:
Listagem 4. Enviando dados para uma página com Ajax
$.post('save.cgi', {text: 'my string'. ,número: 23}, function() {alert('Seus dados foram salvos.');}); Se você realmente deseja algum código Ajax complexo, use a função $.ajax() Você pode especificar o tipo de dados como. xml, html, script ou json, jQuery preparará automaticamente os resultados para você e sua função de retorno de chamada poderá usar os dados imediatamente. Você também pode definir as funções beforeSend, error, success e complete para fornecer ao usuário mais algumas dicas sobre o ajax. Além disso, existem alguns parâmetros que permitem definir o tempo limite para solicitações ajax ou o status de "última alteração" de uma página. A Listagem 5 mostra um exemplo de como obter um documento xml e usar o método que mencionei acima. exemplo de alguns parâmetros:
Listagem 5. Ajax complexo simplificado com $.ajax()
$.ajax({url: 'document.xml',type: 'GET',dataType: 'xml',timeout: 1000, error: function (){alert('Error loading XML document');},success: function(xml){// faça algo com xml}}); Ao obter feedback xml, você pode usar jQuery para percorrer o documento xml, apenas
como você faz com html. Isso torna muito simples manipular um arquivo xml e integrar o conteúdo na página.Listagem 6
estende a função de sucesso, de acordo com cada <item> no documento xml na página.
. Trabalhando com XML usando jQuery com
sucesso: function(xml){$(xml).find('item').each(function(){var item_text = $(this). text();$('<li>< /li>').html(item_text).appendTo('ol');});}