4. Faça seu movimento HTML
Você pode usar jQuery para fazer algumas animações e efeitos básicos. O núcleo do efeito de animação é a função animate(), que pode alterar o estilo CSS especificado a qualquer momento. Por exemplo, você pode alterar a altura, largura, transparência ou posição. você pode usar milissegundos ao alterar a velocidade (milissegundos) ou pode usar valores de velocidade predeterminados: lento, normal ou rápido.
Aqui está um exemplo de animação que altera a largura e a altura de um elemento ao mesmo tempo. não há valor inicial, apenas o valor final. Valor O valor inicial pode ser obtido diretamente do elemento existente. Ao mesmo tempo, também adicionei uma função de retorno de chamada:
$('#grow').animate({ height: 500). , width: 500 }, "slow", function() {alert('O elemento terminou de crescer!');});Usando essas funções integradas do jQuery, é muito fácil criar efeitos de animação. a função show() e a função hide() para mostrar e ocultar os elementos podem ser configuradas para serem executadas imediatamente ou em uma velocidade especificada. Você também pode usar as funções fadeIn() e fadeOut() ou as funções slideDown() e slideUp(). para mostrar ou ocultar um elemento, dependendo do efeito que você deseja. A seguir está um exemplo simples para mostrar o efeito de deslizamento da barra de navegação:
$('#nav').slideDown('slow'); scripts e manipulação de eventos jQuery é provavelmente o melhor para manipular DOM e processamento de eventos. Na verdade, é muito fácil percorrer e operar o DOM. Vincular, remover e chamar eventos também é muito natural e fácil de usar, e comparado com manualmente. ao escrever esses códigos, os erros podem ser bastante reduzidos. Na verdade, o jQuery simplifica o DOM. Você pode criar um elemento e vinculá-lo a outros elementos usando a função append(), você pode copiar o elemento usando clone(). definir conteúdo usando html(), você pode excluir conteúdo usando a função vazia() e remover usando a função () exclui elementos e conteúdo, e você pode até usar a função wrap() para agrupar este elemento com outro elemento. funções que podem alterar o conteúdo do próprio objeto jQuery percorrendo o DOM. Você também pode obter os irmãos() de um elemento. Você também pode usar next() e prev() para. encontrar irmãos. find() é talvez a mais poderosa dessas funções. Ela permite que você use um seletor jQuery para pesquisar em seu objeto jQuery e seus nós descendentes. A função end() atua como um desfazer, fazendo com que seu objeto jQuery retorne ao momento em que você chamou find () ou parent() ou qualquer outro estado antes da função de travessia. Se você usar o link do método que mencionamos acima, funções muito complexas. pode ser implementado com código simples. A Listagem 7 mostra um exemplo, você encontrará um formulário de login e executará algumas operações nos elementos dele. Listagem 7. Atravessando e manipulando o DOM com facilidade$('form#login')// ocultar tudo. os rótulos dentro do formulário com o 'opcional' class.find( 'label.optional').hide().end()// adiciona uma borda vermelha a qualquer campo de senha no formulário.find('input:password') .css('border', '1px solid red'). end()// adiciona um manipulador de envio ao form.submit(function(){return confirm('Tem certeza que deseja enviar?');}) ; Acredite ou não, este exemplo na verdade tem apenas um único link Uma linha de código com alguns espaços no meio Primeiro, selecionei o formulário de login. Depois, encontrei os rótulos opcionais dentro, escondi-os e chamei end(. ) para retornar ao formulário, encontrei a caixa de entrada de senha e mudei a borda para vermelho e, em seguida, chamei end() novamente para retornar ao formulário. Finalmente, adicionei uma função de processamento de tempo de envio a este formulário. O interessante é que, além do código extremamente conciso, o jQuery também otimizou todas as operações por si só para garantir que, quando tudo estiver bem conectado, você não precise procurar um elemento duas vezes. O tratamento de eventos gerais também é muito simples, assim como. chamando a função click(), submit() ou mouseover() e, em seguida, passando-a para um ouvinte de evento. Além disso, você também pode usar bind('eventname', function(){}) para. especifique a função de processamento de eventos. Você pode usar unbind('eventname') para desvincular um evento ou usar unbind() para desvincular todos os eventos. Para obter mais informações sobre esta série de funções e como usá-las, consulte a programação do aplicativo jQuery. documentação de interface (API). 6. Revelando o poder dos seletores jQuery
Normalmente, você usa ID para selecionar elementos, como #myid; ou usa nomes de classe para selecionar, como div.myclass. sintaxe de seletor que permite usar um único seletor para encontrar qualquer combinação de elementos. A
sintaxe de seletor do jQuery é amplamente baseada em CSS3 e XPath. Quanto mais você souber sobre CSS3 e XPath, melhor poderá usar o jQuery. , incluindo CSS3 e XPath, consulte os links de recursos no final deste artigo.
CSS3 inclui alguma sintaxe que é suportada por todos, portanto, você pode não vê-la com muita frequência. No entanto, você ainda pode usá-la para selecionar elementos em jQuery. porque o jQuery tem seu próprio mecanismo de análise de seletor personalizado. Por exemplo, para adicionar um travessão a cada coluna vazia da tabela, você pode usar o pseudo-operador :empty:
$('td:empty').html('-. '); Como encontrar cada elemento que não contém um nome de classe específico? CSS3 possui uma sintaxe específica para esta situação, usando o pseudo-operador :not O código a seguir ocultará todos os elementos da caixa de entrada de texto que não contêm o necessário. nome da classe. $('input:not(.required)').hide() Você também pode usar vírgulas para conectar vários seletores, assim como no CSS. ao mesmo tempo. $('ul, ol, dl' ).hide();XPath é uma ferramenta poderosa para encontrar elementos em um documento. É um pouco diferente do CSS e permite encontrar muitas coisas que não podem ser encontradas usando CSS. . Por exemplo, você deseja adicionar Para uma borda, você pode fazer isso: $("input:checkbox/..").css('border', '1px solid #777'); não são encontrados em css e XPath, por exemplo. Para aumentar a legibilidade de uma tabela, você pode definir linhas pares e ímpares para usar nomes de classes diferentes. Fazer isso com jQuery é moleza. graças ao seletor :odd. Aqui está o código que demonstra o uso da classe listrada para alterar a cor de fundo das linhas ímpares em uma tabela: $('table.striped > tr:odd').css('background', ' #999999'); Veja, os poderosos seletores do jQuery podem simplificar seu código. Não importa qual elemento você deseja afetar, não importa quão claro ou embaçado ele seja, você sempre pode encontrar uma maneira de direcioná-lo usando um simples seletor jQuery. Estendendo jQuery usando plug-ins Ao contrário de outros softwares, você pode escrever um plug-in jQuery não é de forma alguma uma provação dolorosa com um monte de APIs complicadas. Na verdade, escrever um plug-in para jQuery é tão simples que você pode querer fazê-lo. escreva um plug-in mais tarde para tornar seu código mais conciso. Aqui está a parte mais básica do plug-in que você irá escrever: $.fn.donothing = function(){return this;}; , precisa de uma pequena explicação. Primeiro, você precisa adicionar uma função a cada objeto jQuery. Você deve atribuí-la a $.fn. Em segundo lugar, a função deve retornar isso (objeto jQuery) para garantir que não interrompa o encadeamento do método. regras mencionadas acima. Você pode estender facilmente o código acima. Para alterar a cor de fundo do plug-in em vez de usar css('background'), você pode fazer isso: $.fn.background = function(bg) {return this.css('background', bg);}; Observe que posso retornar diretamente a função css(), porque já é um objeto jQuey, então o encadeamento de métodos pode funcionar bem. descobrir que você está repetindo código constantemente. Por exemplo, ao usar a função each( ) para lidar com a mesma coisa repetidamente, você pode considerar o uso de um plug-in [Anotação: Não muito claro.]. são muito fáceis de desenvolver, existem milhares de plug-ins disponíveis para você. Use jQuery para tabelas, cantos arredondados, apresentações de slides, dicas de ferramentas, seleção de datas e praticamente qualquer aplicativo que você possa imaginar. uma lista completa de plug-ins na lista de recursos no final deste artigo O plug-in mais complexo e amplamente usado é o Interface, um plug-in de animação que lida com classificação, efeitos de arrastar, vários efeitos especiais complexos e outros. efeitos de interface de usuário interessantes e complexos. Interface é para jQuery o que Scriptaculous é para Prototype. Um plug-in igualmente popular e útil é o plug-in Form, que permite simplesmente enviar um formulário em segundo plano usando ajax. esta situação: quando você precisa sequestrar o evento de envio do formulário, encontre todos os diferentes campos de saída de texto e use-os para construir a chamada ajax 8. jQuery Depois disso, acabei de falar sobre algumas coisas superficiais sobre jQuery. interessante de usar, porque os novos recursos e novos métodos que você aprende parecem muito naturais e lógicos. Depois de usar jQuery, você perceberá que ele pode simplificar seu trabalho em Javascript e Ajax, cada vez que você aprender algo, o código ficará mais simples.
Depois de aprenderjQuery
, me diverti muito em programação Javascript, e todas as coisas chatas são bem tratadas, então só preciso me concentrar na parte principal. Depois de usar jQuery, mal me lembro da última vez que usei um for. loop. Tenho até medo de usar outras bibliotecas Javascript. O jQuery mudou completamente minha visão sobre programação Javascript.