chibi

Chibi v3.0.9

Ein winziger JavaScript-Mikro-Bibliothek

Denken Sie, es ist in Ordnung, 30 KB über 3G zu servieren, nur um ein paar DOM -Elemente zu manipulieren? Natürlich nicht, weil das ein Asshat -Zug ist und du kein Arschdarsteller bist. Sie werden wahrscheinlich stattdessen ein paar Zeilen Vanille -JavaScript verwenden, vielleicht ein wenig CSS :active mit Übergängen, während Sie mit einem Unicorn Bareback durch einen doppelten Regenbogen fahren, keine Hände.

Arbeiten an etwas komplexerem arbeiten? Im Gegensatz zu fetten, erwachsenen Frameworks und Bibliotheken konzentriert sich Chibi nur auf das Wesentliche, das mit Optimierungsregenbogen geschmolzen und gemischt wird, um eine wirklich leichte Mikro-Bibliothek zu erzeugen, mit der Sie fantastische Dinge tun können, asshatorische freie.

Die süßen, saftigen Stücke

• Chibi ist wirklich winzig: 7 KB Minified, 3KB GZIPED, klein genug, um die Inline -Web -Apps auf einseitige Web -Apps zu kleben und eine zusätzliche HTTP -Anfrage zu speichern.
• Unterstützt moderne Desktop- und Mobile -Browser wie Chrome, Firefox, Internet Explorer, Opera und Safari (siehe Browser -Unterstützung unten).
• Selbst unterstützt knarrende alte Browser wie IE6, ich weiß nicht, warum Sie das tun würden.
• Kein Animationskreuz, stattdessen verwenden Sie CSS -Übergänge wie eine nette Person.
• In modernen Browsern führt Chibi typischerweise eine DOM-Manipulation von 20% bis 50% schneller aus als erwachsene Bibliotheken.

Die klumpigen, zähen Teile

• Das Chibi -Polyfill für document.querySelectorAll() ist auf Browser -CSS -Unterstützung beschränkt und ist nicht so schnell wie einige spezielle Selektormotoren. Dies bedeutet, dass keine input[type=text] oder p:nth-child(even) Selektoren mit IE6. Glücklicherweise brauchen moderner Browser diese Polyfill nicht.
• Alte Browser, die weder document.querySelectorAll() noch window.getComputedStyle unterstützen können, kann abhören.

Version 3 ist ein großes Update mit vielen Bruchänderungen. Wenn es schwierig ist, Veränderungen anzunehmen, ist Version 1 hier noch verfügbar.

Browserunterstützung

Chibi wurde mit den folgenden Browsern getestet und unterstützt:

• Android -Browser 2.1 oder höher
• Blackberry Browser 6 oder höher
• Chrom
• Chrom Android
• Firefox 3,5 oder höher
• Firefox Mobile
• Internet Explorer 6 oder höher
• Internet Explorer Mobile 9 oder höher
• Opera 10 oder höher
• Opern Mini
• Opera Mobile 10 oder höher
• Safari 3.2 oder höher
• Safari Mobile 3.2 oder höher
• Symbian^3 Browser oder höher

Chibi sollte auch mit jedem anderen Browser zusammenarbeiten, der document.querySelectorAll() unterstützt.

Installation

Schnapp es von hier oder

npm install chibijs

Mit Chibi

Die Chibi -Syntax ähnelt dem von JQuery: $(selector).method() . Es verwendet absichtlich den gleichen $ namespace wie JQuery, da Mikrobibliotheken und erwachsene Bibliotheken sich niemals mischen sollten.

Chibi unterstützt Standard -CSS -Selektoren, aber Sie können auch DOM -Elemente direkt übergeben:

CSS -Selektor

 $ ( "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 

Ein DOM -Element -Selektor, sinnlos

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

Ein interessanterer DOM -Element -Selektor

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

Methoden

Chibi unterstützt die Methode $(selector).method().anothermethod().evenmoremethods() einer Methode, die keinen Wert zurückgibt (String, Boolean usw.).

$ (). Bereit (Handler)

Feuert Handler, wenn der DOM fertig ist.

Verwenden Sie eine Funktion, wenn das DOM fertig ist. Das Einfügen eines Selektors macht für diese Methode keinen Sinn, tun Sie es nicht.

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

oder vielleicht

 function foo ( ) {
	// Do awesome
}

$ ( ) . ready ( foo ) ; 

$ () geladen (Handler)

Feuer, wenn die Seite geladen wird.

Verwenden Sie eine Funktion, wenn die Seite geladen wird. Das Einfügen eines Selektors macht für diese Methode keinen Sinn, tun Sie es nicht.

 function foo ( ) {
	// Do awesome
}

$ ( ) . loaded ( foo ) ; 

$ (Selector) .each (Funktion)

Führt eine Funktion für jedes passende Element aus

Jedes übergeben jedes übereinstimmende Element an die angegebene Funktion.

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

Findet das erste passende Element.

Zunächst wird ein Array mit dem ersten passenden Element zurückgegeben, das bei der Arbeit mit beschissenen Browsern wie IE6 mit schwachem CSS -Pseudounterstützung nützlich ist, insbesondere in Kombination mit Methodenverkettung.

$ (Selector) .last ()

Findet das letzte passende Element.

Das letzte Mal wird ein Array mit dem letzten Matching -Element zurückgegeben.

$ (Selector) .odd ()

Findet passende merkwürdige Elemente.

Odd gibt ein Array mit passenden merkwürdigen Elementen zurück.

$ (Selector) .Eden ()

Findet auch gleiche Elemente.

Sogar ein Array zurückgibt, das auch übereinstimmende Elemente enthält.

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

Versteckt passende Elemente.

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

Zeigt passende Elemente.

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

Schaltet die Sichtbarkeit passender Elemente um.

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

Entfernt passende Elemente aus dem Dom -Baum.

 <!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 (Eigenschaft, Wert)

Ruft oder optional die CSS -Eigenschaft für passende Elemente fest oder legt sie optional fest.

CSS ohne Wert gibt die CSS -Eigenschaftszeichenfolge des ersten gefundenen Matching -Elements zurück. CSS gibt den berechneten Eigenschaftswert zurück, wenn die Eigenschaft nicht explizit festgelegt ist, was zwischen den Browsern variieren kann. Zum Beispiel wird ein Element ohne explizites Schriftgewicht in den Browsern der Opera und Webkit in Firefox und Internet Explorer "400" in Firefox- und Internet Explorer -Browsern zurückgeführt.

Wert wird den Wert der CSS -Eigenschaft für alle passenden Elemente festlegen.

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

Erhält die Klasse für das erste passende Element gefunden.

 <!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 (Klasse)

Legt die Klasse aller passenden Elemente fest, die eine vorhandene Elementklasse durch diese Klasse ersetzen.

 <!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 (Klasse)

Fügt allen passenden Elementen eine Klasse hinzu.

 <!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 (Klasse)

Entfernt die Klasse aus allen passenden Elementen.

 <!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 (Klasse)

Schaltet die Klasse für passende Elemente um.

 <!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 (Klasse)

Gibt true zurück, wenn das erste Matching -Element gefunden wurde, enthält die Klasse.

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

Ruft oder optional die innere HTML von passenden Elementen fest oder legt sie optional fest.

HTML ohne Argumente gibt die HTML -Zeichenfolge des ersten gefundenen Matching -Elements zurück.

Wenn das HTML -Argument angegeben ist, ersetzt dies die innere HTML aller passenden Elemente.

 <!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 (Wert)

Fügt HTML vor allen passenden Elementen ein.

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

$ (Selektor) .htmlafter (Wert)

Fügt HTML nach allen passenden Elementen ein.

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

$ (Selektor) .htmlAppend (Wert)

Fügt HTML nach allen passenden Elementen innere Elemente ein.

 <!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 (Wert)

Fügt HTML vor allen passenden Elementen innere Elemente ein.

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

$ (Selektor) .Attr (Eigenschaft, Wert)

Ruft oder optional die Eigenschaft für alle passenden Elemente fest oder legt sie optional fest.

attr with no value argument will return the property string of the first matching element found.

Wert wird den Wert der Eigenschaft für alle passenden Elemente festlegen.

 <!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 (Schlüssel, Wert)

Ruft oder optional den Datenschlüsselwert für alle übereinstimmenden Elemente ab oder legt optional fest.

Daten ohne Wertargument geben den Datenschlüsselwert des ersten entsprechenden Elements zurück.

Wert wird den Wert des Datenschlüssels für alle übereinstimmenden Elemente festlegen.

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

$ (Selektor) .val (Wert)

Ruft oder optional den Wert der passenden Formularelemente fest oder legt optional fest.

VAL ohne Argumente gibt die Wertzeichenfolge des ersten gefundenen Anpassungsformularelements zurück. Für ausgewählte Listen gibt Chibi die ausgewählte Optionswertzeichenfolge zurück, falls vorhanden. Für ausgewählte Listen mit mehreren Auswahl wird Chibi gegebenenfalls ein Array ausgewählter Optionswertkennzeichen zurückgegeben, falls vorhanden.

Wert wird den Wert der Feldelemente für die Formularformular festlegen. Für ausgewählte Listen wird die Option ausgewählt, die diesem Wert entspricht. Für ausgewählte Listen mit mehreren Auswahllisten wählen Sie ein Array von Werten in der Auswahl von Listen aus, die mit diesen Werten übereinstimmen.

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

$ (Selektor).

Abgeruft oder optional legt der geprüfte Status des Kontrollkästchens oder der Funkelemente fest.

Überprüft ohne Argumente gibt den geprüften Booleschen des ersten übereinstimmenden Elements zurück.

Boolean setzt den geprüften Status des Übereinstimmungs -Kontrollkästchens oder die Radioelemente.

 <!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 (Ereignis, Hörer)

Fügt allen passenden Elementen einen Ereignishörer hinzu.

Auf allen passenden Elementen fügt ein Event -Hörer hinzu. Es ist nicht erforderlich, das HTML -Ereignisformat ('on' + Ereignis) zu verwenden, da Chibi das Ereignis nach Bedarf automatisch vorfixiert. Unterstützt auch das Übergeben von window und document als Selektor.

 <!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 (Ereignis, Hörer)

Einen Ereignishörer aus allen passenden Elementen entfernt.

Off hat einen Event -Hörer aus allen passenden Elementen entfernt. Es ist nicht erforderlich, das HTML -Ereignisformat ('Off' + Ereignis) zu verwenden, da Chibi das Ereignis nach Bedarf automatisch vorfixiert. OFF unterstützt auch das Passing window und document als Selektor.

 <!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, Rückruf, Nocache, Nojsonp)

Sendet eine GET -AJAX -Anfrage und füllt optional einen Rückruf mit dem XHR responseText und status . Alias ​​von $ (Selector) .Ajax mit GET -Methode

Wenn Nocache wahr ist, wird der URL ein Zeitstempel für _ts hinzugefügt, um das Caching zu verhindern. Ja, ich sehe Sie Android Browser und iOS 6 an.

GET unterstützt JSON als Selektor ({Name: Wert}), nützlich, wenn Sie Daten ohne Verwendung von Formularelementen senden möchten.

Bei Cross-Domain-Anfragen verwendet GET standardmäßig JSONP, aber dies wird überschrieben, wenn NojsonP wahr ist. JSONP -Anfragen wenden einen Rückruf auf callback=? oder ähnlich in der GET -URL.

 <!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, Rückruf, Nocache)

Sendet eine Post -AJAX -Anfrage und füllt optional einen Rückruf mit dem XHR responseText und status . Alias ​​von $ (Selector) .Ajax mit Post -Methode

Wenn Nocache wahr ist, wird der URL ein Zeitstempel für _ts hinzugefügt, um das Caching zu verhindern.

Post unterstützt JSON als Selektor ({Name: Wert}), nützlich, wenn Sie Daten ohne Verwendung von Formularelementen senden möchten.

 <!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, Methode, Rückruf, Nocache, nojsonp)

Sendet eine AJAX -Anfrage und füllt optional einen Rückruf mit dem XHR responseText und status ab

Ajax verwendet die GET -Methode, wenn keine angegeben ist. Wenn Nocache wahr ist, wird der URL ein Zeitstempel für _ts hinzugefügt, um das Caching zu verhindern.

AJAX unterstützt JSON als Selektor ({Name: Wert}) und nützlich, wenn Sie Daten ohne Verwendung von Formularelementen senden möchten.

Bei Cross-Domain-Anfragen verwendet AJAX JSONP standardmäßig, dies wird jedoch außer Kraft gesetzt, wenn NojsonP wahr ist. JSONP -Anfragen wenden einen Rückruf auf callback=? oder ähnlich in der Ajax -URL. Die Methode wird offensichtlich immer für JSONP -Anfragen 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' ) . 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 >

Ändern, bauen, beitragen

npm install
gulp

FLOSSE