JQuery Arabic Tutorial

الجي كويري

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

طريقة الاستخدام
الاستخدام سهل وبسيط، بمجرد تحميلك لملف المكتبة فاستعد للتجربة. شخصيا أقوم بوضع المكتبة في مجلد أضع فيه جميع ملفات الـ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


بإمكانك تحميل المكتبة مجانا من هذا الرابط
http://code.google.com/p/jqueryjs/downloads/list
(فقط قم باختيار النسخة التي تناسبك)

معلومات عن الكورس
المصدر :- قناة  ابراهيم قديح
عدد دروس الكورس :- 78 درس 
عدد ساعات الكورس :- 3ساعات و 52 دقيقة