تحدثت الأسبوع الماضي عن مدى أهمية jQuery لأي مطور ويب حديث ولماذا هو رائع. هذا الأسبوع ، أعتقد أن الوقت قد حان لأن نلوث أيدينا ببعض التعليمات البرمجية وتعلمنا كيفية الاستفادة فعليًا من jQuery في مشاريعنا.

سأقول هذا الآن - لست بحاجة إلى تعلم جافا سكريبت لتتمكن من استخدام jQuery. من الأفضل أن تفكر في jQuery على أنه تطور لـ Javascript - طريقة أفضل للقيام بذلك - من مجرد مكتبة تضيف وظائف. سيتم التقاط أي جافا سكريبت تحتاجه في الطريق. ومع ذلك ، يُفترض أنك كمطور ويب لديك معرفة جيدة جدًا بـ HTML و CSS (وإليك دليل xHTML المجاني المفيد إن لم يكن!).

---

---

طراز كائن المستند

jQuery هو كل شيء عن الاجتياز والتلاعب في حكم - ال د وثيقة أو bject م أوديل. DOM هو تمثيل شجرة هرمي للصفحة ، تم إنشاؤه بواسطة المتصفحات بعد قراءة جميع تعليمات HTML البرمجية. في jQuery ، سنستخدم مصطلحات مثل الأبوين و الأطفال ، و أخوة في كثير من الأحيان ، لذا يجب أن تكون لديك فكرة عما يعنيه هذا بالنسبة إلى DOM.

هذا الرسم التخطيطي البسيط منw3schoolsيشرح المفاهيم بشكل جيد. يجب أن تكون قادرًا على رؤية أن أصل العنصر ، بينما ملف عنصر له فوري

أخ أو أخت.

الشروع في العمل: إضافة jQuery

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

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

إذا قمت بإضافة السطر التالي إلى ملف وظائف ملف الموضوع ، ستضيف طلبًا آخر لتضمينه. سيعرف Wordpress بعد ذلك أنه يقوم دائمًا بتحميله إذا كان موضوعك نشطًا.

---

---

أفضل تطبيقات التلفزيون والأفلام المجانية

wp_enqueue_script('jquery');

الشيء الثاني الذي يجب أخذه في الاعتبار هو أنه عند إضافة jQuery باستخدام الطريقة القياسية ، سيتم تحميلها كـ $ . أي شيء تفعله باستخدام jQuery سيسبقه هذا $ ، مثل:

$.ajax

أو

---

---

$('#header')

ومع ذلك ، عند تحميل jQuery من خلال Wordpress ، يتم كل شيء باستخدام متغير jQuery بدلاً من $ ، على سبيل المثال:

jQuery('#header')

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

طريقة واحدة للتغلب على هذا هي التفاف رمز على غرار $ تجده كما يلي:

(function($) {
// paste $ code in here
})(jQuery);

هذا يأخذ مسج متغير ويمررها إلى وظيفة مجهولة مثل $ . سأشرح الوظائف المجهولة في المرة القادمة - في الوقت الحالي ، دعنا نتعلم البنية الأساسية لقليل من كود jQuery.

لإضافة التعليمات البرمجية الخاصة بك إلى صفحة HTML أو PHP ، قم بتضمين كل شيء داخل العلامات ، مثل:


// jQuery code codes here


$ ('محدد').طريقة() ؛

هذا كل شيء ، في العنوان هناك. هذا هو الهيكل الأساسي لقطعة واحدة من كود jQuery لمعالجة DOM. الحق سهلة؟

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

a { }

سيتم فعل الشيء نفسه في jQuery مثل

$('a')

يمكن القيام بذلك لأي عناصر HTML - div، h1، span - أيا كان. يمكنك أيضًا استخدام معرفات وفئات CSS لتكون أكثر تحديدًا.

على سبيل المثال ، للعثور على جميع الروابط مع فئة 'findme' ، يمكنك استخدام:

$('a.findme')

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

$('.findme')

والتي من شأنها أن تتطابق مع كل شيء مع الفصل قم بإيجادي سواء كان رابطًا أم لا.

لاستخدام عنصر معرف مسمى ، استخدم # وقع بدلا من ذلك. يتمثل الاختلاف الرئيسي هنا في أن محدد المعرف سيحدد عنصرًا واحدًا فقط ، بينما قد يجد محدد الفئة أكثر من عنصر واحد.

كيفية إصلاح استخدام 100 وحدة المعالجة المركزية

$('#something')

إذا كان بإمكانك القيام بذلك في CSS ، فإن jQuery ستفعل ذلك أيضًا. في الواقع ، يمكنك أيضًا بعض المحددات الزائفة لنمط CSS3 المعقدة مثل: أولاً

$('body p:first')

والتي من شأنها أن تأخذ فقرة من الصفحة. تجد عناصر ذات سمات معينة أيضًا. تأمل هذا المثال ؛ نريد العثور على جميع الروابط على الصفحة التي تشير داخليًا إلى جعله وتسليط الضوء عليها بطريقة ما. إليك كيف يمكننا العثور عليهم:

$('a[href*='makeuseof']')

أليس هذا رائعًا؟ حسنًا ، أعتقد أنه كذلك.

يجب أن يكون منفذ الاتصال التالي هو وثائق jQuery API للمحددات . إنها قائمة ضخمة بجميع أنواع المحددات المختلفة المتاحة للاستخدام ، ولا يتوقع أحد أنك تتعلمها جميعًا.

الجزء التالي من المعادلة هوطريقة- ماذا تفعل بهذه الأشياء بمجرد العثور عليها جميعًا - لكننا سنترك ذلك للدرس التالي. إذا كنت ترغب في البدء في تجربة العديد من المحددات الآن ، أقترح عليك الالتزام بطريقة css التالية. هذا يأخذ معلمتين - CSS اسم الخاصية ، وجديد القيمة لتعيين تلك الخاصية. لذلك ، لإعطاء جميع الروابط لون خلفية أحمر ، يمكنك القيام بما يلي:

$('a').css('background-color','red');

بسيطا بما فيه الكفاية! على الرغم من أن هذا قد لا يكون ذا فائدة عملية ، إلا أنه سيتيح لك بسهولة رؤية أي عناصر موجودة باستخدام المحددات الخاصة بك. اذهب الآن واختر - DOM في انتظارك.

آمل أن يكون هذا البرنامج التعليمي مفيدًا لك ؛ حاولت أن أجعل الأمر بسيطًا قدر الإمكان. لا تتردد في طرح أي أسئلة لديك أو ترك تعليقات ، ولكن كن على علم بأنني بالتأكيد لست من نخبة jQuery ninja.

يشارك يشارك سقسقة بريد الالكتروني 5 نصائح لزيادة كفاءة أجهزة VirtualBox Linux الخاصة بك

هل سئمت من الأداء الضعيف الذي تقدمه الأجهزة الافتراضية؟ إليك ما يجب عليك فعله لتعزيز أداء VirtualBox الخاص بك.

اقرأ التالي مواضيع ذات صلة

• ثقافة الويب
• تطوير الشبكة
• جافا سكريبت
• برمجة
• مسج

نبذة عن الكاتب جيمس بروس(تم نشر 707 مقالات)

جيمس حاصل على درجة البكالوريوس في الذكاء الاصطناعي وهو معتمد من CompTIA A + و Network +. عندما لا يكون مشغولاً كمحرر مراجعات الأجهزة ، فإنه يستمتع بألعاب LEGO و VR وألعاب الطاولة. قبل انضمامه إلى MakeUseOf ، كان فني إضاءة ومدرس لغة إنجليزية ومهندس مركز بيانات.

المزيد من James Bruce

اشترك في نشرتنا الإخبارية

انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!

انقر هنا للاشتراك