chibi Download - تنزيل رمز المصدر chibi

تشيبي V3.0.9

مكتبة صغيرة جافا سكريبت

أعتقد أنه من المقبول خدمة ما يصل إلى 30 كيلو بايت على 3G لمجرد التلاعب ببعض عناصر DOM؟ بالطبع لا تفعل ذلك لأن هذه خطوة Asshat وأنت لست Asshat. من المحتمل أن تستخدم بدلاً من ذلك مجموعة من خطوط الفانيليا جافا سكريبت ، وربما CSS صغيرة :active مع التحولات ، كل ذلك أثناء ركوب سرج يونيكورن عبر قوس قزح مزدوج ، لا يدي.

العمل على شيء أكثر تعقيدًا؟ على عكس الدهون ، الأطر والمكتبات البديلة ، يركز Chibi على الأساسيات فقط ، ذابًا ومختلطًا مع أقواس قزح التحسين لإنشاء مكتبة صغيرة خفيفة حقًا تتيح لك القيام بأشياء رائعة مجانية.

البتات الحلوة والعصرية

Chibi صغير جدًا: 7 كيلو بايت مُأجِّر ، 3 كيلو بايت Gzipped ، صغير بما يكفي للتصحيح على تطبيقات الويب الواحدة ، وحفظ طلب HTTP إضافي.
يدعم متصفحات سطح المكتب الحديثة والهواتف المحمولة بما في ذلك Chrome و Firefox و Internet Explorer و Opera و Safari (انظر دعم المتصفح أدناه).
حتى يدعم المتصفحات القديمة الصاخبة مثل IE6 ، لا أعرف لماذا ستفعل ذلك.
لا توجد رسوم متحركة ، بدلاً من ذلك ، استخدم انتقالات CSS مثل شخص لطيف.
في المتصفحات الحديثة ، يقوم Chibi عادةً بتنفيذ معالجة DOM بنسبة 20 ٪ إلى 50 ٪ أسرع من المكتبات النامية.

البتات المتلألئة

يقتصر Polyfill من Chibi على document.querySelectorAll() على دعم المتصفح CSS وليس بالسرعة التي لا تزيد عن محركات المحددات المخصصة. هذا يعني عدم وجود input[type=text] أو p:nth-child(even) المحددات مع IE6. لحسن الحظ ، لا يحتاج المتصفح الحديث إلى هذا الصفيح.
المتصفحات window.getComputedStyle التي لا تدعم document.querySelectorAll() .

الإصدار 3 هو تحديث كبير مع العديد من التغييرات كسر. إذا كان من الصعب تبني التغيير ، فإن الإصدار 1 لا يزال متاحًا هنا.

دعم المتصفح

تم اختبار Chibi مع المتصفحات التالية ويدعمها:

متصفح Android 2.1 أو أعلى
متصفح بلاك بيري 6 أو أعلى
الكروم
Chrome Android
Firefox 3.5 أو أعلى
Firefox Mobile
Internet Explorer 6 أو أعلى
Internet Explorer Mobile 9 أو أعلى
أوبرا 10 أو أعلى
أوبرا ميني
أوبرا موبايل 10 أو أعلى
Safari 3.2 أو أعلى
Safari Mobile 3.2 أو أعلى
Symbian^3 متصفح أو أعلى

يجب أن يعمل Chibi أيضًا مع أي متصفح آخر يدعم document.querySelectorAll() .

تثبيت

الاستيلاء عليها من هنا أو

npm install chibijs

باستخدام تشيبي

يشبه بناء الجملة Chibi ذلك الرائد بواسطة jQuery: $(selector).method() . يستخدم عن قصد مساحة اسم $ مثل jQuery لأن المكافآت الدقيقة والمكتبات النامية يجب ألا تختلط أبدًا.

يدعم Chibi محددات CSS القياسية ولكن يمكنك أيضًا نقل عناصر DOM مباشرة:

محدد 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

محدد عنصر DOM ، لا معنى له

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

محدد عنصر DOM أكثر إثارة للاهتمام

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

طُرق

يدعم chibi طريقة تسلسل $(selector).method().anothermethod().evenmoremethods() من أي طريقة لا تُرجع قيمة (سلسلة ، منطقية ، إلخ).

$ (). جاهز (معالج)

معالج الحرائق عندما يكون DOM جاهزًا.

استخدم لإطلاق وظيفة عندما يكون DOM جاهزًا. بما في ذلك المحدد لا معنى له لهذه الطريقة ، لا تفعل ذلك.

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

أو ربما

 function foo ( ) {
	// Do awesome
}

$ ( ) . ready ( foo ) ;

$ (). تم تحميله (معالج)

معالج الحرائق عند تحميل الصفحة.

استخدم لإطلاق وظيفة عند تحميل الصفحة. بما في ذلك المحدد لا معنى له لهذه الطريقة ، لا تفعل ذلك.

 function foo ( ) {
	// Do awesome
}

$ ( ) . loaded ( foo ) ;

$ (محدد). EECH (وظيفة)

ينفذ وظيفة على كل عنصر مطابقة

كل ما يمر كل عنصر مطابقة إلى الوظيفة المحددة.

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

يجد العنصر المطابق الأول.

أولاً ، ستعيد صفيف يحتوي على عنصر مطابقة أول ، مفيد عند العمل مع متصفحات crappy مثل IE6 مع دعم Pseudo الضعيف CSS ، خاصة عند دمجها مع السلاسل.

$ (محدد) .last ()

يجد العنصر المطابق الأخير.

آخر سيعود صفيف يحتوي على آخر عنصر مطابقة.

$ (محدد) .odd ()

يجد مطابقة العناصر الفردية.

سوف يعيد Odd صفيف يحتوي على عناصر غريبة مطابقة.

$ (محدد) .even ()

يجد مطابقة حتى العناصر.

حتى سيعود صفيف يحتوي على العناصر المتطابقة حتى.

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

$ (محدد) .hide ()

يخفين عناصر مطابقة.

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

$ (محدد) .Show ()

يظهر عناصر مطابقة.

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

$ (محدد) .Toggle ()

تبديل وضوح العناصر المطابقة.

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

$ (محدد) .remove ()

يزيل عناصر مطابقة من شجرة دوم.

 <!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 (خاصية ، قيمة)

Get أو اختياريًا يقوم بتعيين خاصية CSS لمطابقة العناصر.

سيقوم CSS بدون قيمة بإرجاع سلسلة خاصية CSS لعنصر المطابقة الأول الموجود. ستعيد CSS قيمة الخاصية المحسوبة إذا لم يتم تعيين الخاصية بشكل صريح والتي يمكن أن تختلف بين المتصفحات. على سبيل المثال ، سيعود العنصر الذي لا يوجد لديه وزن خط صريح "عادي" في متصفحات الأوبرا و WebKit ولكن "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 >

$ (محدد) .getClass ()

يحصل على الفصل للعنصر المطابقة الأول.

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

$ (محدد) .SetClass (فئة)

يعين فئة جميع العناصر المطابقة تحل محل أي فئة عناصر موجودة مع هذه الفئة.

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

$ (محدد) .addClass (الفصل)

يضيف فصلًا إلى جميع العناصر المطابقة.

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

$ (محدد) .RemoveClass (الفصل)

يزيل الفصل من جميع العناصر المطابقة.

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

$ (محدد) .Toggleclass (الفصل)

تبديل فئة لمطابقة العناصر.

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

$ (محدد) .hasclass (الفصل)

إرجاع صحيح إذا تم العثور على عنصر المطابقة لأول مرة يتضمن الفصل.

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

يحصل أو اختياريا HTML الداخلية للعناصر المطابقة.

HTML مع عدم وجود وسيطات ستعيد سلسلة HTML لعنصر المطابقة الأول الموجود.

إذا تم تحديد وسيطة 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 >

$ (محدد) .htmlbefore (القيمة)

إدراج 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 >

$ (محدد) .htmlafter (القيمة)

إدراج 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 >

$ (محدد) .htmlappend (القيمة)

إدراج 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 >

$ (محدد) .htmlprepend (القيمة)

إدراج 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 (خاصية ، قيمة)

يحصل أو يختار تعيين العقار لجميع العناصر المطابقة.

ستعيد 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 >

$ (محدد) .Data (المفتاح ، القيمة)

Get أو اختياريًا يقوم بتعيين قيمة مفتاح البيانات لجميع عناصر المطابقة.

ستُرجع البيانات بدون وسيطة قيمة إلى قيمة مفتاح البيانات لعنصر المطابقة الأول الموجود.

ستقوم القيمة بتعيين قيمة مفتاح البيانات لجميع عناصر المطابقة.

 <!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 (قيمة)

Get أو اختياريًا يقوم بتعيين قيمة عناصر المطابقة.

ستعود 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 >

$ (محدد). فحص (منطقية)

GET أو اختياريًا يتم تحديد حالة مربع الاختيار أو عناصر الراديو.

سيتم التحقق من عدم وجود حجج ستعيد المنطقية التي تم فحصها للعنصر المطابق الأول الموجود.

ستقوم Boolean بتعيين الحالة التي تم فحصها من مربع الاختيار المطابقة أو عناصر الراديو.

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

$ (محدد) .on (حدث ، مستمع)

يضيف مستمع الحدث إلى جميع العناصر المطابقة.

على إضافة مستمع حدث لجميع العناصر المطابقة. ليست هناك حاجة لاستخدام تنسيق حدث 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 ("OFF" + حدث) لأن 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 (URL ، رد الاتصال ، nocache ، nojsonp)

يرسل طلب الحصول على AJAX ، وقم بإطلاق رد اتصال اختياريًا باستخدام XHR responseText status . الاسم المستعار من $ (محدد). ajax مع GET الطريقة

عندما يكون Nocache صحيحًا ، تتم إضافة طابع زمني _ts إلى عنوان URL لمنع التخزين المؤقت ، نعم ، أنا أنظر إليك متصفح Android و iOS 6.

Get Supports JSON كمحدد ({name: value}) ، مفيد عندما تريد إرسال البيانات دون استخدام عناصر النماذج.

بالنسبة لطلبات النطاق المتقاطع ، Get Useves JSONP افتراضيًا ولكن يتم تجاوز هذا عندما يكون Nojsonp صحيحًا. ستطبق طلبات JSONP أي رد على callback=? أو ما شابه في عنوان 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 >

$ (محدد) .post (URL ، رد الاتصال ، nocache)

يرسل طلب AJAX POST ، واطلاق رد اتصال اختياريًا مع XHR responseText status . الاسم المستعار من $ (محدد). ajax مع طريقة ما بعد

عندما يكون Nocache صحيحًا ، تتم إضافة طابع زمني _ts إلى عنوان URL لمنع التخزين المؤقت.

يدعم Post JSON كمحدد ({name: value}) ، مفيد عندما تريد إرسال البيانات دون استخدام عناصر النماذج.

 <!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 (URL ، الطريقة ، رد الاتصال ، nocache ، nojsonp)

يرسل طلب Ajax ، واطلاق النار اختياريًا على رد اتصال باستخدام XHR responseText و status

يستخدم Ajax طريقة GET إذا لم يتم تحديد أي منها. عندما يكون Nocache صحيحًا ، تتم إضافة طابع زمني _ts إلى عنوان URL لمنع التخزين المؤقت.

Ajax يدعم JSON كمحدد ({name: value}) ، مفيد عندما تريد إرسال البيانات دون استخدام عناصر النماذج.

بالنسبة لطلبات المجال المتقاطع ، يستخدم 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

زعنفة

يوسع