chibi

Chibi v3.0.9

Une minuscule micro-bibliothèque JavaScript

Vous pensez que c'est OK de servir 30 Ko sur la 3G juste pour manipuler quelques éléments DOM? Bien sûr, vous ne le faites pas parce que c'est une décision Asshat et que vous n'êtes pas Asshat. Vous utiliserez probablement à la place quelques lignes de JavaScript de vanille, peut-être un peu CSS :active avec des transitions, tout en conduisant une licorne à cru à travers un double arc-en-ciel, pas de mains.

Travailler sur quelque chose d'un peu plus complexe? Contrairement aux frameworks et aux bibliothèques adultes de la graisse, Chibi se concentre uniquement sur les éléments essentiels, fondu et mélangé à des arcs-en-ciel d'optimisation pour créer une micro-bibliothèque vraiment légère qui vous permet de faire des choses impressionnantes sans coup.

Les morceaux sucrés et juteux

• Chibi est vraiment minuscule: 7KB minifié, 3KB gzipped, assez petit pour rester en ligne sur les applications Web d'une seule page, enregistrant une demande HTTP supplémentaire.
• Prend en charge les navigateurs de bureau et mobiles modernes, notamment Chrome, Firefox, Internet Explorer, Opera et Safari (voir le support du navigateur ci-dessous).
• Même prend en charge les vieux navigateurs grinçants comme IE6, je ne sais pas pourquoi vous feriez cela.
• Pas d'animation Cruft, utilisez plutôt les transitions CSS comme une personne gentille.
• Dans les navigateurs modernes, Chibi exécute généralement la manipulation DOM 20% à 50% plus rapidement que les bibliothèques adultes.

Les morceaux grumeleux et moelleux

• Le polyfill de Chibi pour document.querySelectorAll() est limité au support CSS du navigateur et n'est pas aussi rapide que certains moteurs de sélecteur dédiés. Cela signifie pas de sélecteurs input[type=text] ou p:nth-child(even) avec IE6. Heureusement, le navigateur moderne n'a pas besoin de ce polyfill.
• Des navigateurs anciens qui ne prennent en charge ni document.querySelectorAll() ni window.getComputedStyle peut se débarrasser.

La version 3 est une mise à jour majeure avec de nombreux changements de rupture. S'il est difficile d'adopter le changement, la version 1 est toujours disponible ici.

Support de navigateur

Chibi a été testé et prend en charge les navigateurs suivants:

• Android Browser 2.1 ou plus
• BlackBerry Browser 6 ou plus
• Chrome
• Chrome Android
• Firefox 3,5 ou plus
• Firefox Mobile
• Internet Explorer 6 ou plus
• Internet explorateur mobile 9 ou plus
• Opéra 10 ou plus
• Opéra Mini
• Opera Mobile 10 ou plus
• Safari 3.2 ou plus
• Safari Mobile 3.2 ou plus
• Symbian ^ 3 navigateur ou plus

Chibi devrait également travailler avec tout autre navigateur qui prend en charge document.querySelectorAll() .

Installation

Prenez-le d'ici ou

npm install chibijs

Utilisation de Chibi

La syntaxe de Chibi est similaire à celle lancée par jQuery: $(selector).method() . Il utilise intentionnellement le même espace de noms $ que jQuery car les micro-bibliothèques et les bibliothèques adultes ne devraient jamais mélanger.

Chibi prend en charge les sélecteurs CSS standard, mais vous pouvez également transmettre directement les éléments DOM:

Sélecteur 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 sélecteur d'élément DOM, inutile

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

Un sélecteur d'élément DOM plus intéressant

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

Méthodes

Chibi prend en charge la méthode chainage $(selector).method().anothermethod().evenmoremethods() d'une méthode ne renvoyant pas de valeur (chaîne, booléen, etc.).

$ (). Ready (Handler)

Fire le gestionnaire lorsque le DOM est prêt.

Utilisez pour tirer une fonction lorsque le DOM est prêt. Inclure un sélecteur n'a aucun sens pour cette méthode, ne le faites pas.

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

ou peut-être

 function foo ( ) {
	// Do awesome
}

$ ( ) . ready ( foo ) ; 

$ (). chargé (gestionnaire)

Fire le gestionnaire lorsque la page est chargée.

Utilisez pour tirer une fonction lorsque la page est chargée. Inclure un sélecteur n'a aucun sens pour cette méthode, ne le faites pas.

 function foo ( ) {
	// Do awesome
}

$ ( ) . loaded ( foo ) ; 

$ (sélecteur) .each (fonction)

Exécute une fonction sur chaque élément correspondant

Chacun passe chaque élément correspondant à la fonction spécifiée.

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

$ (sélecteur).

Trouve le premier élément correspondant.

Tout d'abord , un tableau contenant le premier élément correspondant, utile lorsque vous travaillez avec des navigateurs de merde comme IE6 avec un support Pseudo CSS faible, en particulier lorsqu'il est combiné avec un chaînage de méthode.

$ (sélecteur) .Last ()

Trouve le dernier élément correspondant.

Last renvoie un tableau contenant le dernier élément correspondant.

$ (sélecteur) .odd ()

Trouve des éléments étranges correspondants.

Odd renverra un tableau contenant des éléments étranges correspondants.

$ (sélecteur).

Trouve des éléments égaux correspondants.

Renvoie même un tableau contenant des éléments égaux correspondants.

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

$ (sélecteur) .hide ()

Cache des éléments correspondants.

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

$ (sélecteur) .show ()

Montre des éléments correspondants.

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

$ (sélecteur) .toggle ()

Bascule la visibilité des éléments correspondants.

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

$ (sélecteur) .remove ()

Supprime les éléments correspondants de l'arbre 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 > 

$ (sélecteur) .css (propriété, valeur)

Obtient ou définit éventuellement la propriété CSS pour les éléments de correspondance.

css with no value will return the CSS property string of the first matching element found. CSS renvoie la valeur de la propriété calculée si la propriété n'est pas explicitement définie, ce qui peut varier entre les navigateurs. Par exemple, un élément sans poids de police explicite renverra «normal» dans les navigateurs d'opéra et de webkit mais «400» dans Firefox et Internet Explorer Browsers.

La valeur définira la valeur de la propriété CSS pour tous les éléments correspondants.

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

$ (sélecteur) .getClass ()

Obtient une classe pour le premier élément correspondant trouvé.

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

$ (sélecteur) .setClass (classe)

Définit la classe de tous les éléments correspondants remplaçant toute classe d'élément existante par cette 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 > 

$ (sélecteur) .addclass (classe)

Ajoute une classe à tous les éléments correspondants.

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

$ (sélecteur) .removeclass (classe)

Supprime la classe de tous les éléments correspondants.

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

$ (sélecteur) .toggleclass (classe)

Bascule la classe pour les éléments correspondants.

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

$ (sélecteur) .hasclass (classe)

Renvoie True si le premier élément correspondant trouvé inclut la 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 > 

$ (sélecteur) .html (html)

Obtient ou définit éventuellement le HTML intérieur des éléments correspondants.

HTML sans arguments renverra la chaîne HTML du premier élément correspondant trouvé.

Si l'argument HTML est spécifié, cela remplacera le HTML intérieur de tous les éléments correspondants.

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

$ (sélecteur) .htmlbefore (valeur)

Insère HTML avant tous les éléments correspondants.

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

$ (sélecteur) .htmlafter (valeur)

Insère HTML après tous les éléments correspondants.

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

$ (sélecteur) .htmlappend (valeur)

Insère HTML après tous les éléments correspondants des éléments intérieurs.

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

$ (sélecteur) .htmlprepennd (valeur)

Insère HTML avant tous les éléments correspondants des éléments intérieurs.

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

$ (sélecteur) .attr (propriété, valeur)

Obtient ou définit éventuellement la propriété pour tous les éléments correspondants.

ARTS sans argument de valeur renvoie la chaîne de propriétés du premier élément correspondant trouvé.

value will set the value of the property for all matching elements.

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

$ (sélecteur) .data (clé, valeur)

Obtient ou définit éventuellement la valeur de clé de données pour tous les éléments correspondants.

Les données sans argument de valeur renverront la valeur de clé de données du premier élément correspondant trouvé.

La valeur définira la valeur de la clé de données pour tous les éléments correspondants.

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

$ (sélecteur) .val (valeur)

Obtient ou définit éventuellement la valeur des éléments de formulaire correspondants.

Val sans arguments renvoie la chaîne de valeur du premier élément de formulaire correspondant trouvé. Pour sélectionner les listes, CHIBI renverra la chaîne de valeur de l'option sélectionnée, le cas échéant. Pour les listes de sélection avec plusieurs sélections, Chibi renverra un tableau de chaînes de valeur d'option sélectionnées, le cas échéant.

La valeur définira la valeur des éléments de champ de formulaire de correspondance. Pour sélectionner les listes, cela sélectionnera l'option correspondant à cette valeur. Pour les listes de sélection avec plusieurs sélections, le passage d'un tableau de valeurs sélectionnera toutes les options de la liste de sélection correspondant à ces valeurs.

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

$ (sélecteur). Vérin (booléen)

Obtient ou définit éventuellement l'état coché de la case à cocher ou des éléments radio.

checked with no arguments will return the checked boolean of the first matching element found.

Boolean définira l'état coché de la case à cocher correspondante ou des éléments 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 > 

$ (sélecteur) .on (événement, auditeur)

Ajoute un écouteur d'événements à tous les éléments correspondants.

On ajoute un auditeur d'événements à tous les éléments correspondants. Il n'est pas nécessaire d'utiliser le format d'événement HTML («sur» + événement) car Chibi préfixera automatiquement l'événement selon les besoins. On prend également en charge window et document de passage en tant que sélecteur.

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

$ (sélecteur) .off (événement, auditeur)

Supprimé un écouteur d'événements de tous les éléments correspondants.

off removed an event listener from all matching elements. Il n'est pas nécessaire d'utiliser le format d'événement HTML («OFF» + événement) car Chibi préfixera automatiquement l'événement selon les besoins. OFF prend également en charge window et document de passage en tant que sélecteur.

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

$ (sélecteur) .get (URL, rappel, nocache, nojsonp)

Envoie une demande GET AJAX, en tirant éventuellement un rappel avec le XHR responseText et status . Alias ​​de $ (sélecteur) .ajax avec la méthode Get

Lorsque Nocache est vraie, un horodatage _ts est ajouté à l'URL pour empêcher la mise en cache, oui, je vous regarde Android Browser et iOS 6.

Get prend en charge JSON en tant que sélecteur ({nom: valeur}), utile pour le moment où vous souhaitez envoyer des données sans utiliser d'éléments de formulaire.

Pour les demandes de domaine croisé, Get utilise JSONP par défaut, mais cela est remplacé lorsque nojsonp est vrai. Les demandes JSONP appliqueront un rappel à callback=? ou similaire dans l'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 > 

$ (sélecteur) .post (URL, rappel, nocache)

Envoie une demande post-ajax, tirant éventuellement un rappel avec le XHR responseText et status . Alias ​​de $ (sélecteur) .ajax avec méthode post

Lorsque Nocache est vraie, un horodatage _ts est ajouté à l'URL pour empêcher la mise en cache.

Le post prend en charge JSON en tant que sélecteur ({nom: valeur}), utile pour le moment où vous souhaitez envoyer des données sans utiliser d'éléments de formulaire.

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

$ (sélecteur) .ajax (URL, méthode, rappel, nocache, nojsonp)

Envoie une demande AJAX, tirant éventuellement un rappel avec le XHR responseText et status

AJAX utilise la méthode GET si aucune n'est spécifiée. Lorsque Nocache est vraie, un horodatage _ts est ajouté à l'URL pour empêcher la mise en cache.

AJAX prend en charge JSON en tant que sélecteur ({nom: valeur}), utile pour le moment où vous souhaitez envoyer des données sans utiliser d'éléments de formulaire.

Pour les demandes de domaine croisé, Ajax utilise JSONP par défaut, mais cela est remplacé lorsque nojsonp est vrai. Les demandes JSONP appliqueront un rappel à callback=? ou similaire dans l'URL AJAX . La méthode est évidemment GET pour les demandes 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 >

Modifier, construire, contribuer

npm install
gulp

AILETTE