chibi

Chibi v3.0.9

Uma minúscula micro-biblioteca JavaScript

Acha que não há problema em servir 30 kb acima de 3G apenas para manipular alguns elementos DOM? Claro que não, porque isso é um movimento idiota e você não é idiota. Em vez disso, você provavelmente usará algumas linhas de JavaScript de baunilha, talvez um pouco de CSS :active com transições, enquanto andava de um unicórnio por um arco -íris duplo, sem mãos.

Trabalhando em algo um pouco mais complexo? Ao contrário das estruturas e bibliotecas de gordura, adultos, Chibi se concentra apenas nos itens essenciais, derretido e misturado com arco-íris de otimização para criar uma micro-biblioteca realmente leve que permite fazer coisas incríveis, livres de idiotas.

Os pedaços doces e suculentos

• Chibi é realmente minúsculo: 7KB Minified, 3KB Gzipped, pequeno o suficiente para ficar embutido nos aplicativos da Web de uma página única, economizando uma solicitação HTTP extra.
• Suporta os navegadores modernos de desktop e móveis, incluindo Chrome, Firefox, Internet Explorer, Opera e Safari (consulte o suporte do navegador abaixo).
• Mesmo suporta navegadores antigos rangentes como o IE6, não sei por que você faria isso.
• Sem animação, o Cruft, em vez disso, use as transições CSS como uma pessoa legal.
• Nos navegadores modernos, Chibi normalmente executa a manipulação de DOM 20% a 50% mais rápida que as bibliotecas adultas.

Os pedaços irregulares e mastigáveis

• O Polyfill de Chibi para document.querySelectorAll() é limitado ao suporte do CSS do navegador e não é tão rápido quanto alguns motores seletores dedicados. Isso significa que não há input[type=text] ou p:nth-child(even) seletores com IE6. Felizmente, o navegador moderno não precisa desse poli -preenchimento.
• Navegadores antigos que não suportam document.querySelectorAll() nem window.getComputedStyle podem desligar.

A versão 3 é uma grande atualização com muitas mudanças de ruptura. Se for difícil abraçar a mudança, a versão 1 ainda estará disponível aqui.

Suporte do navegador

Chibi foi testado e apoia os seguintes navegadores:

• Navegador Android 2.1 ou superior
• BlackBerry Browser 6 ou superior
• Cromo
• Chrome Android
• Firefox 3,5 ou superior
• Firefox Mobile
• Internet Explorer 6 ou superior
• Internet Explorer Mobile 9 ou superior
• Ópera 10 ou superior
• Opera Mini
• Opera Mobile 10 ou superior
• Safari 3.2 ou superior
• Safari Mobile 3.2 ou superior
• Symbian^3 navegador ou superior

Chibi também deve trabalhar com qualquer outro navegador que suporta document.querySelectorAll() .

Instalação

Pegue daqui ou

npm install chibijs

Usando chibi

A sintaxe de chibi é semelhante à pioneira por jQuery: $(selector).method() . Ele usa intencionalmente o mesmo namespace $ que jQuery porque micro-bibliotecas e bibliotecas adultas nunca devem se misturar.

O Chibi suporta seletores CSS padrão, mas você também pode passar diretamente nos elementos DOM:

Seletor CSS

 $ ( "p" ) // Returns an array of all paragraph elements
$ ( "p" ) . hide ( ) // Hides all paragraphs
$ ( "#foo" ) . show ( ) // Shows element with id equal to "foo"
$ ( ".foo" ) . hide ( ) // Hides elements with "foo" CSS class 

Um seletor de elemento DOM, inútil

 $ ( document . getElementsByTagName ( 'p' ) ) . hide ( ) // Hides all paragraphs 

Um seletor de elemento DOM mais interessante

 $ ( $ ( 'p' ) [ 0 ] ) . hide ( ) // Hides first paragraph

Métodos

Chibi suporta o encadeamento de métodos $(selector).method().anothermethod().evenmoremethods() de qualquer método que não retorne um valor (string, booleano, etc.).

$ (). Pronto (manipulador)

O manipulador de incêndio quando o DOM está pronto.

Use para disparar uma função quando o DOM estiver pronto. Incluir um seletor não faz sentido para esse método, não faça isso.

 $ ( ) . ready ( function ( ) {
	// Do awesome
} ) ;

ou talvez

 function foo ( ) {
	// Do awesome
}

$ ( ) . ready ( foo ) ; 

$ (). Carregado (manipulador)

Manipulador de incêndio quando a página é carregada.

Use para disparar uma função quando a página for carregada. Incluir um seletor não faz sentido para esse método, não faça isso.

 function foo ( ) {
	// Do awesome
}

$ ( ) . loaded ( foo ) ; 

$ (seletor) .Each (função)

Executa uma função em cada elemento correspondente

Cada um passa cada elemento correspondente para a função especificada.

 <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p > Bar </ p >
< script >
	function foo ( elm ) {
		elm . style . color = "red" ;
	}

    $ ( 'p' ) . each ( foo ) ; // Executes the foo function (sets the element style color to red) on all paragraph elements
    
    // An alternative way to achieve the above
    $ ( 'p' ) . each ( function ( elm ) {
		$ ( elm ) . css ( 'color' , 'red' ) ;  
    } )
    
    
</ script >
</ body >
</ html > 

$ (seletor) .First ()

Encontra o primeiro elemento correspondente.

Primeiro retornará uma matriz contendo o primeiro elemento correspondente, útil ao trabalhar com navegadores de baixa qualidade como o IE6 com suporte fraco de pseudo -pseudo, especialmente quando combinado com o encadeamento de métodos.

$ (seletor) .Last ()

Encontra o último elemento correspondente.

O último retornará uma matriz contendo o último elemento correspondente.

$ (seletor) .odd ()

Encontra elementos ímpares correspondentes.

Odd retornará uma matriz contendo elementos ímpares correspondentes.

$ (seletor) .Even ()

Encontra elementos iguais.

Até retornará uma matriz contendo elementos pares correspondentes.

 <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p > Bar </ p >
< p > Foo </ p >
< p > Bar </ p >
< script >
    $ ( 'p' ) . first ( ) ; // returns an array containing the first paragraph element
    $ ( 'p' ) . last ( ) ; // returns an array containing the fourth paragraph element
    $ ( 'p' ) . odd ( ) ; // returns an array of odd paragraph elements
    $ ( 'p' ) . even ( ) ; // returns an array of even paragraph elements
</ script >
</ body >
</ html > 

$ (seletor) .hide ()

Esconde elementos correspondentes.

 <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p > Bar </ p >
< script >
	$ ( 'p' ) . hide ( ) ; // hides all paragraph elements
</ script >
</ body >
</ html > 

$ (seletor) .show ()

Mostra elementos correspondentes.

 <!DOCTYPE html >
< html >
< head >
< style >
p {display:none}
</ style >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p > Bar </ p >
< script >
	$ ( 'p' ) . show ( ) ; // shows all paragraph elements
</ script >
</ body >
</ html > 

$ (seletor) .toggle ()

Alterna a visibilidade dos elementos correspondentes.

 <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p style =" display:none " > Bar </ p >
< script >
	$ ( 'p' ) . toggle ( ) ; // shows the second paragraph element, hides the first paragraph element
</ script >
</ body >
</ html > 

$ (seletor) .remove ()

Remove elementos correspondentes da árvore Dom.

 <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p > Bar </ p >
< script >
	$ ( 'p' ) . remove ( ) ; // removes all the paragraph elements from the DOM tree
</ script >
</ body >
</ html > 

$ (seletor) .css (propriedade, valor)

Gets ou opcionalmente define a propriedade CSS para elementos correspondentes.

CSS sem valor retornará a sequência de propriedades CSS do primeiro elemento correspondente encontrado. O CSS retornará o valor da propriedade calculada se a propriedade não estiver definida explicitamente, que pode variar entre os navegadores. Por exemplo, um elemento sem peso explícito de fonte retornará "normal" nos navegadores de ópera e webkit, mas "400" nos navegadores Firefox e Internet Explorer.

O valor definirá o valor da propriedade CSS para todos os elementos correspondentes.

 <!DOCTYPE html >
< html >
< head >
< style >
.bold {font-weight:900}
</ style >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p class =" bold " > Bar </ p >
< script >
	$ ( 'p' ) . css ( 'font-weight' ) ; // returns the "font-weight" of the first paragraph element
	$ ( 'p' ) . css ( 'color' , 'red' ) ; // sets all paragraph elements color to red
</ script >
</ body >
</ html > 

$ (seletor) .getclass ()

Obtém a classe para o primeiro elemento de correspondência encontrado.

 <!DOCTYPE html >
< html >
< head >
< style >
.bold {font-weight:900}
.red {color:red}
.mono {font-family:monospace}
</ style >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< div class =" red " > Foo </ div >
< div class =" mono " > Bar </ div >
< p > Foo </ p >
< p class =" mono " > Bar </ p >
< script >
	$ ( 'div' ) . getClass ( ) ; // returns 'red', the class of the first div element
	$ ( 'p' ) . getClass ( ) ; // returns undefined as the first paragraph element has no class set
</ script >
</ body >
</ html > 

$ (seletor) .setClass (classe)

Define a classe de todos os elementos correspondentes que substituem qualquer classe de elemento existente por esta classe.

 <!DOCTYPE html >
< html >
< head >
< style >
.bold {font-weight:900}
.red {color:red}
.mono {font-family:monospace}
</ style >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p class =" mono " > Bar </ p >
< script >
	$ ( 'p' ) . setClass ( 'red bold' ) ; // sets the class to "red" and "bold" for all paragraph elements
</ script >
</ body >
</ html > 

$ (seletor) .addclass (classe)

Adiciona uma classe a todos os elementos correspondentes.

 <!DOCTYPE html >
< html >
< head >
< style >
.bold {font-weight:900}
.red {color:red}
.mono {font-family:monospace}
</ style >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p class =" mono " > Bar </ p >
< script >
	$ ( 'p' ) . addClass ( 'mono' ) ; // adds the "mono" class to all paragraph elements
</ script >
</ body >
</ html > 

$ (seletor) .RemoveClass (classe)

Remove a classe de todos os elementos correspondentes.

 <!DOCTYPE html >
< html >
< head >
< style >
.bold {font-weight:900}
.red {color:red}
.mono {font-family:monospace}
</ style >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p class =" mono " > Bar </ p >
< script >
	$ ( 'p' ) . removeClass ( 'mono' ) ; // removes the "mono" class from all paragraph elements
</ script >
</ body >
</ html > 

$ (seletor) .toggleClass (classe)

Alega a classe para elementos correspondentes.

 <!DOCTYPE html >
< html >
< head >
< style >
.bold {font-weight:900}
.red {color:red}
.mono {font-family:monospace}
</ style >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p class =" mono " > Bar </ p >
< script >
	$ ( 'p' ) . toggleClass ( 'mono' ) ; // toggles the mono class on all paragraph elements
</ script >
</ body >
</ html > 

$ (seletor) .hasclass (classe)

Retorna true se o primeiro elemento correspondente encontrado inclui a classe.

 <!DOCTYPE html >
< html >
< head >
< style >
.bold {font-weight:900}
.red {color:red}
.mono {font-family:monospace}
</ style >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< div class =" red " > Foo </ div >
< div class =" mono " > Bar </ div >
< p > Foo </ p >
< p class =" mono " > Bar </ p >
< script >
	$ ( 'div' ) . cls ( 'red' ) ; // returns true as the first div element includes the 'red' class
	$ ( 'p' ) . cls ( 'mono' ) ; // returns undefined as the first paragraph element doesn't include the 'mono' class
</ script >
</ body >
</ html > 

$ (seletor) .html (html)

Gets ou opcionalmente define o html interno dos elementos correspondentes.

HTML sem argumentos retornará a sequência HTML do primeiro elemento correspondente encontrado.

Se o argumento HTML for especificado, isso substituirá o HTML interno de todos os elementos correspondentes.

 <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p > Bar </ p >
< script >
	$ ( 'p' ) . html ( ) ; // returns an inner HTML "Foo" of the first paragraph element
	$ ( 'p' ) . html ( '<i>Foobar</i>' ) ; // Sets the inner HTML of all paragraph elements to "<i>Foobar</i>"
</ script >
</ body >
</ html > 

$ (seletor) .htmlBefore (valor)

Insira HTML antes de todos os elementos correspondentes.

 <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p > Bar </ p >
< script >
	$ ( 'p' ) . htmlBefore ( '<i>Foobar</i>' ) ; // Inserts "<i>Foobar</i>" before all paragraph elements
</ script >
</ body >
</ html > 

$ (seletor) .htmlafter (valor)

Insira HTML depois de todos os elementos correspondentes.

 <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p > Bar </ p >
< script >
	$ ( 'p' ) . htmlAfter ( '<i>Foobar</i>' ) ; // Inserts "<i>Foobar</i>" after all paragraph elements
</ script >
</ body >
</ html > 

$ (seletor) .htmlappend (valor)

Insira HTML depois de todos os elementos internos correspondentes.

 <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p > Bar </ p >
< script >
	$ ( 'p' ) . htmlAppend ( '<i>Foobar</i>' ) ; // Inserts "<i>Foobar</i>" after all paragraph child elements
</ script >
</ body >
</ html > 

$ (seletor) .htmlprepend (valor)

Insira HTML antes de todos os elementos de correspondência de elementos internos.

 <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p > Bar </ p >
< script >
	$ ( 'p' ) . htmlPrepend ( '<i>Foobar</i>' ) ; // Inserts "<i>Foobar</i>" before all paragraph child elements
</ script >
</ body >
</ html > 

$ (seletor) .attr (propriedade, valor)

Gets ou opcionalmente define a propriedade para todos os elementos correspondentes.

attr sem argumento de valor retornará a sequência de propriedades do primeiro elemento correspondente encontrado.

O valor definirá o valor da propriedade para todos os elementos correspondentes.

 <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > < a href =" http://en.wikipedia.org/wiki/Foobar " > Foobar </ a > </ p >
< script >
	$ ( 'a' ) . attr ( 'href' ) ; // returns the "href" property value "http://en.wikipedia.org/wiki/Foobar" of the first link element
	$ ( 'a' ) . attr ( 'target' , '_blank' ) ; // sets the "target" property for all link elements to "_blank"
</ script >
</ body >
</ html > 

$ (seletor) .data (chave, valor)

Gets ou opcionalmente define o valor da chave dos dados para todos os elementos correspondentes.

Os dados sem argumento de valor retornarão o valor da chave dos dados do primeiro elemento correspondente encontrado.

O valor definirá o valor da chave de dados para todos os elementos correspondentes.

 <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p data-test =" foo " > </ p >
< p data-test =" bar " > </ p >
< script >
	$ ( 'p' ) . data ( 'test' ) ; // returns "foo" for data key "test" of first paragraph element found
	$ ( 'p' ) . data ( 'test' , 'foobar' ) ; // sets the date key "test" value to "foobar" on all matching paragraph elements
</ script >
</ body >
</ html > 

$ (seletor) .val (valor)

Gets ou opcionalmente define o valor dos elementos de formulário correspondentes.

Val sem argumentos retornará a sequência de valores do primeiro elemento de formulário correspondente encontrado. Para listas selecionadas, o chibi retornará a sequência de valores de opção selecionada, se houver. Para listas selecionadas com várias seleções, o Chibi retornará uma matriz de seqüências de valores de opção selecionadas, se houver.

O valor definirá o valor dos elementos do campo de formulário correspondente. Para listas selecionadas, isso selecionará a opção correspondendo a esse valor. Para listas selecionadas com várias seleções, a passagem de uma matriz de valores selecionará todas as opções na lista de selecionar que correspondam a esses valores.

 <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< form >
< input type =" text " value =" Foobar " name =" text " >
< select multiple =" multiple " >
	< option value =" foo " > Foo </ option >
	< option value =" bar " selected =" selected " > Bar </ option >
</ select >
</ form >
< script >
	$ ( 'input' ) . val ( ) ; // returns "Foobar"
	$ ( 'input' ) . val ( 'Foo Bar' ) ; // sets the value for all input elements to "Foo Bar"
	$ ( 'select' ) . val ( ) ; // returns "bar", the selected option value 
	$ ( 'select' ) . val ( 'foo' ) ; // selects the option matching "foo"
	$ ( 'select' ) . val ( [ 'foo' , 'bar' ] ) ; // selects the options matching "foo" or "bar" values
</ script >
</ body >
</ html > 

$ (seletor) .CHecked (booleano)

Obtém ou opcionalmente define o status verificado da caixa de seleção ou elementos de rádio.

Verificado sem argumentos retornará o booleano verificado do primeiro elemento correspondente encontrado.

Boolean definirá o status verificado da caixa de seleção correspondente ou dos elementos de rádio.

 <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< form >
< input type =" checkbox " value =" Foobar " name =" chk " >
</ form >
< script >
	$ ( 'input' ) . checked ( true ) ; // checks the checkbox
	$ ( 'input' ) . checked ( ) ; // returns true
	$ ( 'input' ) . checked ( false ) ; // unchecks the checkbox
	$ ( 'input' ) . checked ( ) ; // returns false
</ script >
</ body >
</ html > 

$ (seletor) .on (evento, ouvinte)

Adiciona um ouvinte de eventos a todos os elementos correspondentes.

On Adds um ouvinte de eventos a todos os elementos correspondentes. Não há necessidade de usar o formato de evento HTML ('On' + Event), pois o Chibi prefixará automaticamente o evento conforme necessário. On também suporta a passagem window e document como seletor.

 <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p > Bar </ p >
< script >
	function foo ( ) {
		// Do awesome
	}

	$ ( 'p' ) . on ( 'click' , foo ) ; // adds the 'foo' click event listener to all paragraphs
</ script >
</ body >
</ html > 

$ (seletor) .off (evento, ouvinte)

Removeu um ouvinte de eventos de todos os elementos correspondentes.

Off removeu um ouvinte de eventos de todos os elementos correspondentes. Não há necessidade de usar o formato de evento HTML ('OFF' + Evento), pois o Chibi prefixará automaticamente o evento conforme necessário. Off também suporta a passagem window e document como seletor.

 <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< p > Foo </ p >
< p > Bar </ p >
< script >
	function foo ( ) {
		// Do awesome
	}

	$ ( 'p' ) . on ( 'click' , foo ) ; // adds the 'foo' click event listener to all paragraph elements
	$ ( 'p' ) . off ( 'click' , foo ) ; // removes the 'foo' click event listener from all paragraph elements
</ script >
</ body >
</ html > 

$ (seletor) .get (url, retorno de chamada, nocache, nojsonp)

Envia uma solicitação GET AJAX, opcionalmente, disparando um retorno de chamada com o XHR responseText and status . Alias ​​de $ (seletor) .AJAX With Get Method

Quando o Nocache é verdadeiro, um carimbo de hora _ts é adicionado ao URL para evitar o cache, sim, estou olhando para você Android Browser e iOS 6.

Get suporta JSON como um seletor ({Nome: Value}), útil para quando você deseja enviar dados sem usar elementos de formulário.

Para solicitações de domínio cruzado, o Get Usa JSONP por padrão, mas isso é substituído quando o Nojsonp é verdadeiro. As solicitações do JSONP aplicarão algum retorno de chamada ao callback=? ou similar no URL Get .

 <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< form >
< input type =" text " value =" Foobar " name =" text " >
</ form >
< script >
	// XHR all form data using "GET" to "ajax.html"
	$ ( 'form' ) . get ( 'ajax.html' ) ;

	// XHR the JSON using "GET" to "ajax.html"
	$ ( { text : 'Foo Bar' } ) . get ( 'ajax.html' ) ;

</ script >
</ body >
</ html > 

 <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< script >
	// JSONP
	$ ( ) . get ( 'https://api.github.com/users/kylebarrow/repos?sort=created&direction=asc&callback=?' , function ( data , status ) {
		// Do awesome
	} ) ;

	// JSONP with JSON query
	$ ( { sort : "created" , direction : "asc" , callback : "?" } ) . get ( 'https://api.github.com/users/kylebarrow/repos' , function ( data , status ) {
		// Do awesome
	} ) ;
</ script >
</ body >
</ html > 

$ (seletor) .Post (URL, retorno de chamada, nocache)

Envia uma solicitação de postagem AJAX, opcionalmente, disparando um retorno de chamada com o XHR responseText and status . Alias ​​de $ (seletor) .ajax com método post

Quando o Nocache é verdadeiro, um carimbo de data para _ts é adicionado ao URL para evitar o cache.

A postagem suporta o JSON como um seletor ({nome: value}), útil para quando você deseja enviar dados sem usar elementos de formulário.

 <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< form >
< input type =" text " value =" Foobar " name =" text " >
</ form >
< script >
	// XHR the JSON using "POST" to "ajax.html"
	$ ( { text : 'Foo Bar' } ) . post ( 'ajax.html' ) ;	
	
	// XHR all form data using "POST" to "ajax.html", returns responseText and status, adds a cache busting time stamp
	$ ( 'form' ) . post ( 'ajax.html' , function ( data , status ) {
		// Do awesome
	} , true ) ;
</ script >
</ body >
</ html > 

$ (seletor) .ajax (URL, método, retorno de chamada, nocache, nojsonp)

Envia uma solicitação AJAX, opcionalmente disparando um retorno de chamada com o XHR responseText e status

O Ajax usa o método GET se nenhum for especificado. Quando o Nocache é verdadeiro, um carimbo de data para _ts é adicionado ao URL para evitar o cache.

O AJAX suporta o JSON como um seletor ({Nome: Value}), útil para quando você deseja enviar dados sem usar elementos de formulário.

Para solicitações de domínio cruzado, o Ajax usa o JSONP por padrão, mas isso é substituído quando o Nojsonp é verdadeiro. As solicitações do JSONP aplicarão algum retorno de chamada ao callback=? ou similar no URL do Ajax . O método é obviamente sempre GET para solicitações JSONP.

 <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< form >
< input type =" text " value =" Foobar " name =" text " >
</ form >
< script >
	// XHR all form data using "GET" to "ajax.html"
	$ ( 'form' ) . ajax ( 'ajax.html' ) ;

	// XHR the JSON using "GET" to "ajax.html"
	$ ( { text : 'Foo Bar' } ) . ajax ( 'ajax.html' ) ;

	// XHR all form data using "POST" to "ajax.html", returns responseText and status, adds a cache busting time stamp
	$ ( 'form' ) . ajax ( 'ajax.html' , "POST" , function ( data , status ) {
		// Do awesome
	} , true ) ;
</ script >
</ body >
</ html > 

 <!DOCTYPE html >
< html >
< head >
< script src =" chibi-min.js " > </ script >
</ head >
< body >
< script >
	// JSONP
	$ ( ) . ajax ( 'https://api.github.com/users/kylebarrow/repos?sort=created&direction=asc&callback=?' , 'GET' , function ( data , status ) {
		// Do awesome
	} ) ;

	// JSONP with JSON query
	$ ( { sort : "created" , direction : "asc" , callback : "?" } ) . ajax ( 'https://api.github.com/users/kylebarrow/repos' , 'GET' , function ( data , status ) {
		// Do awesome
	} ) ;
</ script >
</ body >
</ html >

Modificar, construir, contribuir

npm install
gulp

Fin