JQuery 1.4 – Novas funcionalidades

Posted by Gabriel Verta | Posted in JavaScript, jQuery | Posted on 01-02-2010-05-2008

3

A nova versão do JQuery saiu no começo do mês de Janeiro, a 1.4.1, com novas funcionalidades, onde podemos destacar:

Todos os códigos abaixo foram testados a partir do seguinte html:

<form>
    <div id="div-nome">
        <label for="nome">Nome:</label>
        <input id="nome" />
     </div>
     <div>
        <label for="email">E-mail:</label>
        <input id="email" />
     </div>
     <div>
        <label for="endereco">Endereço:</label>
        <input id="endereco" />
     </div>
     <div class="submit">
        <input type="submit" value="Salvar" />
     </div>
</form>

Nova forma de criação de objetos DOM: Cria objetos DOM de forma simplificada:

$('<button />', {
    attr: {
      type: 'button'
    }, 
    css: {
      fontWeight:'bold'
    },
    html: 'Botao'
}).appendTo('body')

Os exemplos abaixo adicionam o botão dinamicamente

delay: Adiciona um timer (temporizador) para execução dos itens subsequentes em uma fila. Funciona em efeitos que utilizam de queue para funcionar, que rodam de tempos em tempos, como por exemplo o fadeIn, fadeOut, slideUp, slideDown…

$('#nome').fadeOut('normal').delay(3000).fadeIn('normal')

detach: Remove um elemento da tela, a partir de um filtro de uma lista já existente.

$('input').detach(':submit').css('border', '1px solid blue')

first: Retorna o primeiro elemento como objeto jQuery de uma lista

$('input').first().css('border', '1px solid black')

last: Retorna o último elemento como objeto jQuery de uma lista

$('input').last().css('font-weight', 'bold')

focusin: Evento que representa o onfocus do javascript, no momento em que se poe o foco no objeto.

$('input').focusin(function(){
  $(this).css('background', 'lightgray')
})

focusout: Evento que representa o onblur do javascript, no momento em que se perde o foco do objeto.

$('input').focusout(function(){
  $(this).css('background', 'white')
})

has: Retorna se existe um objeto na lista de filhos (childNodes) do elemento atual.

alert($('form').has('input').length)
alert($('form').has('select').length)

parentsUntil: Retorna todos os elementos pai (parentNode) do elemento em questão até antes de encontrar o seletor que for passado.

$(':submit').parentsUntil('body').css('margin', '10px')

prevUntil: Retorna todos os elementos anteriores ao elemento em questão até antes de encontrar o seletor que for passado.

$('input:submit').prevUntil('form').css('background', 'red')

unwrap: Remove o elemento pai ao elemento em questão e insere o elemento novamente na mesma posição sem o elemento pai.

$('input:submit').unwrap()

jQuery.parseJSON: Trata a string JSON retornando o objeto gerado.

var json = $.parseJSON('[1, 2, "relaxos"]')
alert(json[2])

É isso ai ;)

Comments posted (3)

Nice shot!

Muito bom, achei bem úteis essas funcionalidades.

Nossa só de eu não ter q usar a lib de json já me é um puta adianto.

Write a comment

Spam protection by WP Captcha-Free