jQuery - Guia rápido
O que é jQuery?
jQuery é uma biblioteca JavaScript rápida e concisa criada por John Resig em 2006 com um bom lema: Write less, do more. jQuery simplifica a passagem de documentos HTML, manipulação de eventos, animação e interações Ajax para um desenvolvimento web rápido. jQuery é um kit de ferramentas JavaScript projetado para simplificar várias tarefas escrevendo menos código. Aqui está a lista de recursos básicos importantes suportados pelo jQuery -
DOM manipulation - O jQuery facilitou a seleção de elementos DOM, negociá-los e modificar seu conteúdo usando o mecanismo de seleção de código aberto cross-browser chamado Sizzle.
Event handling - O jQuery oferece uma maneira elegante de capturar uma ampla variedade de eventos, como um usuário clicar em um link, sem a necessidade de confundir o próprio código HTML com manipuladores de eventos.
AJAX Support - O jQuery te ajuda muito a desenvolver um site responsivo e cheio de recursos usando a tecnologia AJAX.
Animations - O jQuery vem com muitos efeitos de animação integrados que você pode usar em seus sites.
Lightweight - A jQuery é uma biblioteca muito leve - cerca de 19 KB de tamanho (Minificado e gzipado).
Cross Browser Support - O jQuery tem suporte para vários navegadores e funciona bem no IE 6.0+, FF 2.0+, Safari 3.0+, Chrome e Opera 9.0+
Latest Technology - O jQuery suporta seletores CSS3 e sintaxe XPath básica.
Como usar o jQuery?
Existem duas maneiras de usar o jQuery.
Local Installation - Você pode baixar a biblioteca jQuery em sua máquina local e incluí-la em seu código HTML.
CDN Based Version - Você pode incluir a biblioteca jQuery em seu código HTML diretamente da Content Delivery Network (CDN).
Instalação Local
Vou ao https://jquery.com/download/ para baixar a versão mais recente disponível.
Agora coloque baixado jquery-2.1.3.min.js arquivo em um diretório do seu site, por exemplo, / jquery.
Exemplo
Agora você pode incluir a biblioteca jquery em seu arquivo HTML da seguinte maneira -
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript" src = "/jquery/jquery-2.1.3.min.js">
</script>
<script type = "text/javascript">
$(document).ready(function() {
document.write("Hello, World!");
});
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>Isso produzirá o seguinte resultado -
Versão baseada em CDN
Você pode incluir a biblioteca jQuery em seu código HTML diretamente da Content Delivery Network (CDN). O Google e a Microsoft fornecem entrega de conteúdo para a versão mais recente.
Estamos usando a versão Google CDN da biblioteca em todo este tutorial.
Exemplo
Agora vamos reescrever o exemplo acima usando a biblioteca jQuery do Google CDN.
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript">
$(document).ready(function() {
document.write("Hello, World!");
});
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>Isso produzirá o seguinte resultado -
Como chamar funções da biblioteca jQuery?
Como quase tudo, fazemos quando usamos jQuery, lê ou manipula o modelo de objeto de documento (DOM), precisamos ter certeza de que começamos a adicionar eventos, etc., assim que o DOM estiver pronto.
Se você quiser que um evento funcione em sua página, você deve chamá-lo dentro da função $ (document) .ready (). Tudo dentro dele será carregado assim que o DOM for carregado e antes que o conteúdo da página seja carregado.
Para fazer isso, registramos um evento pronto para o documento da seguinte forma -
$(document).ready(function() {
// do stuff when DOM is ready
});Para chamar qualquer função da biblioteca jQuery, use tags de script HTML como mostrado abaixo -
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() { $("div").click(function() {alert("Hello, world!");});
});
</script>
</head>
<body>
<div id = "mydiv">
Click on this to see a dialogue box.
</div>
</body>
</html>Isso produzirá o seguinte resultado -
Como usar scripts personalizados?
É melhor escrever nosso código personalizado no arquivo JavaScript personalizado: custom.js, como segue -
/* Filename: custom.js */
$(document).ready(function() { $("div").click(function() {
alert("Hello, world!");
});
});Agora podemos incluir custom.js arquivo em nosso arquivo HTML da seguinte forma -
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" src = "/jquery/custom.js">
</script>
</head>
<body>
<div id = "mydiv">
Click on this to see a dialogue box.
</div>
</body>
</html>Isso produzirá o seguinte resultado -
Usando várias bibliotecas
Você pode usar várias bibliotecas juntas sem entrar em conflito umas com as outras. Por exemplo, você pode usar as bibliotecas jQuery e MooTool javascript juntas. Você pode verificar o Método jQuery noConflict para obter mais detalhes.
O que vem a seguir?
Não se preocupe muito se você não entendeu os exemplos acima. Você vai entendê-los muito em breve nos capítulos subsequentes.
O próximo capítulo tentaria cobrir alguns conceitos básicos que vêm do JavaScript convencional.
jQuery é uma estrutura construída usando recursos JavaScript. Portanto, você pode usar todas as funções e outros recursos disponíveis em JavaScript. Este capítulo explicaria a maioria dos conceitos básicos, mas freqüentemente usados em jQuery.
Corda
Uma string em JavaScript é um objeto imutável que não contém nenhum, um ou vários caracteres. A seguir estão os exemplos válidos de uma string JavaScript -
"This is JavaScript String"
'This is JavaScript String'
'This is "really" a JavaScript String'
"This is 'really' a JavaScript String"Números
Os números em JavaScript são valores IEEE 754 no formato de 64 bits de dupla precisão. Eles são imutáveis, assim como cordas. A seguir estão os exemplos válidos de números JavaScript -
5350
120.27
0.26boleano
Um booleano em JavaScript pode ser true ou false. Se um número for zero, o padrão é falso. Se uma string vazia for padronizada como false.
A seguir estão os exemplos válidos de um Booleano JavaScript -
true // true
false // false
0 // false
1 // true
"" // false
"hello" // trueObjetos
JavaScript suporta muito bem o conceito de objeto. Você pode criar um objeto usando o literal de objeto da seguinte maneira -
var emp = {
name: "Zara",
age: 10
};Você pode escrever e ler as propriedades de um objeto usando a notação de ponto da seguinte maneira -
// Getting object properties
emp.name // ==> Zara
emp.age // ==> 10
// Setting object properties
emp.name = "Daisy" // <== Daisy
emp.age = 20 // <== 20Arrays
Você pode definir matrizes usando o literal de matriz da seguinte maneira -
var x = [];
var y = [1, 2, 3, 4, 5];Uma matriz tem um length propriedade que é útil para iteração -
var x = [1, 2, 3, 4, 5];
for (var i = 0; i < x.length; i++) {
// Do something with x[i]
}Funções
Uma função em JavaScript pode ser nomeada ou anônima. Uma função nomeada pode ser definida usando a palavra-chave de função da seguinte forma -
function named(){
// do some stuff here
}Uma função anônima pode ser definida de maneira semelhante a uma função normal, mas não teria nenhum nome.
Uma função anônima pode ser atribuída a uma variável ou passada para um método conforme mostrado abaixo.
var handler = function (){
// do some stuff here
}JQuery faz uso de funções anônimas com muita frequência, como segue -
$(document).ready(function(){
// do some stuff here
});Argumentos
Os argumentos de variáveis JavaScript são um tipo de array que possui a propriedade length . O exemplo a seguir explica muito bem -
function func(x){
console.log(typeof x, arguments.length);
}
func(); //==> "undefined", 0
func(1); //==> "number", 1
func("1", "2", "3"); //==> "string", 3O objeto de argumentos também tem uma propriedade callee , que se refere à função da qual você está. Por exemplo -
function func() {
return arguments.callee;
}
func(); // ==> funcContexto
JavaScript famosa palavra-chave thissempre se refere ao contexto atual. Dentro de uma funçãothis o contexto pode mudar, dependendo de como a função é chamada -
$(document).ready(function() {
// this refers to window.document
});
$("div").click(function() {
// this refers to a div DOM element
});Você pode especificar o contexto para uma chamada de função usando os métodos integrados à função call() e apply() métodos.
A diferença entre eles é como passam argumentos. Call passa todos os argumentos como argumentos para a função, enquanto apply aceita uma matriz como argumentos.
function scope() {
console.log(this, arguments.length);
}
scope() // window, 0
scope.call("foobar", [1,2]); //==> "foobar", 1
scope.apply("foobar", [1,2]); //==> "foobar", 2Escopo
O escopo de uma variável é a região de seu programa na qual ela é definida. A variável JavaScript terá apenas dois escopos.
Global Variables - Uma variável global tem escopo global, o que significa que é definida em qualquer lugar em seu código JavaScript.
Local Variables- Uma variável local será visível apenas dentro de uma função onde for definida. Os parâmetros da função são sempre locais para essa função.
Dentro do corpo de uma função, uma variável local tem precedência sobre uma variável global com o mesmo nome -
var myVar = "global"; // ==> Declare a global variable
function ( ) {
var myVar = "local"; // ==> Declare a local variable
document.write(myVar); // ==> local
}Ligue de volta
Um retorno de chamada é uma função JavaScript simples passada para algum método como um argumento ou opção. Alguns retornos de chamada são apenas eventos, chamados para dar ao usuário a chance de reagir quando um determinado estado é acionado.
O sistema de eventos da jQuery usa callbacks em todos os lugares, por exemplo -
$("body").click(function(event) {
console.log("clicked: " + event.target);
});A maioria dos retornos de chamada fornece argumentos e um contexto. No exemplo do manipulador de eventos, o retorno de chamada é chamado com um argumento, um Evento.
Alguns retornos de chamada são necessários para retornar algo, outros tornam esse valor de retorno opcional. Para evitar o envio de um formulário, um manipulador de eventos de envio pode retornar falso da seguinte forma -
$("#myform").submit(function() {
return false;
});Fechamentos
Os fechamentos são criados sempre que uma variável definida fora do escopo atual é acessada de dentro de algum escopo interno.
O exemplo a seguir mostra como a variável counter é visível nas funções de criação, incremento e impressão, mas não fora delas -
function create() {
var counter = 0;
return {
increment: function() {
counter++;
},
print: function() {
console.log(counter);
}
}
}
var c = create();
c.increment();
c.print(); // ==> 1Este padrão permite criar objetos com métodos que operam em dados que não são visíveis para o mundo exterior. Deve-se notar quedata hiding é a base da programação orientada a objetos.
Padrão Proxy
Um proxy é um objeto que pode ser usado para controlar o acesso a outro objeto. Ele implementa a mesma interface que este outro objeto e transmite qualquer invocação de método para ele. Este outro objeto é freqüentemente chamado de sujeito real.
Um proxy pode ser instanciado no lugar desse sujeito real e permitir que ele seja acessado remotamente. Podemos salvar o método setArray do jQuery em um encerramento e sobrescrevê-lo da seguinte maneira -
(function() {
// log all calls to setArray
var proxied = jQuery.fn.setArray;
jQuery.fn.setArray = function() {
console.log(this, arguments);
return proxied.apply(this, arguments);
};
})();O código acima envolve seu código em uma função para ocultar a variável com proxy . O proxy então registra todas as chamadas para o método e delega a chamada para o método original. O uso de apply (this, arguments) garante que o chamador não será capaz de notar a diferença entre o método original e o proxy.
Funções integradas
JavaScript vem com um conjunto útil de funções integradas. Esses métodos podem ser usados para manipular Strings, Números e Datas.
A seguir estão funções importantes do JavaScript -
| Sr. Não. | Método e Descrição |
|---|---|
| 1 | charAt() Retorna o caractere no índice especificado. |
| 2 | concat() Combina o texto de duas strings e retorna uma nova string. |
| 3 | forEach() Chama uma função para cada elemento da matriz. |
| 4 | indexOf() Retorna o índice dentro do objeto String de chamada da primeira ocorrência do valor especificado, ou -1 se não for encontrado. |
| 5 | length() Retorna o comprimento da string. |
| 6 | pop() Remove o último elemento de uma matriz e retorna esse elemento. |
| 7 | push() Adiciona um ou mais elementos ao final de uma matriz e retorna o novo comprimento da matriz. |
| 8 | reverse() Inverte a ordem dos elementos de uma matriz - o primeiro se torna o último e o último se torna o primeiro. |
| 9 | sort() Classifica os elementos de uma matriz. |
| 10 | substr() Retorna os caracteres em uma string começando no local especificado até o número especificado de caracteres. |
| 11 | toLowerCase() Retorna o valor da string de chamada convertido em minúsculas. |
| 12 | toString() Retorna a representação de string do valor do número. |
| 13 | toUpperCase() Retorna o valor da string de chamada convertido em maiúsculas. |
O modelo de objeto de documento
O Document Object Model é uma estrutura em árvore de vários elementos de HTML da seguinte forma -
<html>
<head>
<title>The jQuery Example</title>
</head>
<body>
<div>
<p>This is a paragraph.</p>
<p>This is second paragraph.</p>
<p>This is third paragraph.</p>
</div>
</body>
</html>Isso produzirá o seguinte resultado -
A seguir estão os pontos importantes sobre a estrutura de árvore acima -
O <html> é o ancestral de todos os outros elementos; em outras palavras, todos os outros elementos são descendentes de <html>.
Os elementos <head> e <body> não são apenas descendentes, mas filhos de <html> também.
Da mesma forma, além de ser o ancestral de <head> e <body>, <html> também é seu pai.
Os elementos <p> são filhos (e descendentes) de <div>, descendentes de <body> e <html> e irmãos uns dos outros elementos <p>.
Ao aprender os conceitos do jQuery, será útil entender o DOM. Se você não conhece o DOM, sugiro que consulte nosso tutorial simples sobre o Tutorial do DOM .
A biblioteca jQuery aproveita o poder dos seletores Cascading Style Sheets (CSS) para nos permitir acessar de forma rápida e fácil elementos ou grupos de elementos no Document Object Model (DOM).
Um jQuery Selector é uma função que faz uso de expressões para encontrar elementos correspondentes de um DOM com base nos critérios fornecidos. Você pode simplesmente dizer que os seletores são usados para selecionar um ou mais elementos HTML usando jQuery. Uma vez que um elemento é selecionado, podemos realizar várias operações nesse elemento selecionado.
A função de fábrica $ ()
Os seletores jQuery começam com o cifrão e parênteses - $(). A função de fábrica$() faz uso dos seguintes três blocos de construção ao selecionar elementos em um determinado documento -
| Sr. Não. | Seletor e descrição |
|---|---|
| 1 | Tag Name Representa um nome de tag disponível no DOM. Por exemplo$('p') seleciona todos os parágrafos <p> no documento. |
| 2 | Tag ID Representa uma tag disponível com o ID fornecido no DOM. Por exemplo$('#some-id') seleciona o único elemento no documento que possui um ID de algum-id. |
| 3 | Tag Class Representa uma tag disponível com a classe fornecida no DOM. Por exemplo$('.some-class') seleciona todos os elementos no documento que possuem uma classe de alguma classe. |
Todos os itens acima podem ser usados sozinhos ou em combinação com outros seletores. Todos os seletores jQuery são baseados no mesmo princípio, exceto alguns ajustes.
NOTE - A função de fábrica $() é um sinônimo de jQuery()função. Portanto, caso você esteja usando qualquer outra biblioteca JavaScript onde$ sinal está em conflito com outra coisa, então você pode substituir $ assinar por jQuery nome e você pode usar a função jQuery() ao invés de $().
Exemplo
A seguir está um exemplo simples que faz uso do Tag Selector. Isso selecionaria todos os elementos com um nome de tagp.
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("p").css("background-color", "yellow");
});
</script>
</head>
<body>
<div>
<p class = "myclass">This is a paragraph.</p>
<p id = "myid">This is second paragraph.</p>
<p>This is third paragraph.</p>
</div>
</body>
</html>Isso produzirá o seguinte resultado -
Como usar seletores?
Os seletores são muito úteis e seriam necessários em todas as etapas do jQuery. Eles obtêm o elemento exato que você deseja do seu documento HTML.
A tabela a seguir lista alguns seletores básicos e os explica com exemplos.
| Sr. Não. | Seletor e descrição |
|---|---|
| 1 | Nome Seleciona todos os elementos que correspondem ao elemento dado Name. |
| 2 | #EU IRIA Seleciona um único elemento que corresponde ao dado ID. |
| 3 | .Classe Seleciona todos os elementos que correspondem ao dado Class. |
| 4 | Universal (*) Seleciona todos os elementos disponíveis em um DOM. |
| 5 | Elementos múltiplos E, F, G Seleciona os resultados combinados de todos os seletores especificados E, F ou G. |
Exemplos de seletores
Semelhante à sintaxe e aos exemplos acima, os exemplos a seguir fornecem uma compreensão sobre o uso de diferentes tipos de outros seletores úteis -
| Sr. Não. | Seletor e descrição |
|---|---|
| 1 | $('*') Este seletor seleciona todos os elementos do documento. |
| 2 | $("p > *") Este seletor seleciona todos os elementos que são filhos de um elemento de parágrafo. |
| 3 | $("#specialID") Esta função de seletor obtém o elemento com id = "specialID". |
| 4 | $(".specialClass") Este seletor obtém todos os elementos que possuem a classe de specialClass . |
| 5 | $("li:not(.myclass)") Seleciona todos os elementos correspondidos por <li> que não possuem class = "myclass". |
| 6 | $("a#specialID.specialClass") Este seletor combina links com um id de specialID e uma classe de specialClass . |
| 7 | $("p a.specialClass") Este seletor combina links com uma classe de specialClass declarada dentro de elementos <p>. |
| 8 | $("ul li:first") Este seletor obtém apenas o primeiro <li> elemento do <ul>. |
| 9 | $("#container p") Seleciona todos os elementos correspondidos por <p> que são descendentes de um elemento que possui um id de contêiner . |
| 10 | $("li > ul") Seleciona todos os elementos correspondidos por <ul> que são filhos de um elemento correspondido por <li> |
| 11 | $("strong + em") Seleciona todos os elementos correspondidos por <em> que seguem imediatamente um elemento irmão correspondido por <strong>. |
| 12 | $("p ~ ul") Seleciona todos os elementos correspondidos por <ul> que seguem um elemento irmão correspondido por <p>. |
| 13 | $("code, em, strong") Seleciona todos os elementos correspondidos por <code> ou <em> ou <strong>. |
| 14 | $("p strong, .myclass") Seleciona todos os elementos correspondidos por <strong> que são descendentes de um elemento correspondido por <p>, bem como todos os elementos que têm uma classe de myclass . |
| 15 | $(":empty") Seleciona todos os elementos que não têm filhos. |
| 16 | $("p:empty") Seleciona todos os elementos correspondidos por <p> que não têm filhos. |
| 17 | $("div[p]") Seleciona todos os elementos correspondidos por <div> que contêm um elemento correspondido por <p>. |
| 18 | $("p[.myclass]") Seleciona todos os elementos correspondidos por <p> que contêm um elemento com uma classe de myclass . |
| 19 | $("a[@rel]") Seleciona todos os elementos correspondidos por <a> que possuem um atributo rel. |
| 20 | $("input[@name = myname]") Seleciona todos os elementos correspondidos por <input> que possuem um valor de nome exatamente igual a myname. |
| 21 | $("input[@name^=myname]") Seleciona todos os elementos correspondidos por <input> que têm um valor de nome começando com myname . |
| 22 | $("a[@rel$=self]") Seleciona todos os elementos correspondidos por <a> que têm relvalor de atributo terminando em self . |
| 23 | $("a[@href*=domain.com]") Seleciona todos os elementos correspondidos por <a> que têm um valor href contendo domain.com. |
| 24 | $("li:even") Seleciona todos os elementos correspondidos por <li> que possuem um valor de índice par. |
| 25 | $("tr:odd") Seleciona todos os elementos correspondidos por <tr> que possuem um valor de índice ímpar. |
| 26 | $("li:first") Seleciona o primeiro <li> elemento. |
| 27 | $("li:last") Seleciona o último elemento <li>. |
| 28 | $("li:visible") Seleciona todos os elementos correspondidos por <li> que são visíveis. |
| 29 | $("li:hidden") Seleciona todos os elementos correspondidos por <li> que estão ocultos. |
| 30 | $(":radio") Seleciona todos os botões de opção no formulário. |
| 31 | $(":checked") Seleciona todas as caixas marcadas no formulário. |
| 32 | $(":input") Seleciona apenas os elementos do formulário (entrada, seleção, área de texto, botão). |
| 33 | $(":text") Seleciona apenas elementos de texto (entrada [tipo = texto]). |
| 34 | $("li:eq(2)") Seleciona o terceiro elemento <li>. |
| 35 | $("li:eq(4)") Seleciona o quinto elemento <li>. |
| 36 | $("li:lt(2)") Seleciona todos os elementos correspondidos por <li> elemento antes do terceiro; em outras palavras, os primeiros dois <li> elementos. |
| 37 | $("p:lt(3)") seleciona todos os elementos correspondidos por elementos <p> antes do quarto; em outras palavras, os três primeiros elementos <p>. |
| 38 | $("li:gt(1)") Seleciona todos os elementos correspondidos por <li> após o segundo. |
| 39 | $("p:gt(2)") Seleciona todos os elementos correspondidos por <p> após o terceiro. |
| 40 | $("div/p") Seleciona todos os elementos correspondidos por <p> que são filhos de um elemento correspondido por <div>. |
| 41 | $("div//code") Seleciona todos os elementos correspondidos por <code> que são descendentes de um elemento correspondido por <div>. |
| 42 | $("//p//a") Seleciona todos os elementos correspondidos por <a> que são descendentes de um elemento correspondido por <p> |
| 43 | $("li:first-child") Seleciona todos os elementos correspondidos por <li> que são os primeiros filhos de seus pais. |
| 44 | $("li:last-child") Seleciona todos os elementos correspondidos por <li> que são os últimos filhos de seus pais. |
| 45 | $(":parent") Seleciona todos os elementos que são pais de outro elemento, incluindo texto. |
| 46 | $("li:contains(second)") Seleciona todos os elementos correspondidos por <li> que contêm o segundo texto. |
Você pode usar todos os seletores acima com qualquer elemento HTML / XML de maneira genérica. Por exemplo, se seletor$("li:first") funciona para o elemento <li> então $("p:first") também funcionaria para o elemento <p>.
Alguns dos componentes mais básicos que podemos manipular quando se trata de elementos DOM são as propriedades e atributos atribuídos a esses elementos.
A maioria desses atributos está disponível por meio de JavaScript como propriedades de nó DOM. Algumas das propriedades mais comuns são -
- className
- tagName
- id
- href
- title
- rel
- src
Considere a seguinte marcação HTML para um elemento de imagem -
<img id = "imageid" src = "image.gif" alt = "Image" class = "myclass"
title = "This is an image"/>Na marcação deste elemento, o nome da tag é img, e a marcação para id, src, alt, class e title representa os atributos do elemento, cada um dos quais consiste em um nome e um valor.
jQuery nos fornece os meios para manipular facilmente os atributos de um elemento e nos dá acesso ao elemento para que também possamos alterar suas propriedades.
Obtenha o valor do atributo
o attr() O método pode ser usado para buscar o valor de um atributo do primeiro elemento no conjunto correspondido ou definir valores de atributo em todos os elementos correspondidos.
Exemplo
A seguir está um exemplo simples que busca o atributo title da tag <em> e define o valor <div id = "divid"> com o mesmo valor -
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() { var title = $("em").attr("title");
$("#divid").text(title);
});
</script>
</head>
<body>
<div>
<em title = "Bold and Brave">This is first paragraph.</em>
<p id = "myid">This is second paragraph.</p>
<div id = "divid"></div>
</div>
</body>
</html>Isso produzirá o seguinte resultado -
Definir valor de atributo
o attr(name, value) método pode ser usado para definir o atributo nomeado em todos os elementos no conjunto agrupado usando o valor passado.
Exemplo
A seguir está um exemplo simples que define src atributo de uma tag de imagem para um local correto -
<html>
<head>
<title>The jQuery Example</title>
<base href="https://www.tutorialspoint.com" />
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("#myimg").attr("src", "/jquery/images/jquery.jpg");
});
</script>
</head>
<body>
<div>
<img id = "myimg" src = "/images/jquery.jpg" alt = "Sample image" />
</div>
</body>
</html>Isso produzirá o seguinte resultado -
Aplicando Estilos
o addClass( classes )O método pode ser usado para aplicar folhas de estilo definidas a todos os elementos correspondentes. Você pode especificar várias classes separadas por espaço.
Exemplo
A seguir está um exemplo simples que define class atributo de uma tag para <p> -
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("em").addClass("selected"); $("#myid").addClass("highlight");
});
</script>
<style>
.selected { color:red; }
.highlight { background:yellow; }
</style>
</head>
<body>
<em title = "Bold and Brave">This is first paragraph.</em>
<p id = "myid">This is second paragraph.</p>
</body>
</html>Isso produzirá o seguinte resultado -
Métodos de Atributo
A tabela a seguir lista alguns métodos úteis que você pode usar para manipular atributos e propriedades -
| Sr. Não. | Métodos e Descrição |
|---|---|
| 1 | attr (propriedades) Defina um objeto de chave / valor como propriedades para todos os elementos correspondentes. |
| 2 | attr (chave, fn) Defina uma única propriedade com um valor calculado, em todos os elementos correspondentes. |
| 3 | removeAttr (nome) Remova um atributo de cada um dos elementos correspondentes. |
| 4 | hasClass (classe) Retorna verdadeiro se a classe especificada estiver presente em pelo menos um do conjunto de elementos correspondentes. |
| 5 | removeClass (classe) Remove todas ou a (s) classe (s) especificada (s) do conjunto de elementos correspondentes. |
| 6 | toggleClass (classe) Adiciona a classe especificada se não estiver presente, remove a classe especificada se estiver presente. |
| 7 | html () Obtenha o conteúdo html (innerHTML) do primeiro elemento correspondente. |
| 8 | html (val) Defina o conteúdo html de cada elemento correspondente. |
| 9 | texto () Obtenha o conteúdo de texto combinado de todos os elementos correspondentes. |
| 10 | texto (val) Defina o conteúdo do texto de todos os elementos correspondentes. |
| 11 | val () Obtenha o valor de entrada do primeiro elemento correspondente. |
| 12 | val (val) Defina o atributo de valor de cada elemento correspondido se for chamado em <input>, mas se for chamado em <select> com o valor <option> passado, a opção passada seria selecionada, se for chamado na caixa de seleção ou caixa de rádio, então todas as caixas de seleção e opções correspondentes seriam marcadas. |
Exemplos
Semelhante à sintaxe e aos exemplos acima, os exemplos a seguir dariam a você uma compreensão sobre o uso de vários métodos de atributo em diferentes situações -
| Sr. Não. | Seletor e descrição |
|---|---|
| 1 | $("#myID").attr("custom") Isso retornaria o valor do atributo customizado para o primeiro elemento correspondente ao ID myID. |
| 2 | $("img").attr("alt", "Sample Image") Isso define o alt atributo de todas as imagens para um novo valor "Imagem de amostra". |
| 3 | $("input").attr({ value: "", title: "Please enter a value" }); Define o valor de todos os elementos <input> para a string vazia, bem como define o exemplo do jQuery para a string. Insira um valor . |
| 4 | $("a[href^=https://]").attr("target","_blank") Seleciona todos os links com um atributo href começando com https: // e define seu atributo target como _blank . |
| 5 | $("a").removeAttr("target") Isso removeria o atributo de destino de todos os links. |
| 6 | $("form").submit(function() {$(":submit",this).attr("disabled", "disabled");}); Isso modificaria o atributo disabled para o valor "disabled" ao clicar no botão Enviar. |
| 7 | $("p:last").hasClass("selected") Este retorno é verdadeiro se a última tag <p> tiver uma classe associada selecionada . |
| 8 | $("p").text() Retorna a string que contém o conteúdo de texto combinado de todos os elementos <p> correspondentes. |
| 9 | $("p").text("<i>Hello World</i>") Isso definiria "<I> Hello World </I>" como conteúdo de texto dos elementos <p> correspondentes. |
| 10 | $("p").html() Isso retorna o conteúdo HTML de todos os parágrafos correspondentes. |
| 11 | $("div").html("Hello World") Isso definiria o conteúdo HTML de todos os <div> correspondentes para Hello World . |
| 12 | $("input:checkbox:checked").val() Obtenha o primeiro valor de uma caixa de seleção marcada. |
| 13 | $("input:radio[name=bar]:checked").val() Obtenha o primeiro valor de um conjunto de botões de opção. |
| 14 | $("button").val("Hello") Define o atributo de valor de cada elemento <button> correspondente. |
| 15 | $("input").val("on") Isso marcaria todo o botão de rádio ou caixa de seleção cujo valor é "on". |
| 16 | $("select").val("Orange") Isso selecionaria a opção Laranja em uma caixa suspensa com as opções Laranja, Manga e Banana. |
| 17 | $("select").val("Orange", "Mango") Isso selecionaria as opções Laranja e Manga em uma caixa suspensa com opções Laranja, Manga e Banana. |
jQuery é uma ferramenta muito poderosa que fornece uma variedade de métodos de travessia de DOM para nos ajudar a selecionar elementos em um documento aleatoriamente, bem como em método sequencial. A maioria dos métodos DOM Traversal não modifica o objeto jQuery e são usados para filtrar elementos de um documento com base em determinadas condições.
Encontrar elementos por índice
Considere um documento simples com o seguinte conteúdo HTML -
<html>
<head>
<title>The JQuery Example</title>
</head>
<body>
<div>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
</div>
</body>
</html>Isso produzirá o seguinte resultado -
Acima, cada lista tem seu próprio índice e pode ser localizada diretamente usando eq(index) método conforme o exemplo abaixo.
Cada elemento filho inicia seu índice do zero, portanto, o item da lista 2 seria acessado usando$("li").eq(1) e assim por diante.
Exemplo
A seguir está um exemplo simples que adiciona a cor ao segundo item da lista.
<html>
<head>
<title>The JQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("li").eq(2).addClass("selected");
});
</script>
<style>
.selected { color:red; }
</style>
</head>
<body>
<div>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
</div>
</body>
</html>Isso produzirá o seguinte resultado -
Filtrando Elementos
o filter( selector )O método pode ser usado para filtrar todos os elementos do conjunto de elementos correspondentes que não correspondem ao (s) seletor (es) especificado (s). O seletor pode ser escrito usando qualquer sintaxe de seletor.
Exemplo
A seguir está um exemplo simples que aplica cor às listas associadas à classe média -
<html>
<head>
<title>The JQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("li").filter(".middle").addClass("selected");
});
</script>
<style>
.selected { color:red; }
</style>
</head>
<body>
<div>
<ul>
<li class = "top">list item 1</li>
<li class = "top">list item 2</li>
<li class = "middle">list item 3</li>
<li class = "middle">list item 4</li>
<li class = "bottom">list item 5</li>
<li class = "bottom">list item 6</li>
</ul>
</div>
</body>
</html>Isso produzirá o seguinte resultado -
Localizando Elementos Descendentes
o find( selector )O método pode ser usado para localizar todos os elementos descendentes de um determinado tipo de elementos. O seletor pode ser escrito usando qualquer sintaxe de seletor.
Exemplo
A seguir está um exemplo que seleciona todos os elementos <span> disponíveis dentro de diferentes elementos <p> -
<html>
<head>
<title>The JQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("p").find("span").addClass("selected");
});
</script>
<style>
.selected { color:red; }
</style>
</head>
<body>
<p>This is 1st paragraph and <span>THIS IS RED</span></p>
<p>This is 2nd paragraph and <span>THIS IS ALSO RED</span></p>
</body>
</html>Isso produzirá o seguinte resultado -
Métodos de filtro JQuery DOM
A tabela a seguir lista métodos úteis que você pode usar para filtrar vários elementos de uma lista de elementos DOM -
| Sr. Não. | Método e Descrição |
|---|---|
| 1 | eq (índice) Reduza o conjunto de elementos correspondentes a um único elemento. |
| 2 | filtro (seletor) Remove todos os elementos do conjunto de elementos correspondentes que não correspondem ao (s) seletor (es) especificado (s). |
| 3 | filtro (fn) Remove todos os elementos do conjunto de elementos correspondentes que não correspondem à função especificada. |
| 4 | é (seletor) Compara a seleção atual com uma expressão e retorna verdadeiro, se pelo menos um elemento da seleção se encaixa no seletor fornecido. |
| 5 | mapa (callback) Traduzir um conjunto de elementos no objeto jQuery para outro conjunto de valores em um array jQuery (que pode ou não conter elementos). |
| 6 | não (seletor) Remove os elementos correspondentes ao seletor especificado do conjunto de elementos correspondentes. |
| 7 | fatia (início, [fim]) Seleciona um subconjunto dos elementos correspondentes. |
Métodos JQuery DOM Traversing
A tabela a seguir lista outros métodos úteis que você pode usar para localizar vários elementos em um DOM -
| Sr. Não. | Métodos e Descrição |
|---|---|
| 1 | adicionar (seletor) Adiciona mais elementos, correspondidos pelo seletor fornecido, ao conjunto de elementos correspondidos. |
| 2 | andSelf () Adicione a seleção anterior à seleção atual. |
| 3 | filhos ([seletor]) Obtenha um conjunto de elementos contendo todos os filhos imediatos exclusivos de cada um dos conjuntos de elementos correspondentes. |
| 4 | mais próximo (seletor) Obtenha um conjunto de elementos contendo o elemento pai mais próximo que corresponda ao seletor especificado, incluindo o elemento inicial. |
| 5 | conteúdo () Encontre todos os nós filhos dentro dos elementos correspondentes (incluindo nós de texto) ou o documento de conteúdo, se o elemento for um iframe. |
| 6 | fim( ) Reverta a operação 'destrutiva' mais recente, alterando o conjunto de elementos correspondentes ao seu estado anterior. |
| 7 | find (seletor) Pesquisa por elementos descendentes que correspondam aos seletores especificados. |
| 8 | próximo ([seletor]) Obtenha um conjunto de elementos contendo os próximos irmãos exclusivos de cada um dos conjuntos de elementos fornecidos. |
| 9 | nextAll ([seletor]) Encontre todos os elementos irmãos após o elemento atual. |
| 10 | offsetParent () Retorna uma coleção jQuery com o pai posicionado do primeiro elemento correspondente. |
| 11 | pai ([seletor]) Obtenha o pai direto de um elemento. Se chamado em um conjunto de elementos, parent retorna um conjunto de seus elementos pais diretos exclusivos. |
| 12 | pais ([seletor]) Obtenha um conjunto de elementos contendo os ancestrais exclusivos do conjunto de elementos correspondentes (exceto para o elemento raiz). |
| 13 | prev ([seletor]) Obtenha um conjunto de elementos contendo os irmãos anteriores exclusivos de cada um dos conjuntos de elementos correspondentes. |
| 14 | prevAll ([seletor]) Encontre todos os elementos irmãos na frente do elemento atual. |
| 15 | irmãos ([seletor]) Obtenha um conjunto de elementos contendo todos os irmãos únicos de cada um dos conjuntos de elementos correspondentes. |
A biblioteca jQuery suporta quase todos os seletores incluídos nas especificações Cascading Style Sheet (CSS) 1 a 3, conforme descrito no site do World Wide Web Consortium.
Usando a biblioteca JQuery, os desenvolvedores podem aprimorar seus sites sem se preocupar com os navegadores e suas versões, desde que os navegadores tenham o JavaScript habilitado.
A maioria dos métodos JQuery CSS não modifica o conteúdo do objeto jQuery e são usados para aplicar propriedades CSS em elementos DOM.
Aplicar propriedades CSS
É muito simples aplicar qualquer propriedade CSS usando o método JQuery css( PropertyName, PropertyValue ).
Aqui está a sintaxe do método -
selector.css( PropertyName, PropertyValue );Aqui você pode passar PropertyName como uma string javascript e, com base em seu valor, PropertyValue pode ser uma string ou um inteiro.
Exemplo
A seguir está um exemplo que adiciona a cor da fonte ao segundo item da lista.
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("li").eq(2).css("color", "red");
});
</script>
</head>
<body>
<div>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
</div>
</body>
</html>Isso produzirá o seguinte resultado -
Aplicar várias propriedades CSS
Você pode aplicar várias propriedades CSS usando um único método JQuery CSS( {key1:val1, key2:val2....). Você pode aplicar quantas propriedades desejar em uma única chamada.
Aqui está a sintaxe do método -
selector.css( {key1:val1, key2:val2....keyN:valN})Aqui você pode passar a chave como propriedade e val como seu valor conforme descrito acima.
Exemplo
A seguir está um exemplo que adiciona a cor da fonte e também a cor de fundo ao segundo item da lista.
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("li").eq(2).css({"color":"red", "background-color":"green"});
});
</script>
</head>
<body>
<div>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
</div>
</body>
</html>Isso produzirá o seguinte resultado -
Definir a largura e altura do elemento
o width( val ) e height( val ) método pode ser usado para definir a largura e altura, respectivamente, de qualquer elemento.
Exemplo
A seguir está um exemplo simples que define a largura do elemento da primeira divisão onde o resto dos elementos tem a largura definida pela folha de estilo
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("div:first").width(100); $("div:first").css("background-color", "blue");
});
</script>
<style>
div {
width:70px; height:50px; float:left;
margin:5px; background:red; cursor:pointer;
}
</style>
</head>
<body>
<div></div>
<div>d</div>
<div>d</div>
<div>d</div>
<div>d</div>
</body>
</html>Isso produzirá o seguinte resultado -
Métodos JQuery CSS
A tabela a seguir lista todos os métodos que você pode usar para brincar com as propriedades CSS -
| Sr. Não. | Método e Descrição |
|---|---|
| 1 | css (nome) Retorne uma propriedade de estilo no primeiro elemento correspondente. |
| 2 | css (nome, valor) Defina uma única propriedade de estilo para um valor em todos os elementos correspondentes. |
| 3 | css (propriedades) Defina um objeto de chave / valor como propriedades de estilo para todos os elementos correspondentes. |
| 4 | altura (val) Defina a altura CSS de cada elemento correspondente. |
| 5 | altura () Obtenha o atual calculado, pixel, altura do primeiro elemento correspondido. |
| 6 | innerHeight () Obtém a altura interna (exclui a borda e inclui o preenchimento) para o primeiro elemento correspondente. |
| 7 | innerWidth () Obtém a largura interna (exclui a borda e inclui o preenchimento) para o primeiro elemento correspondente. |
| 8 | Deslocamento( ) Obtenha o deslocamento atual do primeiro elemento correspondido, em pixels, em relação ao documento. |
| 9 | offsetParent () Retorna uma coleção jQuery com o pai posicionado do primeiro elemento correspondente. |
| 10 | outerHeight ([margem]) Obtém a altura externa (inclui a borda e o preenchimento por padrão) para o primeiro elemento correspondente. |
| 11 | outerWidth ([margem]) Obtenha a largura externa (inclui a borda e o preenchimento por padrão) para o primeiro elemento correspondente. |
| 12 | posição () Obtém a posição superior e esquerda de um elemento em relação ao seu pai deslocado. |
| 13 | scrollLeft (val) Quando um valor é passado, o deslocamento da rolagem para a esquerda é definido para esse valor em todos os elementos correspondentes. |
| 14 | scrollLeft () Obtém o deslocamento de rolagem à esquerda do primeiro elemento correspondido. |
| 15 | scrollTop (val) Quando um valor é passado, o deslocamento do topo da rolagem é definido para esse valor em todos os elementos correspondentes. |
| 16 | scrollTop () Obtém o deslocamento superior da rolagem do primeiro elemento correspondente. |
| 17 | largura (val) Defina a largura CSS de cada elemento correspondente. |
| 18 | largura( ) Obtenha a largura atual calculada, em pixels, do primeiro elemento correspondente. |
JQuery fornece métodos para manipular DOM de maneira eficiente. Você não precisa escrever um grande código para modificar o valor de qualquer atributo de elemento ou para extrair o código HTML de um parágrafo ou divisão.
JQuery fornece métodos como .attr (), .html () e .val () que atuam como getters, recuperando informações de elementos DOM para uso posterior.
Manipulação de Conteúdo
o html( ) método obtém o conteúdo html (innerHTML) do primeiro elemento correspondido.
Aqui está a sintaxe do método -
selector.html( )Exemplo
A seguir está um exemplo que usa os métodos .html () e .text (val). Aqui .html () recupera o conteúdo HTML do objeto e o método .text (val) define o valor do objeto usando o parâmetro passado -
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() { $("div").click(function () {
var content = $(this).html(); $("#result").text( content );
});
});
</script>
<style>
#division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on the square below:</p>
<span id = "result"> </span>
<div id = "division" style = "background-color:blue;">
This is Blue Square!!
</div>
</body>
</html>Isso produzirá o seguinte resultado -
Substituição de elemento DOM
Você pode substituir um elemento DOM completo pelos elementos HTML ou DOM especificados. oreplaceWith( content ) método serve muito bem a esse propósito.
Aqui está a sintaxe do método -
selector.replaceWith( content )Aqui, o conteúdo é o que você deseja, em vez do elemento original. Pode ser HTML ou texto simples.
Exemplo
A seguir está um exemplo que substituiria o elemento de divisão por "<h1> JQuery is Great </h1>" -
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() { $("div").click(function () {
$(this).replaceWith("<h1>JQuery is Great</h1>");
});
});
</script>
<style>
#division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on the square below:</p>
<span id = "result"> </span>
<div id = "division" style = "background-color:blue;">
This is Blue Square!!
</div>
</body>
</html>Isso produzirá o seguinte resultado -
Removendo Elementos DOM
Pode haver uma situação em que você gostaria de remover um ou mais elementos DOM do documento. JQuery fornece dois métodos para lidar com a situação.
o empty( ) método remove todos os nós filhos do conjunto de elementos correspondentes onde como o método remove( expr ) método remove todos os elementos correspondentes do DOM.
Aqui está a sintaxe do método -
selector.remove( [ expr ])
or
selector.empty( )Você pode passar o parâmetro opcional expr para filtrar o conjunto de elementos a serem removidos.
Exemplo
A seguir está um exemplo em que os elementos são removidos assim que são clicados -
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("div").click(function () { $(this).remove( );
});
});
</script>
<style>
.div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on any square below:</p>
<span id = "result"> </span>
<div class = "div" style = "background-color:blue;"></div>
<div class = "div" style = "background-color:green;"></div>
<div class = "div" style = "background-color:red;"></div>
</body>
</html>Isso produzirá o seguinte resultado -
Inserindo Elementos DOM
Pode haver uma situação em que você gostaria de inserir um ou mais elementos DOM em seu documento existente. JQuery fornece vários métodos para inserir elementos em vários locais.
o after( content ) método insira o conteúdo após cada um dos elementos correspondentes, onde como o método before( content ) método insere conteúdo antes de cada um dos elementos correspondentes.
Aqui está a sintaxe do método -
selector.after( content )
or
selector.before( content )Aqui, o conteúdo é o que você deseja inserir. Pode ser HTML ou texto simples.
Exemplo
A seguir está um exemplo em que os elementos <div> estão sendo inseridos logo antes do elemento clicado -
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() { $("div").click(function () {
$(this).before('<div class="div"></div>' );
});
});
</script>
<style>
.div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on any square below:</p>
<span id = "result"> </span>
<div class = "div" style = "background-color:blue;"></div>
<div class = "div" style = "background-color:green;"></div>
<div class = "div" style = "background-color:red;"></div>
</body>
</html>Isso produzirá o seguinte resultado -
Métodos de manipulação DOM
A tabela a seguir lista todos os métodos que você pode usar para manipular elementos DOM -
| Sr. Não. | Método e Descrição |
|---|---|
| 1 | depois (conteúdo) Insira o conteúdo após cada um dos elementos correspondentes. |
| 2 | anexar (conteúdo) Anexe conteúdo ao interior de cada elemento correspondente. |
| 3 | appendTo (seletor) Anexa todos os elementos correspondentes a outro conjunto de elementos especificado. |
| 4 | antes (conteúdo) Insira o conteúdo antes de cada um dos elementos correspondentes. |
| 5 | clone (bool) Clone os elementos DOM correspondentes e todos os seus manipuladores de eventos e selecione os clones. |
| 6 | clone () Clone os elementos DOM correspondentes e selecione os clones. |
| 7 | vazio () Remova todos os nós filhos do conjunto de elementos correspondentes. |
| 8 | html (val) Defina o conteúdo html de cada elemento correspondente. |
| 9 | html () Obtenha o conteúdo html (innerHTML) do primeiro elemento correspondente. |
| 10 | insertAfter (seletor) Insira todos os elementos correspondentes após outro conjunto de elementos especificado. |
| 11 | insertBefore (seletor) Insira todos os elementos correspondentes antes de outro conjunto de elementos especificado. |
| 12 | prefixar (conteúdo) Prefixe o conteúdo no interior de cada elemento correspondente. |
| 13 | prependTo (seletor) Anexe todos os elementos correspondentes a outro conjunto de elementos especificado. |
| 14 | remover (expr) Remove todos os elementos correspondentes do DOM. |
| 15 | substituirAll (seletor) Substitui os elementos correspondidos pelo seletor especificado pelos elementos correspondidos. |
| 16 | substituirWith (conteúdo) Substitui todos os elementos correspondentes pelos elementos HTML ou DOM especificados. |
| 17 | texto (val) Defina o conteúdo do texto de todos os elementos correspondentes. |
| 18 | texto () Obtenha o conteúdo de texto combinado de todos os elementos correspondentes. |
| 19 | embrulhar (elem) Envolva cada elemento correspondente com o elemento especificado. |
| 20 | wrap (html) Envolva cada elemento correspondente com o conteúdo HTML especificado. |
| 21 | wrapAll (elem) Envolva todos os elementos do conjunto correspondente em um único elemento de invólucro. |
| 22 | wrapAll (html) Envolva todos os elementos do conjunto correspondente em um único elemento de invólucro. |
| 23 | wrapInner (elem) Envolva o conteúdo filho interno de cada elemento correspondente (incluindo nós de texto) com um elemento DOM. |
| 24 | wrapInner (html) Envolva o conteúdo filho interno de cada elemento correspondente (incluindo nós de texto) com uma estrutura HTML. |
Temos a capacidade de criar páginas da web dinâmicas usando eventos. Eventos são ações que podem ser detectadas por seu aplicativo da web.
A seguir estão os exemplos de eventos -
- Um clique do mouse
- Uma página da web carregando
- Passando o mouse sobre um elemento
- Enviando um formulário HTML
- Um pressionamento de tecla em seu teclado, etc.
Quando esses eventos são disparados, você pode usar uma função personalizada para fazer praticamente o que quiser com o evento. Essas funções personalizadas chamam manipuladores de eventos.
Binding Event Handlers
Usando o modelo de evento jQuery, podemos estabelecer manipuladores de eventos em elementos DOM com o bind() método da seguinte forma -
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$('div').bind('click', function( event ){
alert('Hi there!');
});
});
</script>
<style>
.div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on any square below to see the result:</p>
<div class = "div" style = "background-color:blue;">ONE</div>
<div class = "div" style = "background-color:green;">TWO</div>
<div class = "div" style = "background-color:red;">THREE</div>
</body>
</html>Este código fará com que o elemento de divisão responda ao evento de clique; quando um usuário clica dentro desta divisão depois disso, o alerta será mostrado.
Isso produzirá o seguinte resultado -
A sintaxe completa do comando bind () é a seguinte -
selector.bind( eventType[, eventData], handler)A seguir está a descrição dos parâmetros -
eventType- Uma string contendo um tipo de evento JavaScript, como clique ou envio. Consulte a próxima seção para uma lista completa de tipos de eventos.
eventData - Este parâmetro opcional é um mapa de dados que será passado para o manipulador de eventos.
handler - Uma função a ser executada cada vez que o evento é acionado.
Removendo manipuladores de eventos
Normalmente, depois que um manipulador de eventos é estabelecido, ele permanece em vigor pelo restante da vida da página. Pode ser necessário quando você deseja remover o manipulador de eventos.
jQuery fornece o unbind()comando para remover um manipulador de eventos existente. A sintaxe de unbind () é a seguinte -
selector.unbind(eventType, handler)
or
selector.unbind(eventType)A seguir está a descrição dos parâmetros -
eventType- Uma string contendo um tipo de evento JavaScript, como clique ou envio. Consulte a próxima seção para uma lista completa de tipos de eventos.
handler - Se fornecido, identifica o ouvinte específico que deve ser removido.
Tipos de Eventos
| Sr. Não. | Tipo e descrição do evento |
|---|---|
| 1 | blur Ocorre quando o elemento perde o foco. |
| 2 | change Ocorre quando o elemento muda. |
| 3 | click Ocorre quando um clique do mouse. |
| 4 | dblclick Ocorre quando um clique duplo do mouse. |
| 5 | error Ocorre quando há um erro no carregamento ou descarregamento etc. |
| 6 | focus Ocorre quando o elemento obtém o foco. |
| 7 | keydown Ocorre quando a tecla é pressionada. |
| 8 | keypress Ocorre quando a tecla é pressionada e liberada. |
| 9 | keyup Ocorre quando a tecla é liberada. |
| 10 | load Ocorre quando o documento é carregado. |
| 11 | mousedown Ocorre quando o botão do mouse é pressionado. |
| 12 | mouseenter Ocorre quando o mouse entra em uma região de elemento. |
| 13 | mouseleave Ocorre quando o mouse sai de uma região de elemento. |
| 14 | mousemove Ocorre quando o ponteiro do mouse se move. |
| 15 | mouseout Ocorre quando o ponteiro do mouse sai de um elemento. |
| 16 | mouseover Ocorre quando o ponteiro do mouse se move sobre um elemento. |
| 17 | mouseup Ocorre quando o botão do mouse é liberado. |
| 18 | resize Ocorre quando a janela é redimensionada. |
| 19 | scroll Ocorre quando a janela é rolada. |
| 20 | select Ocorre quando um texto é selecionado. |
| 21 | submit Ocorre quando o formulário é enviado. |
| 22 | unload Ocorre quando os documentos são descarregados. |
O objeto do evento
A função de retorno de chamada tem um único parâmetro; quando o manipulador é chamado, o objeto de evento JavaScript passa por ele.
O objeto de evento é freqüentemente desnecessário e o parâmetro é omitido, já que contexto suficiente geralmente está disponível quando o manipulador é obrigado a saber exatamente o que precisa ser feito quando o manipulador é disparado; no entanto, existem certos atributos que você precisa acessar.
Os Atributos do Evento
| Sr. Não. | Descrição da Propriedade |
|---|---|
| 1 | altKey Definido como verdadeiro se a tecla Alt foi pressionada quando o evento foi disparado, falso se não. A tecla Alt é rotulada como Option na maioria dos teclados Mac. |
| 2 | ctrlKey Definido como verdadeiro se a tecla Ctrl foi pressionada quando o evento foi disparado, falso se não. |
| 3 | data O valor, se houver, passado como o segundo parâmetro para o comando bind () quando o manipulador foi estabelecido. |
| 4 | keyCode Para eventos keyup e keydown, isso retorna a tecla que foi pressionada. |
| 5 | metaKey Definido como verdadeiro se a tecla Meta foi pressionada quando o evento foi disparado, falso se não. A tecla Meta é a tecla Ctrl em PCs e a tecla Command em Macs. |
| 6 | pageX Para eventos de mouse, especifica a coordenada horizontal do evento em relação à origem da página. |
| 7 | pageY Para eventos de mouse, especifica a coordenada vertical do evento em relação à origem da página. |
| 8 | relatedTarget Para alguns eventos de mouse, identifica o elemento que o cursor saiu ou inseriu quando o evento foi disparado. |
| 9 | screenX Para eventos de mouse, especifica a coordenada horizontal do evento em relação à origem da tela. |
| 10 | screenY Para eventos de mouse, especifica a coordenada vertical do evento em relação à origem da tela. |
| 11 | shiftKey Definido como verdadeiro se a tecla Shift foi pressionada quando o evento foi disparado, falso se não. |
| 12 | target Identifica o elemento para o qual o evento foi disparado. |
| 13 | timeStamp O carimbo de data / hora (em milissegundos) quando o evento foi criado. |
| 14 | type Para todos os eventos, especifica o tipo de evento que foi disparado (por exemplo, clique). |
| 15 | which Para eventos de teclado, especifica o código numérico para a tecla que causou o evento, e para eventos de mouse, especifica qual botão foi pressionado (1 para a esquerda, 2 para o meio, 3 para a direita). |
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$('div').bind('click', function( event ){
alert('Event type is ' + event.type);
alert('pageX : ' + event.pageX);
alert('pageY : ' + event.pageY);
alert('Target : ' + event.target.innerHTML);
});
});
</script>
<style>
.div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on any square below to see the result:</p>
<div class = "div" style = "background-color:blue;">ONE</div>
<div class = "div" style = "background-color:green;">TWO</div>
<div class = "div" style = "background-color:red;">THREE</div>
</body>
</html>Isso produzirá o seguinte resultado -
Os Métodos de Evento
Há uma lista de métodos que podem ser chamados em um objeto de evento -
| Sr. Não. | Método e Descrição |
|---|---|
| 1 | preventDefault () Evita que o navegador execute a ação padrão. |
| 2 | isDefaultPrevented () Retorna se event.preventDefault () já foi chamado neste objeto de evento. |
| 3 | stopPropagation () Interrompe o borbulhamento de um evento para os elementos pai, evitando que qualquer manipulador pai seja notificado sobre o evento. |
| 4 | isPropagationStopped () Retorna se event.stopPropagation () já foi chamado neste objeto de evento. |
| 5 | stopImmediatePropagation () Impede que o resto dos manipuladores sejam executados. |
| 6 | isImmediatePropagationStopped () Retorna se event.stopImmediatePropagation () já foi chamado neste objeto de evento. |
Métodos de manipulação de eventos
A tabela a seguir lista métodos importantes relacionados a eventos -
| Sr. Não. | Método e Descrição |
|---|---|
| 1 | vincular (tipo, [dados], fn) Vincula um manipulador a um ou mais eventos (como clique) para cada elemento correspondido. Também pode ligar eventos personalizados. |
| 2 | off (eventos [, seletor] [, manipulador (eventObject)]) Isso faz o oposto de ao vivo, ele remove um evento ao vivo vinculado. |
| 3 | pairar (acima, fora) Simula pairar, por exemplo, mover o mouse para dentro e para fora de um objeto. |
| 4 | em (eventos [, seletor] [, dados], manipulador) Vincula um manipulador a um evento (como um clique) para todos os elementos correspondentes atuais e futuros. Também pode ligar eventos personalizados. |
| 5 | um (tipo, [dados], fn) Vincula um manipulador a um ou mais eventos a serem executados uma vez para cada elemento correspondido. |
| 6 | pronto (fn) Vincula uma função a ser executada sempre que o DOM está pronto para ser percorrido e manipulado. |
| 7 | gatilho (evento, [dados]) Acione um evento em cada elemento correspondente. |
| 8 | triggerHandler (evento, [dados]) Aciona todos os manipuladores de eventos associados em um elemento. |
| 9 | desvincular ([tipo], [fn]) Isso faz o oposto de vincular, remove eventos vinculados de cada um dos elementos correspondentes. |
Métodos auxiliares de eventos
jQuery também fornece um conjunto de funções auxiliares de evento que podem ser usadas para disparar um evento para vincular qualquer tipo de evento mencionado acima.
Métodos de gatilho
A seguir está um exemplo que aciona o evento de desfoque em todos os parágrafos -
$("p").blur();Métodos de ligação
A seguir está um exemplo que ligaria um click evento em todos os <div> -
$("div").click( function () {
// do something here
});| Sr. Não. | Método e Descrição |
|---|---|
| 1 | blur( ) Aciona o evento de desfoque de cada elemento correspondente. |
| 2 | blur( fn ) Vincule uma função ao evento de desfoque de cada elemento correspondente. |
| 3 | change( ) Aciona o evento de mudança de cada elemento correspondido. |
| 4 | change( fn ) Vincula uma função ao evento de mudança de cada elemento correspondido. |
| 5 | click( ) Aciona o evento de clique de cada elemento correspondido. |
| 6 | click( fn ) Vincula uma função ao evento de clique de cada elemento correspondido. |
| 7 | dblclick( ) Aciona o evento dblclick de cada elemento correspondido. |
| 8 | dblclick( fn ) Vincula uma função ao evento dblclick de cada elemento correspondido. |
| 9 | error( ) Aciona o evento de erro de cada elemento correspondido. |
| 10 | error( fn ) Vincula uma função ao evento de erro de cada elemento correspondido. |
| 11 | focus( ) Aciona o evento de foco de cada elemento correspondente. |
| 12 | focus( fn ) Vincula uma função ao evento de foco de cada elemento correspondido. |
| 13 | keydown( ) Aciona o evento keydown de cada elemento correspondido. |
| 14 | keydown( fn ) Vincule uma função ao evento keydown de cada elemento correspondido. |
| 15 | keypress( ) Aciona o evento de pressionamento de tecla de cada elemento correspondente. |
| 16 | keypress( fn ) Vincula uma função ao evento de pressionamento de tecla de cada elemento correspondido. |
| 17 | keyup( ) Aciona o evento keyup de cada elemento correspondido. |
| 18 | keyup( fn ) Vincule uma função ao evento de ativação de cada elemento correspondente. |
| 19 | load( fn ) Vincula uma função ao evento de carregamento de cada elemento correspondido. |
| 20 | mousedown( fn ) Vincula uma função ao evento mousedown de cada elemento correspondido. |
| 21 | mouseenter( fn ) Vincule uma função ao evento mouseenter de cada elemento correspondido. |
| 22 | mouseleave( fn ) Vincule uma função ao evento mouseeleave de cada elemento correspondente. |
| 23 | mousemove( fn ) Vincule uma função ao evento mousemove de cada elemento correspondente. |
| 24 | mouseout( fn ) Vincule uma função ao evento mouseout de cada elemento correspondido. |
| 25 | mouseover( fn ) Vincule uma função ao evento mouseover de cada elemento correspondido. |
| 26 | mouseup( fn ) Vincule uma função ao evento mouseup de cada elemento correspondido. |
| 27 | resize( fn ) Vincule uma função ao evento de redimensionamento de cada elemento correspondente. |
| 28 | scroll( fn ) Vincule uma função ao evento de rolagem de cada elemento correspondido. |
| 29 | select( ) Acione o evento de seleção de cada elemento correspondido. |
| 30 | select( fn ) Vincule uma função ao evento de seleção de cada elemento correspondido. |
| 31 | submit( ) Acione o evento de envio de cada elemento correspondente. |
| 32 | submit( fn ) Vincule uma função ao evento de envio de cada elemento correspondente. |
| 33 | unload( fn ) Vincula uma função ao evento de descarregamento de cada elemento correspondido. |
AJAX é uma sigla que significa Asynchronous JavaScript and XML e esta tecnologia nos ajuda a carregar dados do servidor sem uma atualização da página do navegador.
Se você é novo no AJAX, recomendo que leia nosso Tutorial de Ajax antes de prosseguir.
JQuery é uma ótima ferramenta que fornece um rico conjunto de métodos AJAX para desenvolver aplicativos da web de próxima geração.
Carregando dados simples
É muito fácil carregar qualquer dado estático ou dinâmico usando JQuery AJAX. JQuery forneceload() método para fazer o trabalho -
Sintaxe
Aqui está a sintaxe simples para load() método -
[selector].load( URL, [data], [callback] );Aqui está a descrição de todos os parâmetros -
URL- O URL do recurso do lado do servidor para o qual a solicitação é enviada. Pode ser um script CGI, ASP, JSP ou PHP que gera dados dinamicamente ou fora de um banco de dados.
data- Este parâmetro opcional representa um objeto cujas propriedades são serializadas em parâmetros codificados adequadamente para serem passados para a solicitação. Se especificado, a solicitação é feita usando oPOSTmétodo. Se omitido, oGET método é usado.
callback- Uma função de retorno de chamada chamada depois que os dados de resposta foram carregados nos elementos do conjunto correspondente. O primeiro parâmetro passado para esta função é o texto de resposta recebido do servidor e o segundo parâmetro é o código de status.
Exemplo
Considere o seguinte arquivo HTML com uma pequena codificação JQuery -
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("#driver").click(function(event){ $('#stage').load('/jquery/result.html');
});
});
</script>
</head>
<body>
<p>Click on the button to load /jquery/result.html file −</p>
<div id = "stage" style = "background-color:cc0;">
STAGE
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>Aqui load() inicia uma solicitação Ajax para a URL especificada /jquery/result.htmlArquivo. Depois de carregar este arquivo, todo o conteúdo seria populado dentro de <div> marcado com o estágio de ID . Supondo que nosso arquivo /jquery/result.html tenha apenas uma linha HTML -
<h1>THIS IS RESULT...</h1>Quando você clica em um determinado botão, o arquivo result.html é carregado.
Obtendo dados JSON
Haveria uma situação em que o servidor retornaria a string JSON em relação à sua solicitação. Função de utilidade JQuerygetJSON() analisa a string JSON retornada e disponibiliza a string resultante para a função de retorno de chamada como o primeiro parâmetro para realizar outras ações.
Sintaxe
Aqui está a sintaxe simples para getJSON() método -
[selector].getJSON( URL, [data], [callback] );Aqui está a descrição de todos os parâmetros -
URL - A URL do recurso do lado do servidor contatado por meio do método GET.
data - Um objeto cujas propriedades servem como pares nome / valor usados para construir uma string de consulta a ser anexada ao URL, ou uma string de consulta pré-formatada e codificada.
callback- Uma função chamada quando a solicitação é concluída. O valor dos dados resultante da digestão do corpo da resposta como uma string JSON é passado como o primeiro parâmetro para esse retorno de chamada e o status como o segundo.
Exemplo
Considere o seguinte arquivo HTML com uma pequena codificação JQuery -
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() { $("#driver").click(function(event){
$.getJSON('/jquery/result.json', function(jd) { $('#stage').html('<p> Name: ' + jd.name + '</p>');
$('#stage').append('<p>Age : ' + jd.age+ '</p>'); $('#stage').append('<p> Sex: ' + jd.sex+ '</p>');
});
});
});
</script>
</head>
<body>
<p>Click on the button to load result.json file −</p>
<div id = "stage" style = "background-color:#eee;">
STAGE
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>Aqui, o método utilitário JQuery getJSON() inicia uma solicitação Ajax para a URL especificada result.jsonArquivo. Depois de carregar este arquivo, todo o conteúdo seria passado para a função de retorno de chamada que finalmente seria populado dentro de <div> marcado com o estágio de ID . Supondo que nosso arquivo result.json tenha o seguinte conteúdo formatado json -
{
"name": "Zara Ali",
"age" : "67",
"sex": "female"
}Quando você clica em um determinado botão, o arquivo result.json é carregado.
Passando dados para o servidor
Muitas vezes, você coleta informações do usuário e as transmite ao servidor para processamento posterior. JQuery AJAX tornou fácil passar os dados coletados para o servidor usandodata parâmetro de qualquer método Ajax disponível.
Exemplo
Este exemplo demonstra como pode passar a entrada do usuário para um script de servidor web que enviaria o mesmo resultado de volta e nós o imprimiríamos -
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() { $("#driver").click(function(event){
var name = $("#name").val(); $("#stage").load('/jquery/result.php', {"name":name} );
});
});
</script>
</head>
<body>
<p>Enter your name and click on the button:</p>
<input type = "input" id = "name" size = "40" /><br />
<div id = "stage" style = "background-color:cc0;">
STAGE
</div>
<input type = "button" id = "driver" value = "Show Result" />
</body>
</html>Aqui está o código escrito em result.php script -
<?php
if( $_REQUEST["name"] ){ $name = $_REQUEST['name']; echo "Welcome ". $name;
}
?>Agora você pode inserir qualquer texto na caixa de entrada fornecida e clicar no botão "Mostrar resultado" para ver o que você inseriu na caixa de entrada.
Métodos JQuery AJAX
Você viu o conceito básico de AJAX usando JQuery. A tabela a seguir lista todos os métodos JQuery AJAX importantes que você pode usar com base em sua necessidade de programação -
| Sr. Não. | Métodos e Descrição |
|---|---|
| 1 | jQuery.ajax (opções) Carregue uma página remota usando uma solicitação HTTP. |
| 2 | jQuery.ajaxSetup (opções) Defina as configurações globais para solicitações AJAX. |
| 3 | jQuery.get (url, [dados], [retorno de chamada], [tipo]) Carregue uma página remota usando uma solicitação HTTP GET. |
| 4 | jQuery.getJSON (url, [dados], [retorno de chamada]) Carregue dados JSON usando uma solicitação HTTP GET. |
| 5 | jQuery.getScript (url, [callback]) Carrega e executa um arquivo JavaScript usando uma solicitação HTTP GET. |
| 6 | jQuery.post (url, [dados], [retorno de chamada], [tipo]) Carregue uma página remota usando uma solicitação HTTP POST. |
| 7 | carregar (url, [dados], [retorno de chamada]) Carregue o HTML de um arquivo remoto e injete-o no DOM. |
| 8 | serialize () Serializa um conjunto de elementos de entrada em uma string de dados. |
| 9 | serializeArray () Serializa todos os formulários e elementos de formulário como o método .serialize (), mas retorna uma estrutura de dados JSON para você trabalhar. |
Eventos JQuery AJAX
Você pode chamar vários métodos JQuery durante o ciclo de vida do progresso da chamada AJAX. Com base em diferentes eventos / fases, os seguintes métodos estão disponíveis -
Você pode passar por todos os eventos AJAX .
| Sr. Não. | Métodos e Descrição |
|---|---|
| 1 | ajaxComplete (callback) Anexe uma função a ser executada sempre que uma solicitação AJAX for concluída. |
| 2 | ajaxStart (callback) Anexe uma função a ser executada sempre que uma solicitação AJAX começar e não houver nenhuma ativa. |
| 3 | ajaxError (callback) Anexe uma função a ser executada sempre que uma solicitação AJAX falhar. |
| 4 | ajaxSend (callback) Anexe uma função a ser executada antes que uma solicitação AJAX seja enviada. |
| 5 | ajaxStop (callback) Anexe uma função a ser executada sempre que todas as solicitações AJAX forem encerradas. |
| 6 | ajaxSuccess (callback) Anexe uma função a ser executada sempre que uma solicitação AJAX for concluída com êxito. |
jQuery fornece uma interface trivialmente simples para fazer vários tipos de efeitos surpreendentes. Os métodos jQuery nos permitem aplicar rapidamente os efeitos comumente usados com uma configuração mínima. Este tutorial cobre todos os métodos jQuery importantes para criar efeitos visuais.
Mostrando e ocultando elementos
Os comandos para mostrar e ocultar elementos são basicamente os que esperaríamos - show() para mostrar os elementos em um conjunto embalado e hide() para escondê-los.
Sintaxe
Aqui está a sintaxe simples para show() método -
[selector].show( speed, [callback] );Aqui está a descrição de todos os parâmetros -
speed - Uma string que representa uma das três velocidades predefinidas ("lenta", "normal" ou "rápida") ou o número de milissegundos para executar a animação (por exemplo, 1000).
callback- Este parâmetro opcional representa uma função a ser executada sempre que a animação for concluída; é executado uma vez para cada elemento animado.
A seguir está a sintaxe simples para hide() método -
[selector].hide( speed, [callback] );Aqui está a descrição de todos os parâmetros -
speed - Uma string que representa uma das três velocidades predefinidas ("lenta", "normal" ou "rápida") ou o número de milissegundos para executar a animação (por exemplo, 1000).
callback- Este parâmetro opcional representa uma função a ser executada sempre que a animação for concluída; é executado uma vez para cada elemento animado.
Exemplo
Considere o seguinte arquivo HTML com uma pequena codificação JQuery -
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() { $("#show").click(function () {
$(".mydiv").show( 1000 ); }); $("#hide").click(function () {
$(".mydiv").hide( 1000 );
});
});
</script>
<style>
.mydiv{
margin:10px;
padding:12px;
border:2px solid #666;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div class = "mydiv">
This is a SQUARE
</div>
<input id = "hide" type = "button" value = "Hide" />
<input id = "show" type = "button" value = "Show" />
</body>
</html>Isso produzirá o seguinte resultado -
Alternando os Elementos
jQuery fornece métodos para alternar o estado de exibição de elementos entre revelado ou oculto. Se o elemento for exibido inicialmente, ele ficará oculto; se estiver oculto, será mostrado.
Sintaxe
Aqui está a sintaxe simples para um dos toggle() métodos -
[selector]..toggle([speed][, callback]);Aqui está a descrição de todos os parâmetros -
speed - Uma string que representa uma das três velocidades predefinidas ("lenta", "normal" ou "rápida") ou o número de milissegundos para executar a animação (por exemplo, 1000).
callback- Este parâmetro opcional representa uma função a ser executada sempre que a animação for concluída; é executado uma vez para cada elemento animado.
Exemplo
Podemos animar qualquer elemento, como um <div> simples contendo uma imagem -
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$(".clickme").click(function(event){ $(".target").toggle('slow', function(){
$(".log").text('Transition Complete');
});
});
});
</script>
<style>
.clickme{
margin:10px;
padding:12px;
border:2px solid #666;
width:100px;
height:50px;
}
</style>
</head>
<body>
<div class = "content">
<div class = "clickme">Click Me</div>
<div class = "target">
<img src = "./images/jquery.jpg" alt = "jQuery" />
</div>
<div class = "log"></div>
</div>
</body>
</html>Isso produzirá o seguinte resultado -
Métodos de efeito JQuery
Você viu o conceito básico de efeitos jQuery. A tabela a seguir lista todos os métodos importantes para criar diferentes tipos de efeitos -
| Sr. Não. | Métodos e Descrição |
|---|---|
| 1 | animar (parâmetros, [duração, atenuação, retorno de chamada]) Uma função para fazer animações personalizadas. |
| 2 | fadeIn (velocidade, [retorno de chamada]) Fade em todos os elementos correspondentes ajustando sua opacidade e disparando um retorno de chamada opcional após a conclusão. |
| 3 | fadeOut (velocidade, [callback]) Esmaecer todos os elementos correspondentes ajustando sua opacidade para 0, definindo a exibição como "nenhum" e disparando um retorno de chamada opcional após a conclusão. |
| 4 | fadeTo (velocidade, opacidade, retorno de chamada) Atenuar a opacidade de todos os elementos correspondentes para uma opacidade especificada e disparar um retorno de chamada opcional após a conclusão. |
| 5 | ocultar( ) Oculta cada um do conjunto de elementos correspondentes se eles forem mostrados. |
| 6 | ocultar (velocidade, [retorno de chamada]) Oculte todos os elementos correspondentes usando uma animação elegante e disparando um retorno de chamada opcional após a conclusão. |
| 7 | exposição( ) Exibe cada um do conjunto de elementos correspondentes, se estiverem ocultos. |
| 8 | mostrar (velocidade, [retorno de chamada]) Mostre todos os elementos correspondentes usando uma animação elegante e disparando um retorno de chamada opcional após a conclusão. |
| 9 | slideDown (velocidade, [callback]) Revele todos os elementos correspondentes ajustando sua altura e disparando um retorno de chamada opcional após a conclusão. |
| 10 | slideToggle (velocidade, [retorno de chamada]) Alterne a visibilidade de todos os elementos correspondentes ajustando sua altura e disparando um retorno de chamada opcional após a conclusão. |
| 11 | slideUp (velocidade, [callback]) Oculte todos os elementos correspondentes ajustando sua altura e disparando um retorno de chamada opcional após a conclusão. |
| 12 | parar ([clearQueue, gotoEnd]) Para todas as animações em execução em todos os elementos especificados. |
| 13 | alternancia( ) Alterne a exibição de cada um dos conjuntos de elementos correspondentes. |
| 14 | alternar (velocidade, [retorno de chamada]) Alterne a exibição de cada um do conjunto de elementos correspondentes usando uma animação elegante e disparando um retorno de chamada opcional após a conclusão. |
| 15 | interruptor ) Alterne a exibição de cada um do conjunto de elementos correspondentes com base na opção (verdadeiro mostra todos os elementos, falso oculta todos os elementos). |
| 16 | jQuery.fx.off Desative globalmente todas as animações. |
Efeitos baseados em biblioteca de interface do usuário
Para usar esses efeitos, você pode baixar a biblioteca de interface do usuário jQuery mais recente jquery-ui-1.11.4.custom.zipda jQuery UI Library ou use o Google CDN para usá-lo de maneira semelhante à que fizemos para jQuery.
Usamos o Google CDN para jQuery UI usando o seguinte snippet de código na página HTML para que possamos usar jQuery UI -
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
</script>
</head>| Sr. Não. | Métodos e Descrição |
|---|---|
| 1 | Cego Cega o elemento ou mostra-o ao cegá-lo. |
| 2 | Pulo Salta o elemento vertical ou horizontalmente n vezes. |
| 3 | Grampo Liga ou desliga o elemento, vertical ou horizontalmente. |
| 4 | Solta Descarta o elemento ou mostra-o ao colocá-lo. |
| 5 | Explodir Explode o elemento em várias partes. |
| 6 | Dobra Dobra o elemento como um pedaço de papel. |
| 7 | Realçar Destaca o fundo com uma cor definida. |
| 8 | Sopro As animações de escala e esmaecimento criam o efeito de sopro. |
| 9 | Pulsar Pulsiona a opacidade do elemento várias vezes. |
| 10 | Escala Reduza ou aumente um elemento por um fator de porcentagem. |
| 11 | Mexe Sacode o elemento vertical ou horizontalmente n vezes. |
| 12 | Tamanho Redimensione um elemento para uma largura e altura especificadas. |
| 13 | Deslizar Desliza o elemento para fora da janela de visualização. |
| 14 | Transferir Transfere o contorno de um elemento para outro. |
As interações podem adicionar comportamentos básicos baseados no mouse a qualquer elemento. Usando com interações, podemos criar listas classificáveis, elementos redimensionáveis, comportamentos de arrastar e soltar. As interações também são ótimos blocos de construção para widgets e aplicativos mais complexos.
| Sr. Não. | Interações e descrição |
|---|---|
| 1 | Arraste capaz Habilite a funcionalidade de arrastar em qualquer elemento DOM. |
| 2 | Capaz de soltar Habilite qualquer elemento DOM para poder ser removido. |
| 3 | Capaz de redimensionar Habilite qualquer elemento DOM para ser redimensionado. |
| 4 | Selecionável capaz Permite que um elemento DOM (ou grupo de elementos) seja selecionável. |
| 5 | Classificável Permite que um grupo de elementos DOM seja classificável. |
um widget jQuery UI é um plug-in jQuery especializado. Usando o plug-in, podemos aplicar comportamentos aos elementos. No entanto, os plug-ins carecem de alguns recursos integrados, como uma maneira de associar dados a seus elementos, expor métodos, opções de mesclagem com padrões e controlar a vida útil do plug-in.
| Sr. Não. | Widgets e descrição |
|---|---|
| 1 | Acordeão Ative para recolher o conteúdo, que é dividido em seções lógicas. |
| 2 | autocompletar Ative para fornecer sugestões enquanto você digita no campo. |
| 3 | Botão Button é uma entrada do tipo submit e uma âncora. |
| 4 | Selecionador de Data É para abrir um calendário interativo em uma pequena sobreposição. |
| 5 | Diálogo As caixas de diálogo são uma das boas maneiras de apresentar informações em uma página HTML. |
| 6 | Cardápio O menu mostra uma lista de itens. |
| 7 | Barra de progresso Ele mostra as informações de progresso. |
| 8 | Selecione o menu Habilite um estilo capaz de selecionar elemento / elementos. |
| 9 | Slider O controle deslizante básico é horizontal e possui uma única alça que pode ser movida com o mouse ou usando as teclas de seta. |
| 10 | Spinner Ele fornece uma maneira rápida de selecionar um valor de um conjunto. |
| 11 | Abas É usado para alternar entre conteúdo dividido em seções lógicas. |
| 12 | Dica de ferramenta Fornece dicas para os usuários. |
Jquery tem dois temas de estilo diferentes como A e B. Cada um com cores diferentes para botões, barras, blocos de conteúdo e assim por diante.
A sintaxe do tema J da consulta, conforme mostrado abaixo -
<div data-role = "page" data-theme = "a|b">Um exemplo simples de um tema conforme mostrado abaixo -
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js">
</script>
<script src = "https://code.jquery.com/jquery-1.11.3.min.js">
</script>
<script
src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
</head>
<body>
<div data-role = "page" id = "pageone" data-theme = "a">
<div data-role = "header">
<h1>Tutorials Point</h1>
</div>
<div data-role = "main" class = "ui-content">
<p>Text link</p>
<a href = "#">A Standard Text Link</a>
<a href = "#" class = "ui-btn">Link Button</a>
<p>A List View:</p>
<ul data-role = "listview" data-autodividers = "true" data-inset = "true">
<li><a href = "#">Android </a></li>
<li><a href = "#">IOS</a></li>
</ul>
<label for = "fullname">Input Field:</label>
<input type = "text" name = "fullname" id = "fullname"
placeholder = "Name..">
<label for = "switch">Toggle Switch:</label>
<select name = "switch" id = "switch" data-role = "slider">
<option value = "on">On</option>
<option value = "off" selected>Off</option>
</select>
</div>
<div data-role = "footer">
<h1>Tutorials point</h1>
</div>
</div>
</body>
</html>Isso deve produzir o seguinte resultado -
Um exemplo de tema Simples de B, conforme mostrado abaixo -
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js">
</script>
<script src = "https://code.jquery.com/jquery-1.11.3.min.js">
</script>
<script
src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
</head>
<body>
<div data-role = "page" id = "pageone" data-theme = "b">
<div data-role = "header">
<h1>Tutorials Point</h1>
</div>
<div data-role = "main" class = "ui-content">
<p>Text link</p>
<a href = "#">A Standard Text Link</a>
<a href = "#" class = "ui-btn">Link Button</a>
<p>A List View:</p>
<ul data-role = "listview" data-autodividers = "true" data-inset = "true">
<li><a href = "#">Android </a></li>
<li><a href = "#">IOS</a></li>
</ul>
<label for = "fullname">Input Field:</label>
<input type = "text" name = "fullname" id = "fullname"
placeholder = "Name..">
<label for = "switch">Toggle Switch:</label>
<select name = "switch" id = "switch" data-role = "slider">
<option value = "on">On</option>
<option value = "off" selected>Off</option>
</select>
</div>
<div data-role = "footer">
<h1>Tutorials point</h1>
</div>
</div>
</body>
</html>Isso deve produzir o seguinte resultado -
Jquery fornece utilitários de servidor no formato $ (namespace). Esses métodos são úteis para completar as tarefas de programação. Alguns dos métodos utilitários são mostrados abaixo.
$ .trim ()
$ .trim () é usado para Remover espaços em branco à esquerda e à direita
$.trim( " lots of extra whitespace " );$ .each ()
$ .each () é usado para iterar arrays e objetos
$.each([ "foo", "bar", "baz" ], function( idx, val ) {
console.log( "element " + idx + " is " + val );
});
$.each({ foo: "bar", baz: "bim" }, function( k, v ) {
console.log( k + " : " + v );
});.each () pode ser chamado em uma seleção para iterar sobre os elementos contidos na seleção. .each (), não $ .each (), deve ser usado para iterar sobre os elementos em uma seleção.
$ .inArray ()
$ .inArray () é usado para Retorna o índice de um valor em uma matriz, ou -1 se o valor não estiver na matriz.
var myArray = [ 1, 2, 3, 5 ];
if ( $.inArray( 4, myArray ) !== -1 ) {
console.log( "found it!" );
}$ .extend ()
$ .extend () é usado para alterar as propriedades do primeiro objeto usando as propriedades dos objetos subsequentes.
var firstObject = { foo: "bar", a: "b" };
var secondObject = { foo: "baz" };
var newObject = $.extend( firstObject, secondObject );
console.log( firstObject.foo );
console.log( newObject.foo );$ .proxy ()
$ .proxy () é usado para Retorna uma função que sempre será executada no escopo fornecido - isto é, define o significado disso dentro da função passada para o segundo argumento
var myFunction = function() {
console.log( this );
};
var myObject = {
foo: "bar"
};
myFunction(); // window
var myProxyFunction = $.proxy( myFunction, myObject );
myProxyFunction();$ .browser
$ .browser é usado para fornecer informações sobre navegadores
jQuery.each( jQuery.browser, function( i, val ) {
$( "<div>" + i + " : <span>" + val + "</span>" )
.appendTo( document.body );
});$ .contains ()
$ .contains () é usado para retornar true se o elemento DOM fornecido pelo segundo argumento for um descendente do elemento DOM fornecido pelo primeiro argumento, seja ele um filho direto ou aninhado mais profundamente.
$.contains( document.documentElement, document.body ); $.contains( document.body, document.documentElement );$ .data ()
$ .data () é usado para fornecer as informações sobre os dados
<html lang = "en">
<head>
<title>jQuery.data demo</title>
<script src = "https://code.jquery.com/jquery-1.10.2.js">
</script>
</head>
<body>
<div>
The values stored were <span></span>
and <span></span>
</div>
<script>
var div = $( "div" )[ 0 ]; jQuery.data( div, "test", { first: 25, last: "tutorials" }); $( "span:first" ).text( jQuery.data( div, "test" ).first );
$( "span:last" ).text( jQuery.data( div, "test" ).last );
</script>
</body>
</html>Uma saída seria a seguinte
The values stored were 25 and tutorials$ .fn.extend ()
$ .fn.extend () é usado para estender o protótipo jQuery
<html lang = "en">
<head>
<script src = "https://code.jquery.com/jquery-1.10.2.js">
</script>
</head>
<body>
<label><input type = "checkbox" name = "android">
Android</label>
<label><input type = "checkbox" name = "ios"> IOS</label>
<script>
jQuery.fn.extend({
check: function() {
return this.each(function() {
this.checked = true;
});
},
uncheck: function() {
return this.each(function() {
this.checked = false;
});
}
});
// Use the newly created .check() method
$( "input[type = 'checkbox']" ).check();
</script>
</body>
</html>Ele fornece a saída conforme mostrado abaixo -
$ .isWindow ()
$ .isWindow () é usado para reconhecer a janela
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery.isWindow demo</title>
<script src = "https://code.jquery.com/jquery-1.10.2.js">
</script>
</head>
<body>
Is 'window' a window? <b></b>
<script>
$( "b" ).append( "" + $.isWindow( window ) );
</script>
</body>
</html>Ele fornece a saída conforme mostrado abaixo -
$ .now ()
Ele retorna um número que representa a hora atual
(new Date).getTime()$ .isXMLDoc ()
$ .isXMLDoc () verifica se um arquivo é um xml ou não
jQuery.isXMLDoc( document )
jQuery.isXMLDoc( document.body )$ .globalEval ()
$ .globalEval () é usado para executar o javascript globalmente
function test() {
jQuery.globalEval( "var newVar = true;" )
}
test();$ .dequeue ()
$ .dequeue () é usado para executar a próxima função na fila
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery.dequeue demo</title>
<style>
div {
margin: 3px;
width: 50px;
position: absolute;
height: 50px;
left: 10px;
top: 30px;
background-color: green;
border-radius: 50px;
}
div.red {
background-color: blue;
}
</style>
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button>Start</button>
<div></div>
<script>
$( "button" ).click(function() {
$( "div" ) .animate({ left: '+ = 400px' }, 2000 ) .animate({ top: '0px' }, 600 ) .queue(function() { $( this ).toggleClass( "red" );
$.dequeue( this );
})
.animate({ left:'10px', top:'30px' }, 700 );
});
</script>
</body>
</html>Ele fornece a saída conforme mostrado abaixo -