Baixe Introdução à Biblioteca jQuery e jQuery UI: Seletores, Funções e Eventos e outras Resumos em PDF para Atualidades, somente na Docsity!
Introdução ao jQuery
Aprenda os principais recursos do jQuery e como aplicá-
los
Por que este artigo é útil:
Este artigo apresenta o jQuery (biblioteca mais robusta de Javascript atual) de uma forma
simples e fácil compreensão dos principais recursos da biblioteca. Será possível analisar
como integrar em suas aplicações, criar funções/eventos, reusabilidade de código, e
manipulação dos recursos da biblioteca da melhor maneira possível.
Em 2006 foi lançada a primeira versão do jQuery pelo criador John Resig, e atual líder de desenvolvimento. A biblioteca basicamente incorpora diversas funções e eventos utilizando DOM, CSS, JavaScript, HTML e eventos Ajax. Com isso, há uma grande reusabilidade de código, tornando o código ainda mais limpo e fácil de desenvolver. O jQuery também resolve muito a questão de incompatibilidade entre os navegadores, tornando assim, uma solução cross-browser. Outra coisa que é muito interessante é que possível criar plugins muito facilmente, tendo assim, muitos plugins disponíveis para complementar a própria biblioteca. A maioria dos sites atuais no mundo utilizam essa biblioteca incorporada, inclusive em até outras bibliotecas, como por exemplo o Primefaces, uma biblioteca para desenvolvimento java web. A adesão só aumenta por causa da grande facilidade e grande colaboração de novos autores. A versão atual do jQuery é a versão 2, ao qual foi lançada incialmente em 2013, com ainda mais melhorias e algumas correções referente a versão 2. Problemas de migração podem ocorrer entre a versão 1 (1.1 à 1.12) para a versão 2. Uma recomendação para essa migração é a utilização também da biblioteca do plugin jQueryMigrate (atual versão 1.3.0) ao qual resolver boa parte de problemas de migração, e com isso, a versão 2 fica ainda mais estável com a migração. Existem outros plugins do jQuery (como o mobile, sizzle, QUnit), mas ressalto dentre elas é o jQuery UI (UI =User Interface), ao qual é possível incorporar temas, e inclusive customizá-las conforme a necessidade de cada usuário. Nada mais é do que um complemento CSS + funções javascript agregadas ao tema. É relevante o entendimento da biblioteca tendo pelo menos em conta que o conhecimento básico de DOM, CSS, Javascript e Ajax. É importante saber debugar javascript, fazer uso da inspeção de elementos (O uso de plug-ins pode auxiliar bastante, como por exemplo o uso do FireBug para o navegador Firefox) e utilização do console do navegador (geralmente com o botão F12) para analisar tags e possíveis problemas de sintaxe. É recomendável no desenvolvimento sempre ter um bom editor web, no caso, como o Aptana, DreamWeaver, WebStorm, para auxiliar o desenvolvimento.
Configurando o jQuery na sua aplicação: Considerando que você queira incorporar o jQuery Core + jQuery UI, os seguintes trechos no HTML precisam ser acrescentados (Dentro da TAG Head como recomendação): _
_ Feito essa configuração, é possível utilizar qualquer função da biblioteca. Teste para visualização de versão: Segue o trecho de código que é possível visualizar o código através de um alert. $( document ).ready(function() { alert( "You are running jQuery version: " + jQuery.fn.jquery ); }); Seletores: Seletores são identificadores de elementos (podendo ser do tipo HTML, DOM, CSS, eventos e etc) e são utilizados como um formato de sintaxe para busca elementos, criação de funções a partir do mesmo e etc. O uso de seletores se inicia com o uso do “$()” ou “jQuery()”. O “$” e “jQuery” nesse formato são reservados para uso exclusivo da biblioteca. Obtendo um elemento pelo id, considerando que a DIV tem o atributo ID = “header”: $(#header) Obtendo elementos pela classe, considerando que a DIV tem o atributo CLASS = “header”: $(.header) Nota : Interessante ressaltar que pode ser retornado uma lista de objetos ou apenas um. É possível também filtrar pelo seletor mais de 1 classe ou tipo de objeto. Exemplo de utilização: $(.header, .footer) Da mesma forma que é possível para elementos do DOM: $(h1, p, div)
Um exemplo muito comum é o uso de uma função de quando a página é carregada o seguinte evento é invocado da seguinte forma: $( document ).ready(function() { console.log( "ready!" ); }) Neste caso, o que determina que a página foi efetivamente lida é o trecho $ ( document ).ready, já quando trecho “ function() { } ” é executado, a biblioteca instancia essa função e interpreta normalmente como uma função que tenha assinatura. Era comum apenas no javascript puro a utilização de “ function { } “. Essa assinatura não é mais obrigatória. Em diversos casos a função anônima pode ser utilizada. Vale primeiro ressaltar um método para exemplificar. $.on() - É um método onde é informado por parâmetro o nome de um evento e uma função (podendo ser anônima ou não). Exemplo: A partir do clique de um botão exiba um alerta. Utilizando função não- anônima: function notify() { alert( "clicked" ); } $("#validateFields").on( "click", notify ); Utilizando função anônima: $("#validateFields").on( "click", function() { alert( "clicked" ); }); Visivelmente o código fica mais enxuto não necessitando ter a preocupação de sempre declarar novas funções para uso. Métodos e eventos mais comuns: .filter() - Reduz o número de elementos a partir da busca do seletor. Exemplo, Buscando por todos os elementos com o ID = unique a partir de uma DIV: $( "div" ).filter( document.getElementById( "unique" ) ); Outro exemplo, atribuir plano de fundo vermelho para itens ímpares de elementos do tipo LI: $( "li" ).filter( ":even" ).css( "background-color", "red" ); Outros métodos que possuem funcionalidade semelhante: .eq(), .first(), .has(), is(), .last(), .not(), .slice() .css() - Configura e obtém valores das propriedades CSS para qualquer tipo de elemento. Obtendo o valor de um atributo: var color = $(“body”).css( "background-color" );
Setando um valor: $(“body”).css( "background-color", “red” ); De forma múltipla: $("body").css({ "background-color": "yellow", "font-weight": "bolder" }); Repare que o uso de forma múltipla de atributos se utiliza o “{“ e “}”. Isso serve para quase todas as funções da biblioteca; .addClass() - Adiciona uma nova classe CSS ao elemento, exemplo: $( "p" ).addClass( "yourClass" ); .hasClass() - Verificando se o elemento tem a classe CSS ou não (retorna true ou false), exemplo: $( "#mydiv" ).hasClass( "yourClass" ) .attr() - Seta ou obtém propridades de um elemento: Setando o valor do elemento (equivale a um método do tipo setter): $( "#photo" ).attr( "alt", "Paris" ); No formato javascript puro: document.getElementById("photo").alt="Paris"; Setando de forma múltipla (mais de 1 atributo): $( "#photo" ).attr({ alt: "Paris", title: "photo by Timoteo Soutello" }); Obtendo o valor do elemento (equivale a um getter): $( "#photo" ).attr( "alt" ); .val() - Seta ou obtém o atributo “value” do elemento: Setando valor: $( "#username" ).val( "test123" ); Setando valores a um atributo do tipo múltipo: $( "#multiple" ).val([ "Multiple2", "Multiple3" ]); Obtendo valor: var userName = $( "#username" ).val(); .html() - Equivale ao innerHTML do javascript puro ao qual seta ou obtém o valor de um elemento: Obtendo valor HTML de um elemento: $( "#header" ).html(); Exemplo de inclusão de botão no HTML: var text = "button"; $( "#header" ).html(text); .keypress(), keydown(), keyup() - Eventos relacionados a teclas pressionadas pelo usuário.
Existe uma grande flexibilidade no uso destes evento de forma múltipla. Exemplo, a partir de um elemento, quero atribuir um cor de background azule a partir de alguns elementos que possuam a classe “middle” quero colocar uma borda com cor vermelha. $("#sector7") .css( "background", "blue" ) .filter(".middle") .css( "border-color", "red" ); Repare então que 3 eventos foram invocados a partir de apenas uma linha de código. Eventos de visibilidade e animação : .fadeIn() ou .show() - Ambos servem para exibir elementos. É possível também usar propriedades como parâmetro para especificar o tipo de efeito de como esse evento possa ocorrer; $( "#book" ).fadeIn( "slow", function() { // Animation complete. }); $( "#book" ).show(); .fadeOut() ou .hide() - Ambos servem para esconder elementos. É possível também usar propriedades como parâmetro para especificar o tipo de efeito de como esse evento possa ocorrer; $( "#book" ).hide(); $( "#book" ).fadeOut( "slow", function() { // Animation complete. }); .fadeToggle() ou .toggle() - Ambos servem para exibir e esconder elementos. Possui as mesmas propriedades também das funções anteriores. Ou seja, a forma que esse evento que funciona basicamente é se o elemento é inicializado como visível e o evento for acionado, o mesmo irá esconder o elemento e vice-versa, ou seja, sempre atribuindo o reverso do valor que está computado no elemento; $( "p:first" ).fadeToggle( "slow", "linear" ); $( "#target" ).toggle(); A diferença dos métodos de fadeIn/fadeOut e hide/show é que o fade altera a opacidade do elemento (mais recomendado para animações), enquanto o hide/show altera a propriedade de display/block (mais recomendado para elementos do tipo hidden). Métodos de verificação de navegador : É importante ressaltar que a função jQuery.browser não existe na versão atual do jQuery. Ela foi removida na versão 1.9. Apesar disso, é possível utilizar o plugin complementar jQuery Migrate ao qual ainda possui as funções do antigo jQuery. Verificando se o navegador é IE: jQuery.browser.msie
Verificando se o navegador é Chrome: jQuery.browser.chrome Verificando se o navegador é Firefox: jQuery.browser.mozilla Verificando se o navegador é Opera: jQuery.browser.opera Obtendo a versão do navegador: $.browser.version Interessante ressaltar que o plugin justamente tenta verificar a partir do “ navigator.userAgent ” e faz uma validação de string / match para analisar o tipo de navegador. Métodos AJAX : Também muito utilizando justamente por conseguir tratar as requisições em um mesmo contexto de página e de forma mais rápida e responsiva. Usar de forma pura com javascript pode ser no mínimo complexo e difícil de tratar todos os status de requisição. .serialize() - Codificação dos elementos e valores do mesmo para submissão do formulário. Esse evento é bem útil para tratar a o envio de dados de um formulário. Segue um exemplo para melhor entendimento: // Invocando o método no submit $( "form" ).on( "submit", function( event ) { event.preventDefault(); console.log( $(this).serialize() ); }); Se eu possuir o formulário com os atributos abaixo _ _ O valor do $(this).serialize() será equivalente a: field1=value1&check1=valueCheck O evento obtém os elementos e valores respectivos e concatena-os em uma string grande no formato GET. $.getJSON - Carregamento de um arquivo JSON de um servidor a partir de uma requisição ajax. JSON (JavaScript Object Notation) é uma formatação de leve troca de dados e bem legível. Media-type oficial é application/json. Se baseia no uso de CHAVE > VALOR. Exemplo de carregamento simples e iteração de um arquivo lido a partir do servidor.
alert("CEP não encontrado."); } }); } Biblioteca jQuery UI : É o conjunto de bibliotecas interativas construídas a partir do jQuery, ao qual contempla efeitos, widgets e temas. É altamente recomendável para incorporar no desenvolvimento de sites. Dialogs : Dialogs são basicamente modais/pop-ups a partir de criação divs específicas da biblioteca. Exemplo básico de utilização a partir do clique de um botão: _ I'm a dialog open the dialog
_ É possível flexibilizar o dialog de várias formas. Obtendo valores dos botões: var buttons = $( "#dialog" ).dialog( "option", "buttons" ); Configurando botões + adicionando um evento ao botão: $( "#dialog" ).dialog( "option", "buttons", [ { text: "Sim",, click: function() { $( this ).dialog( "close" ); } } ] ); Configurando tamanho de altura do dialog: $( "#dialog" ).dialog( "option", "height", $(window).height()/3 ); Configurando efeitos do dialog ao fechar utiliza o efeito de explosão:
#( "#dialog" ).dialog( "option", "hide", { effect: "explode", duration: 1000 } Configurando o título do dialog: $( "#dialog" ).dialog( "option", "title", "Confirmation dialog" ); Alterando CSS do dialog para um formato específico: __ Instanciando o dialog com diversos propriedades (recomendável que seja incluído esse código no evento $(document).ready(function()) ): $("#dialog").dialog({ autoOpen: false, show: "blind", resizable: false, hide: "explode", width: $(window).width()/3, modal: true }); Datepicker : Uma excelente extensão para uso de campos do tipo data, ao qual se usa para imputar dados de uma forma mais interativa. Segue um exemplo de utilização ao qual existem 2 campos de data, sendo o mesmo uma faixa de período, sendo um campo referente a data inicial e outro de data final, sendo assim, a data final não pode ser inferior a data inicial para que não permite que o usuário preencha valores inconsistentes: _
_ Configurando o datepicker (recomendável que seja incluso esse código no evento $ (document).ready(function()) ):
_"AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; $( "#tags" ).autocomplete({ source: availableTags }); });
Tags:
_ A partir de um exemplo ajax com JSON: $("#city").autocomplete({ source: function(request, response){ $.ajax({ url: "http://gd.geobytes.com/AutoCompleteCity", dataType: "jsonp", minLength: 3, data: { term: request.term }, success: function( data ) { response( data );
select: function( event, ui ) { console.log( ui.item? "Selected: " + ui.item.label : "Nothing selected, input was " + this.value); } }); } }); Essa função tem como objetivo buscar dados de cidades a partir do nome, ao qual a busca só será requisitada para o serviço da URL em questão quando for preenchido pelo menos três caracteres (configurado na propriedade minLenght com valor igual a 3). Ao selecionar, a partir do event select, será logado qual o nome da cidade foi selecionado pelo usuário. Menu : A biblioteca permite a criação de menus a partir de elementos do tipo UL / LI. Bastando apenas criar os elementos e invocar o método menu a partir do ID do elemento do tipo UL. Exemplificado abaixo: _
Save Zoom In Zoom Out
Playback
Prev Stop Play Next
_ ToolTip :
https://viacep.com.br/ - Site ao qual contém a documentação de integração de CEPs do Brasil; http://gd.geobytes.com - Site ao qual contempla a documentação de integração ajax com localizações (especialmente EUA).
