
jQuery Introduction
ستتعلم في هذا الدرس مقدمة عن مكتبة ال jQuery ولماذا نستخدمها وما هي مميزاتها
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
jQuery Introduction
</> jQuery Introduction
ال jQuery هي اختصار الي write less, do more وهي ان تكتب القليل وتنفذ الكثير
ال jQuery هي مكتبة صغيرة مبنية بلغة ال JavaScript صممت خصيصاً كي تكون سهلة وسريعة الاستخدام والانجاز وتوفير الوقت
يوجد بداخل jQuery جميع الاختصارات لمعظم وظائف ال JavaScript
ال jQuery تختصر سطور عديدة مكونة من اوامر برمجية في سطر واحد فقط
ال jQuery يبسط الكثير من الاشياء المعقدة من ال JavaScript مثل ال Ajax وال DOM وال BOM
تحتوي لغة جافا سكريبت علي مميزات عديدة مثل :
- HTML/DOM manipulation
- CSS manipulation
- HTML event methods
- Effects and animations
- AJAX
- Utilities
ال jQuery تستطيع بناء اي مهمة برمجية داخل صفحة الويب
هناك الكثير من مكتبات JavaScript الأخرى ، ولكن من المحتمل أن يكون jQuery هو الأكثر شيوعًا والأكثر تطوراً.
تستخدم العديد من أكبر الشركات على الويب jQuery ، مثل:
- Microsoft
- IBM
- Netflix
اختصار نفس الكود بواسطة ال jQuery

</> Get Started
اضافة ال jQuery لصفحات الويب
هناك طريقتين للبدء باستخدام مكتبة ال JQuery :
- تحميل مكتبة jQuery من موقع jQuery.com
- استخدام ال JQuery مباشرة عن طريق ال CDN l مثل Google
تحميل ال jQuery
هناك نسختين من ال JQuery متاحين للتحميل
- Production version قم بتحميل هذة المكتبه لانها مضغوطة وتساعد في تحميل صفحات الويب بشكل اسرع
- Development version يستخدم هذة النسخة المطورين حتي يتمكنوا من التعديل علي المكتبة
مكتبة ال jQuery هي عبارة عن ملف واحد JavaScript نقوم بربط هذا الملف بملف ال HTML عن طريق ال <script> بداخل ال <head> او بداخل ال <body>
ملاحظة!
يقوم المتصفح بقراءة ملف ال html من الاعلي الي الاسفل بشكل متسلسل سطرا تلو الاخر لذلك يجب عليك استدعاء ملف مكتبة ال jQuery سواء قمت بتحميله او استدعائه عن طريق CDN قبل تنفيذك لأي اوامر برمجية خاصة او قبل استدعائك لملف jQuery خارجي external
Google CDN:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="js/myScript.js"></script>
Google CDN:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(function(){ $("div").hide(); }) </script>
إحدى الميزات الكبيرة لاستخدام jQuery المستضاف من Google:
اذا قام الزوار من زيارة موقع اخر يستخدم مكتبة ال jQuery مستضافة من Google CDN قبل زيارة موقعك الخاص. نتيجة لذلك ، سيتم تحميله من ذاكرة التخزين المؤقت عندما يزورون موقعك ، مما يؤدي إلى وقت تحميل أسرع. أيضًا ، ستتأكد معظم شبكات CDN من أنه بمجرد أن يطلب المستخدم ملفًا منه ، سيتم تقديمه من الخادم الأقرب إليهم ، مما يؤدي أيضًا إلى وقت تحميل أسرع.
</> Same Syntax
تكتب اوامر ال jQuery بثلاث طرق وهي نفس طرق كتابة ال JavaScript
- بداخل صفحة الويب داخل ال head
- بداخل صفحة الويب داخل ال body
- في صفحة JS منفصلة وهذة افضل طريقة
اكتب القليل ونفذ الكثير write less do more
باستخدام ال JavaScript
<script> document.getElementById('test').style.display = 'none'; </script>
باستخدام ال JQuery
<script> $('#test').hide(); </script>