JQuery | مكتبة الجي كويري

السلام عليكم ورحمة الله وبركاته. الكثير منا سمع بـ JQuery ولاحظ انتشارها مؤخرا بشكل كبير.. سأحاول هنا أن ألخص معرفتي بالجي كويري بطريقة بسيطة ومفهومة للجميع.

jquery-logo

ما هي JQuery:

الجي كويري هي ليست لغة برمجة مستقلة كما يظن البعض، هي عبارة عن مكتبة مجانية في الجافا سكربت مكتوبة ومطورة بواسطة John Resig،  موجودة تتيح لنا وبسهولة تامة إضافة تأثيرات رائعة على صفحات الويب وسهولة التحكم بالكثير من الأحداث مثل تمرير مؤشر الفأرة أو النقر بزر الفارة وغيرها الكثير بسطور برمجية قليلة ومفهومة للمبتدئين وحتى الذين لم يقوموا بدراسة البرمجة كتخصص.. أيضا الكثير يصف الجي كويري بـ: write less, do more / اكتب أقل وأفعل أكثر. هذه المكتبة في الحقيقة تحتوي على الكثير من الدوال التي تقوم بتحسين ظهور صفحة الويب وتطوير فعاليتها بشكل ملحوظ. حيث يمكن تركيب هذه المكتبة وكل ما عليك هو مناداة الدوال التي تريد استخدامها في أي مكان تريده.

كيف أحصل على JQuery:

بإمكانك تحميل المكتبة مجانا من هذا الرابط (فقط قم باختيار النسخة التي تناسبك)

لماذا أستخدم  JQuery؟:

  • السهولة: بكل بساطة حين تزور صفحة ويب تستخدم الجي كويري بإمكانك عرض المصدر لهذه الصفحة وسترى بعينك سهولة الكود و وضوحه وبسطور قليلة. أيضا بإمكانك تعلمها بسهولة وخلال مدة أقصر من تصورك.
  • الإيجاز: كما ذكرت تقدم هذه المكتبة لمستخدميها خدمات برمجية رائعة بسطور قليلة جدا مقابل ما تقدمه لمطوري ومصممي ومبرمجي المواقع.
  • قوة التحكم: مكتبة صغيرة تستطيع فعل أشياء كثيرة وبكفائه عالية، هذه المكتبة تتيح لنا وصول سريع لـ AJAX بدون جهد أو اكواد برمجية طويلة. أيضا التحكم في المظهر وإضافة بعض التأثيرات الجميلة والمميزة أصبح سهلاً مع هذه المكتبة.
  • التوافق: JQuery تعمل بكفائه مع أغلب المتصفحات مثلا: فايرفوكس – اكسبلورر 6+- سفاري – اوبرا 9+. أيضا الـ JQuery تتوافق مع الـ CSS وتستطيع استخدامها مع مكتبات أخرى بدون أي مشاكل غالبا. (شخصيا لم أقم بتجربة استخدامها مع مكتبات أخرى)
  • المرونة: تستطيع استخدامها في صفحتك بأي طريقة تريد سواء inline ( في نفس صفحة الويب ) او external في ملف جافا سكربت مستقل ويتم مناداته في الصفحة التي تستخدمه.
    * الحجم: كما ستلاحظ عند تنزيل المكتبة حجمها لا يتعدى الـ 117kb، وهذا بالطبع لن يتسبب بأي طريقة في إرهاق ذاكرة جهازك.
  • التوسع: كونها مفتوحة المصدر فبالتأكيد سيكون هناك الكثير من الإضافات التي ستقدم للمطور العديد من الخيارات الرائعة بدون مجهود.
  • الدعم والمساعدة: الـ JQuery تاتي بـ دعم و documentaion  ممتاز، بمعنى آخر ستجد الكثير من المعلومات المفيدة عن كل شيء في هذه المكتبة وكيفية استخدامها وتنصيبها من المسئول عن ‘نشاء هذه المكتبة مباشرة. وبالتأكيد المعلومات موثقة وعلى قدر كبير من الوضوح لإفادة جميع المستخدمين. أيضا هذه المكتبة مستخدمة بشكل واسع جدا من المطورين والمبرمجين مما يتيح لنا كم هائل من المعلومات والدروس المساعدة لفهم كيفية استخدام هذه المكتبة والتغلب على الكثير من المشاكل.

كيف أستخدم JQuery؟:

الاستخدام سهل وبسيط، بمجرد تحميلك لملف المكتبة فاستعد للتجربة. شخصيا أقوم بوضع المكتبة في مجلد أضع فيه جميع ملفات الـcss , JS , Jquery وغيرها من الملفات المشتركة التي قد استخدمها باستمرار. قم بوضع المكتبة في المكان الذي تريده أو في نفس مجلد الموقع. الآن في أي صفحة تريد أن تستخدم الجي كويري ما عليك سوى كتابة هذا السطر في جزء Head:

<script src="website/jquery-1.3.2.js" type="text/javascript"></script>

طبعا إذا كنت قد وضعت ملف المكتبة في مجلد آخر ليكن اسمه folder1 سيكون السطر السابق:

<script src="../folder1/jquery-1.3.2.js" type="text/javascript"></script>

عندها ستكون الصفحة جاهزة بإذن الله لتطبيق دوال الجي كويري. نستطيع أن نستخدم الجي كويري بهذه الطريقة على سبيل المثال:

$(document).ready(function(){
// هنا نضع الكود الذي نريده أو التاثير الذي نريده أن يظهر
});

في داخل حدث الـ ready نقوم بوضع الدالة التي تقوم بالتحكم في الحدث.. على سبيل المثال أريد عندما تفتح الصفحة أن يظهر رابط لصفحة موقعي الرئيسية وعند الضغط عليه لا أريد أن ينقله لصفحتي وحسب، بل أريد أن يظهر ترحيب على شكل نافذه منبثقة popup window وهو ما يسمى بـ alert في الجافا سكربت. في هذه الحالة سأقوم بكتابة ملف html عادي.. وسأضع في جزء head السطر الذي يتيح لي الاستفادة من مكتبة الجي كويري. ثم بعد ذلك سأقوم بكتابة المحتوى body  وسأضع الرابط لصفحتي داخله.

في جزء الهيد سأقوم بكتابة كود بسيط يقوم بعمل ما أريده. سأخبره أن هناك سكربت يجب تنفيذه عن طريق كتابتي لهذا السطر

<script type="text/javascript">

ثم بعد ذلك سأبدأ في استخدام الجي كويري بكتابة هذه الدالة

$(document).ready(function(){

بعد القوس سأكتب:

$("a").click(function(event){
alert("Thanks for visiting me");
});

أي أنني أخبرته أنه عندما ترى رابط (a – من anchor) وتم النقر عليه فأريدك أن تقوم بإظهار نافذة للزائر أكتب فيها ما أريد بين القوسين ثم بعد ذلك سينتقل لصفحتي الرئيسية. وبعدها أتأكد من إغلاق الأقواس حتى تتم العملية بشكل صحيح. هذا كل ما في الأمر. كل ما سيفعله هو عندما يرى tag <a> في جزء الـ body سيقوم مباشرة بتطبيق كود الجي كويري وسيظهر النافذة الترحيبية قبل نقلك للصفحة الرئيسية.. (نلاحظ أن علامة الدولار $ تكون في أول سطر لأي استخدام لدوال الجي كويري) *هذا مجرد مثال بسيط لا أكثر، جيد لتبدأ فيه رحلتك إلى عالم الجي كويري بدون تعقيد..

للجي كويري حقيقة استخدامات كثيرة وخصوصا في التأثيرات البصرية الجميلة. فمثلا أستطيع كتابة الجي كويري مع css selectors بكل مرونة.

$("classname").click()

وهذا مثال بسيط يوضح ما أريده: بنفس الطريقة السابقة تماما لكن نغير ما بداخل ready إلى:

$("p").click(function(event){
event.preventDefault();
$(this).hide("slow");
});

أي أنه عندما يوجد نص في جزء body وتم النقر عليه بزر الفأرة سيختفي النص بشكل بطيء. ولا ننسَ أن نقوم بتغيير ما بداخل الـ body  إلى نص بـ tag : <p> k

* مثال آخر قمت بعمله لإظهار كيفية عمل نص يظهر ويختفي بطريقة sliding عند النقر على زر معين. تستطيع تحميله وتجربته ومن ثم ترى كيف استطعت عمل ذلك بمشاهدة مصدر الصفحة عن طريق view >page source. أو بفتح الصفحة بواسطة أي برنامج لتحرير ملفات HTML. أيضا الملف يحتوي على المثالين السابقين تستطيع تجربتهم بنفسك.

مواقع تستخدم الـ JQuery:

إضافات JQuery:

حسب علمي المتواضع يوجد أكثر من 180 إضافة لمختلف الأغراض من تأثيرات وغيره. يمكن جمعها في ملف واحد عوضا عن وجود كل إضافة في ملف مستقل.

كتاب مفيد لـ JQuery:

http://tbn1.google.com/images?q=tbn:xmX9trTYnWsTYM:http://lh5.ggpht.com/_MJkDRxwRrPU/Sc6nsgvE_AI/AAAAAAAAAgM/JazOYqPAIcQ/s400/learning-jQuery.jpg

مواقع ومصادر رائعة ومفيدة:

أمثلة يمكنك تجربتها والتعديل عليها بما يناسبك، قمت بالعثور عليها أثناء تعلمي (استفدت منها كثيرا):

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

  • والله اني تحمست بعد هذا الشرح :)..
    أحسها سهلة مرررة ..
    شكراً على الشرح البسيط الجميل

  • أول مرة تيسر لي الفهم واعرف ماهي JQuery بالرغم من محاولاتي المتعددة
    شكرا جزيلا

  • Vexard

    شكرا على المقال الرائعة والتى تفتح الباب امام للكثيرين

    والمكتبه عن تجربة طويلة رائعة جدا وسهله

  • mo2men

    جيد جداااااااا اخى

    لو استمريت فى شرح المكتبه
    يكون رائع منك ذلك

    و مفيد للمحتوى العربى الضعيف فى شرح هذه المكتبه

    لو امكن شرح منك استخدام المكتبه من استخدام دوالها بأكثر فاعليه مع امثله لها

    اتمنى منك ذلك على رغم شرحك للمكتبه لنا باختصار

    • ان شاء الله في المستقبل القريب. أرتب وقتي وأشرح بشكل أعمق

  • بارك الله فيك اختس الفاضلة شرح رائع

  • يعطيك العافيه

    إنا صراحه مهتم هذي الأيام على تعلمه وموضوعك أفادني كثير

    شكراً لك

  • abdullah

    شرح مميز فعلا.. بسط الموضوع

    شكرا..

  • ما شاء الله شكراً لك درس رائع ومميز

    عندي نقطة ودي اضيفها وأفيد بها بالنسبة لاستدعاء مكتبة الجيكويري يفضل استدعائها من سيرفر قوقل لعدة أسباب

    توجد هنا :

    اعجبني كلامك في الأخير

    ما ذكرته هو مجرد مفتاح البداية لاستخدام الجي كويري، ستتعلم الكثير والأكثر

    شكراً لك وبارك الله فيك

    • العفو واياك يارب ، بس ممكن اعرف الاسباب ؟ بالنسبة لي معلومة جديدة
      ويبدو لي مافيه لنك في ردك

      حياك الله

  • استخدام مكتبة الجي كويري رائع ويسهل عليك عملك ويوفر الكثير من الوقت فيمكننا اعتبارها كفرام وورد للجافا سكربت

    ولكن ينبغي عليك اولا تعلم الجافا قبل استخدامها لان باستخدامها لن تتعلم ابدا كتابة الاكواد وصنع البلجن الخاصه بك

    • فعلا اتفق معاك . لكن بالنسبة لأي مبتدئ في تطوير وتصميم المواقع ممكن يستفيد من الموجود حاليا واللي يوفر جهد كبير .

  • نضال الحطامي

    موضوع جميل ومكتبة jquery تستحق كل الاهتمام والمتابعة من قبل مطوري الويب، ففيها اختصار للوقت والجهد، فيما سبق كان المطور يحتاج إلى التأكد من كل دالة جافا سكريبت على كل المتصفحات ..
    الآن في الغالب الـ jquery متوافقة مع كل المتصفحات، ليس هذا فحسب بل أن هناك الكثير من المميزات في استخدام هذه المكتبة وما لها من إضافات رائعة.

    الجدير بالذكر أن شركة مايكروسوفت ونوكيا قد تبنوا خيار تضمين مكتبة jquery بشكل تلقائي مع برامجهم التطويرية الجديدة.

  • syrakozz

    شكرا على هذا الشرح الجميل

  • جزاك الله خير أخت نوال ..
    أنا أعرف للجافاسكربت على خفيف ، بس للأسف مافهمت كيف ممكن أستفيد من الجي كويري ، دايم أسمع بها وأعرف انها تفيدني بالتصميم وكذا ، بس مالقيت لي مصدر يدلني على كل الأشياء اللي تقدمها لي المكتبة (زي الفهرس يعني).

    شكراً لك.

  • معلومات مفيدة و قيمة
    و مثل ما ذكرت أنها هي الشرارة الأولى للانطلاق في تعلمها 🙂

    بارك الله فيك

  • Hazwa .

    يعطيكُ الف عافيه اختي ع الشرح الرائع والواضح َ ..

    تم حفظ الموضوع للاستفاده منه ..

  • I found that when I wanted more information the links provided me with what I was looking for.
    I would like to add something that might get into that 101 list, if you think it worthed.
    Great ideas and tips. I’ve always had trouble finding a free place to blatantly advertise my products and services so I made one

  • مشكورة أختي

  • محمد

    السلام عليكم
    اشكرك على الشرح الوافي
    بعد تحميل المكتبة طلب مني الكود الخاص ليقوم بتحميل الملفات

    كيف احصل على الكود؟

  • Excellent post at JQuery | مكتبة الجي كويري | عالم التقنية. I was checking continuously this blog and I am impressed! Extremely helpful information specially the last part 🙂 I care for such information much. I was looking for this particular information for a very long time. Thank you and best of luck.

  • JQuery | مكتبة الجي كويري | عالم التقنية I was recommended this web site by my cousin. I am not sure whether this post is written by him as no one else know such detailed about my difficulty. You are incredible! Thanks! your article about JQuery | مكتبة الجي كويري | عالم التقنيةBest Regards Nick

  • I am not sure where you are getting your info, but good topic. I needs to spend some time learning much more or understanding more. Thanks for fantastic info I was looking for this JQuery | مكتبة الجي كويري | عالم التقنية for my mission.

  • الصراحة لم استطع تحميل المكتبة مكتبة الجكويري ماسبب

    حاولت احملها من الموقع موقع Jquery ولكن اعرف الطريقة

    ممكن يكون هناك توضيح اكثر للمكتبة وطريقة تحمليها

    وشكرا على الشرح والموضوع الجميل

  • earnonline786

    what language is this i can not understand what given her http://www.earnonlinee.com

تعليقات عبر الفيسبوك