مع jQuery افعل المستحيل بكتابة القليل !


(Darweesh saber) #1

((jQuery : مكتبة جديدة مجَّانيَّة و مفتوحة المصدر مكتوبة بلغة Java Script تسمح لكَ كمطوِّر لمواقع الـ Web بالقيام بما كان يتطلّب كتابة مئات الأسطر البرمجية بأسطر معدودة! و قد كتبها المبرمج الكبير John Resig في البداية (عام 2006) ثمَّ طوَّرها فريق من المبرمجين بالتعاون معه و الهدف من كتابتها تغيير الطريقة التي يكتب بها المبرمجون شيفرات الـ Java script على حدّ قول مبدعها.
نالتْ مكتبة jQuery خلال فترة قصيرة جداً شهرةً واسعةً أكسبتها ثقة مواقع أكبر الشّركات في العالم مثل Google و Mozilla و WordPress و Drupal و DELL و الكثير من المواقع الكُبرى التي كان آخرها موقع الشركة العملاقة Microsoft التي تبنّت المكتبة و ضمّنتها بشكل افتراضي مع مشاريع لغة البرمجة ASP.NET 4 التي تُكتَب باستخدام بيئة Visual Studio 2010 و الجدير بالذكر أنَّ فكرة إنشاء مكتبات Java Script ليست فكرة جديدة فقد ظهر عدد كبير من المكتبات قبل ظهور مكتبة jQuery إلَّا أنَّ jQuery كانت الأكثر نجاحاً في مطابقة معايير الـ Web 2 و الأسهل على الإطلاق , كما كانت مكتبة jQuery المكتبة الوحيدة التي ضمنت أعلى نسبة من التوافق مع جميع المتصفحات الشهيرة مثل IE6 فما يليه و Firefox 2 فما يليه و Safari 3 فما يليه و Opera 9 فما يليه و Google chrome و غيرها من المتصفحات و السبب الأهم في انتشار المكتبة و نجاحها هو صغر حجمها إذ أنّه لا يتجاوز الـ 20 كيلوبايتاً فقط ! ))

نقلاً عن كتاب " تعلَّم jQuery في 120 دقيقة لـ مختار سيّد صالح " (بلى … دعاية :slight_smile: ).

و فيما يلي بعض الأمثلة التي كُتِبت باستخدام jQuery .

1 - قوائم
www.abokamal.com/jQueryIn120Minutes/Example1/
http://www.abokamal.com/jQueryIn120M...xample1/fader/
http://www.abokamal.com/jQueryIn120M...e1/duck/1.html
http://www.abokamal.com/jQueryIn120M...e1/duck/2.html
http://www.abokamal.com/jQueryIn120M...e1/duck/3.html
http://www.abokamal.com/jQueryIn120M...xample1.green/
http://www.abokamal.com/jQueryIn120M.../Example1.red/
http://www.abokamal.com/jQueryIn120M...xample1/right/

2 - إضافة مفاتيح اختصار لحقول الإدخال

جرب النقر على مفتاحي
alt + shift
الموجودين على يسار لوحة المفاتيح أثناء استعراض المثال التالي
www.abokamal.com/jQueryIn120Minutes/Example2/

3 - تجميل القوائم المنسدلة

www.abokamal.com/jQueryIn120Minutes/Example3/

4 - اختبار المدخلات

www.abokamal.com/jQueryIn120Minutes/Example4/
http://www.abokamal.com/jQueryIn120M...ample4/valid1/

5 - أمثلة على الحركات

http://www.abokamal.com/jQueryIn120M...Example5/demo/
http://www.abokamal.com/jQueryIn120M...xample5/magic/
http://www.abokamal.com/jQueryIn120M...ample5/bounce/
http://www.abokamal.com/jQueryIn120M...xample5/Space/

6 - عرض ملحوظات ثابتة في ركن الصفحة

www.abokamal.com/jQueryIn120Minutes/Example6/

7 - وضع الصور في قائمة منسدلة

www.abokamal.com/jQueryIn120Minutes/Example7/

8 - مزاليج مذهلة

http://www.abokamal.com/jQueryIn120M...xample8/1.html
http://www.abokamal.com/jQueryIn120M...xample8/2.html
http://www.abokamal.com/jQueryIn120M...xample8/3.html
http://www.abokamal.com/jQueryIn120M...xample8/4.html
http://www.abokamal.com/jQueryIn120M...xample8/5.html
http://www.abokamal.com/jQueryIn120M...mple8/hslides/

9 - نوافذ منبثقة مذهلة

www.abokamal.com/jQueryIn120Minutes/Example9/
http://www.abokamal.com/jQueryIn120M...ple9/Mukhtar1/
http://www.abokamal.com/jQueryIn120M...ple9/Mukhtar2/
http://www.abokamal.com/jQueryIn120M...ple9/Mukhtar3/