jQuery للمبتدئين
jQuery للمبتدئين
jQuery للمبتدئين درس مجاني في jQuery Academy على CoddyKit. هذا هو الدرس 1 من أصل 1. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في jQuery Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة jQuery Academy 1 دروس في المجموع.
مقدمة
مرحبًا،
مرحبًا بكم في دورة jQuery للمبتدئين .
في هذا القسم، سنبدأ بتعلّم معلومات تفصيلية عن jQuery.
مقدمة 2
قبل بدء هذه الدورة،
يُشترط إكمال الدورات التالية.
- HTML: البدء
- CSS: البدء
- أساسيات Javascript
- إذا كانت لديكم معرفة مسبقة بهذه الموضوعات، فيمكنكم متابعة الدورة.
لنبدأ
لنبدأ.
أولًا، لنجب عن سؤال: فيمَ تُستخدم JQuery؟
قبل الإجابة عن السؤال، لِنراجع أساسياتنا
قبل الإجابة عن السؤال، لِنراجع أساسياتنا.
لغة HTML هي لغة ترميز. أي إنها لغة لترميز النصوص، وليست لغة برمجة. وهي بعيدة عن مفاهيم مثل البرمجة كائنية التوجه. بعبارة أخرى، لا توجد كائنات في بنيتها؛ وما نعرفه فيها هو وسوم HTML والسمات وغير ذلك.
تُجري Javascript عمليات على DOM
نحتاج كثيرًا إلى إجراء عمليات على عناصر HTML في صفحات الويب. ولتوفير ذلك وإتاحة الوصول إلى عناصر HTML أمام JS، نعبّر عنها بنموذج يُسمى DOM (نموذج كائن المستند).
تُجري Javascript عمليات على DOM، وهو النظير الكائني لصفحة الويب. ونسمّي ذلك معالجة DOM.
مثال
لنذكر مثالًا.
لدينا عنصر زر كما في المثال أدناه، ويحتوي على النص 'Not Clicked' . عند النقر على الزر، سنغيّر نص الزر إلى 'Clicked'.
لتحقيق ذلك، نحتاج إلى إجراء معالجة DOM باستخدام لغة Javascript.
في دورة مقدمة إلى Javascript، تعلّمنا كيفية إدارة مستند ويب باستخدام Javascript. JQuery هي مكتبة تتيح لنا إجراء معالجة DOM بصورة أكثر اختصارًا وإيجازًا عند استخدام Javascript.
<!--Initial Element -->
<button id="my-button">Not Clicked</button>
<!---Desired Element after clicking the button-->
<button id="my-button">Clicked</button>سؤال
إليك سؤالًا!
المثال 2
في المثال أدناه، عرّفنا زرًا بالمعرّف my-button.
والآن، لنصل إلى هذا العنصر باستخدام Javascript عبر DOM.
عند النقر على الزر، سنصل إلى DOM باستخدام شيفرة JS، ونغيّر خاصية innerHTML للعنصر ذي المعرّف my-button إلى click.
<button id="my-button">
Not Clicked
</button>
<script>
let myButton = document.getElementById('my-button');
myButton.addEventListener("click",
function(){
myButton.innerHTML = "Clicked"
})
</script>تحذير
JQuery ليست سوى مكتبة ظهرت لتبسيط استخدام الدوال والأساليب في JS Core.
بعبارة أخرى، تتيح لنا تنفيذ كثير من الأمور التي يمكننا تنفيذها باستخدام VanillaJS بصياغة أسهل وقراءة أوضح.
شرح المثال
لنشرح الشيفرة.
let myButton = document.getElementById('my-button');
نُسنِد كائن المستند في Javascript إلى المتغير المسمى myButton باستخدام الأسلوب getElementById.
myButton.addEventListener("click", function(){
myButton.innerHTML = "Clicked"
})
بعد ذلك، استمعنا إلى حدث النقر على الزر وأجرينا تغييرات عليه.
لقد أجرينا معالجة DOM باستخدام الميزات الأساسية للغة من دون استخدام أي مكتبة أو إطار عمل ؛ وهو ما يُعبّر عنه بالمصطلحين native أو vanilla.
لنكتب الشيفرة نفسها باستخدام jQuery، ولنستفد من الميزات التي تقدمها لنا مكتبة jQuery.
تحذير
المفهوم الذي يُعبَّر عنه في مواضع كثيرة باسم VanillaJS هو في الواقع استخدام JavaScript النقي، أي الكائنات والأساليب والدوال الأساسية فقط، إلى جانب الإمكانات التي يوفرها المتصفح.
مثال على jQuery
فيما يلي أجرينا المثال السابق باستخدام JQuery.
احرصوا فقط على عدم اختصار الشيفرة بدرجة كبيرة بإهمال الصياغة.
<script>
$('#my-button').on('click', function(){
$(this).text('Clicked');
})
</script>
<button id="my-button">Not Clicked</button>تهانينا
تهانينا 🎉
في هذا القسم، بدأنا تعلّم jQuery وفهمنا مدى قدرة 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 يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.