A versão 1.4, lançada no dia 14 de Janeiro traz muitas novidades interessantes, além de aperfeiçoamentos que ainda precisavam ser feitos. Uma boa melhorada na performance dos scripts fazem essa versão ainda mais competitiva nos aspectos em que perdia para outros grandes frameworks do mercado (ver comparativo de performance entre os frameroks js) aqui ou aqui.

Muitos metodos comuns tiveram melhorias consideráveis de performance nesta nova versão, entre esses estão: css(), attr(), addClass(), removeClass(), hasClass(), html(), remove(), empty() … e muitos outros.

Em varios casos eles citam aumentos de desempenho que chegam superam em até 4x a implementação da versão anterior, muito dessa melhora se obteve atraves da refatoração do código.

As mudanças de performance dos scripts foram muito consideráveis, alguns métodos ganharam “poderes” que antes não tinham, vale a pena dar uma olhada no changelog para conferir métodos que ganharam novas possibilidades de assinaturas.

O único aspecto negativo que encontramos até agora foi o peso da nova versão, agora com 23 kb (Minified,GZIP), contra os 19kb(Minified, GZIP) da sua versão antecessora (v 1.3.2). Acreditamos ser até uma mudança razoável se analizarmos o número de implementações e re-escritas que foram feitos para a nova versão.

Vale destacar algumas das muitas novidades dessa versão. Aos poucos vamos listando mais métodos interessantes:

detach()

O método “detach” armazena o elemento selecionado em uma variável para uso posterior, e o remove da árvore DOM. Funciona de maneira similar ao já existente método “remove”, porém mantendo uma referência para ele sem destruir. Resumidamente ele “recorta(destaca)” um fragmento de html para ser utilizado em outro ponto do código.

Ex:

<span class="origem">

    <p>Item 1</p>

    <p>Item 2</p>

    <p>Item 3</p>

    <p>Item 4</p>

    <p>Item 5</p>

</span>

<span class="destino"></span>

<input type="button" value="Recortar" class="btnRetirar" />

<input type="button" value="Colar" class="btnAdicionar" />

<script src="jquery-1.4.js" type="text/javascript"></script>

<script type="text/javascript">

    $().ready(function() {

        var itens

        $(".origem p").click(function() {

            $(this).addClass("selecionado")

        })

        $(".btnRetirar").click(function() {

            itens = $(".origem .selecionado").detach();

       })

       $(".btnAdicionar").click(function() {

           itens.appendTo(".destino")

           itens = null

       })

    })

</script>

isPlainObject()

Verifica se o objeto foi criado utilizando “{}” ou “new Object”

Ex:

<div id="isPlainObject"></div>

<script src="jquery-1.4.js" type="text/javascript"></script>

<script type="text/javascript">

    $().ready(function() {

        obj1 = new Object

        obj2 = {}

        obj3 = {a:"asd", b:"asdfg"}

        obj4 = []

        obj5 = "asdfg"

        obj6 = function () {}

        $("#isPlainObject").html(

            "<p>jQuery.isPlainObject(new Object) -> " + jQuery.isPlainObject(obj1) + "</p>" +

            "<p>jQuery.isPlainObject({}) -> " + jQuery.isPlainObject(obj2) + "</p>" +

            '<p>jQuery.isPlainObject({a:"asd", b:"asdfg"}) -> ' + jQuery.isPlainObject(obj3) + "</p>" +

            "<p>jQuery.isPlainObject([]) -> " + jQuery.isPlainObject(obj4) + "</p>" +

            '<p>jQuery.isPlainObject("asdfg") -> ' + jQuery.isPlainObject(obj5) + "</p>" +

            "<p>jQuery.isPlainObject(function () {}) -> " + jQuery.isPlainObject(obj6) + "</p>"

        )

    })

</script>

isEmptyObject()

Verifica se o objeto está vazio

Ex:

<div id="isEmptyObject"></div>

<script src="jquery-1.4.js" type="text/javascript"></script>

<script type="text/javascript">

    $().ready(function() {

        obj1 = new Object

        obj2 = {}

        obj3 = {a:"asd", b:"asdfg"}

        obj4 = []

        obj5 = "asdfg"

        obj6 = function () {}

        $("#isEmptyObject").html(

            "<p>jQuery.isEmptyObject(new Object) -> " + jQuery.isEmptyObject(obj1) + "</p>" +

            "<p>jQuery.isEmptyObject({}) -> " + jQuery.isEmptyObject(obj2) + "</p>" +

            '<p>jQuery.isEmptyObject({a:"asd", b:"asdfg"}) -> ' + jQuery.isEmptyObject(obj3) + "</p>" +

            "<p>jQuery.isEmptyObject([]) -> " + jQuery.isEmptyObject(obj4) + "</p>" +

            '<p>jQuery.isEmptyObject("asdfg") -> ' + jQuery.isEmptyObject(obj5) + "</p>" +

            "<p>jQuery.isEmptyObject(function () {}) -> " + jQuery.isEmptyObject(obj6) + "</p>"

        )

    })

</script>

Para ver os exemplos em funcionamento, clique aqui

Referencias:

api.jquery.com

jquery14.com