chibi

Chibi v3.0.9

Sebuah mikro-perpustakaan mikro kecil

Pikirkan tidak apa -apa untuk menyajikan 30kB lebih dari 3G hanya untuk memanipulasi beberapa elemen DOM? Tentu saja Anda tidak melakukannya karena itu adalah langkah asshat dan Anda bukan asshat. Anda mungkin malah menggunakan beberapa baris vanilla javascript, mungkin sedikit CSS :active dengan transisi, semuanya saat mengendarai unicorn tanpa pelangi melalui pelangi ganda, tanpa tangan.

Mengerjakan sesuatu yang sedikit lebih kompleks? Tidak seperti lemak, kerangka kerja dewasa dan perpustakaan, Chibi berfokus hanya pada hal-hal penting, dilebur dan dicampur dengan pelangi optimasi untuk menciptakan mikro-walibrary yang benar-benar ringan yang memungkinkan Anda melakukan hal-hal yang luar biasa, bebas.

Bit yang manis dan berair

• Chibi benar -benar kecil: 7kb Minified, 3KB Gzipped, cukup kecil untuk menempel sejalan pada aplikasi web satu halaman, menyimpan permintaan HTTP tambahan.
• Mendukung desktop modern dan browser seluler termasuk Chrome, Firefox, Internet Explorer, Opera dan Safari (lihat Dukungan Browser di bawah).
• Bahkan mendukung browser tua yang berderit seperti IE6, saya tidak tahu mengapa Anda akan melakukan ini.
• Tidak ada animasi cruft, alih -alih menggunakan transisi CSS seperti orang yang baik.
• Di browser modern, Chibi biasanya menjalankan manipulasi DOM 20% hingga 50% lebih cepat dari perpustakaan dewasa.

Bit yang kental dan kenyal

• Chibi's Polyfill for document.querySelectorAll() terbatas pada dukungan CSS browser dan tidak secepat beberapa mesin pemilih khusus. Ini berarti tidak ada input[type=text] atau p:nth-child(even) selector dengan IE6. Untungnya browser modern tidak membutuhkan polyfill ini.
• Browser kuno yang tidak mendukung document.querySelectorAll() atau window.getComputedStyle tidak dapat membuntuti.

Versi 3 adalah pembaruan besar dengan banyak perubahan besar. Jika sulit untuk merangkul perubahan, versi 1 masih tersedia di sini.

Dukungan Browser

Chibi telah diuji dengan dan mendukung browser berikut:

• Browser Android 2.1 atau lebih tinggi
• Browser BlackBerry 6 atau lebih tinggi
• Chrome
• Android Chrome
• Firefox 3.5 atau lebih tinggi
• Firefox Mobile
• Internet Explorer 6 atau lebih tinggi
• Internet Explorer Mobile 9 atau lebih tinggi
• Opera 10 atau lebih tinggi
• Opera mini
• Opera Mobile 10 atau lebih tinggi
• Safari 3.2 atau lebih tinggi
• Safari Mobile 3.2 atau lebih tinggi
• Symbian^3 browser atau lebih tinggi

Chibi juga harus bekerja dengan browser lain yang mendukung document.querySelectorAll() .

Instalasi

Ambil dari sini atau

npm install chibijs

Menggunakan chibi

Sintaks Chibi mirip dengan yang dipelopori oleh jQuery: $(selector).method() . Ia sengaja menggunakan $ namespace yang sama dengan jQuery karena perpustakaan mikro dan perpustakaan dewasa tidak boleh bercampur.

Chibi mendukung pemilih CSS standar tetapi Anda juga dapat melewati elemen DOM secara langsung:

Pemilih 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 

Pemilih elemen DOM, tidak ada gunanya

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

Pemilih Elemen Dom yang lebih menarik

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

Metode

Chibi mendukung metode chaining $(selector).method().anothermethod().evenmoremethods() dari metode apa pun yang tidak mengembalikan nilai (string, boolean, dll.).

$ (). Ready (Handler)

Fires Handler Saat DOM siap.

Gunakan untuk menembakkan fungsi saat DOM siap. Termasuk pemilih yang tidak masuk akal untuk metode ini, jangan lakukan itu.

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

atau mungkin

 function foo ( ) {
	// Do awesome
}

$ ( ) . ready ( foo ) ; 

$ (). dimuat (pawang)

Fires Handler Saat halaman dimuat.

Gunakan untuk menembakkan fungsi saat halaman dimuat. Termasuk pemilih yang tidak masuk akal untuk metode ini, jangan lakukan itu.

 function foo ( ) {
	// Do awesome
}

$ ( ) . loaded ( foo ) ; 

$ (selector) .each (fungsi)

Mengeksekusi fungsi pada setiap elemen pencocokan

Setiap melewati setiap elemen pencocokan ke fungsi yang ditentukan.

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

Menemukan elemen pencocokan pertama.

Pertama akan mengembalikan array yang berisi elemen pencocokan pertama, berguna saat bekerja dengan browser jelek seperti IE6 dengan dukungan semu CSS yang lemah, terutama ketika dikombinasikan dengan rantai metode.

$ (pemilih) .last ()

Menemukan elemen pencocokan terakhir.

Terakhir akan mengembalikan array yang berisi elemen pencocokan terakhir.

$ (pemilih) .odd ()

Menemukan elemen aneh yang cocok.

ODD akan mengembalikan array yang berisi elemen aneh yang cocok.

$ (pemilih) .even ()

Menemukan elemen yang cocok.

Bahkan akan mengembalikan array yang berisi elemen genap yang cocok.

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

Menyembunyikan elemen yang cocok.

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

$ (pemilih) .show ()

Menunjukkan elemen yang cocok.

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

$ (pemilih) .toggle ()

Mengaktifkan visibilitas elemen yang cocok.

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

$ (pemilih) .remove ()

Menghapus elemen yang cocok dari pohon 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 > 

$ (pemilih) .css (properti, nilai)

Mendapat atau secara opsional mengatur properti CSS untuk elemen yang cocok.

CSS tanpa nilai akan mengembalikan string properti CSS dari elemen pencocokan pertama yang ditemukan. CSS akan mengembalikan nilai properti yang dihitung jika properti tidak secara eksplisit diatur yang dapat bervariasi di antara browser. Misalnya, elemen tanpa bobot font eksplisit akan mengembalikan 'normal' di browser opera dan webkit tetapi '400' di browser Firefox dan Internet Explorer.

Nilai akan menetapkan nilai properti CSS untuk semua elemen yang cocok.

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

Mendapat kelas untuk elemen pencocokan pertama yang ditemukan.

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

$ (pemilih) .setClass (kelas)

Mengatur kelas dari semua elemen pencocokan yang menggantikan kelas elemen yang ada dengan kelas ini.

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

$ (pemilih) .addclass (kelas)

Menambahkan kelas ke semua elemen yang cocok.

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

$ (pemilih) .removeclass (kelas)

Menghapus kelas dari semua elemen yang cocok.

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

$ (pemilih) .toggleClass (kelas)

Kelas Bergantian untuk Elemen Pencocokan.

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

$ (pemilih) .hasclass (kelas)

Mengembalikan true jika elemen pencocokan pertama yang ditemukan termasuk kelas.

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

$ (pemilih) .html (html)

Mendapat atau secara opsional menetapkan HTML dalam elemen yang cocok.

HTML tanpa argumen akan mengembalikan string HTML dari elemen pencocokan pertama yang ditemukan.

Jika argumen HTML ditentukan, ini akan menggantikan HTML dalam semua elemen yang cocok.

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

$ (pemilih) .htmlbefore (nilai)

Sisipkan HTML sebelum semua elemen yang cocok.

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

$ (pemilih) .htmlafter (nilai)

Sisipkan HTML setelah semua elemen yang cocok.

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

$ (pemilih) .htmlappend (nilai)

Sisipkan HTML setelah semua elemen pencocokan elemen dalam.

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

$ (pemilih) .htmlprepend (nilai)

Sisipkan HTML sebelum semua elemen pencocokan elemen dalam.

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

$ (pemilih) .attr (properti, nilai)

Mendapat atau secara opsional mengatur properti untuk semua elemen yang cocok.

ATTR tanpa argumen nilai akan mengembalikan string properti dari elemen pencocokan pertama yang ditemukan.

Nilai akan menetapkan nilai properti untuk semua elemen yang cocok.

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

$ (pemilih) .data (kunci, nilai)

Mendapat atau secara opsional menetapkan nilai kunci data untuk semua elemen yang cocok.

Data tanpa argumen nilai akan mengembalikan nilai kunci data dari elemen pencocokan pertama yang ditemukan.

Nilai akan menetapkan nilai kunci data untuk semua elemen yang cocok.

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

$ (pemilih) .val (nilai)

Mendapat atau secara opsional menetapkan nilai elemen formulir yang cocok.

Val tanpa argumen akan mengembalikan string nilai elemen bentuk pencocokan pertama yang ditemukan. Untuk daftar pilih, Chibi akan mengembalikan string nilai opsi yang dipilih, jika ada. Untuk daftar pilih dengan beberapa Selects, Chibi akan mengembalikan array string nilai opsi yang dipilih, jika ada.

Nilai akan menetapkan nilai elemen bidang bentuk yang cocok. Untuk daftar pilih, ini akan memilih opsi yang cocok dengan nilai ini. Untuk daftar pilih dengan beberapa Selects, melewati array nilai akan memilih semua opsi dalam daftar pilih yang cocok dengan nilai -nilai ini.

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

$ (pemilih) .Cecked (boolean)

Mendapat atau secara opsional menetapkan status kotak centang atau elemen radio.

Diperiksa tanpa argumen akan mengembalikan boolean yang diperiksa dari elemen pencocokan pertama yang ditemukan.

Boolean akan menetapkan status kotak centang yang cocok atau elemen 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 > 

$ (pemilih) .on (acara, pendengar)

Menambahkan pendengar acara ke semua elemen yang cocok.

Di menambahkan pendengar acara ke semua elemen yang cocok. Tidak perlu menggunakan format acara HTML ('ON' + Event) karena Chibi akan secara otomatis mengawali acara sesuai kebutuhan. juga mendukung window yang lewat dan document sebagai pemilih.

 <!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 (acara, pendengar)

Menghapus pendengar acara dari semua elemen yang cocok.

Off menghapus pendengar acara dari semua elemen yang cocok. Tidak perlu menggunakan format acara HTML ('OFF' + Event) karena Chibi akan secara otomatis mengawali acara sesuai kebutuhan. OFF juga mendukung window yang lewat dan document sebagai pemilih.

 <!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, callback, nocache, nojsonp)

Mengirimkan permintaan Get AJAX, secara opsional menembakkan panggilan balik dengan responseText dan status XHR. Alias ​​$ (pemilih). Ajax dengan metode get

Ketika Nocache benar, perangko waktu _ts ditambahkan ke URL untuk mencegah caching, ya, saya melihat Anda Browser Android dan iOS 6.

Dapatkan dukungan JSON sebagai pemilih ({name: value}), berguna untuk saat Anda ingin mengirim data tanpa menggunakan elemen formulir.

Untuk permintaan silang domain, dapatkan penggunaan JSONP secara default tetapi ini ditimpa ketika nojsonp benar. Permintaan JSONP akan menerapkan panggilan balik apa pun ke callback=? atau serupa di 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 > 

$ (pemilih) .post (url, callback, nocache)

Mengirimkan Posting Permintaan AJAX, secara opsional menembakkan panggilan balik dengan responseText dan status XHR. Alias ​​$ (pemilih). Ajax dengan metode post

Ketika Nocache benar, cap waktu _ts ditambahkan ke URL untuk mencegah caching.

Posting mendukung JSON sebagai pemilih ({name: value}), berguna untuk saat Anda ingin mengirim data tanpa menggunakan elemen formulir.

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

$ (pemilih) .AJAX (url, metode, panggilan balik, nocache, nojsonp)

Mengirimkan permintaan AJAX, secara opsional menembakkan panggilan balik dengan responseText dan status XHR

Ajax menggunakan metode GET jika tidak ada yang ditentukan. Ketika Nocache benar, cap waktu _ts ditambahkan ke URL untuk mencegah caching.

AJAX mendukung JSON sebagai pemilih ({name: value}), berguna untuk saat Anda ingin mengirim data tanpa menggunakan elemen formulir.

Untuk permintaan silang domain, Ajax menggunakan JSONP secara default tetapi ini ditimpa ketika NoJSONP benar. Permintaan JSONP akan menerapkan panggilan balik apa pun ke callback=? atau serupa di URL AJAX . The method is obviously always GET for JSONP requests.

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

Ubah, membangun, berkontribusi

npm install
gulp

SIRIP