[ jQuery ] تعريف ونقاش وأمثله ( JavaScript بمذاق مختلف )

[حمد الشمري]

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاتة

وأما بعد ..

لعدم معرفتي الكبيرة في الجي كوايري [ jQuery ] والمختصة في هذه اللغة

المدرجة تحت نوعية الجافا سكربت [ JavaScript ]

والتي لايخلو أي موقع أو منتدى من إستخدامها في القوائم المنزلقة أو المنسدلة وعمليات

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

لذالك أحببت أن أدرج لكم هذا الموضوع لكي أستفيد ويستفيد الجميع من المعلومات التي

أرغب أن نستشف منها ميكانيكية عمل هذه اللغة سوياً لتعم الفائدة بإذن الله على الجميع

لغة [ jQuery ] ...

ماهي هذه اللغة ؟

هي لغة مدرجة تحت نطاق الـ [ JavaScript ] بنفس عملها السابق ولكنها تقلل من عمل

تكرار الأوامر والتي تعد إستهلاك كبير من وقت المبرمج وعدم تكرار حلقات التكرار والشروط

التابعة للـ [ JavaScript ] بشكلها السابق .. فهي مكتبة مخصصة بطريقة أخرى تقلل من

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

من هو مخترع هذه اللغة ؟

أخترع وإبتكر هذه الطريقة : جون ريسيغ في أوائل عام 2006 [ John Resig ] والذي قام

بعمل هذه المكتبة لمن يعمل مسبقاً على [ JavaScript ] ولكن بطريقة أخرى لتستطيع

أخي مبرمج [ JavaScript ] بإستخدامها بكل سهولة مع لغة [ XML ] + [ Ajax ] والتعبير

عن برمجتك بطريقة أحترافية بطعم آخر

هدف هذه اللغة ؟

هدف هذه اللغة بشكل أولي هي جعل البرمجة لمحبين [ JavaScript ] بسيطة ويمكن أيضاً

إعادة إستخدامها وتعديلها بأي وقت وبسهولة تامة ..

أليس من الجميل حقاً أن تحصل على ذالك كله ؟ بوقت بسيط ؟ وبطريقة أسهل ؟

مثال لأحد البرمجيات التي تم إستخدامها عبر البرمجة في لغة [ JavaScript ] دون

إستخدام الـ [ jQuery ] :

var external_links = document.getElementById('external_links');
var links = external_links.getElementsByTagName('a');
for (var i=0;i < links.length;i++) {
    var link = links.item(i);
    link.onclick = function() {
        return confirm('You are going to visit: ' + this.href);
    };
}

وهنا مثال آخر لأحد البرمجيات التي تم إستخدامها عبر البرمجة في لغة [ JavaScript ] بإستخدام

الـ [ jQuery ] :

$('#external_links a').click(function() {
    return confirm('You are going to visit: ' + this.href);
});

نفس العمل ؟ طريقة مميزة وسلسلة ؟

أختصرها من 8 أسطر لـ 3 أسطر فقط وأحصل على نفس الناتج !!

مايميز هذه اللغة هو بداية الأوامر بها كعمل المتغيرات في لغة [ php ]

المغيرات في لغى الـ [ php ] كانت دوماً تحصل على علامة $

مثلاً :

$hamad = "hamad alshamri"; 

ولكن لغة [ jQuery ] الآن تدخلت بمتغير جديد وهو

$

بإضافة الـ [ function ] الخاص بك

مثال على لغة [ php ] :

$swalif = "swalif softs"; 

الآن لغة أو مكتبة [ jQuery ] لها الـ $

كمثال :

$('#external_links a').click(function() {
    return confirm('You are going to visit: ' + this.href);
}); 

فهي بإستخدام آخر والذي يعد كنوع من عمليات الـ [ php ]

ولكن بطريقة أخرى تابعة كلياً لـ [ JavaScript ] لأنها لغة [ JavaScript ] بالأساس

حيث يتم تنفيذ عمليات الـ بوضع التنصيص

$()

في بداية الأمر لعمل الـ [ function ] وتتالي الكود لطباعة الناتج المطلوب بسهولة أكبر

ومايميز هذه اللغة بأنك عزيزي مبرمج أن تقوم بإستخدام أكواد [ HTML ] بداخل هذه اللغة

دون أن تواجه أي خلل يذكر

$("<p>Hi aLL</p>") 

أو مثلاً :

$('#grow').animate({ height: 500, width: 500 }, "slow", function(){
    alert('The element is done growing!');
}); 

تستطيع إستخدام الـ [ CSS ] بداخل الـ [ jQuery ] كإستخدامك [ HTML ] أو [ PHP ] مع [ CSS ]

بسهولة بإذن الله ..

وكما ذكرت سابقاً بأن [ jQuery ] تمتاز بسهولتها ونسهولة الرجوع إليها مستقبلاً لتعديلها

دون قرائه العديد من الأكواد التي قد برمجت سابقاً ..!

وأهم من ذالك بأنها ستكون أكثر سهولة للمبرمج نفسه ..

أيضاً يمكنك إستخدام الـ [ jQuery ] مع الأجاكس بكل سهولة بإذن الله

فما هو رأيك لنفتح باب النقاش عن jQuery ونأخذ من هذا النقاش شئ مفيد ؟

مراجع أستفدت منها وستفيدكم بإذن الله :

http://www.jquery.com/ الموقع الرئيسي
http://docs.jquery.com/Ajax لدروس الأجاكس
http://docs.jquery.com/Tutorials للدروس بشكل عام
http://docs.jquery.com/Plugins للبلوج إنز مع أمثله
http://docs.jquery.com/Downloading_jQuery لتحميل الـ jQuery ملف js
http://www.ddj.com/java/201000935?pgno=1 شرح تفصيلي عن jQuery
http://www-128.ibm.com/developerwork...jaxjquery.html شرح تفصيلي عن jQuery

هذا مالدي عن jQuery وأتمنى أن أجد نقاشكم حولها

وإن أصبت فمن الله وإن أخطأت فمن نفسي ومن الشيطان

أخوكم

حمد الشمري

[أحمد أبو النصر]

بسم الله ما شاء الله عليك
الدرس جميل
كنت اريد ان استخدمها من فتره و لكن بصراحة كسلت عشان انا بستخدم مكتبة صغيرة عاملها جار ليا و بصراحة هيا كويسة و مش محتاج اي حاجة غيرها بس بعد الشرح الرائع ده ان شاء الله هاجرب الjQuery
و جزاك الله كل خير

[محمد الثقفي]

والله شرح رائع يا حمد الشمري

واول مره اسمع فيها

اوعدك ان راح احاول اشتغل فيها قريب واتناقش في الموضوع

وبما انها تعمل مع الاجاكس اذا هي تعمل مع الفلاش
راح اربطها بالفلاش واشوف ايش ممكن اعمل بيها ان شاءالله

جزاك الله كل خير وجزاك الله الجنه

[حمد الشمري]

بارك الله فيكم أخواني وأشكركم من قلبي على دعواتكم

ولي عودة بإذن الله بمثال على الجي كوايري مع الأجاكس

مع شرحة بالتفصيل ..

وأشكر من قام بتثبيت الموضوع

بإنتظار النقاش حول الموضوع لتعم الفائدة ولنتعلمها بشكل موسع إن شاء الله

[ahmed-samara]

مميز كالعاده اخي الكريم ماشاء الله عليك

لك كل التحية والتقدير

[daif]

كتوضيح بسيط , JQuery هي مكتبة جافا اسكريبت تحتوى على دوال وخصائص بسيطة في الاستخدام وتسهل التعامل مع مستند html .

[Gendows Systems]

فعلا هيا أسهل كثير من الجافا سكربت (لما هو موضح بالشرح) ويبدو أنها ستوفر الكثير وانشاء الله أحاول استخدمها أثناء برمجة مكتبة البرامج الخاصة بى






شكرا على الشرح والمواقع