sábado, 18 de janeiro de 2014

Node.js

O que exatamente é o Node.js?

Um servidor pronto para codificar
O Node é um interpretador JavaScript do lado do servidor que altera a noção de como um servidor deveria funcionar. Seu objetivo é possibilitar que um programador crie aplicativos altamente escaláveis e escreva código que manipule dezenas de milhares de conexões simultâneas em uma, e somente uma, máquina física.

Introdução

Se você ouviu do Node, ou leu artigos que proclamam como ele é maravilhoso, poderá estar pensando: "Afinal, o que é Node.js?". Apesar de não ser para todos, o Node pode ser a escolha certa para algumas pessoas.
Este artigo buscará responder o que é o Node.js resumindo o problema que ele pode resolver, como ele funciona, como executar um aplicativo simples e, finalmente, quando o Node é e quando não é uma boa solução. Ele não abordará como escrever um aplicativo Node complicado nem será um tutorial completo sobre Node. A leitura deste artigo o ajudará a decidir se você deverá buscar aprender Node para usar em seu próprio negócio.

Que problema o Node soluciona?

O objetivo declarado do Node é "fornecer uma maneira fácil de criar programas de rede escaláveis". Qual é o problema com os programas de servidor atuais? Vamos fazer as contas. Em linguagens como Java™ e PHP, cada conexão inicia um novo encadeamento que, potencialmente, é acompanhado de 2 MB de memória. Em um sistema que tenha 8 GB de RAM, isto define o número máximo teórico de conexões simultâneas em cerca de 4.000 usuários. À medida que sua base de clientes cresce, você deseja que seu aplicativo da Web suporte mais usuários e, portanto, será necessário adicionar mais servidores. É claro, isso se soma a custos de negócios, especificamente custos de servidor, custos de tráfego e custos de mão de obra. Adicione a esses custos o problema técnico potencial de que um usuário poderá usar diferentes servidores para cada solicitação, de forma que quaisquer recursos compartilhados deverão ser compartilhados por todos os servidores. Por exemplo, no Java, variáveis estáticas e caches precisam ser compartilhados entre as JVMs em cada servidor. Este é o gargalo de toda a arquitetura de aplicativos da web, o número máximo de conexões simultâneas que um servidor pode tratar.
O Node soluciona o problema mudando a forma como uma conexão é feita no servidor. Em vez de iniciar um novo encadeamento do SO para cada conexão (e alocar a memória correspondente com ele), cada conexão cria um processo, que não requer que o bloco de memória o acompanhe. O Node alega que nunca ocorrerá um impasse de bloqueios, pois não são permitidos bloqueios e ele não bloqueia diretamente para realizar chamadas de E/S. O Node também alega que um servidor que o execute pode suportar dezenas de milhares de conexões simultâneas. De fato, o Node altera o panorama do servidor ao mudar o gargalo do sistema inteiro do número máximo de conexões para a capacidade de tráfego de um único sistema.
Portanto, agora que você tem um programa que pode tratar dezenas de milhares de conexões simultâneas, o que você pode de fato criar com o Node? Seria ótimo se você tivesse um aplicativo da Web que exigisse tantas conexões. Este é um daqueles problemas do tipo "se você tem esse problema, ele não é um problema". Antes de chegarmos a isso, vejamos como o Node funciona e como foi projetado para ser executado.

O que o Node definitivamente não é

Sim, o Node é um programa de servidor. No entanto, ele definitivamente não é como o Apache ou o Tomcat. Esses servidores são produtos de servidor independentes, prontos para instalar e implementar aplicativos instantaneamente. Você poderá ter um servidor em execução em um minuto com esses produtos. O Node definitivamente não é isso. O Apache pode adicionar um módulo PHP para permitir que os desenvolvedores criem páginas da Web dinâmicas, e os programadores usando Tomcat podem implementar JSPs para criar páginas da Web dinâmicas. O Node definitivamente não é isso.
Neste momento inicial da vida do Node (atualmente na versão 0.4.6), ele não é um programa de servidor pronto para ser executado, onde você espera instalá-lo, colocar seus arquivos dentro dele e ter um servidor da Web totalmente funcional. Ele ainda requer uma quantidade de trabalho não trivial para obter até mesmo a funcionalidade básica de um servidor da Web funcionando depois de concluir a instalação.
O Node propriamente dito executa V8 JavaScript. Espere, JavaScript no servidor? Sim, você leu corretamente. O JavaScript no lado do servidor é um conceito relativamente novo, e há cerca de dois anos, aqui no developerWorks, ele foi mencionado em uma discussão sobre o produto Aptana Jaxer (consulte Recursos). Apesar de o Jaxer nunca ter chegado a tanto, a ideia em si não era tão absurda — por que não usar no cliente a mesma linguagem de programação que você usa no servidor?
O que é o V8? O mecanismo V8 JavaScript é o mecanismo subjacente do JavaScript que o Google usa com seu navegador Chrome. Poucas pessoas pensam sobre o que de fato ocorre com o JavaScript no cliente. Um mecanismo JavaScript, de fato, interpreta o código e o executa. Com o V8, o Google criou um interpretador ultrarrápido escrito em C++ que tem um aspecto exclusivo: é possível fazer o download do mecanismo e integrá-lo em qualquer aplicativo que você desejar. Ele não é restrito à execução em um navegador. Portanto, o Node, na verdade, usa o mecanismo V8 JavaScript escrito pelo Google e o redireciona para uso no servidor. Perfeito! Por que criar uma nova linguagem quando há uma boa solução já disponível.

Programação direcionada a eventos

Muitos programadores foram ensinados a acreditar que a programação orientada a objeto é o projeto de programação perfeito e a não usarem nada mais. O Node utiliza o que é chamado de modelo de programação direcionado a eventos.
Listagem 1. Programação direcionada a evento no lado do cliente com jQuery
// jQuery code on the client-side showing how Event-Driven programming works

// When a button is pressed, an Event occurs - deal with it
// directly right here in an anonymous function, where all the
// necessary variables are present and can be referenced directly
$("#myButton").click(function(){
     if ($("#myTextField").val() != $(this).val())
         alert("Field must match button text");
});
O lado do servidor, na verdade, não é diferente do lado do cliente. Verdade, não é preciso pressionar botões, nem digitar em campos de texto, mas, em um nível mais alto, eventos estão ocorrendo. Uma conexão é feita — evento! Dados são recebidos pela conexão — evento! Dados param de chegar pela conexão — evento!
Por que este tipo de configuração é ideal para o Node? O JavaScript é uma excelente linguagem para programação direcionada a eventos, pois permite funções e fechamentos anônimos e, mais importante, a sintaxe é familiar para quase todos que alguma vez já programaram. As funções de callback que são chamadas quando um evento ocorre podem ser escritas no mesmo local onde você captura o evento. Portanto, é fácil de codificar, fácil de manter, sem estruturas orientadas a objetos complicadas, sem interfaces e sem potencial para excessos na arquitetura. Basta aguardar um evento, escrever uma função de callback e a programação direcionada a eventos toma conta de tudo!

Exemplo de aplicativo Node

Finalmente vamos ver algum código! Vamos juntar tudo o que discutimos e criar nosso primeiro aplicativo Node. Como vimos que o Node é ideal para tratar aplicativos com alto tráfego, vamos criar um aplicativo da Web muito simples, criado para oferecer velocidade máxima. Eis as especificações de nosso aplicativo de amostra transmitidas pelo "chefe": Criar uma API ReSTful geradora de números randômicos. O aplicativo deverá receber uma entrada, um parâmetro chamado "number". O aplicativo, a seguir, retornará um número randômico entre 0 e este parâmetro, e retornará o número gerado para o chamador. Como o "chefe" espera que esse aplicativo seja extremamente popular, ele deverá tratar 50.000 usuários simultâneos. Vamos ver o código:
Gerador de número randômico do Node
// these modules need to be imported in order to use them.
// Node has several modules.  They are like any #include
// or import statement in other languages
var http = require("http");
var url = require("url");

// The most important line in any Node file.  This function
// does the actual process of creating the server.  Technically,
// Node tells the underlying operating system that whenever a
// connection is made, this particular callback function should be
// executed.  Since we're creating a web service with REST API,
// we want an HTTP server, which requires the http variable
// we created in the lines above.
// Finally, you can see that the callback method receives a 'request'
// and 'response' object automatically.  This should be familiar
// to any PHP or Java programmer.
http.createServer(function(request, response) {

     // The response needs to handle all the headers, and the return codes
     // These types of things are handled automatically in server programs
     // like Apache and Tomcat, but Node requires everything to be done yourself
     response.writeHead(200, {"Content-Type": "text/plain"});

     // Here is some unique-looking code.  This is how Node retrieves
     // parameters passed in from client requests.  The url module
     // handles all these functions.  The parse function
     // deconstructs the URL, and places the query key-values in the
     // query object.  We can find the value for the "number" key
     // by referencing it directly - the beauty of JavaScript.
     var params = url.parse(request.url, true).query;
     var input = params.number;

     // These are the generic JavaScript methods that will create
     // our random number that gets passed back to the caller
     var numInput = new Number(input);
     var numOutput = new Number(Math.random() * numInput).toFixed(0);
     
     // Write the random number to response
     response.write(numOutput);
     
     // Node requires us to explicitly end this connection.  This is because
     // Node allows you to keep a connection open and pass data back and forth,
     // though that advanced topic isn't discussed in this article.
     response.end();

   // When we create the server, we have to explicitly connect the HTTP server to
   // a port.  Standard HTTP port is 80, so we'll connect it to that one.
}).listen(80);

// Output a String to the console once the server starts up, letting us know everything
// starts up correctly
console.log("Random Number Generator Running...");

Iniciando esse aplicativo

Coloque o código acima em um arquivo chamado "random.js". Agora, para iniciar esse aplicativo e executá-lo (portanto, criar o servidor HTTP e aguardar conexões na porta 80), simplesmente execute o comando a seguir em seu prompt de comando: % node random.js. Eis o que se parecerá quando o servidor estiver em execução.
root@ubuntu:/home/moilanen/ws/mike# node random.js
Random Number Generator Running...

Acessando esse aplicativo

O aplicativo está em execução. O Node está aguardando conexões neste momento, então vamos testar o aplicativo. Como criamos uma API RESTful simples, podemos acessar o aplicativo usando nosso navegador. Digite o seguinte endereço (assegure-se de ter completado a etapa anterior): http://localhost/?number=27.
A janela de seu navegador mudará para um número aleatório entre 0 e 27. Pressione recarregar em seu navegador e obterá outro número randômico. E aí está, seu primeiro aplicativo Node!

Node, para que ele serve?

Depois de ler tudo sobre o Node, você poderá responder o que ele é, mas ainda imaginará quando deverá usá-lo. Essa é uma pergunta importante a fazer, pois existem certas coisas para as quais o Node é bom e, de forma contrária, há certas coisas para as quais o Node, no momento, provavelmente não é uma boa solução. Você precisa decidir cuidadosamente quando usar o Node, pois usá-lo na situação errada poderá levar a MUITA codificação extra.

Para o que ele é bom

Como você viu até agora, o Node é extremamente bem projetado para situações em que um grande volume de tráfego é esperado e a lógica e o processamento necessários do lado do servidor não são necessariamente volumosos antes de responder ao cliente. Bons exemplos de onde o Node seria excelente incluem:
  • Uma API RESTfulUm serviço da Web que forneça uma API RESTful recebe alguns parâmetros, interpreta-os, monta uma resposta e envia-a (normalmente uma quantidade relativamente pequena de texto) de volta ao usuário. Esta é uma situação ideal para o Node, pois você poderá criá-lo para tratar dezenas de milhares de conexões. Ela também não requer um grande volume de lógica; ela simplesmente procura valores em um banco de dados e monta uma resposta. Como a resposta é uma pequena quantidade de texto e a solicitação de entrada é uma pequena quantidade de texto, o volume de tráfego não é grande, e um computador poderá provavelmente tratar as demandas de API mesmo da API da empresa mais movimentada.
  • Fila do TwitterPense em uma empresa como a Twitter, que precisa receber tweets e gravá-los em um banco de dados. Existem literalmente milhares de tweets chegando a cada segundo e o banco de dados não consegue acompanhar o número de gravações necessárias durante os momentos de pico de uso. O Node torna-se uma engrenagem importante na solução deste problema. Como vimos, o Node consegue tratar dezenas de milhares de tweets que chegam. Ele pode gravá-los rápida e facilmente em um mecanismo de enfileiramento em memória (memcached, por exemplo), a partir do qual outro processo separado pode gravá-los no banco de dados. A função do Node é rapidamente coletar o tweet e passar essa informação para outro processo, responsável por gravá-lo. Imagine outro projeto — um servidor PHP normal que tenta tratar gravações no banco de dados em si — cada tweet causaria um pequeno atraso ao ser gravado pelo banco de dados, pois a chamada ao banco de dados estaria sendo bloqueada. Uma máquina com este design só poderia ser capaz de tratar 2000 tweets por segundo, devido à latência do banco de dados. Um milhão de tweets por segundo requer 500 servidores. O Node, em vez disso, trata cada conexão e não bloqueia, possibilitando que ele capture o máximo de tweets possível. Uma máquina com Node, capaz de tratar 50.000 tweets por segundo, requer somente 20 servidores.
  • Servidor de arquivos de imagemUma empresa que tem um grande Web site distribuído (pense no Facebook ou Flickr) poderia decidir dedicar servidores inteiros a simplesmente servir imagens. O Node seria uma boa solução para esse problema, pois a empresa pode usá-lo para codificar um recuperador de arquivos fácil e, a seguir, tratar dezenas de milhares de conexões. O Node procuraria pelo arquivo de imagem, retornaria o próprio arquivo ou um erro 404 e não faria mais nada. Essa configuração permitiria que esses tipos de Web sites distribuídos reduzissem o número de servidores necessários para servir arquivos estáticos, como imagens, arquivos .js e arquivos .css.

Para o que ele não serve

É claro, o Node não é a escolha ideal em algumas situações. Eis alguns cenários em que o Node não seria bom:
  • Páginas criadas dinamicamenteAtualmente, o Node não fornece uma forma padrão para criar páginas dinâmicas. Por exemplo, ao usar a tecnologia JavaServer Pages (JSP), é possível criar uma página index.jsp que contenha loops em snippers JSP, como <% for (int i=0; i<20; i++) { } %>. O Node não permite esses tipos de páginas dinâmicas direcionadas a HTML. Novamente, o Node não é idealmente adequado para ser um servidor de páginas da web, como o Apache e o Tomcat o são. Portanto, se quisesse fornecer uma solução no lado do servidor para isto no Node, teria que codificar a solução inteira você mesmo. Um programador PHP não gostaria de programar um conversor PHP para o Apache toda vez que implementasse um aplicativo da web, mas, neste momento, é o que o Node exigiria que você fizesse.
  • Aplicativos pesados em bancos de dados relacionaisO Node foi projetado para ser rápido, assíncrono e sem bloqueio. Os bancos de dados não necessariamente compartilham desses objetivos. Eles são síncronos e com bloqueio, pois chamadas ao banco de dados para leitura e gravação bloqueiam até que um resultado seja gerado. Portanto, um aplicativo da Web que solicite muitas chamadas ao banco de dados, muitas leituras e muitas gravações com cada solicitação seria uma aplicação ruim para o Node, pois o banco de dados relacional em si estaria negando muitos dos pontos fortes do Node. (Os novos bancos de dados NoSQL são uma escolha melhor para o Node, mas este é um tópico totalmente diferente).

Conclusão

A pergunta "O que é Node.js?" deve estar respondida. Depois de ler esse artigo, você deverá ser capaz de explicar, em poucas frases claras e concisas, o que é o Node.js. Se puder fazer isso, você está à frente de muitos codificadores e programadores. Muitas pessoas com quem conversei sobre o Node ficaram confusas sobre o que exatamente ele faz. Eles estão, compreensivelmente, com a postura mental do Apache — um servidor é um aplicativo no qual você coloca seus arquivos HTML e tudo funciona. O Node é direcionado a finalidade. É um software que usa JavaScript para permitir que os programadores rápida e facilmente criem servidores da Web rápidos e escaláveis. Onde o Apache é pronto para executar, o Node é pronto para codificar.
O Node atinge seus objetivos fornecendo servidores altamente escaláveis. Ele não aloca um modelo de encadeamento por conexão, mas usa um modelo processo por conexão, criando somente a memória que é necessária para cada conexão. Ele usa um mecanismo JavaScript extremamente rápido do Google, o mecanismo V8. Ele usa um projeto direcionado a eventos para manter o código mínimo e fácil de ler. Todos esses fatores levam ao objetivo desejado do Node — é relativamente fácil escrever uma solução altamente escalável.
Tão importante quanto entender o que o Node é, é entender o que ele não é. O Node não é simplesmente uma substituição para o Apache que tornará seu aplicativo PHP da Web mais escalável. Isto não pode estar mais longe da verdade. Neste estágio preliminar da vida do Node, ele tem um potencial limitado para uso por muitos programadores, mas nas situações em que faz sentido usá-lo, ele funciona extremamente bem.
O que se pode esperar do Node no futuro? Essa é, talvez, a pergunta mais importante a levar deste artigo. Agora que você sabe o que ele faz, procure saber o que ele fará a seguir. No próximo ano, espero que o Node ofereça melhor integração com bibliotecas de suporte de terceiros existentes. No momento, muitos programadores terceiros desenvolveram plugins para o Node, incluindo a adição de suporte ao servidor de arquivos e ao MySQL. Espero que o Node comece a integrar isso na funcionalidade principal. Eventualmente, também espero que o Node suporte algum tipo de módulo de página dinâmica, permitindo fazer os tipos de coisas em um arquivo HTML que é possível fazer no PHP e JSPs (talvez uma NSP, página de servidor Node). Finalmente, em algum momento, espero um servidor Node pronto para implantação, que você faça o download, instale e simplesmente coloque seus arquivos HTML dentro dele como faria com o Apache ou o Tomcat. Ainda é cedo na vida do Node, mas ele está crescendo rapidamente e poderá, em breve, estar em seu horizonte.

terça-feira, 7 de janeiro de 2014

SQL - principais comanados



SQL comandos básicos



SQL Statement Syntax
AND / OR




ALTER TABLE
ALTER TABLE table_name
ADD column_name datatype
or

ALTER TABLE table_name
DROP COLUMN column_name
AS (alias) SELECT column_name AS column_alias
FROM table_name

or
SELECT column_name
FROM table_name  AS table_alias
BETWEEN SELECT column_name(s)
FROM table_name
WHERE column_name
BETWEEN value1 AND value2
CREATE DATABASE CREATE DATABASE database_name
CREATE TABLE
CREATE TABLE table_name

(
column_name1 data_type,
column_name2 data_type,
column_name2 data_type,
...
)
CREATE INDEX CREATE INDEX index_name
ON table_name (column_name)
or
CREATE UNIQUE INDEX index_name
ON table_name (column_name)
CREATE VIEW CREATE VIEW view_name AS
SELECT column_name(s)
FROM table_name
WHERE condition
DELETE DELETE FROM table_name
WHERE some_column=some_value
or
DELETE FROM table_name
(Note: Deletes the entire table!!)

DELETE * FROM table_name
(Note: Deletes the entire table!!)
DROP DATABASE DROP DATABASE database_name
DROP INDEX DROP INDEX table_name.index_name (SQL Server)
DROP INDEX index_name ON table_name (MS Access)
DROP INDEX index_name (DB2/Oracle)
ALTER TABLE table_name
DROP INDEX index_name (MySQL)
DROP TABLE DROP TABLE table_name
GROUP BY SELECT column_name, aggregate_function(column_name)
FROM table_name
WHERE column_name operator value
GROUP BY column_name
HAVING SELECT column_name, aggregate_function(column_name)
FROM table_name
WHERE column_name operator value
GROUP BY column_name
HAVING aggregate_function(column_name) operator value
IN SELECT column_name(s)
FROM table_name
WHERE column_name
IN (value1,value2,..)
INSERT INTO INSERT INTO table_name
VALUES (value1, value2, value3,....)
or
INSERT INTO table_name
(column1, column2, column3,...)
VALUES (value1, value2, value3,....)
INNER JOIN SELECT column_name(s)
FROM table_name1
INNER JOIN table_name2
ON table_name1.column_name=table_name2.column_name
LEFT JOIN SELECT column_name(s)
FROM table_name1
LEFT JOIN table_name2
ON table_name1.column_name=table_name2.column_name
RIGHT JOIN SELECT column_name(s)
FROM table_name1
RIGHT JOIN table_name2
ON table_name1.column_name=table_name2.column_name
FULL JOIN SELECT column_name(s)
FROM table_name1
FULL JOIN table_name2
ON table_name1.column_name=table_name2.column_name
LIKE SELECT column_name(s)
FROM table_name
WHERE column_name LIKE pattern
ORDER BY SELECT column_name(s)
FROM table_name
ORDER BY column_name [ASC|DESC]
SELECT SELECT column_name(s)
FROM table_name
SELECT * SELECT *
FROM table_name
SELECT DISTINCT SELECT DISTINCT column_name(s)
FROM table_name
SELECT INTO SELECT *
INTO new_table_name [IN externaldatabase]
FROM old_table_name
or
SELECT column_name(s)
INTO new_table_name [IN externaldatabase]
FROM old_table_name
SELECT TOP SELECT TOP number|percent column_name(s)
FROM table_name
TRUNCATE TABLE TRUNCATE TABLE table_name
UNION SELECT column_name(s) FROM table_name1
UNION
SELECT column_name(s) FROM table_name2
UNION ALL SELECT column_name(s) FROM table_name1
UNION ALL
SELECT column_name(s) FROM table_name2
UPDATE UPDATE table_name
SET column1=value, column2=value,...
WHERE some_column=some_value
WHERE SELECT column_name(s)
FROM table_name
WHERE column_name operator value

domingo, 5 de janeiro de 2014

JQuery - do básico ao avançado, completo!

O que é jQuery?

Desde que você chegou a esta página , você já pode ter uma boa idéia sobre o que é jQuery , mas para estar no lado seguro, aqui está uma breve explicação. jQuery é um framework JavaScript , cujo objetivo é torná-lo mais fácil de usar JavaScript em seu site. Você também pode descrever jQuery como uma camada de abstração , uma vez que tem um monte de funcionalidades que você teria que escrever muitas linhas de JavaScript para realizar e envolve -lo em funções que você pode chamar com uma única linha de código. É importante notar que o jQuery não substitui JavaScript, e enquanto ele oferece alguns atalhos sintáticos , o código que você escreve quando você usa jQuery ainda é código JavaScript .
Com isso em mente, você deve estar ciente de que você não precisa ser um especialista em JavaScript para usar o jQuery. Na verdade, jQuery tenta simplificar um monte de coisas complicadas de JavaScript , como as chamadas AJAX e manipulação DOM , de modo que você pode fazer estas coisas sem saber muito sobre JavaScript.
Há um monte de outros frameworks JavaScript lá fora, mas a partir de agora , jQuery parece ser o mais popular e também o mais extensível , provado pelo fato de que você pode encontrar plugins jQuery para praticamente qualquer tarefa lá fora. O poder , a grande variedade de plugins e do belo sintaxe é o que faz uma grande jQuery tal quadro . Continue lendo para saber muito mais sobre ele e ver por que recomendamos.


Um editor de jQuery
Assim como com HTML, CSS e JavaScript , mesmo regularmente , você pode escrever jQuery em qualquer tipo de editor, até mesmo o Windows Notepad . No entanto, usando um editor de texto simples como o bloco de notas para a criação de páginas web é como usar uma chave de fenda para fazer furos em um pedaço de madeira : Ele funciona , mas leva muito mais tempo e é muito menos agradável .
Se você já tem um editor HTML que permite que você trabalhe facilmente com JavaScript, então ele provavelmente vai ser bom para escrever jQuery bem , mas há editores lá fora, que vai tratar jQuery como um cidadão de primeira classe e ajudá-lo a digitar mais rápido e mais eficiente .
Eu pessoalmente uso TSW WebCoder , que tem um monte de características impressionantes IntelliSense para ajudá-lo , cobrindo todas as tecnologias que você precisa : HTML , CSS, JavaScript, PHP e, claro, jQuery. Ter uma lista de possíveis propriedades, métodos e seus parâmetros é uma grande ajuda , especialmente quando você é novo para jQuery. Se o seu editor atual já faz tudo isso , e você se sente confortável com isso, então por todos os meios cumpri-lo - se não, então considere dar WebCoder uma tentativa.

  • Mais informações sobre TSW WebCoder
  •  Baixe TSW WebCoder

Aqui está um par de imagens para mostrar-lhe porquê TSW WebCoder torna muito mais fácil trabalhar com jQuery :


TSW WebCoder mostrando possíveis métodos em um editor de jQuery objeto jQuery - listas de conclusão

Dicas de parâmetro - TSW WebCoder mostrando os paramters do editor fadeIn método jQuery




jQuery editor - Completion lists
  
 TSW WebCoder mostrando os paramters do método
jQuery editor - Parameter hints 
Introdução

Para usar o jQuery , você precisa incluí-lo nas páginas onde você deseja tirar proveito dela . Você pode fazer isso através do download do jQuery o site www.jquery.com . Geralmente, há uma escolha entre uma versão " Produção" e uma versão de " desenvolvimento" .
A versão " Produção" é para o seu site ao vivo , porque foi minified e comprimido para ocupar o mínimo de espaço, o que é importante para os seus visitantes , cujo navegador terá que baixar o arquivo jQuery juntamente com o resto do seu site . Para os testes e desenvolvimento, a versão " Desenvolvimento " é o melhor. Não foi minified ou comprimido, por isso, quando você tiver um erro, você pode realmente ver onde em jQuery isso acontece.
Uma vez que o arquivo JavaScript jQuery foi baixado , você terá que fazer referência a ela em suas páginas, usando a tag HTML <script> . A maneira mais fácil é colocar o arquivo baixado jquery.js no mesmo diretório que a página de onde você deseja usá-lo e , em seguida, fazer referência a ela como esta, na seção <head> do seu documento :Tente este exemplo!
<script type="text/javascript" src="jquery-1.5.1.js"> </ script>
Uma parte de sua página agora deve ser algo como isto:Tente este exemplo!
<head>
        
<title> teste jQuery </ title>
        
<script type="text/javascript" src="jquery-1.5.1.js"> </ script>
</ head>
Uma abordagem mais moderna, em vez de baixar e hospedagem jQuery mesmo, é para incluí-lo a partir de uma CDN ( Content Delivery Network ) . Google e Microsoft sediar várias versões diferentes do jQuery e outros frameworks JavaScript . Isso evita que você ter que baixar e armazenar o framework jQuery , mas tem uma vantagem muito maior: Como o arquivo vem de uma URL comum que outros sites podem usar também , as chances são de que , quando as pessoas atinge o seu site e seu navegador solicita a framework jQuery, ele já pode estar no cache, porque outro site está usando a mesma versão e arquivo exato . Além disso , a maior parte do CDN irá certificar-se que uma vez que um usuário solicita um arquivo a partir dele , é servido a partir do servidor mais próximo a eles , para que os seus utilizadores europeus não terá que obter o arquivo de toda a maneira de os EUA e assim por diante .
Você pode usar o jQuery de uma CDN assim como você faria com a versão baixada , apenas as mudanças de URL . Por exemplo, para incluir 1.5.1 jQuery do Google, você escreveria o seguinte :Tente este exemplo!
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"> </ script>
Eu sugiro que você usar essa abordagem, a menos que você tenha um motivo específico para hospedagem jQuery si mesmo. Aqui está um link para a informação jQuery CDN do Google:
http://code.google.com/intl/da/apis/libraries/devguide.html # jquery
Ou se você preferir usá-lo a partir da Microsoft:
http://www.asp.net/ajaxlibrary/cdn.ashx # jQuery_Releases_on_the_CDN_0


Olá, mundo!Cada tutorial de programação decente vai começar com um "Olá, mundo! " exemplo e este tutorial é mais um deles . No capítulo anterior , aprendemos como incluir jQuery na nossa página , para que possamos começar a usar todas as suas grandes características . Você precisa saber um pouco mais sobre como o jQuery funciona, antes de começar a escrever o seu próprio código, mas apenas para se certificar de que tudo está funcionando, e para você ver como é simples jQuery é , vamos começar com um pequeno exemplo :Tente este exemplo!

<div id="divTest1"> </ div><script type="text/javascript">. $ ("# divTest1 " ) texto ("Olá , mundo! ");</ script>
Ok, então temos uma tag div com o id " divTest1 " . No código JavaScript , usamos o $ atalho para acessar jQuery, então vamos selecionar todos os elementos com um id " divTest1 " ( há apenas um embora) e defina seu texto como "Olá, mundo! " . Você pode não saber o suficiente sobre jQuery para entender por que e como isso funciona, mas à medida que avança através deste tutorial, de todos os elementos serão explicados em detalhe.
Mesmo uma tarefa tão simples como isto seria realmente necessitam de algumas combinações de teclas extras se você tivesse que fazê-lo em JavaScript simples , sem a ajuda de jQuery :Tente este exemplo!
<div id="divTest2"> </ div><script type="text/javascript">document.getElementById ( " divTest2 " ) innerHTML = " Olá, mundo! " . ;</ script>E seria ainda mais se o nosso elemento HTML não tem um ID, mas , por exemplo, apenas uma classe.
Normalmente , porém, você esperar pelo documento para entrar no estado de pronto antes de começar a manipular o seu conteúdo. Os exemplos acima irá funcionar na maioria dos navegadores e, provavelmente, até mesmo trabalhar quando você faz coisas mais avançadas , mas certas tarefas pode falhar se você tentar fazê-las antes que o documento é carregado e pronto . Felizmente, jQuery torna isso muito fácil também, como veremos no próximo capítulo . Depois disso , iremos começar a olhar para um dos aspectos mais importantes da jQuery , que já foi utilizado no exemplo acima : seletores .


ready event

Como mencionado no capítulo anterior , é uma boa prática para esperar o documento para ser completamente carregado e pronto , antes de trabalhar com ele. Isso também permite que você tenha o seu código JavaScript antes do corpo do documento , na seção principal , diretamente ou através de um link para um arquivo JavaScript externo. Você pode fazer isso , colocando o código dentro do evento pronto documento. Vamos usar o mesmo exemplo do "Olá, mundo! " capítulo , mas desta vez o código está dentro do evento pronto :Tente este exemplo!

<div id="divTest1"> </ div><script type="text/javascript">funcionar DocumentReady ( ){
        
. $ ("# divTest1 " ) texto ("Olá , mundo! ");}
$ (document) ready ( DocumentReady ) . ;
</ script>
O que fazemos aqui é que nós criamos uma função, chamada DocumentReady , que deve ser demitido assim que o documento está pronto para manipulação DOM. Na última linha , usamos o método ready () para atribuir a nossa função para o evento pronto , para dizer jQuery que, assim que o documento estiver pronto, nós queremos que ele chame a nossa função .
No entanto , podemos reduzir isso um pouco , usando uma função anônima de JavaScript em seu lugar. Isso basicamente significa que em vez de declarar a função e dando-lhe um nome, nós simplesmente criá-lo e logo em seguida passa a referência à função ready () . Se você é novo para JavaScript, então isso pode parecer muito complicado , mas como você se acostumar com isso , você pode apreciar as menos digitação e menos espaço necessário para realizar o mesmo :Tente este exemplo!
<div id="divTest2"> </ div><script type="text/javascript">$ (document) . ready (function (){
        
. $ ("# divTest2 " ) texto ("Olá , mundo! ");} ) ;
</ script>
Mas, claro, isso não foi ainda suficientemente curto para a equipe de jQuery, então eles decidiram criar uma versão (sobrecarga ) do construtor jQuery que tem uma função pronta como um parâmetro, para torná-lo ainda mais curto :Tente este exemplo!
<div id="divTest3"> </ div><script type="text/javascript">$ (function (){
        
. $ ("# divTest3 " ) texto ("Olá , mundo! ");} ) ;
</ script>
No último exemplo , a nossa função anônima é passado diretamente para o construtor jQuery , que atribui ao evento pronto . Como você vai ver quando você testar o código, o evento é acionado assim que a página é carregada, na maioria das vezes tão rápido que você nem vai perceber.
Como já foi descrito , envolvendo o seu código na função evento pronto é a melhor prática para trabalhar com jQuery no documento, e, portanto, você vai ver este tutorial usando a abordagem na maioria dos exemplos , a não ser ignorados para manter exemplo tamanhos para baixo.


Method chaining


No entanto, outro dos aspectos muito legais de jQuery é o fato de que a maioria dos métodos retorna um objeto jQuery , que você pode usar para chamar outro método. Isto permite-lhe fazer o encadeamento de comando, onde você pode executar vários métodos em um mesmo conjunto de elementos , o que é muito legal porque você economiza eo navegador de ter que encontrar os mesmos elementos mais do que uma vez. Aqui está um exemplo , e não se preocupe com os métodos do jQuery utilizados nos exemplos a seguir - eles serão explicados nos capítulos seguintes :Tente este exemplo!
<div id="divTest1"> </ div><script type="text/javascript">
        
. . $ ("# divTest1 " ) texto ( "Olá , mundo " ) css ( "cor", "azul" );
</ script>
Ele funciona assim: Nós instanciar um novo objeto jQuery e selecione o elemento divTest1 com o caractere $ , que é um atalho para a classe jQuery. Em troca , recebemos um objeto jQuery, o que nos permite manipular o elemento selecionado. Usamos esse objeto para chamar o texto ( método ), que define o texto do elemento selecionado (s) . Esse método retorna o objeto jQuery , novamente, o que nos permite usar outro método chamar diretamente sobre o valor de retorno , que é o método () css .
Podemos adicionar mais chamadas de método , se necessário , mas em algum momento, a linha de código vai ser bastante demorado. Felizmente para nós, JavaScript não é muito rigorosa quando se trata da sintaxe, para que você possa realmente formatá-lo como quiser, incluindo quebras de linha e recuos . Por exemplo , este vai funcionar muito bem , bem como:Tente este exemplo!
<div id="divTest2"> </ div><script type="text/javascript">
        
$ ("# divTest2 " ) . texto ("Olá , mundo !")
                                        
. removeClass ( "azul" )
                                        
. addClass ( "bold" )
                                        
. css ( "cor", "azul" );
</ script>
JavaScript simplesmente jogar fora o espaço em branco extra ao interpretar o código e executá-lo como uma longa linha de código com várias chamadas de método.
Note que alguns métodos não retornar o objeto jQuery, enquanto outros só devolvê-lo de acordo com os parâmetros que você passar para ele . Um bom exemplo disso é o método text () usado acima. Se nenhum parâmetro for passado para ele , o texto atual do elemento selecionado (s) é retornado em vez de um objeto jQuery, enquanto um único parâmetro faz com jQuery para definir o texto especificado e retornar um objeto jQuery.


Introdução aos seletores jQuery

Uma tarefa muito comum quando se usa JavaScript é ler e modificar o conteúdo da página. Para fazer isso, você precisa encontrar o elemento (s ) que você deseja mudar, e é aí que o apoio seletor em jQuery irá ajudá-lo. Com JavaScript normal, encontrando elementos podem ser extremamente complicado , a menos que você precisa encontrar um único elemento que tem um valor especificado no atributo ID . jQuery pode ajudar a encontrar elementos com base em sua ID , classes, tipos , atributos, valores de atributos e muito, muito mais . É baseado em seletores CSS e como você vai ver depois de passar por este tutorial , é extremamente poderoso. Ao usar este tipo de software para fazer alterações em seu site , é importante que você tenha autenticação de dois fatores para que o seu site eo computador não está comprometida.
Porque esta é uma tarefa tão comum , o construtor jQuery vem em várias formas que leva uma consulta seletor como um argumento, o que lhe permite localizar elemento (s) com uma quantidade muito limitada de código para máxima eficiência. Você pode instanciar o objeto jQuery , simplesmente por escrever jQuery () ou ainda mais curtos usando o nome do atalho jQuery : $ (). Portanto , a seleção de um conjunto de elementos é tão simples como isto:
$ ( <query here> )
Com o objeto jQuery voltou , então você pode começar a usar o e alterando o elemento (s) você tem acompanhado . Nos capítulos seguintes , você vai ver exemplos de algumas das muitas maneiras que você pode selecionar elementos com jQuery.
 


Usando elementos, ID de e classes

O seletor # id


Um tipo de seletor muito comum é a identificação com base , o que vimos no "Olá, mundo " exemplo . Ele usa o atributo ID de uma tag HTML para localizar o elemento desejado. Um ID deve ser único , de modo que você só deve usar este seletor quando você deseja localizar um elemento único , exclusivo. Para localizar um elemento com um ID específico, escrever um caracter , seguido da identificação do elemento que você deseja localizar , como este:

$ ("# divTest " )
Um exemplo de que em uso:Tente este exemplo!
<div id="divTest"> </ div><script type="text/javascript">$ (function (){
        
. $ ("# divTest " ) texto ( "Teste" );} ) ;
</ script>
Agora, enquanto há apenas um único elemento que coincida com a nossa consulta acima, você deve estar ciente de que o resultado é uma lista, o que significa que ele pode conter mais de um elemento , se a consulta corresponde a mais de um. Um exemplo comum disso é combinar todos os elementos que utiliza uma ou várias classes CSS.O seletor de classe.Elementos com uma classe específica pode ser igualada por escrever um . seguido do nome da classe . Aqui está um exemplo:Tente este exemplo!
<ul>
        
Teste class="bold"> <li 1 </ li>
        
<li> Teste 2 </ li>
        
Teste class="bold"> <li 3 </ li></ ul><script type="text/javascript">$ (function (){
        
(". bold" ) . $ css ( " font-weight ", " negrito ");} ) ;
</ script>
O seletor de elemento


Você também pode combinar elementos com base em seus nomes de marca . Por exemplo, você pode combinar todos os links em uma página como esta :

$ ( " um " )
Ou tudo div tags como este :

$ (" div " )
Se você usar um seletor de multi- elemento , como o seletor de classe que usamos no exemplo anterior , e sabemos que estamos à procura de elementos de um tipo específico, é uma boa prática para especificar o tipo de elemento antes do seletor. Não só é mais preciso, ele é também mais rápido para jQuery para processar , resultando em locais mais sensíveis . Aqui está uma versão re- escrita do exemplo anterior, onde usamos este método:

. $ (" span.bold " ) css ( " font-weight ", " negrito ");
Isso irá corresponder a todos os elementos span com "bold" que a classe. É claro que pode ser usado com o ID do e praticamente todos os outros selectores bem .
Seletores podem fazer muito mais para você.



Usando atributos

No capítulo anterior , vimos como podemos encontrar elementos de uma página da sua classe ou sua ID . Essas duas propriedades são relacionadas devido ao fato de que você pode usá-los para estilizar os elementos com CSS, mas com jQuery, você pode realmente encontrar elementos com base em qualquer tipo de atributo. Ele vem com um monte de tipos de seletor de atributo e neste artigo , vamos olhar para alguns deles.Encontrar elementos com um atributo específicoA tarefa mais básica ao selecionar elementos com base em atributos é encontrar todos os elementos que tem um atributo específico . Esteja ciente de que o próximo exemplo não exige que o atributo de ter um valor específico, na verdade, ele nem sequer exige que ele tenha um valor. A sintaxe para este seletor é um conjunto de colchetes com o nome do atributo desejado dentro dele, por exemplo, [nome ] ou [ href ] . Aqui está um exemplo:Tente este exemplo!
<span title="Title 1"> Teste 1 </ span> <br /><span> Teste 2 </ span> <br /><span title="Title 3"> Teste 3 </ span> <br />
<script type="text/javascript">$ (function (){
        
$ (" [título] " ) css ("text -decoration ", " underline" ) . ;} ) ;
</ script>
Nós usamos o seletor de atributo para localizar todos os elementos na página que tem um atributo de título e , em seguida, sublinhar -lo. Como mencionado , isso vai corresponder a elementos com um elemento título não importa o que o seu valor é , mas às vezes você vai querer encontrar elementos com um atributo específico , que tem um valor específico.Encontrar elementos com um valor específico para um atributo específicoAqui está um exemplo onde encontramos elementos com um valor específico :Tente este exemplo!

<a href="http://www.google.com" Ligação target="_blank"> 1 </ a> <br /><a href="http://www.google.com" target="_self"> Link 2 </ a> <br /><a href="http://www.google.com" Ligação target="_blank"> 3 </ a> <br />
<script type="text/javascript">$ (function (){
        
. $ ("a [ target = ' _blank '] " ) anexar ("[ nova janela ]" );} ) ;
</ script>
O seletor simplesmente diz jQuery para encontrar todos os links (os elementos a) Que tenham um atributo de destino que equivale ao valor string " _blank" e , em seguida, acrescentar o texto " [ nova janela ]" para eles. Mas e se você está procurando por todos os elementos que não têm o valor ? Invertendo o seletor é muito fácil:

. $ ("a [! target = ' _blank '] " ) anexar ("[ mesma janela ]" );
A diferença é o ! = Em vez de = , uma forma comum de negar um operador dentro de muitas linguagens de programação.
E há ainda mais possibilidades :
Encontrar elementos com um valor que começa com uma seqüência específica usando o operador ^ = :
. $ ("input [name = ^ ' txt' ]" ) css ( "cor", "azul" );
Encontrar elementos com um valor que termina com uma seqüência específica usando o operador = $ :
. $ ("input [name $ = ' carta '] " ) css ( "cor", " vermelho ");
Encontrar elementos com um valor que contém uma palavra específica :

. $ ("input [name = * ' txt' ]" ) css ( "cor", "azul" );
 






Parent/child relation selectors

jQuery também permite que você selecione os elementos com base em seu elemento pai. Existem duas variações : uma que só irá coincidir com elementos que são uma criança direto para o elemento pai , e um que irá coincidir com todo o caminho através da hierarquia , por exemplo, uma criança de um filho de um filho de um elemento pai.
A sintaxe para encontrar crianças que são descendentes diretos de um elemento parecido com este:

$ (" div> a")
Este seletor vai encontrar todos os links que são o filho direto de um elemento div . Substituir o símbolo de maior que com um espaço simples vai mudar isso para corresponder a todos os links dentro de um elemento div , não importa se eles estão diretamente relacionados ou não:
$ (" div a")
Aqui está um exemplo em que as etiquetas de cores ousadas azul se eles estão descendo diretamente da primeira área de teste :Tente este exemplo!
<div id="divTestArea1">
        
<b> texto em negrito </ b>
        
texto <i> Itálico </ i>
        
<div id="divTestArea2">
                
<b> texto Bold 2 </ b>
                
texto <i> Itálico 2 </ i>
                
<div>
                        
<b> texto em negrito 3 </ b>
                
</ div>
        
</ div>
</ div>
<script type="text/javascript">. $ ("# divTestArea1 > b" ) css ( "cor", "azul" );</ script>
Como você vai ver , apenas a primeira tag negrito é colorido . Agora, se você tivesse usado a segunda abordagem , ambos os tags em negrito teria sido de cor azul . Tente o seguinte exemplo , onde a única coisa mudou é o personagem de maior que o que foi substituído por um espaço, notar que também aceitamos descendentes não- diretos ou " crianças grandes ", como são chamados às vezes :Tente este exemplo!
<div id="divTestArea1">
        
<b> texto em negrito </ b>
        
texto <i> Itálico </ i>
        
<div id="divTestArea2">
                
<b> texto Bold 2 </ b>
                
texto <i> Itálico 2 </ i>
                
<div>
                        
<b> texto em negrito 3 </ b>
                
</ div>
        
</ div>
</ div>
<script type="text/javascript">. $ ("# divTestArea1 b" ) css ( "cor", "azul" );</ script>
Agora a coisa legal é que você pode realmente voltar a subir na hierarquia , se necessário , utilizando o método () pai.


Fading elements

Fazer animação simples é muito fácil com jQuery. Um dos efeitos que ele suporta out-of -the-box , está desaparecendo um elemento dentro e fora de visibilidade. Aqui está um exemplo simples, em que se desvanece em uma caixa de outra forma oculta, utilizando o método ) fadeIn (:Tente este exemplo!
<div id="divTestArea1" style="padding: 50px; background-color: #89BC38; text-align:center;cursor:pointer; display: none;">
        
<b> Olá, mundo! </ b></ div><a href="javascript:void(0);" onclick="ShowBox();"> caixa Mostrar </ a><script type="text/javascript">ShowBox função (){
        
. $ ("# divTestArea1 " ) fadeIn ();}
</ script>
Você pode desaparecer uma série de diferentes elementos , como divs , spans ou links. O método fadeIn () pode levar até três parâmetros. O primeiro permite que você especifique a duração do efeito em milissegundos, ou " rápido " ou "lento" , que é o mesmo que especificar , quer 200 ou 600 milésimos de segundo. Aqui está um exemplo de que em uso:Tente este exemplo!
<div style="width: 50px; height: id="divTestArea21" 50px; display: none; background-color: #89BC38;"> </ div><div style="width: 50px; height: id="divTestArea22" 50px; display: none; background-color: #C3D1DF;"> </ div><div style="width: 50px; height: id="divTestArea23" 50px; display: none; background-color: #9966FF;"> </ div><a href="javascript:void(0);" onclick="ShowBoxes();"> mostrar caixas </ a><script type="text/javascript">ShowBoxes função ( ){
        
. $ ("# divTestArea21 " ) fadeIn ( " rápido ");
        
. $ ("# divTestArea22 " ) fadeIn ( " lento ");
        
. $ ("# divTestArea23 " ) fadeIn (2000);}
</ script>
Não se preocupe com toda a HTML, é só lá para que você possa ver a diferença entre as durações desvanecimento . Agora , o segundo parâmetro pode ser o nome de uma função de atenuação (que não vamos usar neste tutorial ) ou uma função de retorno de chamada que você pode fornecer , para ser chamado uma vez que o efeito é feito. Segue-se um exemplo de que , combinada com o uso do fadeOut ( método ) , o que , obviamente, tem o efeito inverso de fadeIn ( ) :Tente este exemplo!
<div style="width: 50px; height: id="divTestArea3" 50px; display: none; background-color: #89BC38;"> </ div><script type="text/javascript">$ (function (){
        
$ ("# divTestArea3 " ) . fadeIn (2000, function ()
        
{
                
. $ ("# divTestArea3 " ) fadeOut (3000) ;
        
} ) ;} ) ;
</ script>
Pode haver situações em que você quer a desvanecer-se um elemento em nossa fora , dependendo do seu estado atual. Você poderia , claro, verificar se ele está visível ou não, e , em seguida, chamar qualquer fadeIn () ou fadeOut (), mas os desenvolvedores do jQuery agradáveis ​​nos fornecido com um método específico para alternar um elemento, chamado fadeToggle (). Leva os mesmos parâmetros que fadeIn () e fadeOut () , por isso é muito fácil de usar . Aqui está um pequeno exemplo :Tente este exemplo!
<div style="width: 50px; height: id="divTestArea4" 50px; display: none; background-color: #89BC38;"> </ div> <br /><a href="javascript:void(0);" onclick="ToggleBox();"> Alternar caixa </ a><script type="text/javascript">ToggleBox função (){
        
. $ ("# divTestArea4 " ) fadeToggle ( " lento ");}
</ script>


Sliding elements



No capítulo anterior , vimos como poderíamos desaparecer elementos dentro e fora de visibilidade usando os métodos de desvanecimento de jQuery. No entanto, às vezes um efeito de deslizamento é uma escolha melhor, e para isso, jQuery possui um conjunto de métodos para fazer isso combinando . Vamos começar com um exemplo simples de que , onde usamos o método slideDown ():Tente este exemplo!
<div id="divTestArea1" style="padding: 50px; background-color: #89BC38; text-align:center;cursor:pointer; display: none;">
        
<b> Olá, mundo! </ b></ div><a href="javascript:void(0);" onclick="ShowBox();"> caixa Mostrar </ a><script type="text/javascript">ShowBox função (){
        
. $ ("# divTestArea1 " ) slideDown ();}
</ script>
Para esconder a caixa novamente , podemos usar o método () slideUp . Ambos tomar o mesmo conjunto de parâmetros , que são todos opcionais. O primeiro parâmetro permite que você especifique a duração do efeito em milissegundos, ou " rápido " ou "lento" , que é o mesmo que especificar ou 200 ou 600 tentar milliseconds.Let está um exemplo onde fazemos exatamente isso:Tente este exemplo!
<div style="width: 50px; height: id="divTestArea21" 50px; display: none; background-color: #89BC38;"> </ div><div style="width: 50px; height: id="divTestArea22" 50px; display: none; background-color: #C3D1DF;"> </ div><div style="width: 50px; height: id="divTestArea23" 50px; display: none; background-color: #9966FF;"> </ div><a href="javascript:void(0);" onclick="ShowBoxes();"> mostrar caixas </ a><script type="text/javascript">ShowBoxes função ( ){
        
. $ ("# divTestArea21 " ) slideDown ( " rápido ");
        
. $ ("# divTestArea22 " ) slideDown ( " lento ");
        
. $ ("# divTestArea23 " ) slideDown (2000);}
</ script>
Há um pouco mais de HTML que o habitual, mas isso é só lá para que você seja capaz de ver os diferentes ritmos em que as caixas são mostradas . Observe como a primeira caixa está lá quase que instantaneamente , a segunda caixa é muito perto eo terceiro caixa é mais lento , porque ele usa um total de dois segundos para deslizar para baixo .
Agora , o segundo parâmetro pode ser o nome de uma função de atenuação (que não vamos usar neste tutorial ) ou uma função de retorno de chamada que você pode fornecer , para ser chamado uma vez que o efeito é feito. Aqui está um exemplo de que , combinada com o uso do método slideUp ():Tente este exemplo!
<div style="width: 50px; height: id="divTestArea3" 50px; display: none; background-color: #89BC38;"> </ div><script type="text/javascript">$ (function (){
        
$ ("# divTestArea3 " ) . slideDown (2000, function ()
        
{
                
. $ ("# divTestArea3 " ) slideUp (3000) ;
        
} ) ;} ) ;
</ script>
A capacidade de fazer isso pode ser muito útil para combinar vários efeitos , como você pode ver . Neste exemplo, a função de retorno que nós fornecemos será chamado assim que o método slideDown () está completamente terminado e , em seguida, o método slideUp () é chamado .
No caso de você querer simplesmente deslizar um elemento para cima ou para baixo , dependendo do seu estado atual , os desenvolvedores do jQuery nos forneceu um método agradável slideToggle () para fazer isso. Confira o próximo exemplo, onde podemos usá-lo :Tente este exemplo!
<div style="width: 50px; height: id="divTestArea4" 50px; display: none; background-color: #89BC38;"> </ div> <br /><a href="javascript:void(0);" onclick="ToggleBox();"> Alternar caixa </ a><script type="text/javascript">ToggleBox função (){
        
. $ ("# divTestArea4 " ) slideToggle ( " lento ");}</ script>







Animações personalizadas com o método animate()
 
Nos capítulos anteriores, nós olhamos para o alto- desvanecendo e deslizando métodos de efeito de jQuery. No entanto, você pode muito mais do que apenas isso . Com o método animate ( ) , você pode criar animações personalizadas onde você manipular praticamente qualquer propriedade CSS numérica de um elemento. Isso permite que você a, por exemplo mover uma caixa lentamente pela tela ou tê-lo saltar para cima e para baixo. Vamos tentar algo muito simples:Tente este exemplo!
<div style="height: 60px;">
        
<div id="divTestBox1" style="height: 50px; width: 50px; background-color: #89BC38; position: absolute;"> </ div></ div><script type="text/javascript">$ (function (){
        
$ ("# divTestBox1 " ) . animate (
                
{
                        
"esquerda ": " 200px "
                
}
        
) ;} ) ;
</ script>
A primeira, e apenas necessário, parâmetro da função de animar é um mapa das propriedades CSS que você deseja ter alterado . Neste caso, temos um elemento div com posição absoluta , o que nós dizemos a jQuery para se mover até que tenha alcançado uma propriedade esquerdo de 200 pixels.O segundo parâmetro permite que você especifique a duração da animação em milissegundos , ou como " lento " ou " rápido ", que é o mesmo que 600 ou 200 ms. Com isso, podemos diminuir o exemplo acima , tanto quanto nós queremos:Tente este exemplo!
<div style="height: 60px;">
        
<div id="divTestBox2" style="height: 50px; width: 50px; background-color: #89BC38; position: absolute;"> </ div></ div><script type="text/javascript">$ (function (){
        
$ ("# divTestBox2 " ) . animate (
                
{
                        
"esquerda ": " 200px "
                
} ,
                
5000
        
) ;} ) ;
</ script>
Como o terceiro parâmetro , podemos especificar uma função de callback para ser chamada uma vez que a animação é feita . Isto pode ser muito útil para a realização de um número de diferentes animações em uma fileira . Por exemplo , veja este exemplo :Tente este exemplo!
<div style="height: 40px;">
        
<div id="divTestBox3" style="height: 20px; width: 20px; background-color: #89BC38; position: absolute;"> </ div></ div><script type="text/javascript">$ (function (){
        
$ ("# divTestBox3 " ) . animate (
                
{ "Esquerda ": " 100px "},
                
1000,
                
function ()
                
{
                        
$ (this ) . animate (
                                
{ "Esquerda ": " 20px "},
                                
500 ,
                                
function ()
                                
{
                                        
. $ (this ) animar ({ "esquerda ": " 50px "}, 500 );
                                
}
                        
)
                
}
        
) ;} ) ;
</ script>
Pode parecer um pouco esmagadora , mas o que nós fazemos é que nós chamamos o método animados e pedir a propriedade deixou de nosso teste " div " para ser animada até que ele atinja uma esquerda de 100 pixels. Queremos que ele tome 1 segundo ( 1000 milissegundos ) e uma vez que ela seja concluída , desejamos para uma nova animação para começar, que se move de volta para 20 pixels em meio segundo , e assim que a animação é feita , nós movê-lo um bit novamente à direita , de modo que agora tem uma propriedade de esquerda de 50 pixels.
No entanto, desde jQuery vem com a funcionalidade de fila para animações , você pode realmente alcançar o exemplo acima de uma maneira muito mais simples. Este, porém, só se aplica quando você quer um conjunto de animações a realizada após o outro - se você quiser fazer outra coisa quando uma animação for concluída, o exemplo acima ainda será o caminho a percorrer. Aqui está a versão fila:


Tente este exemplo!
<div style="height: 40px;">
        
<div id="divTestBox4" style="height: 20px; width: 20px; background-color: #89BC38; position: absolute;"> </ div></ div><script type="text/javascript">$ (function (){
        
. $ ("# divTestBox4 " ) animate ( { "esquerda ": " 100px "}, 1000) ;
        
. $ ("# divTestBox4 " ) animar ({ "esquerda ": " 20px "}, 500 );
        
. $ ("# divTestBox4 " ) animar ({ "esquerda ": " 50px "}, 500 );} ) ;</ script>

  

Parando animações com o método stop ()

No capítulo anterior , vimos como poderíamos fazer animações personalizadas usando o animado ( método ) e como poderíamos ter várias animações após o outro, fazendo várias chamadas de animação e, assim, utilizar a fila de animação do jQuery. No entanto, às vezes você precisa parar de uma animação antes de terminar , e para isso, jQuery tem o método stop () . Ele funciona para todos os efeitos relacionados funções jQuery , incluindo correr, desbotamento e animações personalizadas com o método () animado. Aqui está um exemplo onde podemos usá-lo :Tente este exemplo!
<a href="javascript:void(0);" onclick="$('#divTestArea1').slideDown(5000);"> caixa Mostrar </ a><a href="javascript:void(0);" onclick="$('#divTestArea1').stop();"> Parar </ a>
<div id="divTestArea1" style="padding: 100px; background-color: #89BC38; text-align:center;cursor:pointer; display: none;">
        
<b> Olá, mundo! </ b>
</ div>
Para tornar o exemplo um pouco mais compacto , tenho usado as chamadas embutidas nos eventos onclick dos dois links. Ao clicar no primeiro link, o método slideDown () é usado em nosso elemento div , iniciando um lento deslizar para baixo. Um clique no segundo link vai matar a animação atual que está sendo realizada sobre o elemento selecionado. Este é o comportamento padrão do método stop () , mas dois parâmetros opcionais nos permite fazer as coisas de forma diferente. O primeiro parâmetro especifica se a fila de animação deve ser limpo ou não. O padrão é falso, o que significa que apenas a animação ativo será interrompido , permitindo que as animações em fila para ser executada depois. O exemplo a seguir irá demonstrar que : 

Tente este exemplo!
<a href="javascript:void(0);" onclick="$('#divTestArea2').slideDown(5000).slideUp(5000);"> caixa Mostrar </ a><a href="javascript:void(0);" onclick="$('#divTestArea2').stop();"> Parar </ a><a href="javascript:void(0);" onclick="$('#divTestArea2').stop(true);"> Parar tudo </ a><a href="javascript:void(0);" onclick="$('#divTestArea2').clearQueue().hide();"> Reiniciar </ a>
<div id="divTestArea2" style="padding: 100px; background-color: #89BC38; text-align:center;cursor:pointer; display: none;">
        
<b> Olá, mundo! </ b></ div>
Nós adicionamos uma segunda animação para o link "Mostrar caixa " . Isso vai lentamente deslizar para baixo da caixa, e uma vez feito, deslize-o para cima novamente. O sistema de fila garante que estas etapas são realizadas em seqüência. Agora , clique no link " Reset" para ter a caixa escondida novamente e , em seguida, clique no link "Exibir caixa " mais uma vez, seguido de um clique em " Stop" . Você vai ver que a primeira animação é interrompida , permitindo a segunda animação a ser executada. No entanto, se você tentar de novo e clique no botão " Parar todos" em vez disso, o verdadeiro valor passou irá certificar-se de que toda a fila é limpa e que toda a animação no elemento é interrompido.
O segundo parâmetro informa jQuery se você gostaria para que ela pare onde está, ou apressar a animação vez , permitindo que ela termine . Isto faz uma diferença muito grande , porque como você pode ver no primeiro exemplo, uma vez que você bateu parada, o comportamento padrão é simplesmente parar a animação onde ele está e deixá-lo assim . O exemplo a seguir irá mostrar-lhe a diferença:


Tente este exemplo!<a href="javascript:void(0);" onclick="$('#divTestArea3').slideDown(5000);"> caixa Mostrar </ a><a href="javascript:void(0);" onclick="$('#divTestArea3').stop(true);"> Parar </ a><a href="javascript:void(0);" onclick="$('#divTestArea3').stop(true, true);"> Pare mas terminar </ a><a href="javascript:void(0);" onclick="$('#divTestArea3').clearQueue().hide();"> Reiniciar </ a>
<div id="divTestArea3" style="padding: 100px; background-color: #89BC38; text-align:center;cursor:pointer; display: none;">
        
<b> Olá, mundo! </ b>
</ div>Experimente as duas variações "Stop" - o primeiro vai parar imediatamente, enquanto o segundo vai apressar a animação para terminar.



Introdução à manipulação de DOM
 
Um dos aspectos mais importantes e, assim, JavaScript jQuery, é a manipulação de DOM. DOM significa Document Object Model e é um mecanismo para representar e interagir com o seu HTML, XHTML ou documentos XML. Ele permite que você navegar e manipular seus documentos através de uma linguagem de programação, que no navegador será quase sempre JavaScript. Navegação DOM e manipulação usando o padrão JavaScript pode ser bastante complicado, mas felizmente para nós, jQuery vem com um monte de métodos DOM relacionados, tornando tudo muito mais fácil.

No primeiro "Olá, mundo!" exemplo deste tutorial, nós comparamos o trabalho de encontrar um elemento e definir o texto do primeiro-lo usando jQuery e JavaScript. Esta é apenas a ponta do iceberg, porém, e nos próximos capítulos você vai ver o quão fácil é manipular o conteúdo de seus documentos com jQuery.



Obtendo e definindo o conteúdo [ text () , html () e val ()]

O aspecto mais simples de manipulação DOM está recuperando e configuração de texto, valores e HTML. Estas três coisas podem parecer a mesma coisa, mas eles não são. Texto é uma textual (sem HTML) representação do conteúdo interno para todos os elementos regulares , os valores são para elementos de formulário HTML e é o mesmo que texto, mas incluindo qualquer marcação.
Felizmente para nós, jQuery vem com um método para cada um dos três , permitindo-nos recuperar e definir essas propriedades : The text () , html ( ) e val ( ) métodos. Aqui está um pequeno exemplo que irá mostrar-lhe a diferença entre eles e como são simples de usar:Tente este exemplo!
<div id="divTest">
        
<b> Test < / b>
        
<input type="text" id="txtTest" name="txtTest" value="Input field" /></ div>
<script type="text/javascript">$ (function (){
        
alert (" Texto:" . + $ ("# divTest " ) text () );
        
alert (" HTML " . + $ ("# divTest " ) html ());
        
alert (" Valor: " . + $ ("# divTest " ) val ());
       
        
alert (" Texto:" . + $ ("# txtTest " ) text () );
        
alert (" HTML " . + $ ("# txtTest " ) html ());
        
alert (" Valor: " . + $ ("# txtTest " ) val ());} ) ;
</ script>
Assim, uma chamada para um dos seguintes métodos sem parâmetros simplesmente devolver o imóvel desejado . Se quisermos definir a propriedade em vez disso, nós simplesmente especificar um parâmetro extra. Aqui está um exemplo completo :Tente este exemplo!
<div id="divText"> </ div><div id="divHtml"> </ div><input type="text" id="txtTest" name="txtTest" value="Input field" />
<script type="text/javascript">$ (function (){
        
. $ ("# divText " ) texto ( " Um texto definir dinamicamente ");
        
. $ ("# divHtml " ) html ( " <b> <i> A string HTML definir dinamicamente </ i> </ b> ");
        
. $ ("# txtTest " ) val ( " Um valor definido de forma dinâmica ");} ) ;
</ script>






 

E isso é o quão fácil é para definir o texto , HTML e valores.
Estas três funções vem com uma sobrecarga de mais, porém, onde você especificar uma função de retorno de chamada como o primeiro e único parâmetro. Esta função callback será chamado com dois parâmetros por jQuery, o índice do elemento atual na lista de elementos selecionados , bem como o valor existente , antes de ser substituído por um novo valor. Você, então, retornar a string que você deseja usar como o novo valor da função. Essa sobrecarga funciona tanto para html () , text () e val (), mas por uma questão de simplicidade, nós usamos somente o texto (versão ) neste exemplo:Tente este exemplo!
<p> Parágrafo 1 </ p><p> Parágrafo 2 </ p><p> Parágrafo 3 </ p>
<script type="text/javascript">$ (function (){
        
$ (" p" ) . texto (function ( index , oldText ) {
                
voltar " Texto existente: " + oldText + " Novo texto: . Um texto definir dinamicamente (# " + índice + " )";
        
} ) ;} ) ;
</ script>Começamos com três elementos de parágrafo semelhantes, cujo texto é a única diferença. No código jQuery, vamos selecionar todos eles e , em seguida, usar a versão especial do texto ( método ) para substituir o texto atual com um texto recém-construído , com base nos dois parâmetros que jQuery fornece para nós : O índice do elemento atual , bem como o seu texto actual . Este novo texto é, então, voltou para jQuery , que vai substituir o texto atual com o novo.
 


  
Obtendo e definindo atributos [ attr ( ) ]

No capítulo anterior , vimos como era fácil de obter e definir o texto e conteúdo HTML e um elemento. Felizmente , alterando um ou mais atributos de um elemento é tão fácil. Usamos o método () attr para isso, que em sua forma mais simples utiliza um parâmetro : o nome do atributo que deseja obter :Tente este exemplo!
<a href="http://www.google.com" id="aGoogle1"> Google Link </ a><script type="text/javascript">$ (function (){
        
alert ( . $ ("# aGoogle1 " ) attr ( " href "));} ) ;
</ script>
Neste exemplo , temos o valor do atributo " href " do nosso link e depois mostrá-lo ao usuário. Para alterar um atributo, basta especificar um parâmetro extra :Tente este exemplo!
<a href="http://www.google.com" id="aGoogle2"> Google Link </ a><script type="text/javascript">$ (function (){
        
. $ ("# aGoogle2 " ) attr ( " href ", " http://www.google.co.uk ");} ) ;
</ script>Isso vai mudar o link para apontar para a versão britânica do Google . O método attr () também pode ter um mapa de pares nome / valor, para definir vários atributos ao mesmo tempo . Aqui vamos definir a href eo título atributos simultaneamente:Tente este exemplo!

<a href="http://www.google.com" id="aGoogle3"> Google Link </ a><script type="text/javascript">$ (function (){
        
$ ("# aGoogle3 " ) . attr (
        
{
                
" href ": " http://www.google.co.uk " ,
                
"title": " Google.co.uk "
        
} ) ;} ) ;
</ script>
O método attr () também suporta a sobrecarga especial, onde o parâmetro de valor em vez disso é uma função de retorno de chamada, o que lhe permite aceder ao índice do elemento selecionado, bem como o valor do atributo existente. Aqui está um exemplo de exatamente isso:Tente este exemplo!
<a href="http://www.google.com/" class="google"> Google.com </ a> <br /><a href="http://www.google.co.uk/" class="google"> Google Reino Unido </ a> <br /><a href="http://www.google.de/" class="google"> Google DE </ a> <br />
<script type="text/javascript">$ (function (){
        
$ (" a.google " ) . attr ( " href ", function (index, oldValue )
        
{
                
voltar oldValue + "? imghp tab = wi" ;
        
} ) ;} ) ;
</ script>
Nós simplesmente mudar todos os links do Google para apontar para a pesquisa de imagens no lugar da página padrão, adicionando um parâmetro extra para o atributo href . Neste exemplo, nós realmente não usar o parâmetro índice, mas poderíamos ter se precisávamos , para nos dizer que o índice na lista de elementos selecionados no momento estamos lidando.
 



Obtendo e definindo classes CSS

Assim como é muito fácil de manipular o conteúdo e atributos de elementos , como vimos nos capítulos anteriores , é igualmente fácil de manipular a CSS de elementos. jQuery dá-lhe acesso fácil a mudar tanto o atributo de estilo , o que você manipula usando o css ( método ) , bem como a classe (s ) de um elemento, onde vários métodos diferentes permite modificá-lo.
Vamos começar por olhar para mudar o atributo de classe . O atributo de classe tem um ou vários nomes de classe, que pode ou não pode se referir a uma classe CSS definida em seu estilo. Normalmente, isso acontece, mas você pode, de tempos em tempos adicionar nomes de classe a seus elementos simplesmente ser capaz de alcançá-los facilmente a partir de jQuery, desde jQuery tem um excelente suporte para a seleção de elementos com base em seu nome (s) classe.
Tenho definido um par de seletores CSS muito simples na minha folha de estilo, principalmente para fins de teste :
. corajoso {
        
font- weight: bold ;}
. azul {
        
color: blue;
}
No exemplo a seguir , vamos utilizar três dos métodos relacionados classe mais interessantes : hasClass () , que verifica se um ou vários elementos já tem uma classe específica definida , addClass (), que simplesmente adiciona um nome de classe de um ou vários elementos e o removeClass ( ) métodos , que vai .... bem, você provavelmente já adivinhou. 

Tente este exemplo!
<a href="javascript:void(0);" onclick="ToggleClass(this);"> Alternar classe </ a>
<script type="text/javascript">função ToggleClass ( remetente ){
       
        
if ( $ ( remetente ). hasClass ( "bold "))
                
. $ ( remetente ) removeClass ( "bold" );
        
outro
                
$ ( remetente ) addClass ( "bold" ) . ;}</ script>
O exemplo é realmente muito simples. Quando o link é clicado , enviamos o link em si (isso ) como um parâmetro para o método ToggleClass () que nós definimos . Nela, vamos verificar se o remetente já tem a classe "bold" - se é que tem , nós removê-lo , caso contrário, adicioná-lo . Isso é uma coisa muito comum de se fazer , então obviamente as pessoas jQuery não querem que a gente escrever todo um três linhas de código para ele. É por isso que eles implementaram o método () toggleClass , com a qual podemos transformar todo o nosso exemplo acima em uma única linha de código:Tente este exemplo!
<a href="javascript:void(0);" onclick="$(this).toggleClass('bold');"> Alternar classe </ a>
Claro , pode-se selecionar vários elementos, onde podemos adicionar ou remover várias classes , bem . Aqui está um exemplo de exatamente isso: 

Tente este exemplo!
<div id="divTestArea1">
        
<span> Teste 1 </ span> <br />
        
<div> Teste 2 </ div>
        
<b> Teste 3 </ b> <br /></ div><script type="text/javascript">$ (function (){
        
$ ("# divTestArea1 período , # divTestArea1 b" ) addClass ( "azul" ) . ;
        
. $ (" div # divTestArea1 " ) addClass ( "azul bold" );} ) ;
</ script>
Primeiro, selecione a extensão e a tag b , que adicionar uma única classe para : a classe negrito. Então, selecione a tag div , que adicionar duas classes para , separados por um espaço: The Bold and the classe azul. O removeClass () métodos funciona exatamente da mesma maneira , permitindo que você especifique várias classes a serem removidos , separados por um espaço.
 


O append () e preceder () métodos

Adicionando coisas novas para os elementos existentes é muito fácil com jQuery. Existem métodos para acrescentar ou antecedendo , tendo HTML no formato de cadeia , elementos DOM e objetos jQuery como parâmetros. No próximo exemplo , você vai ver como é fácil de inserir novos elementos em uma lista, usando tanto o método ) append () ea preceder (:Tente este exemplo!
<a href = "javascript : void (0); " onclick = " . $ ( '# olTestList1 ') anexar (' <li> Anexada item < / li >') ; "> Anexar </ a><a href = "javascript : void (0); " onclick = " . $ ( '# ') olTestList1 preceder (' <li> artigo Prepended </ li> '); "> Prepend </ a>
<ol id="olTestList1">
        
artigo <li> existente < / li>
        
artigo <li> existente < / li>
</ ol>
Temos de links: O primeiro irá adicionar um item à lista, o que significa que o novo item será inserido como o último item. O outro link irá anteceder um link para a lista, o que significa que o novo item será inserido como o primeiro item da lista. Neste exemplo , nós simplesmente inserir um pedaço de HTML, mas que poderia ter gerado os novos itens com jQuery , bem como, ou o criou através de código JavaScript regular e elementos DOM . Na verdade , tanto o append () ea preceder () método leva uma quantidade infinita de novos elementos como parâmetros. No próximo exemplo , vamos demonstrar isso, bem como a capacidade de adicionar elementos de várias formas : 

Tente este exemplo!
itens <a href="javascript:void(0);" onclick="AppendItemsToList();"> Anexar </ a><ol id="olTestList2"> </ ol>
<script type="text/javascript">AppendItemsToList função (){
        
. var item1 = $ (" <li> </ li >") texto ( "Item 1 ");
        
var item2 = "Item <li> 2 </ li> ";
        
var item3 = document.createElement ( "li" );
        
item3.innerHTML = "Item 3 ";
       
        
$ ("# olTestList2 " ) append ( item1 , item2 , item3 ) . ;}
</ script>
Como você pode ver , item1 é um elemento jQuery gerado , item2 é uma seqüência de HTML simples e item3 é um DOM JavaScript gerado elemento. Todos eles são adicionados à lista , usando o mesmo convite e é claro que isso teria trabalhado para a preceder () método também.
Existem variações do append () e preceder () métodos , chamado appendTo () e prependTo (). Eles fazem praticamente o mesmo , mas eles fazem isso o contrário , então ao invés de chamá-los sobre os elementos que você deseja anexar / preceder a , com um parâmetro do que está a ser anexado / prefixado , você faz exatamente o oposto. Qual usar , obviamente, depende da situação , mas aqui está um exemplo mostrando como usar os dois : 

Tente este exemplo
<a href="javascript:void(0);" onclick="PrependItemsToList();"> Prepend itens </ a><ol id="olTestList3"> </ ol>
<script type="text/javascript">PrependItemsToList função (){
        
. $ ("# olTestList3 " ) preceder ( $ (" <li> </ li >") texto ( " preceder () o item" ) . );
        
. $ (" <li> </ li >") texto ( " prependTo () o item" ) prependTo ("# olTestList3 " ) . ;}
</ script>
Neste exemplo , nós preceder os itens, mas você pode , claro, fazer exatamente o mesmo usando append ( ) e appendTo (). Como você pode ver , o resultado é o mesmo - apenas o fim do que fazemos é diferente.
 



Métodos before() e after()


No capítulo anterior , foi utilizado o append () e preceder () métodos para inserir o material dentro de um elemento , mas em alguns casos, você precisa inserir as coisas antes ou depois de um ou de vários elementos em seu lugar. jQuery tem o antes () e após () métodos para apenas esta finalidade , e eles são tão fáceis de usar. Confira este exemplo:Tente este exemplo!
<a href = "javascript : void (0); " onclick = " . $ ( ' input.test1 ' ) antes de (' <i> Antes </ i> '); "> Antes </ a><a href = "javascript : void (0); " onclick = " . $ ( ' input.test1 ' ) depois ( '<b> Depois </ b> '); "> Depois </ a>
<br /> <br />
<input type="text" class="test1" value="Input 1" name="txtInput1" /> <br />
<input type="text" class="test1" value="Input 2" name="txtInput2" /> <br />Dependendo de qual dos dois links que você clica , um itálico ou negrito uma marca será inserida antes ou depois de cada elemento de entrada na página usando a classe " teste1 " . Assim como com append () e preceder ( ), ambos após () e antes de () permite que você use seqüências de HTML, elementos DOM e objetos jQuery como parâmetros e uma quantidade infinita de eles também. Vamos demonstrar que no exemplo a seguir :Tente este exemplo!
<a href="javascript:void(0);" onclick="InsertElements();"> elementos Inserir </ a><br /> <br /><span id="spnTest2"> Olá, mundo ? </ span>
<script type="text/javascript">InsertElements função ( ){
        
. var element1 = $ (" <b> </ b >") texto ("Olá ");
        
var element2 = " <i> lá </ i> ";
        
var element3 = document.createElement ( " u " ) ;
        
element3.innerHTML = " jQuery ";
       
        
. $ ("# spnTest2 ") depois ( element1 , element2 , element3 );}
</ script>
Neste exemplo, criamos um objeto jQuery, uma seqüência de HTML e um elemento de JavaScript DOM , em seguida, usamos o método () depois de inserir todos eles depois da nossa tag span. Claro que , o método anterior ( ) poderia ter sido utilizado exactamente da mesma maneira .
Existem variações do antes ( ) e depois ( ) métodos , chamadas insertBefore ( ) e insertAfter ( ) . Eles fazem praticamente o mesmo , mas eles fazem isso o contrário , então ao invés de chamá-los sobre os elementos que você deseja inserir dados antes ou depois , com um parâmetro do que está a ser inserido, você faz exatamente o oposto. Que método usar , obviamente, depende da situação , mas aqui está um exemplo mostrando como usar os dois :Tente este exemplo!
<a href="javascript:void(0);" onclick="InsertElementsBefore();"> Insert Elemenets </ a><br /> <br /><span id="spnTest3"> Olá, mundo ? </ span>
<script type="text/javascript">InsertElementsBefore função (){
        
. $ ("# spnTest3 ") antes de ( . $ (" <i> </ i >") texto ( "antes de () "));
        
. $ (" <b> </ b >") texto ( " insertBefore ()") insertBefore ("# spnTest3 " ) . ;}
</ script>
Neste exemplo, nós inserimos os itens antes da tag span , mas você pode , naturalmente, fazer exatamente o mesmo usando depois () e insertAfter (), se você deseja inserir após o elemenet alvo. Como você pode ver , o resultado é o mesmo - apenas o fim do que fazemos é diferente.




Métodos remove() e empty() methods ( )


No último par de capítulos , temos trabalhado com a adição de novos elementos a uma página, mas é claro que jQuery pode ajudar a removê-los também. Existem basicamente dois métodos para isso: remove () e empty () . O método remove ( ) apaga o elemento selecionado (s), enquanto o método empty () só irá apagar todos os elementos filho do elemento selecionado (s) . O exemplo a seguir deve ilustrar a diferença - não se esqueça de clicar nos links na ordem certa , porém:Tente este exemplo!
<a href="javascript:void(0);" onclick="$('#divTestArea1').empty();"> empty () div </ a><a href="javascript:void(0);" onclick="$('#divTestArea1').remove();"> remove ( ) div </ a><div id="divTestArea1" style="height: 100px; width: 300px; padding: 20px; border: 1px solid silver; background-color: #eee;">
        
<b> texto em negrito </ b>
        
texto <i> Itálico </ i>
</ div>O primeiro link irá chamar o método empty () em nosso div teste, removendo todos os elementos filho. O segundo link irá remover todo o div , incluindo quaisquer elementos filho. Coisas muito simples.
O método remove ( ) vem com um parâmetro opcional, que permite filtrar os elementos a serem removidos , utilizando qualquer uma das sintaxes seletores jQuery . Você poderia , claro, conseguir o mesmo simplesmente fazendo a filtragem em seu primeiro seletor , mas em algumas situações, você pode estar trabalhando em um conjunto de elementos já selecionados. Confira este exemplo de que em uso:Tente este exemplo!
<a href="javascript:void(0);" onclick="$('#divTestArea2 b').remove('.more');"> remove () mais negrito < / a><div id="divTestArea2" style="height: 100px; width: 300px; padding: 20px; border: 1px solid silver; background-color: #eee;">
        
<b> texto em negrito </ b> <br />
        
<b class="more"> texto mais negrito < / b> <br />
        
<b class="more"> Ainda mais ousada texto </ b> <br />
</ div>Começamos pela seleção de todos os tags em negrito dentro de nossa div teste. Em seguida, chamar o método remove ( ) sobre os elementos selecionados , e passar o mais filtro. , Que irá certificar-se de que nós só temos elementos que usa a classe "mais" . Como resultado , apenas as duas últimas textos negrito são removidos



Introdução de events

Eventos em JavaScript são geralmente algo onde você escreve um trecho de código ou um nome de uma função dentro de um dos atributos de eventos em uma tag HTML. Por exemplo , você pode criar um evento para um link escrevendo código como este:Tente este exemplo!
<a href="javascript:void(0);" onclick="alert('Hello, world!');"> Test < / a>
E, claro, isso ainda é perfeitamente válida quando se usa jQuery. No entanto, usando jQuery, você pode vincular o código para o evento de um elemento ainda mais fácil, especialmente nos casos em que deseja anexar funções anônimas ou usar o mesmo código para vários eventos , ou mesmo o mesmo código para vários eventos de vários elementos. Como exemplo, você pode ligar o mesmo evento para todos os links e tags de span no documento, com apenas algumas linhas de código como este :
<script type="text/javascript">$ (function (){
        
$ ("a , extensão " ) . bind ( "click" , function () {
                
alert (' Olá, mundo! ');
        
} ) ;} ) ;
</ script>
Usamos o método de ligação, o que é essencial quando se trabalha com eventos e jQuery. Nos capítulos seguintes, vamos dizer-lhe mais sobre como ele funciona, junto com outras informações evento relacionado que você precisa.
 



Método bind()

Um dos aspectos mais importantes de lidar com eventos através de jQuery é o bind () e ( ) métodos desvincular . Como o nome implica , eles vão simplesmente anexar e código Solte a um ou vários eventos em um conjunto de elementos . Vimos um exemplo de uso muito simples para o método ( ) se ligam no capítulo de introdução para eventos , e aqui está um mais completo um: 

Tente este exemplo
Teste <a href="javascript:void(0);"> 1 < / a>Teste <a href="javascript:void(0);"> 2 < / a><script type="text/javascript">$ (function (){
        
$ (" a") . bind ( "click" , function () {
                
alert ( . esta $ () text () );
        
} ) ;} ) ;
</ script>
Ele funciona através da seleção de todos os links ( <a> elementos) e , em seguida, ligar a função anônima que você vê para o evento clique. Uma característica pouco legal é que jQuery irá atribuir automaticamente o elemento que é clicado, o "isto" palavra-chave dentro da função anônima. Isso permitirá que você para acessar o elemento que ativa o elemento, mesmo quando você atribuir o mesmo código para vários elementos.
Quando jQuery chama seu método, ele vai passar informações sobre o evento como o primeiro parâmetro , se você tiver especificado um ou mais parâmetros sobre ele. Por exemplo , o objeto de evento passado conterá informações sobre o local onde o cursor do mouse é , qual o tipo do evento é , qual tecla do teclado ou o botão do mouse foi pressionado (se houver) e muito mais. Você pode ver todas as propriedades e métodos no objeto de evento aqui: http://api.jquery.com/event.which/
Aqui está um exemplo:Tente este exemplo!
<div id="divArea" style="background-color: silver; width: 100px; height: 100px;"></ div><script type="text/javascript">$ ("# divArea " ) . bind ( " mousemove " , function ( evento){
        
. $ (this ) texto ( event.pageX + "," + event.pageY );} ) ;
</ script>Criamos um elemento div de um tamanho razoável e uma cor de fundo . Por esta div , nós assinar o evento mousemove , com uma função anônima com um parâmetro chamado " evento " . Este objeto nos dá acesso às propriedades pageX e pageY , que nos diz onde na página o cursor do mouse está atualmente , em relação ao canto superior esquerdo do documento. Experimente o exemplo e mova o cursor sobre o elemento div e você vai ver as coordenadas atualizadas conforme você move o mouse.
O método bind () também permite que você passe em dados de seu próprio país e acessá-lo a partir do objeto de evento . Isso também permite que você defina os valores no momento que você ligar o evento, e ser capaz de ler esse valor no momento em que o evento é chamado , embora a variável original que você usou pode ter mudado . Aqui está um exemplo onde você pode ver exatamente isso: 

Tente este exemplo
Teste <a href="javascript:void(0);"> 1 < / a>Teste <a href="javascript:void(0);"> 2 < / a><script type="text/javascript">var msg = "Olá , mundo ";$ (function (){
        
. $ (" a") bind ( "click" , {message : msg } , function ( event) {
                
msg = " msg Changed ";
                
alert ( event.data.message );
        
} ) ;} ) ;
</ script>
Passamos o valor que o parâmetro secundário do bind ( método ) , como um mapa de chaves e valores . Você pode passar mais de um valor , separando-os com uma vírgula. Para acessar o valor dentro do manipulador de eventos , usamos a propriedade data do objeto de evento . Esta propriedade contém sub- propriedades para cada um dos valores que se passaram, o que significa que você pode acessar o valor do parâmetro de mensagem usando event.data.message .
Apesar do fato de que nós mudamos o valor da variável " msg " dentro do manipulador de eventos, a mensagem exibida será ainda "Olá, mundo! " cada vez que você clicar em um dos links, porque é avaliada assim que o manipulador de eventos está ligada , que é assim que a página foi carregada .



O método unbind ()

No capítulo anterior , foi utilizado o método bind () para se inscrever em eventos com jQuery. No entanto, você pode precisar remover essas assinaturas novamente por várias razões, para evitar que o manipulador de eventos para ser executado uma vez que o evento ocorre. Fazemos isso com o método desvincular (), que em sua forma mais simples , simplesmente parece com isso:Tente este exemplo!

. $ ( " um " ) desacoplar ( ) ;
Isto irá remover todos os manipuladores de eventos que você acompanha com o BIND () função. No entanto, você pode querer apenas remover as assinaturas de eventos de um tipo específico , para os cliques de instância e DoubleClick : 

Tente este exemplo
. $ (" a") desvincular ( " clique doubleclick ");
Basta separar os tipos de eventos com uma vírgula. Aqui está um exemplo mais completo , onde você pode ver tudo em efeito:Tente este exemplo!
Teste <a href="javascript:void(0);"> 1 < / a>Teste <a href="javascript:void(0);"> 2 < / a><script type="text/javascript">var msg = "Olá , mundo ";$ (function (){
        
$ (" a") . bind ( "click" , function () {
                
. $ (" a") desvincular ( "click ");
                
alert (" ! Primeira e única mensagem de mim ");
        
} ) ;} ) ;
</ script>
Neste pequeno exemplo, se inscrever para o evento click de todos os links . No entanto, uma vez que um link é clicado , removemos todas as assinaturas e alertar o clicker sobre isso. O manipulador de eventos deixarão de ser ativado pelos links.
jQuery permite que você se inscrever para o mesmo tipo de evento mais de uma vez . Isto pode vir a calhar se você quer o mesmo evento para fazer mais de uma coisa em diferentes situações. Você faz isso chamando o método ( ) ligam-se a cada vez que você deseja anexar um pedaço de código para que , desta forma:


Tente este exemplo
Teste <a href="javascript:void(0);"> 1 < / a>Teste <a href="javascript:void(0);"> 2 < / a><script type="text/javascript">var msg = "Olá , mundo ";$ (function (){
        
$ (" a") . bind ( "click" , function () {
                
alert (" manipulador de eventos em primeiro lugar! ");
        
} ) ;
       
        
$ (" a") . bind ( "click" , function () {
                
alert ( "Second manipulador de eventos ! ");
                
. $ (" a") desvincular ( "click ");
        
} ) ;} ) ;
</ script>
No entanto, isso abre a possibilidade de que uma vez que você desvincular um evento, você pode ser a remoção de inscrições de evento usou um outro lugar inteiro em seu código, o que você ainda precisa . Se você tentar o exemplo , você vai ver o resultado disso - quando você clica em um link, todas as inscrições de evento são removidos. jQuery permite que você especifique um argumento secundário, que contém uma referência para o manipulador específico que você gostaria de remover . Desta forma , podemos ter certeza de que nós só remover a inscrição de evento pretendemos . Aqui está um exemplo :Tente este exemplo!

Teste <a href="javascript:void(0);"> 1 < / a>Teste <a href="javascript:void(0);"> 2 < / a><script type="text/javascript">var msg = "Olá , mundo ";$ (function (){
        
var handler1 = function ( )
        
{
                
alert (" manipulador de eventos em primeiro lugar! ");
        
}
       
        
var handler2 = function ( )
        
{
                
alert ( "Second manipulador de eventos ! ");
                
. $ (" a") desvincular ( "click" , handler2 );
        
}
       
        
. $ (" a") bind ( "click" , handler1 );
        
. $ (" a") bind ( "click" , handler2 );} ) ;
</ script>
Ao especificar handler2 como parâmetro secundário, só esse manipulador de eventos específico é removido. Experimente o exemplo . A mensagem secundária só é exibida na primeira vez que você clicar no link.



O método live ()

Nos capítulos anteriores , foi utilizado o bind () e ) métodos ( desvincular para ligar e desligar os manipuladores de eventos a vários elementos da página. Isso funciona muito bem para os elementos que já existe , mas que se você quiser que o seu manipulador de eventos para ser anexado a futuros elementos também? Normalmente você teria que fazer isso manualmente , mediante a criação de novos elementos , e isso ainda é possível. No entanto, utilizando o método live () , você pode informar jQuery para anexar o manipulador de eventos para todos os elementos futuros que corresponde ao seu seletor original, sem ter que levantar um dedo. Deixe-me primeiro mostrar um exemplo onde usamos o método ( ) ligam-se , em seguida, substituí-lo com o método live () , para mostrar-lhe a diferença:Tente este exemplo!
<div id="divTestArea1">
        
<a href="javascript:void(0);" onclick="AddBox();"> caixa Adicionar </ a>
        
<div class="test"> Esta é uma caixa </ div></ div>
<script type="text/javascript">$ (function (){
        
$ (" . teste") . bind ( " mouseover " , function ()
        
{
                
. $ (this ) css ( " background-color ", "azul ");
        
}). bind ( " mouseout " , function ()
        
{
                
. $ (this) css ( " background-color ", " branco ");
        
} ) ;} ) ;
AddBox função (){
        
. . var div = $ (" <div> </ div >") addClass ("test" ) texto ( " Outra caixa ");
        
. $ ("# divTestArea1 " ) append ( div );}
</ script>
Ok , este exemplo pode parecer um pouco complicado, mas na verdade não é . Deixe-me levá -lo através dele . Temos um link, que irá chamar o AddBox () método JavaScript, e então temos um div com o "teste " de classe. O método AddBox () irá simplesmente adicionar outro div para a página, com a mesma classe, de modo que quando você clicar no link , você tem ainda uma outra caixa na página. No caso de pronto , selecionamos todos os elementos com a classe "teste" e , em seguida, ligamos um manipulador de dois dos eventos : O mouseover eo evento mouseout , onde mudamos a cor do elemento invocando o evento. Experimente o exemplo no seu browser. A primeira div terá o efeito mouseover , mas se você clicar no link para adicionar mais caixas , eles não terão o mesmo efeito. A razão é bastante óbvia: Eu prendi os eventos antes da criação dessas novas caixas.
Agora, tente o seguinte exemplo em seu lugar. Eu só mudei duas palavras nele : as duas chamadas para bind () foi substituído com chamadas para viver ():Tente este exemplo!
<div id="divTestArea2">
        
<a href="javascript:void(0);" onclick="AddBox();"> caixa Adicionar </ a>
        
<div class="test"> Esta é uma caixa </ div>
</ div>
<script type="text/javascript">$ (function (){
        
$ (" . teste") . viver ( " mouseover " , function ()
        
{
                
. $ (this ) css ( " background-color ", "azul ");
        
}). viver ( " mouseout " , function ()
        
{
                
. $ (this) css ( " background-color ", " branco ");
        
} ) ;} ) ;
AddBox função (){
        
. . var div = $ (" <div> </ div >") addClass ("test" ) texto ( " Outra caixa ");
        
. $ ("# divTestArea2 " ) append ( div );}
</ script>
Agora, se você executar esse exemplo, você vai ver que mesmo que você adicionar novos elementos depois que a página foi carregada , jQuery irá anexar automaticamente os manipuladores de eventos para eles para você. O método live () funciona como bind () em todos os outros aspectos , de modo a verificar os capítulos anteriores para obter mais informações sobre ele. O mesmo vale para o método die ( ), que funciona como o método de desvincular (), mas deve ser usado para casos em que o método live () foi usado .
 



Introdução ao AJAX

AJAX , abreviação de Asynchronous JavaScript And XML , permite carregar dados em segundo plano e exibi-lo na sua página, sem atualizar a página . Isso permite que você crie sites com funcionalidade muito mais rica. Aplicações web populares como Gmail, Outlook Web Access, e Google Maps usa AJAX extensivamente, para lhe proporcionar uma experiência de desktop- como mais responsivo.
Usando AJAX pode ser um pouco complicado , porque os vários navegadores têm diferentes implementações para suportar AJAX. Normalmente isso seria forçá-lo a escrever código para responder de forma diferente , dependendo do navegador, mas, felizmente, jQuery tem feito isso por nós, o que nos permite escrever funcionalidade AJAX com tão pouco como uma única linha de código.
Você deve estar ciente do fato de que thre vantagens e desvantagens de usar AJAX em sua página , porém, o que significa que você deve sempre considerar cuidadosamente antes de decidir usá-lo em vez de fazer uma postagem regular para o servidor. Aqui está um resumo :Vantagens

 
Sua página será mais agradável de usar , quando você pode atualizar partes dele sem uma atualização , o que faz com que o navegador para piscar e a barra de status para ser executado. Porque você só carregar os dados que você precisa para atualizar a página , em vez de atualizar a página inteira , você economiza largura de banda.
Desvantagens
Como as atualizações são feitas por JavaScript no cliente , o estado não registra na história dos navegadores , o que torna impossível usar o botões Voltar e Avançar para navegar entre vários estados da página.Pela mesma razão , um estado específico não podem ser marcadas pelo usuário.Os dados carregados através de AJAX não será indexado por qualquer um dos principais motores de busca. Pessoas usando navegadores sem suporte a JavaScript, ou com JavaScript desabilitado, não será capaz de usar a funcionalidade que você fornecer através de AJAX.Os dois primeiros itens da lista pode ser contornada , porém, geralmente através do uso de um iframe e ler e gravar dados a partir da parte da URL após o caractere #.




O método load ()


Conforme descrito no capítulo anterior , existem muitas maneiras de usar AJAX com jQuery , e devem , naturalmente, ser usado , dependendo da situação . Um dos métodos mais simples e ainda assim poderosas para o carregamento de dados de forma assíncrona é o método load (). Você usá-lo selecionando um elemento onde você deseja que o conteúdo carregado para e , em seguida, chamar o método load () nele. Leva a URL que você deseja carregar, como um parâmetro. Para este exemplo, nós precisamos de um um arquivo externo que podemos carregar. Vamos chamá-lo content.html eo conteúdo deve ser algo parecido com isto:
<div id="divContent">
        
<b> Este é conteúdo externo </ b></ div>


E há mais do mesmo
Salve-o como content.html , no mesmo diretório onde você guarda os seus outros arquivos de exemplo para este tutorial. Nós podemos carregá-lo tão simples como isto :Tente este exemplo!
<div id="divTestArea1"> </ div><script type="text/javascript">$ (function (){
        
. $ ("# divTestArea1 " ) load (" content.html ");} ) ;
</ script>
Se você tiver o arquivo de conteúdo em outro diretório, ou se você nomeou-o de maneira diferente, você terá que alterar o parâmetro para o método de carga em conformidade. Isso é tudo o que preciso para carregar o conteúdo de um arquivo externo com jQuery e do método de carga. Um truque bem legal é que você pode realmente passar um seletor , juntamente com a URL , para começar somente uma parte da página. No primeiro exemplo , nós carregamos o arquivo inteiro , mas no exemplo a seguir , vamos apenas usar o div que contém a primeira frase:Tente este exemplo!
<div id="divTestArea2"> </ div><script type="text/javascript">$ (function (){
        
. $ ("# divTestArea2 " ) load (" content.html # divContent ");} ) ;
</ script>
Como você pode ver , nós simplesmente anexar um seletor jQuery padrão para o parâmetro, depois da URL , separados por um espaço. Isso faz com jQuery para selecionar o conteúdo para fora e só passar a parte combinada (s) de volta para o recipiente. Você pode usar qualquer tipo de seletor jQuery para retirar esse truque, o que o torna muito poderoso .
O método de carga pode levar dois parâmetros extras : um conjunto de querystring pares de chave / valor , e uma função de callback que será executada quando o método de carga terminar, não importa se bem ou mal sucedida . Aqui está um exemplo onde usamos a função de retorno de chamada para informar sobre o resultado. Normalmente, você provavelmente só iria mostrar uma mensagem se o método falhar, mas para ilustrar como funciona, fazê-lo se o método falhar também. Ter certeza de que ela não para o exemplo , ao solicitar um arquivo que não existe: 

Tente este exemplo<div id="divTestArea3"> </ div><script type="text/javascript">$ (function (){
        
$ ("# divTestArea3 " ) . load (" no- content.html " , function ( responseText , statusText , xhr )
        
{
                
if ( statusText == "sucesso" )
                        
alert (" carregado com sucesso o conteúdo! ");
                
if ( statusText == " erro" )
                        
alert (" Ocorreu um erro :" + xhr.status + "-" + xhr.statusText );
        
} ) ;} ) ;
</ script>
Como você pode ver , a função de retorno de chamada especifica três parâmetros , que jQuery irá preencher para você. O primeiro parâmetro irá conter o conteúdo resultante se a chamada tem sucesso . O segundo parâmetro é uma string que especifica o status da chamada, por exemplo, "sucesso " ou " erro" . Você pode usá-lo para ver se a chamada foi bem sucedida ou não. O terceiro parâmetro é o objeto XMLHttpRequest utilizado para realizar a chamada AJAX. Ele irá conter propriedades que você pode usar para ver o que deu errado e muitas outras coisas .



Métodos

O get jQuery ( ) e pós () métodos permite que você facilmente enviar uma solicitação HTTP para uma página e obter o resultado de volta. Quando você postar um formulário, que é geralmente um GET ou uma solicitação POST, e com jQuery você pode imitar isso, uma vez que tanto a um método post () get () e existe.
Os dois métodos são praticamente idênticos, uma vez que basta apenas invocar diferentes tipos de solicitação contra o servidor . Ambos são métodos estáticos , o que significa que em vez de instanciar um objeto jQuery e , em seguida, trabalhar com isso, nós chamamos get () ou correio () diretamente na classe jQuery, seja escrevendo jQuery.get () ou usando o caractere de atalho assim: . $ get (). Na sua forma mais simples, o get () e pós () métodos usa um único parâmetro , que é a URL que você deseja solicitar . No entanto, na maioria dos casos , você vai querer fazer alguma coisa com os dados retornados , caso em que você pode passar uma função de callback como parâmetro , que jQuery vai chamar , se o pedido tiver sucesso .
Vamos fazer alguns testes . No capítulo anterior , eu criei um arquivo HTML chamado " content.html " , que carregado com a carga jQuery () método. Ao testar o exemplo a seguir , certifique-se de que você tem um arquivo chamado " content.html " no mesmo diretório do arquivo em que você tem o exemplo . O conteúdo não importa realmente , é só escrever qualquer coisa lá realmente . Aqui está um exemplo do método get () : 

Tente este exemplo
<script type="text/javascript">$ (function (){
        
$ . get ( " content.html " , function ( dados , textStatus )
        
{
                
alert ( "Done , com o seguinte status :" + textStatus + ". Aqui está a resposta : " + dados );
        
} ) ;} ) ;
</ script>
O primeiro parâmetro é a URL , que é apenas content.html . O segundo parâmetro é mais interessante. É uma função de retorno de chamada , que jQuery chama se a solicitação de página bem-sucedido. O primeiro parâmetro de retorno é simplesmente o conteúdo da página solicitada , enquanto o segundo parâmetro de retorno é o estado textual do pedido .
Pode, claro, pedir uma página HTML simples, como no exemplo acima , mas normalmente a razão para usar um GET ou uma solicitação POST é que você deseja passar em alguns parâmetros, que é então processado pelo servidor, por exemplo, com um pedaço de PHP , ASP ou código ASP.NET , em seguida, retornar o resultado. jQuery pode ter um mapa de GET ou POST parâmetros, que vamos tentar no exemplo a seguir , onde usamos o método () mensagem:Tente este exemplo!
<script type="text/javascript">$ (function (){
        
$ . mensagem ( " test_post.php " ,
        
{
                
Nome: "John Doe" ,
                
idade : "42"
        
} ,
        
função (dados, textStatus )
        
{
                
alert (" Resposta do servidor : " + dados);
        
} ) ;} ) ;
</ script>
Este exemplo é muito parecido com o primeiro, mas fazemos a solicitação POST para outra página , neste exemplo, uma página PHP, e como o segundo parâmetro , passamos em um mapa de parâmetros POST. O mapa é construído de dois parâmetros, um nome e uma idade . Se tivéssemos usado uma solicitação GET em vez de uma solicitação POST ( solicitações POST não leva parâmetros da URL como GET faz) , o código acima seria realmente ter correspondido a solicitar uma URL como esta em seu navegador:
test_get.php ? name = John Doe & age = 42
O script PHP pode ler os parâmetros, processá-los e retornar um resultado . O script em nosso servidor simplesmente toma os dois valores e cria uma string como " <nome> é <Age> anos de idade " e , em seguida, retorna -lo, o que você pode ver se você testar o exemplo acima.



Same Origin Policy

Same Origin Policy é um recurso de segurança encontrados na implementação JavaScript na maioria dos navegadores , assim como em outras tecnologias utilizadas em um navegador , por exemplo, Flash. Ele basicamente permite que você faça pedidos de páginas dentro do mesmo site / domínio , impedindo -o de fazer pedidos de páginas em um domínio diferente , um outro subdomínio ou através de um protocolo diferente. Uma vez que esta é uma parte do JavaScript, que é também uma parte do jQuery , como você vai ver se você tentar fazer uma chamada de AJAX para uma página em outro domínio - não é simplesmente possível. Há certos hacks e soluções alternativas para contornar política de mesma origem , mas eles geralmente não funcionam em todos os navegadores ou têm outros problemas .
No entanto, às vezes você realmente precisa para fazer pedidos a uma página em um domínio diferente, especialmente nos casos em que você possui ambos os domínios , ou quando o proprietário do domínio secundário gostariam para você acessar a página. Felizmente, o padrão JSONP nos permite fazer exatamente isso, e ao mesmo tempo é também um pouco de um hack que exigiria um pouco de esforço para usar dentro de JavaScript, jQuery suporta esta muito elegante , o que lhe permite fazer chamadas com base JSONP tão fáceis como uma chamada normal AJAX. Na verdade, você pode mudar o get () ou correio () para ser baseado JSONP simplesmente dizendo que você gostaria que o tipo de retorno a ser " json " .
JSON , abreviação de JavaScript Object Notation , é uma notação de dados, um pouco como XML, permitindo a transferência de dados estruturados com facilidade, geralmente através de uma conexão de rede. Apesar do fato de que ele foi originalmente destinado a ser usado com JavaScript, um monte de outras linguagens de programação suporta out-of -the-box , bem como, o que lhe permite facilmente matrizes de saída e objetos no formato JSON.



A solicitação de um arquivo a partir de um domínio diferente usando JSONP

No capítulo anterior , discutimos a política de mesma origem , o que nos impede de fazer solicitações de AJAX a um domínio ou subdomínio diferente do que o que atualmente executando o script . JSONP é uma boa solução para isso, e neste artigo, vamos olhar para ele.
Nos exemplos a seguir , nós estaremos fazendo chamadas para um script PHP no servidor , mas em um subdomínio diferente. Vai saída uma matriz de dois usuários no formato JSON ea saída será JSONP compatível porque os dados será cercado pelo parâmetro passado para o script e um conjunto de parênteses regulares. O código PHP fica assim:
<? php$ usuários = array(
        
array (" nome " => " John Doe ", " idade " => 42) ,
        
array (" nome " => " Jane Doe ", " idade " => 39)) ;echo $ _REQUEST [' callback '] . "(" . Json_encode ($ utilizadores). ") ";
>
Para ver os dados que voltou parece, tente abrir a seguinte URL no seu navegador:
http://tests.jquery-tutorial.net/json.php?callback=test
O resultado será parecido com este :
teste ( [{" name": " John Doe ", " idade " : 42 }, {" name": " Jane Doe ", " idade " : 39 }] )Se você definir o parâmetro de retorno de chamada para outra coisa, você vai ver que a mudança reflete na saída. Esta notação especial é o que separa JSON regular e JSONP . Agora , quando os dados JSON é devolvido ao jQuery, ele analisa -lo em objetos que você pode, então, acessar e usar como qualquer outro objeto JavaScript. Por exemplo, a saída acima resultaria em dois objetos , cada um com um nome e uma propriedade de idade.
Agora vamos tentar solicitar a página do jQuery e usar os dados retornados. Quando você testar este exemplo, observe que chamamos de página em um subdomínio diferente ( tests.jquery - tutorial.net ) do que o domínio atualmente em execução ( www.jquery - tutorial.net ) : 

Tente este exemplo
<ul id="ulUsers"> </ ul><script type="text/javascript">$ (function (){
    
$ . chegar
        
(
                
" http://tests.jquery-tutorial.net/json.php?callback = ? "
                
função (dados, textStatus )
        
{
                
$ . cada (dados, função (index, usuário)
                        
{
                                
. $ ("# ulUsers " ) append ( . $ (" <li> </ li >") texto ( user.name + " é " + usuario.idade + " anos "));
                        
} ) ;
        
} ,
                
" json "
        
) ;} ) ;
</ script>
Se você ler o capítulo sobre o get () e pós () métodos, você vai ver que existem apenas duas diferenças principais: o parâmetro de retorno de chamada no URL , eo parâmetro adicional especificando que queremos que o tipo de retorno a ser " json " . O retorno de chamada é definido para um ponto de interrogação , o que tornará jQuery gerar um aleatório para nós. No roteiro que leva a chamada, o valor deste parâmetro é utilizado , como você pode ver no código PHP acima.
Uma vez que temos alguns dados de volta , nós jogá-lo no método each () , que fará um loop sobre os dados , cada vez invocando um método anônimo , onde temos acesso ao conjunto atual de dados na variável "user". Em seguida, usamos o nome e idade do usuário para construir uma representação de texto , o que acrescentar a uma lista ( tag ul ) como um item da lista ( tag li ) . Como resultado , temos uma lista de HTML dos usuários retornados pelo script.



Mostrando progresso

Ao fazer requisições AJAX , você pode querer mostrar algum tipo de progresso enquanto aguarda o pedido para terminar, especialmente se ele pode demorar um pouco para que ele faça isso. É realmente muito simples de fazê-lo com jQuery, como você vai ver a partir de exemplo a seguir:Tente este exemplo!
<input type="button" name="btnDoRequest" value="Perform calculation" onclick="PerformCalculation(this);" /><script type="text/javascript">função PerformCalculation ( remetente ){
        
$ ( remetente ) val ( " Trabalho - por favor, aguarde ... " ) . ;
        
$ . get ( " / testes / calc.php " , function ( dados , textStatus )
        
{
                
. $ ( remetente ) val ( "Executar cálculo ");
                
alert ( data);
        
} ) ;}
</ script>
Direito antes de realizar o pedido AJAX, que muda o texto do remetente (o botão que chama a função ) . Assim que ele tiver sucesso, nós defini-lo de volta. Essa é a forma mais simples de progresso. Outra abordagem é mostrar um pedaço de texto em algum lugar na página, mas a maneira mais comum de fazer isso é mostrar um pedacinho do gráfico que ilustra que o navegador está funcionando no momento. Você poderia fazer um você mesmo , ou melhor ainda : Use um dos grandes geradores on-line , por exemplo http://ajaxload.info/ . Eu criei um, como você pode ver no exemplo a seguir : 

Tente este exemplo
<input type="button" name="btnDoRequest" value="Perform calculation" onclick="PerformCalculationWithImageProgress();" /><img src="/images/ajax-loader.gif" style="display: none;" id="imgProgress" /><script type="text/javascript">PerformCalculationWithImageProgress função (){
        
. $ ("# imgProgress " ) show () ;
        
$ . get ( " / testes / calc.php " , function ( dados , textStatus )
        
{
                
. $ ("# imgProgress " ) hide () ;
                
alert ( data);
        
} ) ;}
</ script>O processo é praticamente o mesmo , mas em vez de definir um texto, mostrar e ocultar uma imagem existente . Você pode colocar a imagem em um local que o usuário é mais provável observar ou dinamicamente colocar a imagem ao lado de botão / link clicado, se você tem mais de um. As possibilidades são realmente infinitas.
Existe um problema com os exemplos acima , embora : Se a solicitação falhar por alguma razão , o progresso é mostrado mas nunca removido novamente . Nós podemos consertar isso, assinando o evento de erro , onde podemos , em seguida, remover o progresso e , em seguida, mostrar uma mensagem de erro . Confira este exemplo:Tente este exemplo!
<input type="button" name="btnDoRequest" value="Perform calculation" onclick="PerformCalculationWithErrorHandling(this);" /><script type="text/javascript">função PerformCalculationWithErrorHandling ( remetente ){
        
$ ( remetente ) val ( " Trabalho - por favor, aguarde ... " ) . ;
        
$ . get ( "/ testes / não existing.php ", função (dados, textStatus )
        
{
                
. $ ( remetente ) val ( "Executar cálculo ");
                
alert ( data);
        
}) erro. (function ()
        
{
                
. $ ( remetente ) val ( "Tente outra vez ");
                
alert (" Ocorreu um erro . " )
        
} ) ;}
</ script>
É praticamente idêntico ao primeiro exemplo , mas aqui nós chamamos a função de erro no objeto AJAX voltou e passar em uma função de retorno que deve ser chamado se a solicitação falhar , o que será desse exemplo, já que eu mudei o caminho para o arquivo solicitado a algo que não existe.



Abortar um pedido de AJAX



Pode haver situações em que você precisa cancelar um pedido de AJAX em execução antes de terminar. É geralmente nos casos em que o usuário pode executar uma ação, que define de uma solicitação AJAX , várias vezes dentro de um curto período de tempo . Um bom exemplo disso é a funcionalidade de preenchimento automático para uma caixa de busca, onde você pode tentar ajudar o usuário , encontrando termos de busca relacionados com base em sua entrada em vigor, fazendo um pedido de AJAX cada vez que premir uma tecla no campo de pesquisa . Nesse caso, é muito provável que o usuário digita mais rápido do que o seu pedido de AJAX pode ser realizada e, portanto, você iria querer abortar quaisquer pedidos não- acabados , antes de iniciar o próximo. Considere o seguinte exemplo :


Tente este exemplo
<input type="button" name="btnDoRequest" value="Start" onclick="PerformSimpleCalculation();" /><script type="text/javascript">PerformSimpleCalculation função (){
        
$ . get ( " / testes / calc.php " , function ( dados , textStatus )
        
{
                
alert ( data);
        
} ) ;}
</ script>
Ele pede um script PHP que está a fazer um cálculo muito complicado ( como você vai ver a partir do resultado ) , o que significa que , geralmente, leva ~ 3 segundos para terminar . Agora , tente o exemplo e apertar o botão várias vezes após o outro. O mesmo " cálculo " será executada várias vezes eo resultado também será exibido várias vezes ( com um 3 segundos de atraso ) .
Felizmente, uma chamada para o método get () e praticamente qualquer outro método jQuery AJAX , retorna um objeto que , entre outros, contém método um abort ( ) . Nós podemos salvar esta referência e , em seguida, chamar o método abort ( ) sobre ele , se necessário. Dê uma olhada neste exemplo ligeiramente modificada : 

Tente este exemplo
<input type="button" name="btnDoRequest" value="Start" onclick="PerformAbortableCalculation();" /><script type="text/javascript">var calculationRequest = null;
PerformAbortableCalculation função (){
        
if ( calculationRequest ! = null)
                
calculationRequest.abort ( ) ;
        
calculationRequest = $ . get ( " / testes / calc.php " , function ( dados , textStatus )
        
{
                
alert ( data);
        
} ) ;}
</ script>
Começamos por definir uma variável comum para conter a referência do pedido . No método PerformAbortableCalculation () , vamos atribuir o valor de retorno da chamada get () para esta variável , mas antes de fazê-lo, verifique se ele é nulo (o método ainda não foi usado) e, se não , nós chamar o método abort ( ) nele. Se você tentar este exemplo e clicar várias vezes , você vai ver que não importa quantas vezes você clica no botão , ele só executa a função de retorno de chamada uma vez.
 



Trabalhando com larguras e alturas

jQuery torna fácil para você trabalhar com as dimensões de seus elementos e até mesmo a janela do navegador . Você pode usar a largura ( ) e altura ( ) métodos para encontrar as dimensões , ou, alternativamente, a innerWidth () / innerHeight () / outerWidth () / outerHeight ( ) métodos , dependendo das medidas que você precisa. Primeiro um pequeno exemplo que ilustra as diferenças ea uma explicação :Tente este exemplo!
<a href="javascript:void(0);" onclick="ShowElementDimensions();"> Mostrar dimensões de elementos </ a><div id="divTestArea1" style="height: 100px; width: 400px; padding: 20px; MARGIN: 3px; border: 1px solid silver; background-color: #eee;"> </ div>
<script type="text/javascript">ShowElementDimensions função ( ){
        
var result = "";
       
        
. . resultado + = " Dimensões da div : " + $ ("# divTestArea1 " ) largura ( ) + " x " + $ ("# divTestArea1 " ) Altura ( ) + " </ br >";
        
. . resultado + = " dimensões interiores da div : " + $ ("# divTestArea1 " ) innerWidth () + "x " + $ ("# divTestArea1 " ) innerHeight ( ) + " </ br >";
        
. . resultado + = " Dimensões exteriores da div : " + $ ("# divTestArea1 " ) outerWidth () + "x " + $ ("# divTestArea1 " ) outerHeight ( ) + " </ br >";
        
resultado + = " Dimensões exteriores da div (com margem) : " . . + $ ("# divTestArea1 " ) outerWidth (true) + "x " + $ ("# divTestArea1 " ) outerHeight (true ) + " </ br> " ;
       
        
. $ ("# divTestArea1 " ) html ( resultado) ;}
</ script>
O exemplo é bastante simples. Temos um elemento div com estofamento extra, margem extra e uma borda. Quando clicar no link, nós usamos a largura ( ) / altura () , innerWidth () / innerHeight () e outerWidth () / outerHeight () para mostrar as dimensões do elemento.
A largura () e height () é simplesmente o tamanho calculado do elemento. Se você usar innerWidth () e innerHeight () , o preenchimento está incluído nos valores devolvidos . Se você usar o outerWidth () e outerHeight ( ) métodos , tanto preenchimento e borda está incluído nos valores devolvidos . Estes últimos métodos têm um parâmetro booleano opcional que diz a jQuery se deve ou não incluir a margem , bem , como você pode ver no exemplo .
A largura () e height () métodos também podem ser usados ​​para obter as dimensões atuais da janela do navegador:Tente este exemplo!
<a href="javascript:void(0);" onclick="ShowBrowserDimensions();"> dimensões Mostrar navegador </ a>
<script type="text/javascript">ShowBrowserDimensions função ( ){
        
alert ( . . "Dimensões do documento: " + $ (document) largura ( ) + " x " + $ (document) height () );
        
alert ( . . "Dimensões da janela : " + " x" ( janela + $ (window ) width () + $ ) height () );}
</ script>Verificamos a largura e altura para o documento ( um documento HTML ) e a janela ( janela de exibição do browser) , uma vez que estes podem ou não podem ser diferentes .
Tanto a largura ( ) e a altura ( ) métodos também podem ser utilizados para definir novas dimensões de um elemento, simplesmente através do fornecimento de um parâmetro com o novo valor . Confira este exemplo: 

Tente este exemplo
<a href="javascript:void(0);" onclick="ResizeElement();"> elemento Redimensionar </ a><div id="divTestArea3" style="height: 100px; width: 300px; padding: 20px; border: 1px solid silver; background-color: #eee;">
<script type="text/javascript">ResizeElement função (){
        
. $ ("# divTestArea3 " ) largura (150) altura (50). ;}</ script>
 


Outras estruturas e do método noConflict ()

Pode chegar um momento em que você deseja usar outros frameworks em suas páginas, enquanto ainda estiver usando jQuery. Por exemplo, um monte de terceiros JavaScript pacotes lá fora, depende de uma das estruturas JavaScript populares, como ExtJS , MooTools e assim por diante . Alguns deles usa o caractere $ como um atalho , como jQuery faz, e de repente você tem dois quadros diferentes tentando reivindicar o mesmo identificador , o que pode tornar seus scripts externos parar de trabalhar. Felizmente os desenvolvedores do jQuery já pensou em situações como esta e implementou o método noConflict ().
O método noConflict () simplesmente libera o poder sobre o identificador $ atalho , para que outros scripts podem usá-lo. Pode, claro, ainda usam jQuery, simplesmente escrevendo o nome completo em vez do atalho. Aqui está um pequeno exemplo disso :Tente este exemplo!

<div id="divTestArea1"> </ div><script type="text/javascript">. noConflict $ ( ) ;jQuery ("# divTestArea1 " ) texto ( " jQuery ainda está aqui !") . ;</ script>
Se você acha que " jQuery " é demais para digitar cada vez , você pode criar seu próprio atalho muito facilmente. O método noConflict () retorna uma referência para jQuery, que você pode salvar em sua própria variável pouco, para uso posterior. Aqui está o que parece : 


Tente este exemplo
<div id="divTestArea2"> </ div><script type="text/javascript">. var jQ = $ noConflict ( ) ;. jQ ("# divTestArea2 " ) texto ( " jQuery ainda está aqui! ");</ script>
Se você tem um bloco de código jQuery que utiliza o $ atalho e você não sentir vontade de mudar tudo isso , você pode usar a seguinte construção . É ainda uma outra versão do método pronto , onde $ é passado como um parâmetro. Isso permite que você acesse usando jQuery $, mas somente dentro desta função - fora dele, outras estruturas terão acesso a dólares e você terá que usar " jQuery " : 

Tente este exemplo
<div id="divTestArea3"> </ div><script type="text/javascript">. noConflict $ ( ) ;jQuery (document) ready (function . ($){
        
. $ ("# divTestArea3 " ) texto ( " jQuery ainda está aqui! ");} ) ;</ script>