jQuery.dominator – Criação de elementos usando seletores

Sempre achei um pouco chato criar elementos no DOM usando Javascript, não gosto da idéia de escrever HTML no meio de script e o uso de templates também não me agrada muito.

Então tive a idéia de criar elementos usando seletores CSS e assim nasceu o jquery.dominator, um plugin para jQuery. O código com testes usando QUnit está disponível no meu Github.

Foi um projeto legal de se desenvolver, tive alguns problemas para implementar recursos mais complexos mas tomei por base (copiei) o funcionamento do Sizzle e do jQuery e adaptei (roubei) alguns trechos, isso garantiu a compatibilidade entre os browsers.

Segue alguns exemplos de uso:

// Tags simples
$.dominator('p'); // <p></p> $.dominator('div'); // <div></div> $.dominator('div p'); // <div><p></p></div> $.dominator('div p span a'); // <div><p><span><a></a></span></p></div>
// IDs, Classes
$.dominator('div#myid'); // <div id="myid"></div> $.dominator('div p#myid'); // <div><p id="myid"></p></div> $.dominator('div#myid p'); // <div id="myid"><p></p></div> $.dominator('#myid'); // <div id="myid"></div> $.dominator('div.myclass'); // <div class="myclass"></div> $.dominator('div.my-class'); // <div class="my-class"></div> $.dominator('div.my_class'); // <div class="my_class"></div> $.dominator('.myclass'); // <div class="myclass"></div> $.dominator('div.first.second'); // <div class="first second"></div>
// Múltiplos seletores (paralelos)
$.dominator('div, p'); // <div></div><p></p> $.dominator('div#id, p.class a'); // <div id="id"></div><p class="class"><a></a></p>
// Atributos $.dominator('a[title=simpletitle]'); // <a title="simpletitle"></a> $.dominator('a[title=With Space]'); // <a title="With Space"></a> $.dominator('a[title=With,Comma]'); // <a title="With,Comma"></a> $.dominator('a[title=With#Hash]'); // <a title="With#Hash"></a> $.dominator('a[title=With.Dot]'); // <a title="With.Dot"></a>
// Variáveis
$.dominator('a[rel=${myvar}]', {myvar: 'myvariable'}); // '<a rel="myvariable"></a>' $.dominator('a[rel=${myvar}]', {myvar: 'My Variable'}); // '<a rel="My Variable"></a>' $.dominator('a[name=${myvar}]', {myvar: 'myvar'}); // '<a name="myvar"></a>' $.dominator('a[name=${myvar}]', {myvar: 'My Variable'}); // '<a name="My Variable"></a>'

Se for útil pra você deixe um recado. Também gostaria de idéias para melhorar o plugin!

Sobre Rico
Software engineer

4 Responses to jQuery.dominator – Criação de elementos usando seletores

  1. Erick Liesner disse:

    Boa tarde, estou procurando algum exemplo ou tuto de como eu faço pra criar variaveis do tipo “${myvar}”, pq peguei um script em php que tem esse tipo de variave, e em um outro em java também tem e nso dois casos são variavesi javascript, penso que são criadas com jquery.
    Se puder me dar uam luz

  2. Alan disse:

    Cara, ficou muito bom este plugin! Principalmente pelo fato do mesmo ter ficado pequeno. Provavelmente o QUnit ajudou neste ponto…

    abs

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: