مقدمة
إذا كنت على دراية بعالم البرمجة، فإنك تعرف مدى أهمية لغات البرمجة. ومن بين أكثر هذه اللغات أهمية واستخداماً HTML, CSS، و JavaScript. حيث تساعدك HTML و CSS في تصميم موقع الويب الخاص بك وبنائه، تتيح لك JavaScript جعله تفاعلياً. هناك العديد من مكتبات JavaScript التي يمكنك استخدامها لإضافة ميزات فريدة إلى مشروع الويب الخاص بك. ومن بين هذه المكتبات مكتبة jQuery.
jQuery بحد ذاتها ليست لغة برمجة. إنها أداة يمكنك استخدامها لتسهيل تطوير الويب باستخدام JavaScript. يساعد هذا في جعل المهام أبسط وأكثر وضوحاً. وهي تعتمد بشكل شهير على مفهوم 'اكتب أقل، افعل أكثر'. وبصرف النظر عن تسهيل تطوير الويب، تمنحك jQuery أيضاً ميزة إضافية تتمثل في التوافق بين المتصفحات. وهذا يعني أن الكود يمكن أن يظهر بشكل مناسب بغض النظر عن المتصفح المستخدم لعرض المخرجات.
لتصور أفضل لكيفية جعل jQuery الأمور أكثر إيجازاً، لنأخذ مثالاً. لنفترض أننا نكتب برنامج "Hello, World!". إليك كيف سيظهر في JavaScript و jQuery على التوالي:
|
1 2 |
JavaScript document.getElementById("demo").innerHTML = "Hello, World!"; |
|
1 2 |
jQuery $("#demo").html("Hello, World!"); |
سيؤدي كلا السطرين البرمجيين إلى نفس النتيجة. ومع ذلك، كما ترى، فإن jQuery تجعل الكتابة أكثر إيجازاً ومباشرة.
في هذا البرنامج التعليمي، ستتعلم كل شيء عن أساسيات jQuery. يمكنك تنزيل الأداة لنفسك من هذا الموقع الإلكتروني. سنمضي قدماً كما لو كنت مبتدئاً تماماً وليس لديك أي معرفة بـ jQuery. سيعلمك هذا البرنامج التعليمي كيفية تثبيت jQuery وبعض المفاهيم الأساسية المرتبطة بها. سنستكشف بعض المحددات والأحداث والتأثيرات الشائعة في jQuery. ثم، ستتعلم كيفية اختبار مفاهيم التطوير مثل API و DOM و CDN من خلال أمثلة مفيدة. اقرأ مسبقاً لتتعرف على عالم jQuery.
قبل أن نبدأ
هناك بعض الأشياء التي ستعمل لصالحك إذا كنت تعرفها مسبقاً. على سبيل المثال، فإن وجود فهم أساسي لكيفية عمل HTML و CSS سيساعدك بشكل كبير. لن نغطي ذلك في هذا البرنامج التعليمي. سنعمل بافتراض أنك تعرف كيفية إعداد موقع ويب بسيط على الأقل. يجب أن يكون لديك أيضاً فهم أساسي لكيفية عمل البرمجة بشكل عام. هذا لا يعني بالضرورة أنه يجب عليك أن تكون خبيراً في JavaScript للمتابعة. يكفي ببساطة أن تكون على دراية بأمور مثل المنطق والمتغيرات وأنواع البيانات في البرمجة.
كيفية إعداد jQuery على نظامك
بادئ ذي بدء، دعنا نرى كيف يمكنك إعداد jQuery على نظامك. تتوفر jQuery كملف JavaScript لأنها مكتبة JavaScript. يجب عليك ربط هذا الملف في كود HTML الخاص بموقعنا الإلكتروني. هناك طريقتان للقيام بذلك. كما ذكرت من قبل، إحدى الطرق للقيام بذلك هي تنزيله من هنا. بصرف النظر عن الموقع الرسمي، يمكنك أيضاً العثور على jQuery في مكتبات Google المستضافة هنا تماماً.
طريقة أخرى هي استخدام شبكة توصيل المحتوى أو CDN لربط الملف. تتكون CDN من مجموعة من الخوادم التي تساعد في تقديم محتوى الويب محلياً. يتيح استضافة ملف jQuery عبر CDN وصول المحتوى بشكل أسرع بكثير إلى المستخدم. ولهذا السبب سنستخدم شبكة توصيل المحتوى من هذه النقطة فصاعداً في هذا البرنامج التعليمي.
في مثالنا الأول، سنقوم بإنشاء مشروع ويب. يحتوي هذا المشروع الصغير على style.css في مجلد css/. script.js يقع في مجلد js/. وأخيراً، index.html موجود في جذر مشروع الويب:
وفقاً لهذا المشروع، سنقوم بإنشاء هيكل HTML. لاحقاً، سنقوم بحفظه باسم index.html:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!doctype html> <html lang="en"> <head> <title>jQuery تجريبي</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body> </html> |
هذا هو المكان الذي سنقوم فيه بربط ملف jQuery. كما قلت من قبل، سنقوم بربطه عبر CDN. ستقوم بإدخال رابط jQuery قبل </body> الوسم. بعد ذلك، يمكنك إضافة ملف JavaScript المخصص الخاص بك والذي كان script.js في مثالنا. تذكر دائمًا وضع ملف JavaScript أسفل مكتبة jQuery، مثل هذا:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!doctype html> <html lang="en"> <head> <title>jQuery تجريبي</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="js/script.js"></script> </body> </html> |
ماذا ستفعل إذا قمت بتنزيل نسخة محلية من مكتبة jQuery بدلاً من ذلك؟ في هذه الحالة، يجب عليك حفظ ملف jQuery في مجلد js/. ثم يمكنك ربطه كـ js/jquery.min.js.
jQuery: الأساسيات
قبل أن نتعمق في التفاصيل، دعنا نمر على بعض أساسيات jQuery. الوظيفة الرئيسية لـ jQuery هي استخدام DOM لربط عناصر HTML في المتصفح. يرمز DOM إلى نموذج كائن المستند. وهو الأسلوب الذي يمكن JavaScript من التفاعل مع HTML في المتصفح. يمكنك تصور DOM عن طريق النقر بزر الماوس الأيمن على صفحة الويب الخاصة بك واختيار فحص (Inspect). كود HTML الذي يظهر في أدوات المطور هو DOM.
العقدة (node) هي عنصر HTML فردي في DOM. يمكن لـ JavaScript تعديل كل هذه الكائنات أو العناصر. يمكنك تخيل ترتيب هذه الكائنات كبنية تشبه الشجرة. <html> تقع في الجذر بينما تتفرع العناصر الأخرى منها.
النقر بزر الماوس الأيمن واختيار عرض مصدر الصفحة (View Page Source) سيعرض لك كود HTML الخام للموقع. تذكر أن هذا ليس هو نفسه DOM. فبينما يمكن تغيير DOM، فإن مصدر HTML ثابت تمامًا. أي تغييرات تجريها في JavaScript لن تؤثر على ملف HTML هذا. عقدة <html> بأكملها مغلفة في طبقة خارجية تسمى كائن المستند (document object).
بعد ذلك، سنرى كيف يمكنك التحكم في صفحة الويب الخاصة بك وميزاتها باستخدام jQuery. ولكن قبل القيام بذلك، عليك التأكد من أن الصفحة جاهزة.
اكتب ما يلي بعد إنشاء ملف script.js في دليل js/:
|
1 2 3 4 5 |
$(document).ready(function() { // كل أكواد jQuery المخصصة ستوضع هنا }); |
الآن أي كود تكتبه سيكون مغلفًا داخل هذا الكود. ستكتشف jQuery جاهزية الكود. سيتم تشغيل الكود الموجود داخل هذه الدالة فقط عندما يكون DOM جاهزًا.
سنعيد زيارة سكربت "Hello, World!" الذي تحدثنا عنه في بداية البرنامج التعليمي. لنفترض أننا نريد بدء هذا السكربت. لاستخدام jQuery لطباعة هذا النص في المتصفح، يتعين علينا تطبيق المعرف (ID) demo على فقرة فارغة من نوع block-level مثل هذا:
|
1 2 3 4 5 6 |
... <body> <p id="demo"></p> ... |
لاستدعاء jQuery، يتعين علينا استخدام رمز $ . يمكنك تطبيق صيغة وطرق CSS للوصول إلى DOM باستخدام jQuery. إليك مثال بسيط:
|
1 |
$("selector").method(); |
هذا هو التنسيق الذي ستستخدمه مع jQuery. نحن نعلم بالفعل أن الرمز # يمثل المعرف (ID) في CSS. لذلك، يمكنك الوصول إلى معرف demo باستخدام محدد #demo.html() . ستسمح لك هذه الطريقة بتغيير كود HTML الموجود في العنصر.
يوضح لنا الكود التالي وضع برنامج ”Hello, World“ في jQuery الخاص بملف script.js’s ready() غلاف:
|
1 2 3 |
$(document).ready(function() { $("#demo").html("Hello, World!"); }); |
يجب عليك إضافة سطر الكود هذا إلى ملف script.js . احفظ هذا الملف. بعد ذلك، يمكنك فتح ملف index.html في المتصفح. من المفترض أن تكون قادرًا على رؤية المخرجات Hello, World!. هذه أيضًا نقطة جيدة لفحص DOM من أجل فهمك. انقر بزر الماوس الأيمن على نص ”Hello, World!“. وحدد فحص العنصر (Inspect Element). ستعرض DOM <p id="demo">Hello, World!</p>. ومن ناحية أخرى، فإن النقر فوق عرض مصدر الصفحة (View Page Source) لن يعرض لك سوى كود html الخام. في هذه الحالة، سيكون ذلك <p id="demo"></p>.
ما هي المحددات (Selectors)؟
الآن سننتقل إلى بعض الميزات الهامة في jQuery. ومن بين هذه الميزات المحددات (selectors). محددات jQuery تخبر البرنامج بالعناصر التي تريد العمل معها أو ”تحديدها“. وهي تشبه إلى حد كبير المحددات التي قد تستخدمها في CSS. إليك التنسيق الأساسي لكيفية الوصول إلى محدد في jQuery:
|
1 |
$("selector") |
يمكنك استخدام سلاسل نصية محاطة بعلامات اقتباس مفردة أو مزدوجة، على الرغم من أن دليل أسلوب jQuery يفضل الأخير. إذا كنت ترغب في ذلك، يمكنك عرض القائمة الكاملة لمحددات jQuery على هذه الصفحة الرسمية. لمعلوماتك، إليك بعض المحددات الأكثر استخدامًا:
-
$("*")
هذا هو محدد الكل (Wildcard selector). سيقوم بتحديد كل عنصر في صفحتك.
-
$(this)
هذا هو المحدد الحالي (Current selector). يقوم بتحديد العنصر الذي تعمل عليه حاليًا باستخدام دالة.
-
$("p")
هذا هو محدد الوسم (Tag selector). يقوم بتحديد كل مثيل لوسم <p> .
-
$(".example")
هذا هو محدد الفئة (Class selector). سيقوم بتحديد كل عنصر فردي تم تطبيق الفئة example عليه.
-
$("#example")
هذا هو محدد المعرف (Id selector). يقوم فقط بتحديد مثيل واحد للمعرف example .
-
$("[type='text']")
هذا هو محدد السمات (Attribute selector). سيقوم بتحديد أي عنصر محدد تم تطبيق القيمة text عليه في السمة type .
-
$("p:first-of-type")
هذا هو محدد العناصر الزائفة (Pseudo Element selector). يساعدك على تحديد أول <p>.
ما هي الأحداث (Events)؟
هناك بعض ميزات صفحة الويب التي يتم تحميلها بمجرد تحميل الصفحة. ضع في اعتبارك مثال ”Hello, World“. في هذه الحالة، يمكننا إضافة الكود مباشرة إلى مصدر HTML. ولكن ماذا يحدث عندما يتطلب تحميل ميزة ما تفاعل المستخدم؟ هنا تبرز فائدة jQuery.
دعنا’ نقول إننا نريد ظهور بعض النصوص بعد أن ينقر المستخدم على زر. لإضافة هذه الميزة، يجب عليك إضافة عنصر <button> إلى ملف index.html . سيكون هذا الزر في حالة استماع لـ ”حدث“ النقر:
|
1 2 3 4 5 6 |
... <body> <button id="trigger">انقر هنا</button> <p id="demo"></p> |
أي وقت يتفاعل فيه المستخدم مع المتصفح يعتبر حدثًا. قد يكون التفاعل من خلال مؤشر الماوس أو لوحة المفاتيح. في المثال أعلاه، نقرة الزر هي الحدث الخاص بنا. ولهذا السبب يطلق عليه حدث النقر (click event).
بعد ذلك، يتعين علينا استدعاء دالة تحتوي على كود ”Hello, World“. للقيام بذلك، سنستخدم طريقة click() :
|
1 2 3 |
$(document).ready(function() { $("#trigger").click(); }); |
كما ترى، فإن معرف (ID) عنصر <button> الخاص بنا يسمى trigger. يمكننا تحديده باستخدام $(“#trigger"). الغرض من إضافة طريقة click() هو جعل البرنامج يستمع لحدث النقر. بعد ذلك، سنضع الدالة التي تحتوي على كود النص داخل هذه الطريقة:
|
1 2 3 |
function() { $("#demo").html("Hello, World!"); } |
سيبدو الكود الخاص بنا كالتالي في النهاية:
|
1 2 3 4 5 |
$(document).ready(function() { $("#trigger").click(function() { $("#demo").html("Hello, World!"); }); }); |
الآن يمكنك حفظ ملف script.js . قم بتحديث ملف index.html في المتصفح لتطبيق التغييرات. بعد النقر على الزر، سيظهر مخرج الاختبار "Hello, World!".
هناك أنواع أخرى من أحداث jQuery بخلاف click أيضًا. يمكنك عرض قائمة كاملة بأساليب الأحداث هذه من هذا المستند الرسمي. إليك بعضًا من أكثرها استخدامًا والتي قد تصادفها أحيانًا:
-
click()
يقوم الحدث click بتنفيذ الكود عند نقرة واحدة بالماوس.
-
hover()
يقوم الحدث hover بتنفيذ الكود عندما يحوم مؤشر الماوس فوق عنصر ما. يمكنك أيضًا تحديد ما إذا كان الكود يتم تشغيله بواسطة دخول الماوس أو خروجه باستخدام mouseenter() و mouseleave() على التوالي.
-
submit()
يؤدي إرسال النموذج إلى تشغيل الكود.
-
scroll()
سيكون التمرير لأسفل الشاشة هو الحدث الذي ينفذ الكود.
-
keydown()
سيؤدي الضغط على مفتاح السهم لأسفل في لوحة المفاتيح إلى تنفيذ الكود.
ما هي التأثيرات (Effects)؟
تأثيرات jQuery تعمل جنبًا إلى جنب مع أحداث jQuery. الغرض الرئيسي من التأثيرات، كما هو مفهوم من المصطلح، هو إضافة رسوم متحركة إلى الصفحة. تتيح لك التحكم في العناصر لتطبيق أنواع مختلفة من التأثيرات. يمكن تشغيل هذه التأثيرات بواسطة أحداث معينة.
لفهم الأمر بشكل أفضل، سنأخذ مثالاً. لنفترض أننا نريد فتح وإغلاق طبقة منبثقة (popup overlay). إحدى الطرق للقيام بذلك هي استخدام معرفين (IDs) مختلفين؛ أحدهما يفتح الطبقة والآخر يغلقها. الطريقة الأخرى هي استخدام فئة (class) للقيام بذلك. وتتمثل فائدة استخدام الفئة في أن نفس الوظيفة قادرة على فتح وإغلاق الطبقة.
افتح ملف index.html الخاص بك. بعد ذلك، احذف وسوم <button> و <p> من body. الآن أضف أسطر الكود التالية إلى HTML:
|
1 2 3 4 5 6 7 8 9 10 |
... <body> <button class="trigger">Open</button> <section class="overlay"> <button class="trigger">Close</button> </section> ... |
دعنا نلقي نظرة على ملف style.css بعد ذلك. هنا، هدفنا هو استخدام الحد الأدنى من CSS لإخفاء الطبقة. لذلك، سنستخدم display: none وتوسيطها بهذا الشكل:
|
1 2 3 4 5 6 7 8 9 10 |
.overlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 200px; width: 200px; background: gray; } |
بعد ذلك، سنستخدم الأسلوب toggle(). سيتيح لنا هذا الأسلوب تبديل خاصية display بين none و block. وبالتالي، سيتم إخفاء الطبقة وإظهارها كلما نقرنا. أضف هذا الكود إلى ملف script.js :
|
1 2 3 4 5 |
$(document).ready(function() { $(".trigger").click(function() { $(".overlay").toggle(); }); }); |
أخيرًا، قم بتحديث index.html لتطبيق التغييرات. الآن ستتمكن من تبديل رؤية النافذة المنبثقة (modal). كل ما عليك فعله هو النقر على الأزرار. هناك تأثيرات jQuery أخرى يمكنك استخدامها مع هذا. على سبيل المثال، يمكنك تغيير toggle() البسيط إلى slideToggle() أو fadeToggle().
فيما يلي بعض أساليب التأثيرات الشائعة الاستخدام في jQuery:
-
toggle()
يتيح لك هذا الأسلوب تغيير رؤية العنصر. التأثيرات أحادية الاتجاه المرتبطة به هي show() و hide().
-
fadeToggle()
يتيح لك هذا الأسلوب تبديل رؤية العنصر وشفافيته من خلال الرسوم المتحركة. التأثيرات أحادية الاتجاه في هذه الحالة هي fadeIn() و fadeOut().
-
slideToggle()
يتيح لك هذا الأسلوب استخدام تأثيرات الانزلاق لتبديل رؤية العنصر. التأثيرات أحادية الاتجاه في هذه الحالة هي slideUp() و slideDown().
-
animate()
يتيح لك أسلوب التأثير هذا تنفيذ تأثيرات رسوم متحركة مخصصة. ويستخدم خاصية CSS للعنصر المحدد.
الخاتمة
نأمل أن يكون هذا البرنامج التعليمي مفيدًا في تقديم مقدمة شاملة عن jQuery. إنها أداة مفيدة للغاية وتساعد كثيرًا في تسهيل تطوير الويب وكتابة الأكواد البرمجية. وينطبق هذا بشكل خاص إذا كنت جديدًا نسبيًا في عالم البرمجة.
لقد استكشفنا العناصر المختلفة التي تشكل أساسيات jQuery. وتعلمنا أيضًا كيفية تحديد هذه العناصر وتعديلها، وكيفية الاستفادة من الأحداث والتأثيرات بشكل جيد. إن إتقان أدوات مثل jQuery يمكن أن يساعدك في إنشاء مواقع ويب مليئة بالميزات التفاعلية التي توفر تجربة مستخدم جذابة.
تحقق من بعض الموارد من مدونتنا التي ستساعدك عند العمل مع JavaScript:
- دليل حول إضافة JavaScript إلى HTML
- العمل مع JavaScript: كيف تعمل الفئات
- العمل مع JavaScript: كيف تعمل النماذج الأولية والوراثة
حوسبة سعيدة!
التعليقات
لا توجد تعليقات بعد. كن أول من يعلق.