chibi

Chibi v3.0.9

Una pequeña micro biblioteca JavaScript

¿Crees que está bien servir 30 kb sobre 3 g solo para manipular un par de elementos DOM? Por supuesto que no lo haces porque eso es un movimiento de imbécil y no eres un imbécil. Probablemente usará un par de líneas de JavaScript de vainilla, tal vez un pequeño CSS :active con transiciones, todo mientras se monta un unicornio a pelo a través de un arco iris doble, sin manos.

¿Trabajando en algo un poco más complejo? A diferencia de los marcos y bibliotecas de grasa y adulta, Chibi se centra solo en lo esencial, derretido y mezclado con los arco iris optimización para crear una micro biblioteca realmente ligera que le permita hacer cosas increíbles, lo libre de asshatorias.

Los dulces y jugosos trozos

• Chibi es realmente pequeño: 7 kb minificado, 3kb Gzipped, lo suficientemente pequeño como para meterse en línea en aplicaciones web de una sola página, guardando una solicitud HTTP adicional.
• Admite navegadores modernos de escritorio y móviles, incluidos Chrome, Firefox, Internet Explorer, Opera y Safari (ver soporte de navegador a continuación).
• Incluso admite navegadores viejos y crujientes como IE6, no sé por qué harías esto.
• No hay animación Cruft, en su lugar, use transiciones CSS como una buena persona.
• En los navegadores modernos, Chibi generalmente ejecuta la manipulación DOM de 20% a 50% más rápido que las bibliotecas adultas.

Los brocas grumosos y masticables

• Polyfill de Chibi para document.querySelectorAll() se limita al soporte CSS del navegador y no es tan rápido como algunos motores selectores dedicados. Esto significa que no hay input[type=text] o p:nth-child(even) selectores con IE6. Afortunadamente, el navegador moderno no necesita este polyfill.
• Los navegadores antiguos que no admiten document.querySelectorAll() ni window.getComputedStyle puede desactivar.

La versión 3 es una actualización importante con muchos cambios de ruptura. Si es difícil aceptar el cambio, la versión 1 todavía está disponible aquí.

Soporte del navegador

Chibi ha sido probado y admite los siguientes navegadores:

• Android Browser 2.1 o superior
• BlackBerry Browser 6 o superior
• Cromo
• Android cromado
• Firefox 3.5 o superior
• Firefox Mobile
• Internet Explorer 6 o superior
• Internet Explorer Mobile 9 o superior
• Ópera 10 o superior
• Ópera mini
• Opera Mobile 10 o superior
• Safari 3.2 o superior
• Safari Mobile 3.2 o superior
• Symbian^3 navegador o superior

Chibi también debe trabajar con cualquier otro navegador que admita document.querySelectorAll() .

Instalación

Agarrarlo desde aquí o

npm install chibijs

Usando chibi

La sintaxis de Chibi es similar a la pionera por jQuery: $(selector).method() . Utiliza intencionalmente el mismo espacio de nombres $ que jQuery porque las micro bibliotecas y las bibliotecas adultos nunca deben mezclarse.

CHIBI admite selectores CSS estándar, pero también puede pasar directamente en los elementos DOM:

Selector de 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 

Un selector de elementos dom, inútil

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

Un selector de elementos DOM más interesante

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

Métodos

Chibi admite el método encadenamiento $(selector).method().anothermethod().evenmoremethods() de cualquier método que no devuelva un valor (cadena, booleano, etc.).

$ (). Ready (controlador)

Handler de incendios cuando el DOM está listo.

Use para disparar una función cuando el DOM está listo. Incluir un selector no tiene sentido para este método, no lo hagas.

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

o tal vez

 function foo ( ) {
	// Do awesome
}

$ ( ) . ready ( foo ) ; 

$ (). Cargado (controlador)

Handler de incendios cuando se carga la página.

Usar para despedir una función cuando la página está cargada. Incluir un selector no tiene sentido para este método, no lo hagas.

 function foo ( ) {
	// Do awesome
}

$ ( ) . loaded ( foo ) ; 

$ (selector) .each (función)

Ejecuta una función en cada elemento coincidente

Cada uno pasa cada elemento coincidente a la función 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 > 

$ (selector) .first ()

Encuentra el primer elemento coincidente.

Primero devolverá una matriz que contiene el primer elemento coincidente, útil cuando se trabaja con navegadores de mierda como IE6 con soporte pseudo CSS débil, especialmente cuando se combina con encadenamiento del método.

$ (selector) .last ()

Encuentra el último elemento coincidente.

El último devolverá una matriz que contiene el último elemento coincidente.

$ (selector) .odd ()

Encuentra elementos impares coincidentes.

Odd devolverá una matriz que contiene elementos Odd coincidentes.

$ (selector) .Even ()

Encuentra elementos uniformes de coincidencia.

Incluso devolverá una matriz que contenga elementos pares de coincidencia.

 <!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 > 

$ (selector) .Hide ()

Oculta elementos coincidentes.

 <!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 > 

$ (selector) .show ()

Muestra elementos coincidentes.

 <!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 > 

$ (selector) .toggle ()

Alterna la visibilidad de los elementos coincidentes.

 <!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 > 

$ (selector) .remove ()

Elimina elementos coincidentes del árbol 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 > 

$ (selector) .css (propiedad, valor)

Obtiene o opcionalmente establece la propiedad CSS para elementos coincidentes.

CSS sin valor devolverá la cadena de propiedad CSS del primer elemento coincidente encontrado. CSS devolverá el valor de la propiedad calculada si la propiedad no se establece explícitamente, lo que puede variar entre los navegadores. Por ejemplo, un elemento sin peso de fuente explícito devolverá 'normal' en los navegadores Opera y WebKit pero '400' en los navegadores Firefox e Internet Explorer.

El valor establecerá el valor de la propiedad CSS para todos los elementos coincidentes.

 <!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 > 

$ (selector) .getClass ()

Obtiene clase para el primer elemento coincidente 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 > 

$ (selector) .setClass (clase)

Establece la clase de todos los elementos coincidentes que reemplazan cualquier clase de elemento existente con esta clase.

 <!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 > 

$ (selector) .addclass (clase)

Agrega una clase a todos los elementos coincidentes.

 <!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 > 

$ (selector) .removeclass (clase)

Elimina la clase de todos los elementos coincidentes.

 <!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 > 

$ (selector) .TogglecLass (clase)

Alternar la clase para elementos coincidentes.

 <!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 > 

$ (selector) .hasclass (clase)

Devuelve verdadero si el primer elemento coincidente encontrado incluye la clase.

 <!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 > 

$ (selector) .html (html)

Obtiene o opcionalmente establece el HTML interno de los elementos coincidentes.

HTML sin argumentos devolverá la cadena HTML del primer elemento coincidente encontrado.

Si se especifica el argumento HTML , esto reemplazará el HTML interno de todos los elementos coincidentes.

 <!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 > 

$ (selector) .htmlbefore (valor)

Inserta HTML antes de todos los elementos coincidentes.

 <!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 > 

$ (selector) .htmlafter (valor)

Inserta HTML después de todos los elementos coincidentes.

 <!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 > 

$ (selector) .htmlappend (valor)

Inserta HTML después de todos los elementos coincidentes elementos internos.

 <!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 > 

$ (selector) .htmlprepend (valor)

Inserta HTML antes de todos los elementos coincidentes 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 > 

$ (selector) .Attr (propiedad, valor)

Obtiene o opcionalmente establece la propiedad para todos los elementos coincidentes.

ATTR sin argumento de valor devolverá la cadena de propiedad del primer elemento coincidente encontrado.

El valor establecerá el valor de la propiedad para todos los elementos coincidentes.

 <!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 > 

$ (selector) .data (clave, valor)

Obtiene o opcionalmente establece el valor de la clave de datos para todos los elementos coincidentes.

Los datos sin argumento de valor devolverán el valor de la clave de datos del primer elemento coincidente encontrado.

El valor establecerá el valor de la clave de datos para todos los elementos coincidentes.

 <!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 > 

$ (selector) .val (valor)

Obtiene o opcionalmente establece el valor de los elementos de formulario coincidentes.

Val sin argumentos devolverá la cadena de valor del primer elemento de formulario coincidente encontrado. Para listas de selección, Chibi devolverá la cadena de valor de opción seleccionada, si corresponde. Para listas de selección con múltiples selecciones, Chibi devolverá una matriz de cadenas de valor de opción seleccionadas, si las hay.

El valor establecerá el valor de los elementos de campo de formulario coincidente. Para listas de selección, esto seleccionará la opción que coincida con este valor. Para listas de selección con múltiples selecciones, pasar una matriz de valores seleccionará todas las opciones en la lista de selección que coincida con estos 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 > 

$ (Selector). Requerido (booleano)

Obtiene o opcionalmente establece el estado verificado de la casilla de verificación o los elementos de radio.

Revisado sin argumentos devolverá el booleano verificado del primer elemento correspondiente encontrado.

Boolean establecerá el estado marcado de la casilla de verificación coincidente o los elementos de radio.

 <!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 > 

$ (selector) .on (evento, oyente)

Agrega un oyente de eventos a todos los elementos correspondientes.

On agrega un oyente de eventos a todos los elementos correspondientes. No es necesario usar el formato de evento HTML ('On' + Event), ya que Chibi prefirirá automáticamente el evento según sea necesario. en también admite la aprobación de window y document como selector.

 <!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 > 

$ (Selector) .Off (Evento, oyente)

Eliminó un oyente de eventos de todos los elementos a juego.

Off eliminó un oyente de eventos de todos los elementos a juego. No es necesario usar el formato de evento HTML ('OFF' + Event), ya que Chibi prefirirá automáticamente el evento según sea necesario. OFF también admite window y document como el selector.

 <!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 > 

$ (selector) .get (url, devolución de llamada, nocache, nojsonp)

Envía una solicitud Get AJAX, opcionalmente disparando una devolución de llamada con el XHR responseText y status . Alias ​​de $ (selector) .AJAX con el método Get

Cuando Nocache es verdadero, se agrega una marca de tiempo _ts a la URL para evitar el almacenamiento en caché, sí, te estoy mirando el navegador Android e iOS 6.

Get Supports JSON como selector ({nombre: valor}), útil para cuando desea enviar datos sin usar elementos de formulario.

Para las solicitudes de dominio cruzado, Get usa JSONP por defecto, pero esto se anula cuando NOJSONP es verdadero. Las solicitudes de JSONP aplicarán cualquier devolución de llamada a callback=? o similar en la 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 > 

$ (selector) .Post (URL, devolución de llamada, nocache)

Envía una solicitud POST AJAX, opcionalmente disparando una devolución de llamada con el XHR responseText y status . Alias ​​de $ (selector) .AJAX con método post

Cuando Nocache es verdadero, se agrega una marca de tiempo _ts a la URL para evitar el almacenamiento en caché.

Post es compatible con JSON como selector ({nombre: valor}), útil para cuándo desea enviar datos sin usar elementos de formulario.

 <!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 > 

$ (Selector) .AJAX (URL, Método, devolución de llamada, Nocache, NOJSONP)

Envía una solicitud AJAX, opcionalmente disparando una devolución de llamada con el XHR responseText y status

AJAX usa el método GET si no se especifica ninguno. Cuando Nocache es verdadero, se agrega una marca de tiempo _ts a la URL para evitar el almacenamiento en caché.

AJAX admite JSON como selector ({nombre: valor}), útil para cuando desea enviar datos sin usar elementos de formulario.

Para las solicitudes de dominio cruzado, AJAX usa JSONP de forma predeterminada, pero esto se anula cuando NOJSONP es cierto. Las solicitudes de JSONP aplicarán cualquier devolución de llamada a callback=? o similar en la URL AJAX . El método obviamente siempre GET para las solicitudes 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

ALETA