jQuery هي مكتبة جافا سكريبت تعمل على تبسيط برمجة JavaScript™ وAJAX (جافا سكريبت غير المتزامن + XML وجافا سكريبت غير المتزامن وXML). على عكس مكتبات Javascript الأخرى، تمتلك jQuery فلسفتها الخاصة التي تسهل عليك كتابة التعليمات البرمجية. ستقودك هذه المقالة إلى فهم فلسفة jQuery، ومناقشة ميزاتها ووظائفها، وتقديم بعض أمثلة ajax وكيفية استخدام المكونات الإضافية لتوسيع jQuery.
1. ما هو مسج؟
jQuery هي مكتبة جافا سكريبت ممتازة وُلدت في عام 2006 وتم إنشاؤها بواسطة John Resig. سواء كنت مبتدئًا في JavaScript ولكنك ترغب في تجربة تعقيد DOM (نموذج كائن المستند) وAjax، أو كنت خبيرًا في JavaScript ولكنك سئمت من تكرار نصوص DOM وAjax المملة، فإن jQuery سيكون خيارك الأفضل. .
سيساعدك jQuery على إبقاء التعليمات البرمجية الخاصة بك بسيطة وموجزة. لم تعد بحاجة إلى كتابة الكثير من الحلقات المتكررة أو نصوص استدعاء DOM، فباستخدام jQuery، ستجد النقاط الرئيسية بسرعة وتعبر عن أفكارك بأقل قدر من التعليمات البرمجية.
إن فلسفة jQuery بسيطة جدًا في الواقع: بسيطة وقابلة لإعادة الاستخدام. عندما تفهم هذه الفكرة وتوافق عليها، يمكنك أن تبدأ في إدراك مدى سهولة ومتعة استخدام jQuery في إنشاء برمجتك!
2. بعض المفاهيم البسيطة
إليك مثال بسيط يوضح لك كيفية تأثير jQuery على الكود الذي تكتبه. ما تفعله هو في الواقع بسيط للغاية، مثل إضافة حدث استجابة النقر إلى جميع الروابط في منطقة معينة على الصفحة، ويمكنك استخدام جافا سكريبت العام وDOM لكتابته، راجع القائمة 1 للحصول على الكود:
القائمة 1. البرمجة النصية لـ DOM بدون 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() {returnfirm('أنت ستزور: ' + this.href);};} إذا كنت تستخدم jQuery، يكون التنفيذ كما يلي: القائمة 2. البرمجة النصية لـ DOM باستخدام jQuery$(' #external_links a').click( function() {returnfirm('أنت ستزور: ' + this.href);}); هل أنت متفاجئ، أليس كذلك؟ باستخدام jQuery، يمكنك العثور بسرعة على النقاط الرئيسية والتعبير فقط عما تحتاج إلى التعبير عنه دون الحاجة إلى كثرة الكلام. ليست هناك حاجة للتكرار عبر هذه العناصر، فالدالة click() تعتني بكل ذلك. ولا تحتاج إلى كتابة الكثير من التعليمات البرمجية لمعالجة DOM، كل ما تحتاجه هو استخدام بضعة أحرف لتحديد العنصر الذي تبحث عنه. دعونا نلقي نظرة على كيفية عمل هذا الرمز، مع بعض الحيل. أولاً، انظر إلى الدالة $() — إحدى الوظائف الأكثر فائدة وقوة في jQuery، في معظم الأحيان، تستخدم هذه الدالة لتحديد عناصر من المستند. في هذا المثال، استخدم هذه الدالة لتمرير السلاسل المتتالية بناء جملة أوراق الأنماط (CSS)، يمكن لـ jQuery العثور على هذا العنصر بسهولة. إذا كنت تعرف القليل عن محددات CSS الأساسية، أعتقد أن بناء الجملة هذا يجب أن يبدو مألوفًا تمامًا في List2، يتم استخدام # External_links للعثور على العناصر ذات المعرف External_links المسافة التالية تعني أن jQuery بحاجة إلى العثور على جميع عناصر <a> داخل عنصر #external_links، ومن الصعب بعض الشيء التعبير عنها باللغة المنطوقة - كما أن الكتابة في نص DOM أمر مزعج للغاية، ومع ذلك، في CSS، لا يوجد شيء أبسط. من ذلك، تقوم الدالة $() بإرجاع كائن jQuery يحتوي على جميع العناصر التي تطابق محدد css. يشبه مفهوم كائن jQuery المصفوفة، ولكنه قد يحتوي على العديد من كائنات jQuery دالة لربط استجابة حدث النقر لكل عنصر في كائن jQuery،
يمكنك أيضًا تمرير عنصر أو مصفوفة من العناصر إلى الدالة $()، والتي ستضيف جميع العناصر إلى كائن jQuery الذي قد ترغب في تطبيقه هذه الميزة لكائنات مثل windows، على سبيل المثال، يمكنك استخدام هذه الوظيفة لتحميل الأحداث، مثل هذا:
window.onload = function() {// افعل هذه الأشياء عند الانتهاء من تحميل الصفحة}؛ إذا كنت تستخدم jQuery، فيمكنك الكتابة على النحو التالي:
$(window).load(function() {// قم بتشغيل هذا بعد تنزيل الصفحة بأكملها}); كما تعلم، فإن انتظار تحميل النافذة أمر مؤلم للغاية لأنه يجب تحميل الصفحة بأكملها، بما في ذلك كل شيء موجود صورة الصفحة في بعض الحالات، تحتاج إلى تحميل الصورة أولاً، ولكن في معظم الأحيان، قد تحتاج فقط إلى رؤية علامة النص التشعبي (HTML). يحل jQuery هذه المشكلة عن طريق إنشاء حدث خاص جدًا جاهز على المستند، وهو طريقة الاستخدام هي كما يلي: $(document).ready(function() {// افعل هذه الأشياء عندما يكون HTML جاهزًا تمامًا}); ينشئ هذا الرمز كائن jQuery لعنصر المستند، ثم يستدعيه عندما يكون html DOM المستند جاهز. يمكنك استدعاء هذه الوظيفة لعدد غير محدود من المرات.
في ترميز نمط jQuery الحقيقي، يوجد أيضًا نموذج مختصر لهذه الوظيفة، ما عليك سوى تمرير دالة إلى الدالة $():
$(function() {// قم بتشغيل هذا عند الانتهاء من تنزيل HTML})؛ لقد أوضحت لك حتى الآن ثلاث طرق مختلفة لاستخدام الدالة $() الطريقة الرابعة، يمكنك استخدام String Create a element. والنتيجة هي كائن jQuery يحتوي على هذا العنصر. تعرض القائمة 3 مثالاً لإضافة فقرة إلى الصفحة:
القائمة 3. إنشاء فقرة بسيطة وإلحاقها
$('<p></p>'). !').css('background', 'yellow').appendTo("body"); كما ترون من المثال أعلاه، هناك ميزة أخرى قوية جدًا في jQuery وهي تسلسل الأساليب (تسلسل الأساليب)، في كل مرة تستدعي فيها ملفًا. على كائن jQuery، ستعيد هذه الطريقة أيضًا كائن jQuery. وهذا يعني أنه إذا كنت بحاجة إلى استدعاء أساليب متعددة على كائن jQuery، فلن تحتاج إلى كتابة محددات css بشكل متكرر.
$('#message').css('background', 'yellow').html('Hello!').show();3.jQuery يجعل Ajax بسيطًا للغاية. باستخدام jQuery، لا يمكن أن يصبح Ajax أبسط يحتوي على سلسلة من الوظائف التي يمكنها أن تجعل الأشياء البسيطة بسيطة حقًا وتجعل الأشياء المعقدة بسيطة قدر الإمكان. الاستخدام الشائع لـ Ajax هو تحميل جزء من تعليمات HTML البرمجية في منطقة معينة على الصفحة. للقيام بذلك، ما عليك سوى تحديد ذلك العنصر واستخدام وظيفة التحميل () فيما يلي مثال لتحديث بعض الإحصائيات $('#stats').load('stats.html'); كما كنت قد خمنت، من السهل جدًا استخدام jQuery. يمكنك اختيار استخدام $.post() أو $.get()، بالطبع، وفقًا لاحتياجاتك المحددة كائن البيانات الاختياري ووظيفة رد الاتصال هي القائمة 4 مثال بسيط لإرسال البيانات واستخدام وظيفة رد الاتصال:
القائمة 4. إرسال البيانات إلى صفحة باستخدام Ajax
$.post('save.cgi', {text: 'my string' ,number: 23}, function() {alert('تم حفظ بياناتك.');}); إذا كنت تريد حقًا بعض أكواد Ajax المعقدة، فاستخدم الدالة $.ajax() xml أو html أو script أو json، سيقوم jQuery تلقائيًا بإعداد النتائج لك ويمكن لوظيفة رد الاتصال الخاصة بك استخدام البيانات على الفور. يمكنك أيضًا تعيين وظائف رد الاتصال قبل الإرسال والخطأ والنجاح وإكمالها لمنح المستخدم المزيد من التلميحات حول ajax. بالإضافة إلى ذلك، هناك بعض المعلمات التي تسمح لك بتعيين المهلة لطلبات Ajax، أو تعرض حالة "آخر تغيير" للصفحة مثالاً على الحصول على مستند XML واستخدام الطريقة التي ذكرتها أعلاه مثال على بعض المعلمات:
القائمة 5. أصبح Ajax المعقد بسيطًا باستخدام $.ajax()
$.ajax({url: 'document.xml',type: 'GET',dataType: 'xml',timeout: 1000, error: function (){alert('خطأ في تحميل مستند XML');},success: function(xml){// افعل شيئًا باستخدام XML}}); عندما تحصل على تعليقات XML بنجاح، يمكنك استخدام jQuery لاجتياز مستند XML، فقط كما تفعل مع html، هذا يجعل من السهل جدًا التعامل مع ملف xml ودمج المحتوى في الصفحة. تعمل القائمة 6 على توسيع وظيفة النجاح، وفقًا لكل <عنصر> في مستند xml على الصفحة التي تمت إضافتها إلى القائمة
6
نجاحالعمل مع XML باستخدام jQuery
: function(xml){$(xml).find('item').each(function(){var item_text = $(this).text();$('<li>< . /li>').html(item_text).appendTo('ol');});}