chibi
1.0.0
คิดว่ามันโอเคที่จะให้บริการเพิ่มขึ้น 30kb มากกว่า 3G เพื่อจัดการกับองค์ประกอบ DOM สองสามอย่าง? แน่นอนว่าคุณไม่ได้เพราะนั่นคือการเคลื่อนไหวของ asshat และคุณไม่มี asshat คุณอาจจะใช้วานิลลาจาวาสคริปต์สองบรรทัดแทนบางที CSS เล็กน้อย :active กับช่วงการเปลี่ยนภาพทั้งหมดในขณะที่ขี่ยูนิคอร์นแบ็คแบ็คผ่านสายรุ้งคู่ไม่มีมือ
ทำงานกับสิ่งที่ซับซ้อนกว่าเล็กน้อย? Chibi มุ่งเน้นไปที่สิ่งจำเป็นละลายลงและผสมกับ Rainbows การปรับให้เหมาะสมเพื่อสร้างห้องสมุดขนาดเล็กที่ให้คุณทำสิ่งที่ยอดเยี่ยม
document.querySelectorAll() ถูก จำกัด ไว้ที่การสนับสนุน CSS ของเบราว์เซอร์และไม่เร็วเท่ากับเอ็นจิ้นตัวเลือกเฉพาะ ซึ่งหมายความว่าไม่มี input[type=text] หรือ p:nth-child(even) ตัวเลือกที่มี IE6 โชคดีที่เบราว์เซอร์ที่ทันสมัยไม่ต้องการโพลีฟิลนี้document.querySelectorAll() หรือ window.getComputedStyle สามารถ Bugger ปิดได้เวอร์ชัน 3 เป็นการอัปเดตที่สำคัญที่มีการเปลี่ยนแปลงมากมาย หากเป็นการยากที่จะยอมรับการเปลี่ยนแปลงเวอร์ชัน 1 ยังคงมีอยู่ที่นี่
Chibi ได้รับการทดสอบและสนับสนุนเบราว์เซอร์ต่อไปนี้:
Chibi ควรทำงานร่วมกับเบราว์เซอร์อื่น ๆ ที่รองรับ document.querySelectorAll()
คว้ามาจากที่นี่หรือ
npm install chibijs ไวยากรณ์ Chibi นั้นคล้ายคลึงกับ jQuery ที่บุกเบิก: $(selector).method() มันตั้งใจใช้ $ namespace เดียวกันกับ jQuery เพราะไมโครไลบรารีและห้องสมุดที่โตขึ้นไม่ควรผสม
Chibi รองรับตัวเลือก CSS มาตรฐาน แต่คุณสามารถผ่านองค์ประกอบ DOM ได้โดยตรง:
$ ( "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 $ ( document . getElementsByTagName ( 'p' ) ) . hide ( ) // Hides all paragraphs $ ( $ ( 'p' ) [ 0 ] ) . hide ( ) // Hides first paragraph Chibi รองรับวิธีการผูกมัด $(selector).method().anothermethod().evenmoremethods() ของวิธีการใด ๆ ที่ไม่คืนค่า (สตริง, บูลีน ฯลฯ )
Fires Handler เมื่อ DOM พร้อม
ใช้เพื่อยิงฟังก์ชั่นเมื่อ DOM พร้อม การรวมตัวเลือกไม่สมเหตุสมผลสำหรับวิธีนี้อย่าทำ
$ ( ) . ready ( function ( ) {
// Do awesome
} ) ;หรืออาจจะ
function foo ( ) {
// Do awesome
}
$ ( ) . ready ( foo ) ; Fires Handler เมื่อโหลดหน้าเว็บ
ใช้เพื่อยิงฟังก์ชั่นเมื่อโหลดหน้าเว็บ การรวมตัวเลือกไม่สมเหตุสมผลสำหรับวิธีนี้อย่าทำ
function foo ( ) {
// Do awesome
}
$ ( ) . loaded ( foo ) ; ดำเนินการฟังก์ชั่นในแต่ละองค์ประกอบการจับคู่
แต่ละรายการ ผ่านแต่ละองค์ประกอบการจับคู่ไปยังฟังก์ชั่นที่ระบุ
<!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 > ค้นหาองค์ประกอบการจับคู่แรก
first will return an array containing the first matching element, useful when working with crappy browsers like IE6 with weak CSS pseudo support, especially when combined with method chaining.
ค้นหาองค์ประกอบการจับคู่สุดท้าย
ล่าสุด จะส่งคืนอาร์เรย์ที่มีองค์ประกอบการจับคู่สุดท้าย
ค้นหาองค์ประกอบที่ตรงกัน
คี่ จะส่งคืนอาร์เรย์ที่มีองค์ประกอบคี่จับคู่
ค้นหาการจับคู่องค์ประกอบแม้
แม้แต่ จะส่งคืนอาร์เรย์ที่มีการจับคู่แม้องค์ประกอบ
<!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 > ซ่อนองค์ประกอบที่ตรงกัน
<!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 > แสดงองค์ประกอบที่ตรงกัน
<!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 > สลับการมองเห็นองค์ประกอบที่ตรงกัน
<!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 > ลบองค์ประกอบการจับคู่ออกจากต้นไม้ 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 > รับหรือเลือกตั้งค่าคุณสมบัติ CSS สำหรับองค์ประกอบที่ตรงกัน
CSS ที่ไม่มี ค่า จะส่งคืนสตริงคุณสมบัติ CSS ขององค์ประกอบการจับคู่แรกที่พบ CSS จะส่งคืนค่าคุณสมบัติที่คำนวณได้หากคุณสมบัติไม่ได้ตั้งค่าไว้อย่างชัดเจนซึ่งอาจแตกต่างกันระหว่างเบราว์เซอร์ ตัวอย่างเช่นองค์ประกอบที่ไม่มีน้ำหนักตัวอักษรที่ชัดเจนจะกลับมา 'ปกติ' ในเบราว์เซอร์โอเปร่าและเว็บคิท แต่ '400' ในเบราว์เซอร์ Firefox และ Internet Explorer
ค่า จะตั้งค่าของคุณสมบัติ CSS สำหรับองค์ประกอบที่ตรงกันทั้งหมด
<!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 > รับคลาสสำหรับองค์ประกอบการจับคู่แรกที่พบ
<!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 > ตั้งค่าคลาสขององค์ประกอบที่ตรงกันทั้งหมดแทนที่คลาสองค์ประกอบที่มีอยู่ด้วยคลาสนี้
<!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 > เพิ่มคลาสให้กับองค์ประกอบที่ตรงกันทั้งหมด
<!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 > ลบคลาสจากองค์ประกอบที่ตรงกันทั้งหมด
<!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 > สลับคลาสสำหรับองค์ประกอบที่ตรงกัน
<!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 > ส่งคืนจริงหากพบองค์ประกอบการจับคู่ครั้งแรกรวมถึงคลาส
<!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 > รับหรือเลือกตั้งค่า HTML ภายในขององค์ประกอบที่ตรงกัน
html with no arguments will return the HTML string of the first matching element found.
หากระบุอาร์กิวเมนต์ HTML สิ่งนี้จะแทนที่ HTML ภายในขององค์ประกอบที่ตรงกันทั้งหมด
<!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 > แทรก HTML ก่อนองค์ประกอบที่ตรงกันทั้งหมด
<!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 > แทรก HTML หลังจากองค์ประกอบที่ตรงกันทั้งหมด
<!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 > แทรก HTML หลังจากองค์ประกอบที่ตรงกันทั้งหมด
<!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 > แทรก HTML ก่อนองค์ประกอบที่ตรงกันทั้งหมดองค์ประกอบภายใน
<!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 > รับหรือเลือกคุณสมบัติสำหรับองค์ประกอบที่ตรงกันทั้งหมด
attr ที่ไม่มีอาร์กิวเมนต์ค่าจะส่งคืนสตริงคุณสมบัติขององค์ประกอบการจับคู่แรกที่พบ
ค่า จะตั้งค่าของคุณสมบัติสำหรับองค์ประกอบที่ตรงกันทั้งหมด
<!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 > รับหรือเลือกค่าคีย์ข้อมูลสำหรับองค์ประกอบที่ตรงกันทั้งหมด
ข้อมูล ที่ไม่มีอาร์กิวเมนต์ ค่า จะส่งคืนค่าคีย์ข้อมูลขององค์ประกอบการจับคู่แรกที่พบ
ค่า จะตั้งค่าของคีย์ข้อมูลสำหรับองค์ประกอบที่ตรงกันทั้งหมด
<!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 > รับหรือเลือกค่าขององค์ประกอบแบบฟอร์มการจับคู่
VAL ที่ไม่มีอาร์กิวเมนต์จะส่งคืนสตริงค่าขององค์ประกอบแบบฟอร์มการจับคู่แรกที่พบ สำหรับรายการที่เลือก Chibi จะส่งคืนสตริงค่าตัวเลือกที่เลือกถ้ามี สำหรับรายการเลือกที่มีการเลือกหลายรายการ Chibi จะส่งคืนอาร์เรย์ของสตริงค่าตัวเลือกที่เลือกหากมี
ค่า จะตั้งค่าขององค์ประกอบฟิลด์ฟอร์มการจับคู่ สำหรับรายการเลือกสิ่งนี้จะเลือกตัวเลือกที่ตรงกับค่านี้ สำหรับรายการเลือกที่มีการเลือกหลายรายการการผ่านอาร์เรย์ของค่าจะเลือกตัวเลือกทั้งหมดในรายการเลือกที่ตรงกับค่าเหล่านี้
<!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 > รับหรือตั้งค่าสถานะการตรวจสอบสถานะของช่องทำเครื่องหมายหรือองค์ประกอบวิทยุ
ตรวจสอบ โดยไม่มีอาร์กิวเมนต์จะส่งคืนบูลีนที่ตรวจสอบขององค์ประกอบการจับคู่แรกที่พบ
บูลีน จะตั้งค่าสถานะการตรวจสอบของช่องทำเครื่องหมายการจับคู่หรือองค์ประกอบวิทยุ
<!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 > เพิ่มผู้ฟังเหตุการณ์ในองค์ประกอบที่ตรงกันทั้งหมด
ใน การเพิ่มผู้ฟังเหตุการณ์ในองค์ประกอบที่ตรงกันทั้งหมด ไม่จำเป็นต้องใช้รูปแบบเหตุการณ์ HTML ('on' + เหตุการณ์) เนื่องจาก Chibi จะนำหน้าเหตุการณ์ตามที่ต้องการโดยอัตโนมัติ ยัง รองรับ window ที่ผ่านและ document เป็นตัวเลือก
<!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 > ลบผู้ฟังเหตุการณ์ออกจากองค์ประกอบที่ตรงกันทั้งหมด
OFF ลบผู้ฟังเหตุการณ์ออกจากองค์ประกอบที่ตรงกันทั้งหมด ไม่จำเป็นต้องใช้รูปแบบเหตุการณ์ HTML ('ปิด' + เหตุการณ์) เนื่องจาก Chibi จะนำหน้าเหตุการณ์ตามที่ต้องการโดยอัตโนมัติ OFF ยังรองรับ window ที่ผ่านและ document เป็นตัวเลือก
<!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 > ส่งคำขอ Get Ajax โดยเลือกใช้การโทรกลับด้วย responseText XHR และ status นามแฝงของ $ (ตัวเลือก). ajax ด้วยวิธีการรับ
When nocache is true, a _ts time stamp is added to the URL to prevent caching, yes, I'm looking at you Android Browser and iOS 6.
รับ การสนับสนุน JSON เป็นตัวเลือก ({ชื่อ: ค่า}) มีประโยชน์สำหรับเมื่อคุณต้องการส่งข้อมูลโดยไม่ต้องใช้องค์ประกอบแบบฟอร์ม
สำหรับคำขอข้ามโดเมน รับ ใช้ JSONP โดยค่าเริ่มต้น แต่สิ่งนี้ถูกแทนที่เมื่อ NOJSONP เป็นจริง คำขอ JSONP จะใช้ การโทรกลับ ใด ๆ กับ callback=? or similar in the 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 > ส่งคำขอโพสต์ AJAX โดยเลือกใช้การโทรกลับด้วย responseText XHR และ status นามแฝงของ $ (ตัวเลือก). ajax ด้วยวิธีการโพสต์
เมื่อ nocache เป็นจริงจะมีการเพิ่มการประทับเวลา _ts ลงใน URL เพื่อป้องกันการแคช
โพสต์ รองรับ JSON เป็นตัวเลือก ({ชื่อ: ค่า}) มีประโยชน์สำหรับเมื่อคุณต้องการส่งข้อมูลโดยไม่ต้องใช้องค์ประกอบแบบฟอร์ม
<!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 > ส่งคำขอ AJAX โดยเลือกใช้การโทรกลับด้วย responseText XHR และ status
AJAX ใช้วิธีการรับหากไม่มีการระบุ เมื่อ nocache เป็นจริงจะมีการเพิ่มการประทับเวลา _ts ลงใน URL เพื่อป้องกันการแคช
AJAX รองรับ JSON เป็นตัวเลือก ({ชื่อ: ค่า}) มีประโยชน์สำหรับเมื่อคุณต้องการส่งข้อมูลโดยไม่ต้องใช้องค์ประกอบแบบฟอร์ม
สำหรับคำขอข้ามโดเมน AJAX ใช้ JSONP โดยค่าเริ่มต้น แต่สิ่งนี้ถูกแทนที่เมื่อ NOJSONP เป็นจริง คำขอ JSONP จะใช้ การโทรกลับ ใด ๆ กับ callback=? หรือคล้ายกันใน URL AJAX เห็นได้ชัดว่า วิธี นี้ GET การร้องขอ 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 >npm install
gulp
