الخطوات الأولى في jQuery
الخطوات الأولى في jQuery
الخطوات الأولى في jQuery درس مجاني في jQuery Academy على CoddyKit. هذا هو الدرس 1 من أصل 1. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في jQuery Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة jQuery Academy 1 دروس في المجموع.
مقدمة
مرحبًا،
لاستخدام مكتبة JQuery، نحتاج أولًا إلى إضافتها إلى مستند HTML.
في المثال أدناه، أُضيف عنوان مكتبة jQuery بوصفه قيمة للسمة src بين وسمَي head.
أصبحت مكتبة jQuery جاهزة للاستخدام في مشروعنا.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.slim.js"></script>
</head>
<body>
</body>
</html>تحديد العناصر في jQuery
لإجراء عمليات على عناصر HTML (وسنسميها الآن DOM)، نحتاج أولًا إلى تحديد العنصر.
في jQuery، يُستخدم الأسلوب $() أو jQuery() لإجراء التحديد.
يفضّل مطوّرو البرمجيات استخدام الأسلوب $() بدرجة أكبر.
وبواسطة المعامل الذي سنمرره إلى هذا الأسلوب، نحدد العنصر الذي نريد اختياره.
Xpath
التعبير الذي نمرره إلى الأسلوب $ هو محدد XPath، الذي نعرفه أيضًا من CSS.
بعبارة أخرى، نحدد عناصر HTML في JQuery بالطريقة نفسها التي نحدد بها العناصر في CSS.
أمثلة على Xpath
لنفترض أن شيفرة HTML لدينا كما يلي.
<div id="my-box" class="my-box">
<p class="my-p">
<span class="my-text">Hello jQuery</span>
</p>
</div>
لنحدد عناصر HTML باستخدام jQuery
// Dummy $ to demonstrate jQuery selectors in Node.js
function $(selector) {
console.log("Selector:", selector);
return [];
}
// Selects the element with the id of my-box.
$('#my-box')
// Selects the element with the my-box class.
$('.my-box')
// Selects all p elements that are descendants of the element with my-box id
$('#my-box p')
// Select the element with the .my-p class that is the child of the element with my-box class.
$('.my-box > .my-p')أتاحت لنا jQuery كتابة شيفراتنا بإيجاز أكبر
لو أردنا تنفيذ الأمر نفسه باستخدام Vanilla (JavaScript العادية)، لاضطررنا إلى كتابة عدد أكبر من أسطر الشيفرة.
أتاحت لنا jQuery كتابة شيفراتنا بإيجاز أكبر من خلال أساليبها الخاصة.
تحذير
JQuery مجرد مكتبة، وهي في الواقع تجعل تطوير الويب أسهل من استخدام Vanilla JavaScript.
معلومات
من المزايا الأخرى لـ jQuery أن جميع المتصفحات الحديثة تدعم الشيفرة التي نكتبها.
قد تتسبب بعض الشيفرات التي نكتبها باستخدام VanillaJS في آثار جانبية في بعض المتصفحات، بينما تضمن jQuery عملها بالطريقة نفسها في كل متصفح بفضل طبقة التجريد التي توفرها.
تريحنا JQuery من التفكير في خصائص المتصفحات عند كتابة الشيفرة.
$(document).ready
قبل الانتقال إلى أساسيات jQuery، لنتعلّم أسلوب $(document).ready.
كما نتذكر من HTML، فقد ذكرنا أنه يمكن وضع أكواد Javascript في أي مكان بين وسم head أو بين وسمَي body في HTML.
$(document).ready 2
لنفترض أن لدينا شيفرة HTML مثل الشيفرة أدناه.
سيفسّر متصفحنا الشيفرة بدءًا من وسم <!DOCTYPE html> وحتى وسم الإغلاق </html>.
ستبدأ العبارة <script src = "https://code.jquery.com/jquery-3.5.1.slim.js"> </script> تنزيل المكتبة عبر code.jquery.com.
في السطر التالي، حددت الشيفرة DOM باستخدام أسلوب $ في jQuery. لكن توجد مشكلة هنا: إذا لم يكن مستند HTML محمّلًا بالكامل عند استدعاء الأسلوب $ ('# test')، فستفشل شيفرة JS الخاصة بنا.
في هذه الحالة، يُستخدم أسلوب $(document).ready لضمان تحميل المستند بالكامل.
<div id="test">Hello Coddy</div>
<script>
$('#test').text('Hello Coddy')
</script>
$(document).ready 3
بعد التعريف السابق،
كل ما علينا فعله هو استخدام الأسلوب $(document).ready(). سينتظر هذا الأسلوب تحميل كل المحتوى، ثم سيُشغّله.
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<div id="test">Hello Coddy</div>
<script>
$(document).ready(function(){
$('#test').text('Hello Coddy')
})
</script>
</body>
</html>سؤال
هيا، أجب عن السؤال!
تهانينا
تهانينا 🎉
في هذا القسم، بدأنا تعلّم مكتبة jQuery وأسلوبها $(document).ready().
في القسم التالي، سنتعلّم محددات jQuery.
الأسئلة الشائعة
هل درس «الخطوات الأولى في jQuery» مجاني؟
نعم — نص درس «الخطوات الأولى في jQuery» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة jQuery Academy، انتقل إلى CoddyKit PRO. تتضمن دورة jQuery Academy 1 دروس في المجموع.
ماذا ستتعلم في «الخطوات الأولى في jQuery»؟
الخطوات الأولى في jQuery تتمرن على jQuery Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ jQuery Academy؟
لا تُشترط خبرة سابقة. jQuery Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 1.
كم من الوقت يستغرق درس «الخطوات الأولى في jQuery»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس jQuery Academy هذا؟
نعم. كل درس في jQuery Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.