Method chaining

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

<div id="divTest1"></div>
<script type="text/javascript">
	$("#divTest1").text("Hello, world!").css("color", "blue");
</script>

يعمل الأمر على النحو التالي: نقوم بإنشاء كائن jQuery جديد ونحدد عنصر divTest1 باستخدام الحرف $، وهو اختصار لفئة jQuery. في المقابل، نحصل على كائن jQuery، مما يسمح لنا بمعالجة العنصر المحدد. نستخدم هذا الكائن لاستدعاء طريقة text()، التي تحدد نص العنصر (العناصر) المحدد. تقوم هذه الطريقة بإرجاع كائن jQuery مرة أخرى، مما يسمح لنا باستخدام استدعاء طريقة أخرى مباشرة على القيمة المرجعة، وهي طريقة css().

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

<div id="divTest2"></div>
<script type="text/javascript">
	$("#divTest2").text("Hello, world!")
					.removeClass("blue")
					.addClass("bold")
					.css("color", "blue");					
</script>

ستقوم JavaScript ببساطة بالتخلص من المسافة البيضاء الإضافية عند تفسير التعليمات البرمجية وتنفيذها كسطر طويل من التعليمات البرمجية مع استدعاءات متعددة للطرق.

لاحظ أن بعض الطرق لا تُرجع كائن jQuery، بينما تُرجعه طرق أخرى فقط اعتمادًا على المعلمات التي تمررها إليه. وخير مثال على ذلك هو طريقة text() المستخدمة أعلاه. إذا لم يتم تمرير أي معلمات إليه، فسيتم إرجاع النص الحالي للعنصر (العناصر) المحدد بدلاً من كائن jQuery، بينما تتسبب معلمة واحدة في قيام jQuery بتعيين النص المحدد وإرجاع كائن jQuery.