Hello, world!

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

<div id="divTest1"></div>
<script type="text/javascript">
$("#divTest1").text("Hello, world!");
</script>

حسنًا، لدينا علامة div بالمعرف "divTest1". في كود JavaScript، نستخدم الاختصار $ للوصول إلى jQuery، ثم نحدد جميع العناصر ذات معرف "divTest1" (على الرغم من وجود عنصر واحد فقط) ونضبط نصه على "Hello, World!". قد لا تعرف ما يكفي عن jQuery لفهم سبب وكيفية عمل ذلك، ولكن مع تقدمك في هذا البرنامج التعليمي، سيتم شرح جميع العناصر بالتفصيل.

حتى مهمة بسيطة مثل هذه ستتطلب في الواقع عددًا لا بأس به من ضغطات المفاتيح الإضافية إذا كان عليك القيام بها باستخدام JavaScript عادي، دون مساعدة من jQuery:

<div id="divTest2"></div>
<script type="text/javascript">
document.getElementById("divTest2").innerHTML = "Hello, world!";
</script>

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

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