دليل أساسي إلى JQuery لمبرمجي جافا سكريبت

الإعلانات

مسج هي واحدة من مكتبات جافا سكريبت الأكثر شعبية على هذا الكوكب (ما هو JavaScript ما هي جافا سكريبت JavaScript ، وهل يمكن أن توجد الإنترنت بدونها؟JavaScript هي واحدة من تلك الأشياء التي يعتبرها الكثير من المسلمات. الجميع يستخدمه. قراءة المزيد ). جافا سكريبت (سيشار إليها باسم وقت إنشائها) شبيبة من هنا فصاعدا) كان في مكان مختلف جدا. كان 14 يناير 2006 هو اليوم الذي تم فيه الإعلان عن jQuery في BarCampNYC. كان JS لا يزال يفتقر إلى حد ما - جميع المتصفحات تدعم أجزاء منه ، ولكن الكثير من الاختراقات والحلول يجب أن تنفذ من أجل الامتثال.

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

بالإضافة إلى تحسين مهارات جافا سكريبت ، قد ترغب في قراءة بعض منها دروس HTML و CSS تعلم HTML و CSS مع هذه البرامج التعليمية خطوة بخطوةهل لديك فضول حول HTML و CSS و JavaScript؟ إذا كنت تعتقد أن لديك موهبة لتعلم كيفية إنشاء مواقع الويب من البداية - إليك بعض الدروس الرائعة خطوة بخطوة تستحق المحاولة.

قراءة المزيد أولاً إذا لم تكن على دراية بها أيضًا.

لدينا قدم مسج جعل الويب تفاعليًا: مقدمة إلى jQueryjQuery هي مكتبة نصية من جانب العميل تستخدمها كل مواقع الويب الحديثة تقريبًا - فهي تجعل مواقع الويب تفاعلية. إنها ليست مكتبة Javascript الوحيدة ، لكنها المكتبة الأكثر تطورًا والأكثر دعمًا والأكثر استخدامًا ... قراءة المزيد من قبل ، لذلك سيركز هذا الدليل على JQuery على الترميز الفعلي.

ابدء

قد تكون على دراية بطريقة JS في تحديد المعرفات من نموذج كائن المستند (دوم):

document.getElementById ('foo') ؛

حسنا JQuery يأخذ هذا خطوة أخرى. لا يلزمك استدعاء طرق مختلفة لتحديد الفصول أو المعرفات أو عناصر متعددة. إليك كيفية تحديد معرف:

$ ('# bar') ؛

حق سهل؟ إنها نفس البنية بالضبط لتحديد أي عنصر DOM تقريبًا. إليك كيفية اختيار الفئات:

$ ('. baz') ؛

يمكنك أيضًا أن تكون مبدعًا لبعض القوة الحقيقية. هذا يحدد الكل د عناصر داخل أ الطاولة باستثناء الأول.

$ ('table td'). not (': first')؛

لاحظ كيف تتطابق أسماء المحددات تقريبًا مع نظائرها في CSS. يمكنك تعيين كائنات لـ منتظم متغيرات JS:

var xyzzy = $ ('# mother .child') ؛

أو يمكنك استخدام متغيرات jQuery:

var $ xyzzy = $ ('# mother .child') ؛

تُستخدم علامة الدولار فقط للإشارة إلى أن هذا المتغير هو كائن jQuery ، وهو أمر مفيد جدًا في المشاريع المعقدة.

يمكنك تحديد أصل العنصر:

$ ('child'). الأصل () ؛

أو الأشقاء:

$ ('child'). الأشقاء () ؛

تحتاج إلى تنفيذ التعليمات البرمجية بمجرد أن يصبح المتصفح جاهزًا. إليك كيفية القيام بذلك:

$ (document) .ready (function () {console.log ('ready!')؛ });

مزيد من الطاقة

الآن بعد أن تعرفت على الأساسيات ، دعنا ننتقل إلى بعض الأشياء الأكثر تعقيدًا. بالنظر إلى جدول html:

يصنع
نموذج
اللون


معقل
مرافقة
أسود


ميني
كوبر
أحمر


معقل
كورتينا
أبيض

لنفترض أنك تريد أن تجعل كل صف مختلف بلون مختلف (يُعرف باسم خطوط حمار وحشي). الآن يمكنك استخدام CSS لهذا:

#cars tr: nth-child (even) {background-color: red؛ }

هكذا يمكن تحقيق ذلك باستخدام jQuery:

$ ('tr: even'). addClass ('even') ؛

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

يمكن لـ JQuery أيضًا إخفاء الصفوف أو إزالتها:

$ ('# fordCortina'). إخفاء () ؛ $ ('# fordCortina'). إزالة () ؛

لا يلزمك إخفاء عنصر قبل إزالته.

المهام

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

$ ('table'). إخفاء (وظيفة () {تنبيه ('قواعد MUO!') ؛ });

كن حذرًا - ينفذ هذا الرمز تنبيهًا لكل عنصر. إذا كان المحدد الخاص بك شيئًا على الصفحة أكثر من مرة ، فستتلقى تنبيهات متعددة.

يمكنك استخدام الاسترجاعات مع الحجج الأخرى:

$ ('tr: even'). addClass ('even'، function () {console.log ('Hello')؛ });

لاحظ كيف يكون هناك نقطتان منقوطة بعد أقواس الإغلاق. لن يكون هذا مطلوبًا عادةً لوظيفة JS ، ولكن لا يزال يعتبر هذا الرمز موجودًا في سطر واحد (حيث يكون رد الاتصال داخل أقواس).

الرسوم المتحركة

يجعل JQuery من السهل جدًا تحريك صفحات الويب. يمكنك تلاشي العناصر أو الدخول إليها:

$ ('. fade1'). fadeIn ('slow') ؛ $ ('# fade2'). fadeOut (500) ؛

يمكنك تحديد ثلاث سرعات (بطيئة ومتوسطة وسريعة) أو رقم يمثل السرعة بالمللي ثانية (1000 مللي ثانية = ثانية واحدة). يمكنك تحريك تقريبيا أي عنصر CSS. يؤدي ذلك إلى تنشيط عرض المحدد من عرضه الحالي إلى 250 بكسل.

$ ('foo'). animate ({width: '250px'}) ؛

لا يمكن تحريك الألوان. يمكنك استخدام الاسترجاعات مع الرسوم المتحركة أيضًا:

$ ('bar'). animate ({height: '250px'}، function () {$ ('bar'). animate ({width: '50px'} });

حلقات

تتألق الحلقات حقًا في jQuery. كل() يتم استخدامه للتكرار فوق كل عنصر من نوع معين:

$ ('li'). each (function () {console.log ($ (this))؛ });

يمكنك أيضًا استخدام فهرس:

$ ('li'). each (الوظيفة (i) {console.log (i + '-' + $ (this))؛ });

هذا سيطبع 0، ثم 1 وما إلى ذلك وهلم جرا.

تستطيع ايضا استخذام كل() للتكرار عبر المصفوفات ، تمامًا كما هو الحال في JS:

var cars = ['Ford'، 'Jaguar'، 'Lotus']؛ $ .each (السيارات ، الوظيفة (i ، القيمة) {console.log (value) ؛ });

لاحظ الحجة الإضافية تسمى القيمة - هذه هي قيمة عنصر الصفيف.

من الجدير بالذكر ذلك كل() يستطيع بعض الأحيان تكون أبطأ من حلقات الفانيليا شبيبة. ويرجع ذلك إلى نفقات المعالجة الإضافية التي يقوم بها jQuery. بالنسبة لمعظم الوقت ، هذه ليست مشكلة. إذا كنت قلقًا بشأن الأداء ، أو كنت تعمل مع مجموعات بيانات كبيرة ، ففكر في قياس الرمز الخاص بك jsPerf أول.

أجاكس

جافا سكريبت و XML أو غير متزامن أجاكس هو حقا سهل للغاية مع jQuery. يعمل AJAX على تشغيل قدر كبير من الإنترنت ، وهو أمر تناولناه الجزء 5 مسج دروس (الجزء 5): أجاكس لهم جميعا!نظرًا لأننا نقترب من نهاية سلسلة دروسنا المصغرة jQuery ، فقد حان الوقت لنلقي نظرة أكثر تعمقًا على إحدى أكثر ميزات jQuery استخدامًا. يسمح AJAX لموقع إلكتروني بالتواصل مع ... قراءة المزيد لنا مسج تعليمي jQuery Tutorial - الشروع في العمل: الأساسيات والمحدداتفي الأسبوع الماضي ، تحدثت عن مدى أهمية jQuery لأي مطور ويب حديث ولماذا هو رائع. هذا الأسبوع ، أعتقد أن الوقت قد حان لأن تكون أيدينا متسخة ببعض التعليمات البرمجية وتعلمنا كيف ... قراءة المزيد . يوفر طريقة لتحميل صفحة الويب جزئيًا - لا يوجد سبب لإعادة تحميل الصفحة بأكملها عندما تريد فقط تحديث نتيجة كرة القدم ، على سبيل المثال. لدى jQuery عدة طرق AJAX ، أسهلها حمل():

$ ('# baz'). load ('some / url / page.html') ؛

يؤدي هذا اتصال AJAX إلى الصفحة المحددة (some / url / page.html) ويدفع البيانات إلى المحدد. بسيط!

يمكنك أن تؤدي HTTP GET الطلبات:

$ .get ('some / url'، الوظيفة (النتيجة) {console.log (النتيجة)؛ });

يمكنك أيضًا إرسال البيانات باستخدام بريد:

$ .post ('some / other / url'، {'make': 'Ford'، 'model': 'Cortina'})؛

من السهل جدًا إرسال بيانات النموذج:

$ .post ('url'، $ ('form'). serialize ()، الدالة (النتيجة) {console.log (النتيجة)؛ }

ال تسلسل () الوظيفة تحصل على جميع بيانات النموذج وتعدها للإرسال.

وعود

يتم استخدام الوعود للتنفيذ المؤجل. قد يكون من الصعب تعلمها ، ولكن jQuery يجعلها أقل صعوبة. ECMAScript 6 يقدم وعود أصلية لـ JS ، ومع ذلك ، فإن دعم المتصفح ضعيف في أحسن الأحوال. في الوقت الحالي ، تعد وعود jQuery أفضل بكثير في الدعم عبر المتصفح.

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

إليك مثال:

// dfd == مؤجل. var dfd = $ .Defired () ، function doThing () {$ .get ('some / slow / url'، function () {dfd.resolve ()؛ }); العودة dfd.promise () ؛ } $ .when (doThing ()) ثم (function () {console.log ('YAY، it finish')؛ });

لاحظ كيف يتم الوعد (وعد dfd ()) ، ويتم حلها فقط عند اكتمال مكالمة AJAX. يمكنك استخدام متغير لتتبع مكالمات AJAX المتعددة ، وإكمال مهمة أخرى فقط بمجرد إجراء كل ذلك.

نصائح الأداء

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

بدلاً من البحث في DOM عن كل إجراء:

$ ('foo'). css ('background-color'، 'red')؛ $ ('foo'). css ('color'، 'green')؛ $ ('foo'). css ('width'، '100px')؛

تخزين الكائن في متغير:

$ bar = $ ('foo') ، $ bar.css ("لون الخلفية" ، "أحمر") ؛ $ bar.css ('color'، 'green')؛ $ bar.css ('width'، '100px')؛

تحسين الحلقات الخاصة بك. إعطاء الفانيليا للحلقة:

var cars = ['Mini'، 'Ford'، 'Jaguar']؛ for (int i = 0؛ أنا 

في حين أنها ليست سيئة بطبيعتها ، يمكن جعل هذه الحلقة أسرع. لكل تكرار ، يجب أن تحسب الحلقة قيمة مجموعة السيارات (سيارات الطول). إذا قمت بتخزين هذا في متغير آخر ، يمكن اكتساب الأداء ، خاصة إذا كنت تعمل مع مجموعات بيانات كبيرة:

for (int i = 0، j = cars.length؛ ط 

الآن يتم تخزين طول مجموعة السيارات في ي. لم يعد يجب حساب هذا في كل تكرار. إذا كنت تستخدم كل()، لا تحتاج إلى القيام بذلك ، على الرغم من أن الفانيليا JS المحسنة بشكل صحيح يمكن أن تتفوق على jQuery. حيث يضيء jQuery حقًا من خلال سرعة التطوير والتصحيح. إذا كنت لا تعمل على البيانات الضخمة ، فإن jQuery عادة ما يكون أكثر من سريع.

يجب أن تعرف الآن ما يكفي من الأساسيات لتكون نينجا jQuery!

هل تستخدم jQuery بانتظام؟ هل توقفت عن استخدامه لأي أسباب؟ دعنا نعرف أفكارك في التعليقات بالأسفل!