jQueryEnlightenment-arabic-17.05-itwadi.com

‫ﻋﺒﺪ اﻟﻠﻄﻴﻒ اﻳﻤﺶ‬
‫تعلم ‪jQuery‬‬
‫ترجمة‬
‫عبد اللطيف ايمش‬

‫تقديم‬
‫ت‬
‫تعلم ‪jQuery‬‬ ‫تقديم‬
‫أصببببح ظببباهرًا للعيبببان كيبببف أصببببحت مكتببببة ‪ jQuery‬من أشبببهر مكتببببات ‪ JavaScript‬وأكثرهبببا‬
‫استخدامً ا‪ ،‬إذ تستعملها كبرى الشركات كشركة ‪ Google‬والبرمجيات الشهيرة كبرمجية ‪،WordPress‬‬
‫وأظهرت الحصائيات أنها مستعملة في أكثر من نصف مواقع الويب‪.‬‬
‫أساسبا للمعلومببات الببتي‬

‫ً‬ ‫ستشب ِ‬
‫بكل‬ ‫جاء هذا الكتاب لشرح المفبباهيم الساسببية في ‪ jQuery‬والببتي ُ‬
‫ُ‬
‫وحاولت أن أتوخى فيه الدقة مع الحفاظ على بساطة الشرح ووضوحه‪.‬‬ ‫ستتعلمها في المستقبل‪،‬‬
‫ٌ‬
‫مبببترجم عن كتببباب »‪ «jQuery Enlightenment‬لصببباحبه ‪ ،Cody Lindley‬والبببذي‬ ‫هبببذا الكتببباب‬
‫لحقا باسم »‪ُ .«jQuery Succinctly‬ن ِش ب َ‬

‫رت هببذه النسببخة المترجمببة من الكتبباب‬ ‫ً‬ ‫َن َش ُ‬
‫رته ‪Syncfusion‬‬
‫بعد أخذ إذن المؤلف‪.‬‬
‫مرخص بمببوجب رخصببة المشبباع البببداعي ‪َ » Creative Commons‬نسببب المُ صبنّف ‪-‬‬
‫ٌ‬ ‫هذا الكتاب‬
‫لمعلومبات‬
‫ٍ‬ ‫غير تجاري ‪ -‬الببترخيص بالمثببل ‪، (Attribution-NonCommercial-ShareAlike 4.0) «4.0‬‬
‫أكثر عن هذا الترخيص راجع هذه الصفحة‪.‬‬
‫وفي النهاي ببة‪ ،‬أحم ببد ا على توفيق ببه لي بإتم ببام العم ببل على الكت بباب‪ ،‬وأرج ببو أن يك ببون إض ب ً‬
‫بافة‬
‫ً‬
‫مفيدة للمكتبة العربية‪ ،‬وا ولي التوفيق‪.‬‬
‫عبد اللطيف محمد أديب ايمش‬
‫حلب‪ ،‬سورية ‪2017/5/3‬‬
‫‪4‬‬
‫هذا الكتاب برعاية‬
‫عربي يُ عنى بتتبع أخبار البرمجيات الحببرة والمببواد التعليميببة المتعلقببة‬

‫ٌ‬ ‫تقني‬
‫ٌ‬ ‫وادي التقنية موقعٌ‬
‫بهببا‪ ،‬يكتب فيببه عببدد من المتطببوعين المهتمين بالبرمجيببات الحببرة والتقنيببة بشببكل عببام؛ يهتم وادي‬
‫التقنية بمواضيع مثل أنظمة التشغيل الحاسببوبية والهاتفيببة‪ ،‬ولغببات البرمجببة‪ ،‬والمكتبببات البرمجيببة‪،‬‬
‫وتقنيات الويب‪ ،‬وأخبار شركات البرمجة الكبرى‪ ،‬والمصادر المفتوحة‪ ،‬والعتاد وأجهزة الحاسوب ‪.‬‬
‫دعم وادي التقنيبببة كتاببببة العديبببد من الكتب التقنيبببة في مجبببال البرمجيبببات الحبببرة ومفتوحبببة‬
‫ً‬
‫مجان ا للمستخدم التقني العربي‪ ،‬ومن أهم الكتب التي دعمها وادي التقنية‪:‬‬ ‫المصدر‪ ،‬وتوفيرها‬
‫جدول المحتويات‬
‫تقديم‪3...............................................................‬‬
‫تمهيد‪13............................................................‬‬
‫‪ .1‬اصطلحات ‪14..................................................................................... jQuery‬‬
‫‪ .2‬طريقة تنظيم هذا الكتاب ‪15..............................................................................‬‬
‫ٌ‬
‫وشرح أقل ‪15...............................................................................‬‬ ‫ٌ‬
‫شيفرات أكثر‬ ‫‪.3‬‬
‫‪ .4‬لماذا أستخدم )(‪ alert‬في المثلة؟! ‪15..................................................................‬‬
‫‪ .5‬التنسيق واللوان ‪16........................................................................................‬‬
‫‪ .6‬افهم الدالة )(‪ text‬في ‪ jQuery‬فهمً ا تامً ا قبل قراءة هذا الكتاب ‪17.................................‬‬
‫‪ .7‬ما هو ‪ JS Bin‬ولماذا أستخدمه؟ ‪18......................................................................‬‬
‫الفصل الول‪ :‬المفاهيم الساسية في ‪19.............jQuery‬‬

‫‪ .1‬المفاهيم الساسية وراء ‪20...................................................................... jQuery‬‬
‫‪ .2‬المفهوم وراء المفهوم الذي يقف وراء ‪21..................................................... jQuery‬‬
‫‪ .3‬كيفية التحقق من إصدار ‪22..................................................................... jQuery‬‬
‫‪ .4‬تتطلب ‪ jQuery‬أن يكون مستند ‪ HTML‬بنمط المعايير أو نمط المعايير التقريبي‪23............‬‬
‫ِ‬
‫ضمن جميع ملفات ‪ CSS‬قبل تضمين ‪24....................................................... jQuery‬‬ ‫‪.5‬‬
‫‪ .6‬استخدام نسخة ُمستضافة من ‪24............................................................. jQuery‬‬
‫‪ .7‬تنفيذ الشيفرة عندما تجهز شجرة ‪ DOM‬لكن قبل الحدث ‪25..................window.onload‬‬
‫‪ .8‬تنفيذ شيفرات ‪ jQuery‬عندما ينتهي المتصفح من تحميل كامل المستند‪28.....................‬‬

‫‪ .9‬تنفيذ شيفرة ‪ jQuery‬عندما ُت ّ‬
‫فسر شجرة ‪ ،DOM‬لكن دون استخدام )(‪30.................ready‬‬
‫‪ .10‬استخدام ‪ $‬دون القلق من حدوث تضاربات ‪31......................................................‬‬
‫‪ .11‬فهم كيفية عمل السلسل في ‪33............................................................. jQuery‬‬
‫‪ .12‬كسر السلسلة باستخدام دوال »هادمة« ‪34..........................................................‬‬
‫‪ .13‬استخدام الدوال الهادمة في ‪ jQuery‬والعودة منها باستخدام )(‪36........................end‬‬
‫ُ‬
‫متعددة الستخدامات ‪38...............................................................‬‬ ‫ُ‬
‫الدالة ‪jQuery‬‬ ‫‪.14‬‬
‫‪ .15‬معرفة متى ُتشير الكلمة المحجوزة ‪ this‬إلى كائنات ‪41.....................................DOM‬‬
‫ً‬
‫مباشرة دون ‪45.................jQuery‬‬ ‫‪ .16‬استخراج العناصر من مجموعة التغليف لستخدامها‬
‫‪ .17‬التحقق إن كانت مجموعة التغليف فارغة ‪48........................................................‬‬
‫‪ .18‬إنشاء اسم بديل للوصول إلى الدالة ‪50..................................................... jQuery‬‬
‫كافيا ‪51.......................‬‬
‫ً‬ ‫‪ .19‬استخدام )(‪ .each‬عندما ل يكون الدوران الضمني على العناصر‬
‫‪ُ .20‬‬
‫ستعاد العناصر في مجموعة تغليف ‪ jQuery‬بنفس ترتيب ورودها في المستند‪56 ...........‬‬
‫‪ .21‬تحديد ما هو السياق المُ ستخ َدم من دالة ‪57............................................... jQuery‬‬
‫‪ .22‬إنشاء بُنية ‪ DOM‬كاملة مع أحداثها في سلسلةٍ وحيدة ‪58.........................................‬‬
‫الفصل الثاني‪ :‬تحديد العناصر في ‪61...................jQuery‬‬

‫حدد العناصر إن ُاستعمِ َلت بمفردها‪62....................‬‬ ‫‪ .1‬يمكن لمُ ِ‬
‫رشحات ‪ jQuery‬الخاصة أن ُت ِ‬
‫ِ‬
‫المرش َحين ‪ :hidden‬و ‪62................................................... :visible‬‬ ‫‪ .2‬تمييز الفرق بين‬
‫‪ .3‬استخدام الدالة )(‪ is‬لعادة قيمة منطقية ‪64...........................................................‬‬
‫‪ .4‬يمكنك أن ُت ِ‬
‫مرر أكثر من مُ ِ‬
‫حدد إلى ‪66......................................................... jQuery‬‬
‫أن عنصرًا ما قد ُح ِد َد‪67...........................................................................‬‬

‫‪ .5‬معرفة ّ‬
‫خصصة لتحديد العناصر ‪68.........................................................‬‬

‫ّ‬ ‫‪ .6‬إنشاء ُم ِ‬
‫رشحات مُ‬
‫‪ .7‬الفروقات بين الترشيح عبر الترتيب الرقمي والترشيح عبر العلقات في شجرة ‪71.....DOM‬‬
‫‪ .8‬تحديد العناصر عبر خاصية ‪ id‬عندما تحتوي قيمتها على محارف خاصة ‪77....................‬‬
‫‪ .9‬إنشاء سلسلة من المُ ِ‬

‫رشحات ‪78..........................................................................‬‬
‫‪ .10‬إنشاء مُ ِ‬
‫رشحات متشعبة ‪80.............................................................................‬‬
‫‪ .11‬التعرف على استعمالت المُ رشح )(‪82.................................................... :nth-child‬‬
‫‪ .12‬تحديد العناصر عبر البحث في قيم الخاصيات باستخدام التعابير النمطية‪84................‬‬
‫‪ .13‬الفرق بين تحديد الولد المباشرين وبين تحديد البناء والحفاد‪86............................‬‬
‫‪ .14‬تحديد الولد المباشرين عندما يُ ح ّدد السياق ‪88...................................................‬‬
‫الفصل الثالث‪ :‬التنقل في شجرة ‪90.......................DOM‬‬

‫‪ .1‬الفرق بين الدالتين )(‪ find‬و )(‪91.................................................................. filter‬‬
‫‪ .2‬تمرير دالة إلى )(‪ً filter‬‬

‫بدل من تعبير ‪94.................................................................‬‬
‫‪ .3‬التنقل في شجرة ‪97................................................................................. DOM‬‬
‫‪ .4‬دوال التنقل تقبل تمرير تعبيرات ‪ CSS‬كوسائط اختيارية ‪99........................................‬‬
‫الفصل الرابع‪ :‬تعديل شيفرات ‪101........................HTML‬‬

‫‪ .1‬إنشاء وإضافة وتعديل ‪ HTML‬أثناء التنفيذ ‪102......................................................‬‬
‫‪ .2‬فهم آلية عمل الدالة )(‪105......................................................................... index‬‬
‫‪ .3‬فهم طريقة عمل الدالة )(‪108....................................................................... text‬‬
‫‪ .4‬تبديل أو إزالة المحارف باستخدام التعابير النمطية ‪109............................................‬‬
‫‪ .5‬شرح كيفية عمل الدالة )(‪110................................................................ contents‬‬
‫‪ .6‬استخدم )(‪ remove‬لن يُ زيل العناصر من مجموعة التغليف ‪115....................................‬‬

‫الفصل الخامس‪ :‬نماذج ‪117................................HTML‬‬
‫‪ .1‬تفعيل وتعطيل عناصر النموذج ‪118.....................................................................‬‬
‫معط ًل‪120....................................‬‬
‫ّ‬ ‫‪ .2‬كيفية تحديد إذا كان أحد عناصر النموذج ُمفعّ ًل أم‬
‫‪ .3‬اختيار أو عدم اختيار مربع اختيار أو مربع انتقاء ‪121...............................................‬‬
‫‪ .4‬اختيار وإلغاء اختيار ِ‬

‫عدة مربعات اختيار وانتقاء ‪123..............................................‬‬
‫‪ .5‬معرفة فيما إذا كان مربع اختيار أو مربع انتقاء مختارًا أم ل ‪124..................................‬‬
‫مخفيا ‪126...........................................................‬‬
‫ً‬ ‫ٌ‬
‫حقل في النموذج‬ ‫‪ .6‬معرفة إذا كان‬
‫‪ .7‬ضبط أو الحصول على قيمة الخاصية ‪ value‬لحقل إدخال ‪127....................................‬‬
‫‪ .8‬ضبط والحصول على القيمة المُ ح ّددة لعنصر اختيار من متعدد ‪129...............................‬‬
‫‪ .9‬ضبط والحصول على النص الموجود ضمن عنصر ‪130...................................textarea‬‬
‫‪ .10‬ضبط والحصول على قيمة الخاصية ‪ value‬للعنصر ‪131.................................button‬‬
‫‪ .11‬تعديل مكونات العنصر ‪132.................................................................... select‬‬
‫‪ .12‬تحديد حقول النموذج عبر نوعها ‪135.................................................................‬‬
‫‪ .13‬تحديد جميع عناصر النماذج ‪136......................................................................‬‬
‫الفصل السادس‪ :‬الحداث في ‪138......................jQuery‬‬

‫مقيدين بحدث )(‪ ready‬واحد فقط ‪139..........................................................‬‬
‫‪ .1‬لسنا ّ‬
‫‪ .2‬إضافة أو إزالة الحداث باستخدام )(‪ on‬و )(‪139................................................. of‬‬
‫برمجيا عبر دوال الحداث المختصرة ‪143..........................‬‬

‫ً‬ ‫‪ .3‬استدعاء معالجات الحداث‬
‫وح َدت ‪ jQuery‬طريقة التعامل مع الكائن ‪144................................................. event‬‬

‫‪ّ .4‬‬
‫‪ .5‬فهم مجالت أسماء الحداث في ‪146......................................................... jQuery‬‬
‫‪ .6‬ما هو تفويض الحداث ‪150..............................................................................‬‬

‫‪ .7‬تطبيق دوال معالجة الحداث على عناصر ‪ DOM‬بغض النظر عن تحديث شجرة ‪152 . .DOM‬‬
‫‪ .8‬إضافة دالة لمعالجة أكثر من حدث ‪154.................................................................‬‬
‫‪ .9‬تعطيل السلوك الفتراضي للمتصفح باستخدام )(‪155..........................preventDefault‬‬
‫‪ .10‬إيقاف نشر الحداث عبر )(‪156.................................................. stopPropagation‬‬
‫‪ .11‬إلغاء سلوك المتصفح الفتراضي ونشر الحداث عبر ‪158........................return false‬‬
‫‪ .12‬إنشاء أحداث خاصة وإطلقها باستخدام )(‪159........................................... trigger‬‬
‫‪ .13‬نسخ الحداث مع عناصر ‪161................................................................... DOM‬‬
‫‪ .14‬استخدام ‪ console‬لظهار الحداث المرتبطة بعناصر ‪162.................................DOM‬‬
‫‪ .15‬الحصول على إحداثيات ‪ X‬و ‪ Y‬لمؤشر الفأرة في إطار العرض ‪163...............................‬‬
‫عنصر آخر ‪164..................................‬‬ ‫ً‬

‫نسبة إلى‬ ‫‪ .16‬الحصول على إحداثيات ‪ X‬و ‪ Y‬للفأرة‬
‫ٍ‬
‫الفصل السابع‪ jQuery :‬ومتصفح الويب‪167.....................‬‬

‫‪ .1‬تعطيل القائمة المنسدلة الظاهرة بالضغط على الزر اليمن للفأرة ‪168.............................‬‬
‫‪ .2‬تمرير نافذة المتصفح ‪169.................................................................................‬‬
‫الفصل الثامن‪ :‬الضافات في ‪171.......................jQuery‬‬

‫‪ .1‬استخدام ‪ $‬عند إنشاء إضافة ‪172.......................................................................‬‬
‫جزءا من دوال ‪173...........jQuery‬‬

‫ً‬ ‫لح َقة بالكائن ‪ jQuery.fn‬ستصبح‬
‫‪ .2‬الضافات الجديدة المُ َ‬
‫‪ُ .3‬‬
‫ستشير ‪ this‬داخل إضافة إلى كائن ‪ jQuery‬الحالي ‪175.............................................‬‬
‫‪ُ .4‬تس ببتخ َدم )(‪ each‬للم ببرور على كببائن ‪ jQuery‬وتوف ببير مرجعي ببة إلى كببل عنص ببر في ذاك الكببائن‬
‫باستخدام ‪176............................................................................................. this‬‬
‫‪ُ .5‬تعيد الضافات عمومً ا كائن ‪ jQuery‬لكي نتمكن من متابعة السلسببلة باسببتخدام دوال ‪jQuery‬‬
‫الخرى ‪178......................................................................................................‬‬
‫‪ .6‬خيارات الضافة الفتراضية ‪180........................................................................‬‬
‫‪ .7‬خيارات مخصصة للضافة ‪182..........................................................................‬‬
‫‪ .8‬تجاوز القيم الفتراضية دون تغيير شيفرة الضافة ‪184............................................‬‬
‫برمجيا ‪186......................................‬‬
‫ً‬ ‫‪ .9‬إنشاء العناصر أثناء التنفيذ واستدعاء الضافات‬
‫الفصل التاسع‪ :‬تحسين أداء شيفرات ‪189..............jQuery‬‬

‫‪ .1‬استخدم آخر إصدار من ‪190.................................................................... jQuery‬‬
‫حسن من الداء ‪190............................................‬‬

‫سي ّ‬
‫‪ .2‬تمرير »سياق« إلى دالة ‪ُ jQuery‬‬
‫‪ .3‬فهم كيفية تحسين أداء المُ ِ‬

‫حددات ‪193................................................................‬‬
‫‪ .4‬تخزين مجموعة العناصر المُ ح ّددة التي ُتستخ َدم أكثر من مرة مؤق ًتا‪194.......................‬‬
‫أبق التغييرات المُ ح َدثة على ‪ DOM‬أقل ما يمكن ‪196.................................................‬‬

‫‪ِ .5‬‬
‫‪ .6‬تحسين الداء عبر تمرير كائن يحتوي على مفاتيح وقيم إلى دوال ‪197...............jQuery‬‬
‫عدة ُم ِ‬
‫حددات إلى دالة ‪198.......................................... jQuery‬‬ ‫‪ .7‬تحسين الداء بتمرير ِ‬
‫‪ .8‬تحسين الداء باستخدام الدوال كسلسلة ‪198.........................................................‬‬
‫‪ .9‬استخدم حلقة التكرار ‪ for‬عند التعامل مع حلقات التكرار الكبيرة ‪199............................‬‬
‫ً‬
‫مباشرة‪200..............‬‬ ‫‪ .10‬تغيير المظهر باستخدام ‪ ID‬و ‪ً Class‬‬
‫بدل من تعديل خاصيات ‪style‬‬
‫الفصل العاشر‪ :‬المؤثرات في ‪203.......................jQuery‬‬

‫‪ .1‬تعطيل جميع دوال المؤثرات في ‪204......................................................... jQuery‬‬
‫‪ .2‬فهم آلية عمل دالة الحركات )(‪206................................................................ stop‬‬
‫‪ .3‬معرفة إن كان العنصر يخضع إلى حركة عبر ‪208....................................... :animated‬‬
‫‪ .4‬استخدام الدوال )(‪ show‬و )(‪ hide‬و )(‪ toggle‬دون حركة ‪209.....................................‬‬
‫‪ .5‬فهم الحركات المتزامنة وغير المتزامنة ‪211...........................................................‬‬

‫‪ .6‬الدالة )(‪ animate‬هي الدالة الساسية ‪214.............................................................‬‬
‫‪ .7‬فهم آلية عمل دوال الختفاء في ‪215......................................................... jQuery‬‬
‫الفصل الحادي عشر‪ :‬تقنية ‪217.............................Ajax‬‬

‫‪ .1‬الدالة )(‪ ajax‬هي الدالة الساسية ‪218...................................................................‬‬
‫‪ .2‬تدعم ‪ jQuery‬تقنية ‪ JSONP‬العابرة للنطاقات ‪220....................................................‬‬
‫‪ .3‬منع المتصفح من تخزين طلبيات ‪ XHR‬مؤق ًتا ‪222....................................................‬‬
‫الفصل الثاني عشر‪ :‬مواضيع متفرقة‪224.......................‬‬

‫‪ .1‬تخزين البيانات في عناصر ‪225................................................................... DOM‬‬
‫‪ .2‬إضافة دوال جديدة إلى مجال أسماء ‪227................................................... jQuery‬‬
‫‪ .3‬حساب قيمة خاصية من خاصيات أحد العناصر ‪229.................................................‬‬
‫‪ .4‬استخدام خاصيات ‪ CSS‬أو مكافآتها في ‪230........................................... JavaScript‬‬
‫‪ .5‬الوصول إلى محتوى ‪235........................................................................ iframe‬‬
‫‪ .6‬التحميل المسبق للصور ‪235...............................................................................‬‬
‫‪ .7‬التحميل المسبق للوسائط عبر ‪237................................................................ XHR‬‬
‫عط َلت‬
‫‪ .8‬إض ببافة فئ ببة ‪ CSS‬إلى عناص ببر ‪ HTML‬لكي تظه ببر تل ببك العناص ببر في المتص ببفحات ال ببتي ّ‬
‫‪239................................................................................................. JavaScript‬‬
‫تمهيد‬
‫ت‬
‫تعلم ‪jQuery‬‬ ‫تمهيد‬
‫برحا بسب ً‬
‫بيطا مختصببرًا لكي تصبببح‬ ‫ُ‬
‫كتبت هذا الكتاب لشرح المفاهيم الساسية لمكتبببة ‪ jQuery‬شب ً‬
‫ُ‬
‫والغبببرض منبببه هبببو تعريفبببك على الممارسبببات الشبببائعة بين‬ ‫ُمبرمِ ًج ا ذا مسبببتوى متوسبببط أو متقبببدم‪،‬‬
‫بل فيب ببه على المعلومب ببات اللزمب ببة لكي تصب بببح مطب ب ِبور‬ ‫ُ‬
‫صب ببفوف مطب ببوري ‪jQuery‬؛ ويحتب ببوي كب ببل فصب ب ٍ‬
‫‪ jQuery‬محترف‪.‬‬
‫كتبب ب ا تعريفي ب ً‬
‫بة بمكتب ببة‬ ‫بوع مَ ن ق ببرؤوا ً‬ ‫ٌ‬
‫بم أول ن ب ٍ‬
‫بواع من الق ببراء‪ .‬يض ب ُ‬
‫ٍ‬ ‫ملئم لثلث ببة أن ب‬ ‫ه ببذا الكت بباب‬
‫‪ jQuery‬ويتطلعون إلى الخطوة التالية‪ .‬والنوع الثاني من القراء هم مطورو ‪ JavaScript‬ممن لديهم‬
‫أن‬ ‫ُ‬
‫أخبرتببك ّ‬ ‫خبببرة وتجربببة مببع إحببدى المكتبببات ويريببدون الن تعلم ‪ jQuery‬بسببرعة‪ .‬ول ُتفاجببأ إذا‬
‫النببوع الثببالث هببو »أنببا«! أنشب ُ‬

‫بأت هببذا الكتبباب ليصبببح مرجعً ب ا شخصب ًبيا لمفبباهيم ‪ ،jQuery‬وأرجببو أن‬
‫يتوافر هذا النوع من الكتب لكل مكتبةٍ من مكتبات ‪.JavaScript‬‬
‫من المهم أن تتعببرّ ف – قبببل أن نبببدأ– على بعض المببور التنظيميببة المسببتعملة في الكتبباب‪ ،‬أرجببو‬
‫معلومات مفيدةٍ ستساعدك في الستفادة من الكتاب‪.‬‬

‫ٍ‬ ‫ّ‬
‫أل تتخطى هذا القسم لنه يحتوي على‬
‫‪ .1‬اصطلحاات ‪jQuery‬‬
‫‪ (jQuery‬أقصبببببببد ببببببببه »الدالبببببببة البانيبببببببة ‪«jQuery‬‬ ‫المصبببببببطلح »دالبببببببة ‪function) « jQuery‬‬
‫)أي )(‪ jQuery‬أو الشكل البديل )(‪ ،($‬وهي ُتستخ َدم لنشاء نسخة من كائن ‪.jQuery‬‬
‫ّ‬
‫المغلف ببة )‪(wrapped‬‬ ‫المص ببطلح »مجموع ببة التغلي ببف« )‪ (wrapper set‬يُ ش ببير إلى عناص ببر ‪DOM‬‬
‫ح ب ِد َدت‬
‫وسيس ب ببتعمَ ل ه ب ببذا المص ب ببطلح تحديب ب ب ًدا للش ب ببارة إلى العناص ب ببر ال ب ببتي ُب ب‬
‫ُ‬ ‫ض ب ببمن دوال ‪.jQuery‬‬
‫باسبببببببتخدام دالبببببببة ‪ .jQuery‬ربمبببببببا تسبببببببمع البعض يبببببببدعو هبببببببذا الصبببببببطلح »بمجموعبببببببة ‪«jQuery‬‬
‫)‪ ،(jQuery collection‬لكنني سأستخدم في هذا الكتاب المصطلح »مجموعة التغليف«‪.‬‬
‫‪14‬‬
‫‪ .2‬طريقة تنظيم هذا الكتاب‬

‫تقريبب ا‪ .‬يحتببوي كببل‬
‫ً‬ ‫فصول مرتبببةٍ بببترتيب أقسببام توثيببق ‪ jQuery‬نفسببه‬
‫ٍ‬ ‫قس ٌم إلى‬
‫هذا الكتاب مُ ّ‬
‫تقض وق ًتببا‬
‫ِ‬ ‫مفبباهيم عن ‪ jQuery‬معزولببةٍ عن بعضببها وهي ترتبببط بعنببوان الفصببل‪ .‬إذا لم‬
‫ٍ‬ ‫فصببل على‬
‫ٍ‬
‫ً‬
‫طويل في صفحات التوثيق في موقع ‪ jquery.com‬فأنصحك بفعل ذلك قبل قراءة هذا الكتاب‪.‬‬
‫وشرح أقل‬
‫ٌ‬ ‫شيفرات أكثر‬
‫ٌ‬ ‫‪.3‬‬
‫بودة فيببه جيب ًدا‪ .‬يجب أن تنظببر إلى‬ ‫متعم ًدا أن يتفحص القببارئُ المثلب َ‬
‫بة الموجب َ‬ ‫ِ‬ ‫ُ‬
‫كتبت هببذا الكتبباب‬
‫أن الش ببيفرة تس بباوي أل ببف كلم ببة‪ .‬ل تقل ببق إن زاد‬
‫بق بالش ببيفرة‪ .‬أرى شخص ب ًبيا ّ‬
‫بانوي ملح ب ٍ‬‫بأمر ث ب‬
‫الش ببرح ك ب ٍ‬
‫ٍ‬
‫ِ‬
‫وتكببرر هببذه‬ ‫ً‬
‫مببرة أخببرى‪،‬‬ ‫ِ‬
‫تفحص الشببيفرة وقببراءة التعليقببات‬ ‫الشببرح حيرتببك في البدايببة؛ إذ عليببك‬
‫ً‬
‫واضحا‪ .‬أرجو أن تصببل إلى مرحلببةٍ من الخبببرة كيل‬ ‫العملية حتى يصبح المفهوم الذي أحاول شرحه‬
‫ً‬
‫توثيقا جي ًدا لكي تستوعب أحد المفاهيم البرمجية‪.‬‬ ‫تحتاج إل إلى شيفرةٍ موثقةٍ‬
‫‪ .4‬لماذا أستخدم )(‪ alert‬في المثلة؟!‬

‫ِ‬
‫صدق أو ل تصببدق‪ :‬هببذه الدالببة عمليببة‬ ‫أرجو أن تقتنع أنني أكره الدالة )(‪ alert‬أكثر منك‪ ،‬لكن‬
‫بحيح ّ‬
‫أنه ليس من الضببروري اسببتخدامها‪ ،‬إل‬ ‫ٌ‬ ‫بكل ممتبباز في جميببع المتصببفحات؛ صب‬
‫وتعمببل عملهببا بشب ٍ‬
‫أنبببني لم أشبببأ إضبببافة بعض التعقيبببدات الناجمبببة عن اسبببتخدام ‪ console‬لكي أحافبببظ على وضبببوح‬
‫الشبببيفرات‪ .‬فهبببدفي هبببو تقليبببل أيّببب ة شبببيفرات إضبببافية ل تخبببدم غبببرض شبببرح المفهبببوم البببذي أريد‬
‫إيصاله إليك‪.‬‬
‫‪15‬‬
‫‪ .5‬التنسيق واللوان‬
‫سأسبببببتخدمُ الخ ب ببط الع ب ببريض في شبببببيفرات ‪) JavaScript‬كم ب ببا في المثبببببال التي( للش ب ببارة إلى‬
‫ً‬
‫مباشرة بببالمفهوم الببذي أشببرحه‪ ،‬وسأسببتعمل اللببون الفضببي‬ ‫الشيفرات والسطر البرمجية التي تتعلق‬
‫الفاتح للشارة إلى التعليقات‪:‬‬
‫>‪<!DOCTYPE html‬‬
‫>"‪<html lang="en‬‬
‫>‪<body‬‬
‫>‪ --‬تعليق ‪

<script
y.min.js"></script>
<script>
(function($)
{
/* ‫الناتج‬: "<p>Hi, I am the content inside of the

iframe's body element.</p>" */
alert($('iframe').contents().find('body').html());
// ... jQuery ‫أو عبر تمرير »السياق« إلى الدالة‬
/* ‫الناتج‬: "<p>Hi, I am the content inside of the
iframe's body element.</p>" */
alert($('body', $('iframe').contents()).html());
})(jQuery);
</script>
</body>
</html>
114
‫حاول الكثيرون استخدام )(‪ contents‬للوصول إلى محتوى عنصر‬
‫>‪ <iframe‬ليس موجو ًدا بنفس النطاق وواجهوا مشكلة »سياسة المصدر‬
‫الواحد« )‪ّ .(same-origin policy‬‬
‫تأكد ّ‬
‫أنك تفهم محدوديات استخدام‬
‫‪ JavaScript‬وعناصر ‪ iframe‬قبل أن تحاول الوصول إلى أو تعديل محتوى‬ ‫ملحاظة‬

‫ٌ‬
‫موجودة في ‪http://code.google.com/p/jquery-‬‬ ‫ٌ‬
‫إضافة )‬ ‫‪ .iframe‬هنالك‬
‫التفافيا إذا أردت التواصل مع >‪<iframe‬‬

‫ً‬ ‫‪ (crossframe/‬التي تعطيك ً‬
‫حل‬
‫نطاق آخر‪.‬‬
‫ٍ‬ ‫موجودٍ في‬
‫‪ .6‬استخدم )(‪ remove‬لن ُيزيل العناصر من مجموعة التغليف‬

‫عنببدما تسببتخدم )(‪ remove‬لحببذف جببزء من ‪ DOM‬فببإن العناصببر الموجببودة ضببمن بُنيببة ‪DOM‬‬
‫إذا أن تحبببذف عنصبببرًا‪ ،‬ثم تجبببري‬ ‫ً‬

‫موجبببودة ضبببمن مجموعبببة التغليبببف‪ .‬يمكنبببك ً‬ ‫المحذوفبببة سبببتبقى‬
‫ً‬
‫مرة أخرى في شجرة ‪ ،DOM‬وذلك عبببر سلسببلة ‪ jQuery‬وحيببدة‬ ‫تعديلت على ذاك العنصر‪ ،‬ثم تضعه‬
‫>‪<body‬‬
‫>‪<div>remove me</div‬‬
‫‪<script‬‬
‫‪115‬‬
‫{‬
‫=‪$('div').remove().html('<a href‬‬
‫)'>‪"http://www.jQuery.com">jQuery</a‬‬
‫;)'‪.appendTo('body‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫َ‬
‫استخدمت )(‪ remove‬لحذف العناصر من شببجرة ‪ ،DOM‬فهببذا‬ ‫الفكرة الساسية هنا هي ّ‬
‫أنك إذا‬
‫ست َ‬
‫حذف من مجموعة التغليف في ‪.jQuery‬‬ ‫أن تلك العناصر ُ‬
‫ل يعني ّ‬
‫‪116‬‬
‫الفصل الخامس‪:‬‬
‫نماذج ‪HTML‬‬
‫‪5‬‬
jQuery ‫تعلم‬ HTML ‫ نماذج‬:‫الفصل الخامس‬
‫ تفعيل وتعطيل عناصر النموذج‬.1

disabled ‫ تعطيببل عناصببر النمبباذج عبببر ضبببط الخاصببية‬jQuery ‫نسببتطيع بسببهولة باسببتخدام‬
‫ ثم‬،‫ يمكنن ببا فع ببل ذل ببك بك ببل بس بباطة باختي ببار حق ببل إدخ ببال‬.disabled ‫لعناص ببر النم ببوذج إلى القيم ببة‬
:(‫ )مثال حي‬disabled ‫ لضبط الخاصية‬attr() ‫استخدام الدالة‬
<!DOCTYPE html>
<html lang="en">
<body>
<input name="button" type="button" id="button"
value="button" />
<script
y.min.js"></script>
<script>
(function($)
{
$('#button').attr('disabled', 'disabled');
})(jQuery);
</script>
</body>
</html>
118
ّ ُ‫لتفعيببببببل حقببببببل م‬
‫ باسببببببتخدام الدالببببببة‬disabled ‫ يمكننببببببا ببسبببببباطة حببببببذف الخاصببببببية‬، ‫عطبببببب ل‬
‫ إلى سلسب ببلةٍ نصبببيةٍ فارغبببة باسب ببتخدام‬disabled ‫ أو عب بببر ضب بببط قيمب ببة الخاصب ببية‬removeAttr()
:(‫ )مثال حي‬attr()
<!DOCTYPE html>
<html lang="en">
<body>
<input name="button" type="button" id="button"
value='button' disabled="disabled" />
<script
y.min.js"></script>
<script>
(function($)
{
$('#button').removeAttr('disabled');
// ‫أو‬
// $('#button').attr('disabled', '');
})(jQuery);
</script>
</body>
</html>
119
‫معط ًل‬
ّ ‫فع ًل أم‬
ّ ‫ كيفية تحديد إذا كان أحاد عناصر النموذج ُم‬.2
ِ ُ‫باستخدام م‬
‫ يسببهل علينببا تحديببد‬:enabled ‫ أو‬:disabled ‫ الخاصة بالنمبباذج‬jQuery ‫رشحات‬
ّ ‫ انظببر‬.(boolean ) ‫معط ًل أم مفعّ ًل بإعببادة قيمببة منطقيببة‬

‫مليا إلى‬ ّ ‫ومعرفة إذا كببان عنصببرٌ في نمب‬
‫بوذج‬
ٍ
:(‫الشيفرة التية للتوضيح )مثال حي‬
<!DOCTYPE html>
<html lang="en">
<body>
<input name="button" type="button" id="button1"
value="button" />
<input name="button" type="button" id="button2"
disabled="disabled" value="button" />
<script
y.min.js"></script>
<script>
(function($)
{
ً‫ُفع‬
// is ‫ّل باستخدام‬ ‫اختبار إن كان م‬
alert($('#button1').is(':enabled')); // ‫الناتج‬: true
ّ‫ُرش‬
// ‫ِح‬ ‫أو عبر استخدام م‬
alert($('#button1:enabled').length); // ‫الناتج‬: "1"
120
// is ‫ُعطًّل باستخدام‬
‫اختبار إن كان م‬
alert($('#button2').is(':disabled')); // "true"
ّ‫ُرش‬
// ‫ِح‬ ‫أو عبر استخدام م‬
alert($('#button2:disabled').length); // ‫الناتج‬: "1"
})(jQuery);
</script>
</body>
</html>
‫ اختيار أو عدم اختيار مربع اختيار أو مربع انتقاء‬.3

checked ‫( عبببر ضبببط خاصببية‬checkbox) ‫( أو مربببع اختيببار‬radio) ‫يمكنك اختيببار مربببع انتقباء‬
:(‫ )مثال حي‬attr() ‫ باستخدام الدالة‬true ‫إلى القيمة‬
<!DOCTYPE html>
<html lang="en">
<body>
<input name="" value="" type="checkbox" />
<input name="" value="" type="radio" />
<script
y.min.js"></script>
<script>
121
(function($)
{
// ‫اختيار جميع مربعات الختيار أو النتقاء‬
$('input:checkbox,input:radio')
.attr('checked', 'checked');
})(jQuery);
</script>
</body>
</html>
‫ باسببببببتخدام الدالببببببة‬checked ‫ فاحببببببذف الخاصببببببية‬،‫للغبببببباء اختيببببببار مربببببببع اختيببببببار أو انتقبببببباء‬
:(‫ إلى سلسلةٍ نصيةٍ فارغة )مثال حي‬checked ‫ أو عبر ضبط قيمة الخاصية‬removeAttr()
<!DOCTYPE html>
<html lang="en">
<body>
<input name="" type="checkbox" value=""
checked="checked">
<input name="" type="radio" value="" checked="checked">
<script
y.min.js"></script>
<script>
(function($)
{
122
$('input').removeAttr('checked');
// ‫أو‬
$('input').attr('checked', '');
})(jQuery);
</script>
</body>
</html>
‫عدة مربعات اختيار وانتقاء‬

ِ ‫ اختيار وإلغاء اختيار‬.4
ِ ‫ لختيببار عب‬jQuery ‫ في‬val() ‫يمكنك استخدام الدالببة‬
‫ وذلببك بتمريببر‬.‫بدة حقببول اختيببار وانتقبباء‬
ِ ‫مصببفوفة تحتببوي عب‬

‫ لحقببول الختيببار‬value ‫بدة سلسببل نصببية تتوافببق قيمتهببا مببع قيمببة الخاصببية‬
:(‫والنتقاء )مثال حي‬
<!DOCTYPE html>
<html lang="en">
<body>
<input type="radio" value="radio1">
<input type="radio" value="radio2">
<input type="checkbox" value="checkbox1">
<input type="checkbox" value="checkbox2">
<script
y.min.js"></script>
<script>
123
‫تعلم ‪jQuery‬‬ ‫الفصل الخامس‪ :‬نماذج ‪HTML‬‬
‫{‬
‫اختيار جميع حقول الختيار والنتقاء في الصفحة ‪//‬‬
‫‪$('input:radio,input:checkbox').val(['radio1',‬‬
‫;)]'‪'radio2', 'checkbox1', 'checkbox2‬‬
‫يمكنك استخدام ما يلي للغاء اختيار جميع العناصأر ‪//‬‬

‫)'‪// $('input:radio,input:checkbox‬‬
‫‪//‬‬ ‫;)'‪.removeAttr('checked‬‬
‫أو ‪//‬‬
‫)'‪// $('input:radio,input:checkbox‬‬
‫‪//‬‬ ‫;)'' ‪.attr('checked',‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫إذا كان مربع اختيار أو انتقاء ُمختارًا من قبل‪ ،‬فلن يؤدي استخدام )(‪ val‬إلى‬
‫ملحاظة‬
‫إلغاء اختياره‪.‬‬
‫مختارا أم ل‬
‫ً‬ ‫‪ .5‬معرفة فيما إذا كان مربع اختيار أو مربع انتقاء‬
‫يمكنببك معرفببة إذا تم اختيببار أو لم يتم اختيببار مربببع اختيببار أو انتقبباء عبببر اسببتخدام المُ ِ‬
‫رش بح‬
‫عدة استخدامات للمُ ِ‬

‫رشح ‪) :checked‬مثال حي(‪:‬‬ ‫‪ .:checked‬انظر إلى الشيفرة التية لتشاهد ِ‬
‫‪124‬‬
<!DOCTYPE html>
<html lang="en">
<body>
<input checked="checked" type="checkbox" />
<input checked="checked" type="radio" />
<script
y.min.js"></script>
<script>
(function($)
{
// ‫الناتج‬: "true"
alert($('input:checkbox').is(':checked'));
// ‫أو إضافة العناصأر إلى مجموعة التغليف إن‬

// 1 ‫ الناتج‬.‫تم اختيارها‬
alert($('input:checkbox:checked').length);
alert($('input:radio').is(':checked'));
// ‫أو إضافة العناصأر إلى مجموعة التغليف إن‬

// 1 ‫ الناتج‬.‫تم اختيارها‬
alert($('input:radio:checked').length);
})(jQuery);
125
</script>
</body>
</html>
‫مخفيا‬
ً ‫حاقل في النموذج‬
ٌ ‫ معرفة إذا كان‬.6
ِ ُ‫( عبببر الم‬hidden) ‫مخفي ا‬
‫ انظببر إلى‬.:hidden ‫رشبح‬ ‫ًب‬ ٌ
‫حقل ما في النموذج‬ ‫يمكنك معرفة إذا كان‬
ِ ُ‫الشيفرة التية لتعاين استخدامات مختلفة للم‬

:(‫ )مثال حي‬:hidden ‫رشح‬
<!DOCTYPE html>
<html lang="en">
<body>
<input type="hidden" />
<script
y.min.js"></script>
<script>
(function($)
{
alert($('input').is(':hidden'));
// ‫أو إضافة العناصأر المخفية إلى مجموعة التغليف‬

// 1 ‫الناتج‬
alert($('input:hidden').length);
126
})(jQuery);
</script>
</body>
</html>
‫ لحقل إدخال‬value ‫ ضبط أو الحصول على قيمة الخاصية‬.7

‫ لعنصر إدخببال )أي‬value ‫ لضبط أو الحصول على قيمة الخاصية‬val() ‫يمكن استخدام الدالة‬
submit ‫ و‬reset ‫ و‬radio ‫ و‬password ‫ و‬image ‫ و‬hidden ‫ و‬checkbox ‫ و‬button ‫عببنببباصببببببر‬
‫بال‬ َ
ٍ ‫بل إدخب‬
ِ ‫ سأضبط في المثببال التي قيمببة كببل حقب‬.(… HTML5 ‫ وغير ذلك من عناصر نماذج‬text ‫و‬
:(‫ )مثال حي‬val() ‫ و‬alert() ‫ ثم سأعرضها عبر‬val() ‫باستخدام‬
<!DOCTYPE html>
<html lang="en">
<body>
<input type="button" />
<input type="checkbox" />
<input type="image" />
<input type="password" />
<input type="radio" />
<input type="reset" />
<input type="submit" />
<input type="text" />
127
<script
y.min.js"></script>
<script>
(function($)
{
$('input:button').val('I am a button')
$('input:checkbox').val('I am a checkbox')
$('input:hidden').val('I am a hidden input')
$('input:image').val('I am a image')
$('input:password').val('I am a password')
$('input:radio').val('I am a radio')
$('input:reset').val('I am a reset')
$('input:submit').val('I am a submit')
$('input:text').val('I am a text')
// value ‫إظهار قيمة الخاصأية‬

alert($('input:button').val());
alert($('input:checkbox').val());
alert($('input:hidden').val());
alert($('input:image').val());
alert($('input:password').val());
alert($('input:radio').val());
alert($('input:reset').val());
alert($('input:submit').val());
128
‫;))(‪alert($('input:text').val‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫حددة لعنصر اختيار من متعدد‬

‫الم ّ‬
‫‪ .8‬ضبط والحصول على القيمة ُ‬
‫يمكننببا تحديببد القيم المُ ختببارة باسببتخدام الدالببة )(‪ val‬في عنصببر اختيببار من متعببدد )‪multi-‬‬
‫‪ (select‬بتمرير مصفوفة إلى الدالة )(‪ val‬تحتوي على القيم النصية للخيارات الموافقة‪.‬‬
‫ً‬
‫أيض با اسببتخدام الدالببة‬ ‫وللحصببول على القيم المُ ختببارة في عنصببر اختيببار من متعببدد‪ ،‬نسببتطيع‬
‫)(‪ val‬للحصبببول على مصبببفوفة للقيم المختبببارة‪ .‬سبببتحتوي المصبببفوفة على قيم الخاصبببية ‪value‬‬
‫لجميع القيم المُ ختارة )مثال حي(‪:‬‬
‫>‪<body‬‬
‫>"‪<select size="4" multiple="multiple‬‬
‫>‪<option value="option1">option one</option‬‬
‫>‪<option value="option2">option two</option‬‬
‫>‪<option value="option3">option three</option‬‬
‫>‪<option value="option4">option four</option‬‬
‫>‪</select‬‬
‫‪129‬‬
‫‪<script‬‬
‫{‬
‫ضبط القيم المختارة ‪//‬‬
‫;)]'‪$('select').val(['option2', 'option4‬‬
‫ُختارة ‪//‬‬
‫الحصول على القيم الم‬
‫"‪: "option2, option4‬الناتج ‪//‬‬
‫;))' ‪alert($('select').val().join(',‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫‪ .9‬ضبط والحصول على النص الموجود ضمن عنصر ‪textarea‬‬

‫يمكنك ضبط محتوى العقدة النصية لعنصببر >‪ <textarea‬عبببر تمريببر سلسببلة نصببية إلى الدالببة‬
‫)(‪ُ val‬‬
‫لتسبببببتخ َد م كمحتبببببوى نصبببببي للعنصبببببر‪ .‬ولكي نحصبببببل على محتويبببببات العنصبببببر ‪textarea‬‬
‫ً‬
‫أيضا الدالة )(‪ val‬كما هو ظاهر في المثال التي )مثال حي(‪:‬‬ ‫فسنستخدم‬
‫‪130‬‬
‫>‪<body‬‬
‫>‪<textarea></textarea‬‬
‫‪<script‬‬
‫{‬
‫ضبط محتوى مربع النص ‪//‬‬
‫;)'‪$('textarea').val('I am a textarea‬‬
‫"‪: "I am a textarea‬الناتج ‪//‬‬

‫;))(‪alert($('textarea').val‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫‪ .10‬ضبط والحصول على قيمة الخاصية ‪ value‬للعنصر ‪button‬‬

‫يمكنببك ضبببط قيمببة الخاصببية ‪ value‬لعنصببر ‪ button‬بتمريببر سلسببلة نصببية إلى الدالببة )(‪.val‬‬
‫ولكي نحص ببل على قيم ببة الخاص ببية ‪ value‬التابع ببة لعنص ببر >‪ <button‬فيمكنن ببا أن نس ببتعمل الدال ببة‬
‫ً‬
‫أيضا )مثال حي(‪:‬‬ ‫)(‪val‬‬
‫‪131‬‬
<!DOCTYPE html>
<html lang="en">
<body>
<button>Button</button>
<script
y.min.js"></script>
<script>
(function($)
{
// ‫ضبط العنصر إلى‬
//<button value="I am a Button Element">
$('button').val('I am a Button Element')
// ‫الناتج‬: "I am a Button Element"

alert($('button').val());
})(jQuery);
</script>
</body>
</html>
select ‫ تعديل مكونات العنصر‬.11

ِ ‫ُت‬
‫ سأشببرح‬.<select> ‫ كثببيرًا من إجببراء بعض المهببام الشببائعة عنببد تعببديل العنصببر‬jQuery ‫سهل‬
ً
.‫مثال عن الشيفرة‬ ‫فيما يلي بعض تلك المهام وسأريك‬
132
:‫إضافة خيارات جديدة في النهاية‬ •
$('select').append('<option value="">option</option>');
:‫إضافة خيارات جديدة إلى البداية‬ •
$('select').prepend('<option value="">option</option>');
ً ‫وضع خيارات جديدة‬

:‫بدل من القديمة‬ •
$('select').html('<option value="">option</option><option
value="">option</option>');
ِ ُ‫معين؛ ع ب بببر اس ب ببتخدام الم‬

‫ لتحدي ب ببد‬:eq() ‫رشب ب بح‬ ّ (index) ‫اس ب ببتبدال عناص ب ببر ذات فه ب ببرس‬ •
:‫ لستبدالها‬.replaceWith() ‫العناصر ثم استخدام الدالة‬
$('select option:eq(1)').replaceWith('<option
value="">option</option>');
:2 ‫ إلى العنصر ذي الفهرس‬select ‫ضبط العنصر المُ ختار في‬ •
$('select option:eq(2)').attr('selected', 'selected');
133
‫إزالة آخر خيار من الخيارات‪:‬‬ ‫•‬
‫;)(‪$('select option:last').remove‬‬
‫معينببة من عنصببر ‪ select‬عبببر ترتيبهببا في مجموعببة التغليببف باسببتخدام‬

‫ّ‬ ‫تحديببد خيببارات‬ ‫•‬
‫ُم ِ‬
‫رشحات خاصة‪:‬‬
‫;)'‪$('#select option:first‬‬
‫;)'‪$('#select option:last‬‬
‫;)')‪$('#select option:eq(3‬‬
‫;)')‪$('#select option:gt(5‬‬
‫;)')‪$('#select option:lt(3‬‬
‫;)')'‪$('#select option:not(':selected‬‬
‫الحصول على القيم النصية لجميع الخيارات المُ ختارة‪:‬‬ ‫•‬
‫;)(‪$('select option:selected').text‬‬
‫الحصببول على قيمببة الخاصببية ‪ value‬لحببد خيببارات العنصببر ‪) select‬س ب ُن ِ‬

‫حدد آخببر خيببار‬ ‫•‬
‫في مثالنا(‪:‬‬
‫;)(‪$('select option:last).val‬‬
‫أن الشببيفرة‬ ‫الحصول على فهرس العنصر المُ ختببار )الببترقيم بب ً‬

‫بدءا من الصبفر(؛ يجببدر بالببذكر ّ‬ ‫•‬
‫‪134‬‬
‫التية لن تعمل مع العناصر التي يمكن اختيار أكثر من خيار فيها‪:‬‬
‫;))'‪$('select option').index($('select option:selected‬‬
‫مكان معين‪:‬‬
‫ٍ‬ ‫إضافة خيار بعد‬ ‫•‬
‫‪$('select option:eq(1)').after('<option‬‬
‫;)'>‪value="">option</option‬‬
‫مكان معين‪:‬‬
‫ٍ‬ ‫إضافة خيار قبل‬ ‫•‬
‫‪$('select option:eq(3)').before('<option‬‬
‫;)'>‪value="">option</option‬‬
‫‪ .12‬تحديد حاقول النموذج عبر نوعها‬

‫مثل‪ ($('input:checkbox') :‬تب ِ‬
‫بوفر ‪jQuery‬‬ ‫من الممكن تحديببد حقببول النمبباذج عبببر نوعهببا ) ً‬
‫المُ ِ‬
‫رش حات التية المرتبطة بأنواع حقول النموذج لتحديد العناصر حسب نوعها‪.‬‬
‫‪:image‬‬ ‫•‬ ‫‪:text‬‬ ‫•‬
‫‪:reset‬‬ ‫•‬ ‫‪:password‬‬ ‫•‬
‫‪:file‬‬ ‫•‬ ‫‪:radio‬‬ ‫•‬
‫‪:button‬‬ ‫•‬ ‫‪:checkbox‬‬ ‫•‬
‫‪:submit‬‬ ‫•‬
‫‪135‬‬
‫ تحديد جميع عناصر النماذج‬.13

ِ ُ‫حدد هذا الم‬
‫رشبح‬ ِ ُ‫من الممكن تحديد جميع عناصر النماذج عبر استخدام الم‬
ِ ُ‫ لن ي‬.:input ‫رشح‬
<select> ‫< و‬textarea> ‫أيببببببببببببب ة عناصبببببببببببببر‬ ِ ‫بببببببببببببي‬

ّ ‫حدد‬ ُ ‫ وإنمبببببببببببببا س‬،‫ فحسبببببببببببببب‬input ‫عناصبببببببببببببر‬
ً ‫< أي‬button> ‫و‬

‫ لمجموعببببة التغليببببف في المثببببال التي عنببببد اسببببتخدام‬length ‫ لحببببظ قيمببببة‬.‫ضببببا‬
ِ ُ‫الم‬
:(‫ )مثال حي‬:input ‫رشح‬
<!DOCTYPE html>
<html lang="en">
<body>
<input type="button" value="Input Button" />
<input type="checkbox" />
<input type="file" />
<input type="image" />
<input type="password" />
<input type="radio" />
<input type="reset" />
<input type="submit" />
<input type="text" />
<select>
<option>Option</option>
</select>
<textarea></textarea>
<button>Button</button>
<script
136
y.min.js"></script>
<script>
(function($)
{
// ‫ عنصرًا من عناصأر النماذج‬13 ‫الناتج هو‬
alert($(':input').length);
})(jQuery);
</script>
</body>
</html>
137
‫الفصل السادس‪:‬‬
‫الحاداث في ‪jQuery‬‬
‫‪6‬‬
‫تعلم ‪jQuery‬‬ ‫الفصل السادس‪ :‬الحداث في ‪jQuery‬‬
‫مقيدين بحدث )(‪ ready‬واحاد فقط‬

‫ّ‬ ‫‪ .1‬لسنا‬
‫من المهم أن تبقي بذهنك ّ‬
‫أنه من الممكن استخدام الحدث المخصص )(‪ ready‬عَ ب َد َد مببا شب َ‬
‫بئت؛‬
‫بت مقيب ًدا بإضببافة حببدث )(‪ .ready‬وحيببد إلى المسببتند‪ .‬وسب ُبت ّ‬
‫نفذ الشببيفرات المرتبطببة بالحببدث‬ ‫ولسب َ‬
‫)(‪ ready‬بنفس ترتيب ورودها‪.‬‬
‫تمرير دالة إلى دالة ‪ً ) jQuery‬‬

‫مثل‪:‬‬
‫ٌ‬
‫مختصرة للحدث‬ ‫ٌ‬
‫طريقة‬ ‫)}‪ (jQuery(function(){//code here‬هي‬ ‫ملحاظة‬
‫)(‪) ready‬أي )(‪.(jQuery(document).ready‬‬
‫‪ .2‬إضافة أو إزالة الحاداث باستخدام )(‪ on‬و )(‪of‬‬

‫باسببببتخدام الدالببببة )(‪ً ) on‬‬
‫مثل‪ (jQuery('a').on('click', function(){}) :‬يمكننببببا‬
‫أي من معالجات الحداث القياسية )‪ (standard handlers‬إلى عناصر ‪ DOM‬الملئمة‪.‬‬

‫إضافة ّ‬
‫‪mousedown‬‬ ‫•‬ ‫‪blur‬‬ ‫•‬
‫‪mouseup‬‬ ‫•‬ ‫‪focus‬‬ ‫•‬
‫‪mousemove‬‬ ‫•‬ ‫‪load‬‬ ‫•‬
‫‪mouseover‬‬ ‫•‬ ‫‪resize‬‬ ‫•‬
‫‪mouseout‬‬ ‫•‬ ‫‪scroll‬‬ ‫•‬
‫‪change‬‬ ‫•‬ ‫‪unload‬‬ ‫•‬
‫‪select‬‬ ‫•‬ ‫‪beforeunload‬‬ ‫•‬
‫‪submit‬‬ ‫•‬ ‫‪click‬‬ ‫•‬
‫‪keydown‬‬ ‫•‬ ‫‪dblclick‬‬ ‫•‬
‫‪139‬‬
‫‪error‬‬ ‫•‬ ‫‪keypress‬‬ ‫•‬
‫‪keyup‬‬ ‫•‬
‫كمببببا هببببو واضببببح –واعتمببببا ًدا على معببببايير ‪ –DOM‬يمكن أن ترتبببببط معالجببببات أحببببداث مُ حبببب ّددة‬
‫معينة‪.‬‬
‫ّ‬ ‫بعناصر‬
‫ً‬
‫أيض با اسببتخدام‬ ‫بالضببافة إلى القائمببة السببابقة الخاصببة بمعالجببات الحببداث القياسببية‪ ،‬يمكنببك‬
‫الدالببببببببببببببة )(‪ on‬لربببببببببببببببط معالجببببببببببببببات الحببببببببببببببداث الخاصببببببببببببببة في ‪ jQuery‬مثببببببببببببببل ‪mouseenter‬‬
‫و ‪ ،mouseleave‬بالضافة إلى أيّ ة معالجات أحداث مخصصة ُت ِ‬

‫نشئها أنت‪.‬‬
‫لحذف معالجات أحداث قياسية أو خاصة‪ ،‬يمكننا ببسبباطة تمريببر اسببم المعببالج أو اسببم المعببالج‬
‫الخاص الذي نريد حذفببه إلى الدالببة )(‪ً ،off‬‬

‫مثل )'‪ .jQuery('a').off('click‬إن لم ُتمب ِبررَ أيّب ة‬
‫وسبببببببائط إلى الدالبببببببة )(‪ off‬فسبببببببيؤدي ذلبببببببك إلى حبببببببذف جميبببببببع معالجبببببببات الحبببببببداث المرتبطة‬
‫بالعنصر المُ ح ّدد‪.‬‬
‫سأريك المفاهيم التي شرحناها في العلى في المثال التي‪:‬‬
‫>‪<body‬‬
‫>‪<input type="text" value="click me" /‬‬
‫>‪<br /‬‬
‫>‪<br /‬‬
‫>‪<button>remove events</button‬‬
‫>‪<div id="log" name="log"></div‬‬
‫‪<script‬‬
‫‪140‬‬
jQuery ‫تعلم‬ jQuery ‫ الحداث في‬:‫الفصل السادس‬
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery
.min.js"></script>
<script>
(function($)
{
// ‫ربط الحداث‬
$('input').on('click', function()
{
alert('You clicked me!');
});
$('input').on('focus', function()
{
‫ مع‬focus ‫ والحدث‬alert ‫استخدام‬
// ‫ًا سيسبب بحلقة‬
// ‫ لن حدث التركيز على حقل‬،‫تكرار ل نهائية‬
َ ُ
// ‫طلق في كل مرة نغلق فيها مربع التحذير‬‫الدخال سي‬
ً
// alert ‫بدل من استخدام‬ ‫سنعرض الناتج في الصفحة‬
$('#log').html('You focused this input!');
});
// ‫ كاختصار‬click ‫استخدام الدالة‬

$('button').click(function()
{
// ‫فك ارتباط الحداث‬
$('input').off('click');
$('input').off('focus');
141
‫أو فك ارتباط جميع الحداث ‪//‬‬

‫;)(‪// $('button').off‬‬
‫;)}‬
‫>‪</body‬‬
‫>‪</html‬‬
‫عدة اختصارات لستخدام الدالة )(‪ on‬مع جميع أحداث ‪DOM‬‬ ‫ِ‬
‫توفر ‪ِ jQuery‬‬ ‫‪-‬‬
‫القياسية‪ ،‬أي باستثناء أحداث ‪ jQuery‬الخاصة مثل ‪mouseenter‬‬

‫و ‪ .mouseleave‬لستخدام هذه الختصارات عليك وضع اسم الدالة ً‬
‫بدل من‬
‫اسم الحدث‪.‬‬
‫أمثلة‪ click() :‬و )(‪ mouseout‬و )(‪.focus‬‬
‫‪ -‬يمكنك أن تربط عد ًدا ل محدو ًدا من الحداث إلى عنصر ‪ DOM‬وحيد‬
‫باستخدام ‪.jQuery‬‬
‫ً‬
‫حدثا ما إلى‬ ‫ً‬
‫دالة لمعالجة الحداث باسم )(‪ one‬والتي ستربط‬ ‫ِ‬
‫توفر ‪jQuery‬‬ ‫‪-‬‬
‫سيزال‪ .‬الدالة )(‪ one‬ما هي إل‬ ‫ً‬

‫واحدة فقط ثم ُ‬ ‫ً‬
‫مرة‬ ‫سي ّ‬
‫نفذ‬ ‫عناصر ‪ DOM‬والذي ُ‬
‫ٌ‬
‫مختصرة ُتستعمَ ل فيها الدالتان )(‪ on‬و )(‪.off‬‬ ‫ٌ‬
‫طريقة‬
‫َ‬ ‫ُ‬
‫ضيفت الدالتان )(‪ on‬و )(‪ off‬إلى إصدار ‪ 1.7‬من ‪ ،jQuery‬وكنّا نستعمل‬‫‪-‬أ‬
‫بدل منهما الدالتين )(‪ bind‬و )(‪ُ .unbind‬أهمِ َ‬
‫ل استعمال الدالتين )(‪bind‬‬ ‫ً‬
‫بدءا من الصدار ‪ ،3.0‬لذا ل يُ َ‬

‫نصح باستخدامهما في‬ ‫ً‬ ‫و )(‪unbind‬‬
‫التطبيقات الحديثة‪.‬‬
‫‪142‬‬
‫برمجيا عبر دوال الحاداث المختصرة‬

‫ً‬ ‫‪ .3‬استدعاء معالجات الحاداث‬
‫الشكل المختصر لربط معالجببات الحببداث إلى عنصببر ‪) DOM‬مثببل‪ click() :‬و )(‪ mouseout‬و‬
‫برمجيا‪ .‬لفعل ذلك علينببا اسببتدعاء‬

‫ً‬ ‫ً‬
‫أيضا لستدعاء معالجات الحداث‬ ‫)(‪ (focus‬يمكن أن يُ ستخ َدم‬
‫الدالببة المختصببرة دون أن ُنمب ِبرر إليهببا دالب ً‬

‫بة‪ .‬هببذا يعببني أننببا نسببتطيع –نظريًب ا– ربببط معببالج أحببداث إلى‬
‫ً‬
‫بتعمل‬ ‫عنصببر ‪ DOM‬ثم اسببتدعاء ذاك المعببالج مباشب ً‬
‫برة‪ .‬سأشببرح الفكببرة السببابقة في المثببال التي مسب‬
‫الحدث )(‪) click‬مثال حي(‪:‬‬
‫>‪<body‬‬
‫>‪ --‬الضغط على هذا العنصر سيؤدي إلى إظهار ‪
<div
style="margin:200px;height:100px;width:100px;background:#ccc;
padding:20px">
relative to this
</div>
<script
y.min.js"></script>
<script>
(function($)
{
$('div').mousemove(function(e)
{
// div ‫ً إلى عنصر‬
‫الحركة تكون نسبة‬
// (document) ‫وليس إلى كامل المستند‬
var relativeX = e.pageX - this.offsetLeft;
var relativeY = e.pageY - this.offsetTop;
$(this).html('releativeX = ' + relativeX +
165
', releativeY = ' + relativeY);

});
})(jQuery);
</script>
</body>
</html>
166
‫الفصل السابع‪:‬‬
‫‪ jQuery‬ومتصفح الويب‬
‫‪7‬‬
‫تعلم ‪jQuery‬‬ ‫الفصل السابع‪ jQuery :‬ومتصفح الويب‬
‫‪ .1‬تعطيل القائمة المنسدلة الظاهرة بالضغط على الزر اليمن‬
‫للفأرة‬
‫يمكن باسببتخدام ‪ JavaScript‬تعطيببل القائمببة المنسببدلة )‪ (contextual menu‬الببتي تظهببر عنببدما‬
‫ٌ‬
‫سبببببهل جببببب ًدا في ‪ .jQuery‬كبببببل مبببببا علينبببببا عملبببببه هبببببو تعطيل‬ ‫نضبببببغط على البببببزر اليمن‪ .‬فعبببببل ذلبببببك‬
‫الحدث ‪:contextmenu‬‬
‫>‪<body‬‬
‫‪<script‬‬
‫{‬
‫)(‪$(document).on('contextmenu', function‬‬
‫{‬
‫;‪return false‬‬
‫;)}‬
‫>‪</body‬‬
‫>‪</html‬‬
‫‪168‬‬
‫تعلم ‪jQuery‬‬ ‫الفصل السابع‪ jQuery :‬ومتصفح الويب‬
‫‪ .2‬تمرير نافذة المتصفح‬

‫هنالك عد ٌد كبيرٌ ج ًدا من الضببافات لتمريببر )‪ (scroll‬نافببذة المتصبفح‪ ،‬وفعبل ذلببك سب ٌ‬
‫بهل جب ًدا في‬
‫‪ jQuery‬إذا كنببببا نحت ب بباج إلى التمري ب ببر فق ب ببط‪ .‬فبض ب بببط خاص ب ببية ‪ scrollTop‬في عنص ب ببرَ ي >‪<html‬‬
‫باقوليا‪.‬‬
‫ً‬ ‫أفقيببب ا أو ش ب‬
‫ً‬ ‫و >‪ <body‬فإننبببا سبببنتمكن من تحديبببد مك ببان التمري ببر ال ببذي نري ببد النتق ببال إليبببه‬
‫معين في الصفحة‪.‬‬
‫ّ‬ ‫عنصر‬
‫ٍ‬ ‫أفقيا إلى‬
‫ً‬ ‫سأستخدمُ في المثال التي الدالة )(‪ animate‬للتمرير‬
‫>‪<body‬‬
‫>‪<style‬‬
‫{ ‪li‬‬
‫;‪padding-bottom: 500px‬‬
‫}‬
‫>‪</style‬‬
‫>‪<ul‬‬
‫>‪<li><a href="#" class="next">Next</a></li‬‬
‫"‪<li><a href="#" class="next">Next</a>/<a href="#‬‬
‫>‪class="prev">Previous</a></li‬‬
‫"‪<li><a href="#" class="next">Next</a>/<a href="#‬‬
‫>‪class="prev">Previous</a></li‬‬
‫>‪<li><a href="#" class="prev">Previous</a></li‬‬
‫>‪</ul‬‬
‫‪<script‬‬
‫‪169‬‬
jQuery ‫تعلم‬ ‫ ومتصفح الويب‬jQuery :‫الفصل السابع‬
y.min.js"></script>
<script>
(function($)
{
$('.next').click(function()
{
$('html, body').animate(
{
scrollTop:
$(this).parent().next().find('a').offset().top
},
1000);
});
$('.prev').click(function()
{
$('html, body').animate(
{
scrollTop:
$(this).parent().prev().find('a').offset().top
},
1000);
});
})(jQuery);
</script>
</body>
</html>
170
‫الفصل الثامن‪:‬‬
‫الضافات في ‪jQuery‬‬
‫‪8‬‬
‫تعلم ‪jQuery‬‬ ‫الفصل الثامن‪ :‬الضافات في ‪jQuery‬‬
‫‪ .1‬استخدام ‪ $‬عند إنشاء إضافة‬

‫عندما تكتب إضافة ‪ ،jQuery‬فيجب عليك تطبيق آلية منع التضارب مع المكتبببات الخببرى الببتي‬
‫تستعملها في شيفرات ‪ jQuery‬العادية نفسها‪ ،‬وبهذا يجب أن تحتببوى جميببع الضببافات ضببمن مجببال‬
‫خاص )‪ (private scope‬حيث يمكن أن تستعمل الرمببز ‪ $‬دون الخببوف من حببدوث تضببارب أو نتببائج‬
‫غير متوقعة‪.‬‬
‫يجب أن تبببدو الشببيفرة التيببة مألوفب ً‬

‫بة لببديك لننببا اسببتخدمناها في أغلبيببة المثلببة في الفصببل‬
‫الول من هذا الكتاب )مثال حي(‪:‬‬
‫>‪<body‬‬
‫‪<script‬‬
‫ًا ‪//‬‬
‫َ ذلك ليس عملي‬
‫ّ‬
‫ل تستعمل ‪ $‬هنا لن‬
‫;)‪alert(jQuery(document).jquery‬‬
‫{‬
‫يمكننا استخدام ‪ $‬هنا دون الخوف من التضاربات ‪//‬‬
‫;)‪alert($(document).jquery‬‬
‫‪172‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫جزءا من‬
‫ً‬ ‫لح َقة بالكائن ‪ jQuery.fn‬ستصبح‬
‫الم َ‬
‫‪ .2‬الضافات الجديدة ُ‬
‫دوال ‪jQuery‬‬
‫ٌ‬
‫بديل للكب ببائن‬ ‫ُتلحَبببب ق الضببببافات الجديببببدة بالكب ببائن ‪ jQuery.fn‬والببببذي هببببو اختصببببارٌ أو اسب ب ٌ‬
‫بم بب ب‬
‫‪ .jQuery.prototype‬س ببأريك في المث ببال أدن بباه ّ‬

‫أنن ببا كتبن ببا إض ببافة »عبب ّداد« ) ‪ (counter‬وألحقناه ببا‬
‫خصصببة والببتي يمكن أن‬

‫ّ‬ ‫بالكائن ‪ .jQuery.fn‬وبفعلنا لذلك سنكون قببد أنشببأنا أوّ ل إضببافة ‪ jQuery‬مُ‬
‫ُتستعمَ ل على مجموعة تغليف فيها كائنات ‪.DOM‬‬
‫عمومًبببب ا‪ ،‬يَ سببببمَ ح لنببببا إلحبببباق إضببببافة بالكببببائن ‪ jQuery.fn‬بإنشبببباء دوال خاصببببة شبببببيهة بتلببببك‬
‫ُ‬
‫فستضبمّ ن‬ ‫لنه عنببدما ُنلحِب ق دالببة الضببافة بالكببائن ‪jQuery.fn‬‬
‫الموجودة في أساس ‪ .jQuery‬وذلك ّ‬
‫دالتنا في سلسلة ‪ ($.fn.count = function(){}) prototype‬لجميع كائنات ‪ jQuery‬التي ُت َ‬

‫نشأ‬
‫أن إضببافة دالببة إلى‬

‫باسببتخدام دالببة ‪ .jQuery‬إذا أصبببح رأسببك يؤلمببك ممببا سبببق‪ ،‬فعليببك أن تعببرف ّ‬
‫أن الكلم ببة المحج ببوزة ‪ this‬داخ ببل الدال ببة التابع ببة للض ببافة ُ‬
‫ستش ببير إلى الك ببائن‬ ‫‪ jQuery.fn‬يع ببني ّ‬
‫‪ jQuery‬نفسه )مثال حي(‪:‬‬
‫>‪<body‬‬
‫>‪<div id="counter1"></div‬‬
‫‪173‬‬
jQuery ‫تعلم‬ jQuery ‫ الضافات في‬:‫الفصل الثامن‬
<script
y.min.js"></script>
<script>
(function($)
{
$.fn.count = function()
{
// jQuery ‫ هنا إلى كائن‬this ‫ُشير‬
‫ت‬
var $this = this;
// ‫ّاد ليبدأ من الصفر‬
‫ضبط العد‬
$this.text('0');
// ‫المهلة الزمنية‬
var myInterval = window.setInterval(function()
{
var currentCount = parseFloat($this.text());
var newCount = currentCount + 1;
$this.text(newCount + '');
}, 1000);
};
})(jQuery);
jQuery('#counter1').count();
</script>
</body>
</html>
174
‫أن إضافتنا تود استخدام‬

‫بإلحاق الضافة إلى الكائن ‪ jQuery.fn‬فإننا نقول ّ‬
‫الدالة ‪ jQuery‬لتحديد السياق )‪) (context‬أي عناصر ‪ .(DOM‬إذا لم تتطلب‬
‫ً‬ ‫ملحاظة‬
‫سياقا ُمح ّد ًدا )بعبارةٍ أخرى‪ :‬مجموعة من كائنات ‪ (DOM‬التي يجب‬ ‫إضافتك‬
‫أن ُت جري عملياتها عليها‪ ،‬فقد ل تحتاج إلى إلحاق هذه الضافة بالكائن ‪.$.fn‬‬
‫‪ .3‬ستُ شير ‪ this‬داخل إضافة إلى كائن ‪ jQuery‬الحالي‬

‫عن ببدما ُتلحِبب ق إض ب ً‬
‫بافة بالك ببائن ‪ jQuery.fn‬ف ببإن الكلم ببة المحج ببوزة ‪ this‬داخ ببل دال ببة الض ببافة‬
‫ُ‬
‫ستشير إلى كائن ‪ jQuery‬الحالي )مثال حي(‪:‬‬
‫>‪<body‬‬
‫‪<script‬‬
‫{‬
‫)(‪$.fn.count = function‬‬
‫{‬
‫‪ this‬هنا مساوية إلى )'‪// jQuery('#counter1‬‬
‫الناتج هو كائن ‪// jQuery‬‬
‫;)‪alert(this‬‬
‫‪175‬‬
‫الناتج هو عنصر ‪// div‬‬

‫;)]‪alert(this[0‬‬
‫الناتج هو " ‪// "counter1‬‬
‫;)‪alert(this[0].id‬‬
‫;}‬
‫;)(‪jQuery('#counter1').count‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫من المهم أن تفهم ما الذي ُتشير إليه الكلمة المحجوزة ‪ this‬داخل دالة الضافة‪.‬‬
‫ستخدم )(‪ each‬للمرور على كائن ‪ jQuery‬وتوفير مرجعية إلى‬

‫َ‬ ‫‪ُ .4‬ت‬
‫كل عنصر في ذاك الكائن باستخدام ‪this‬‬

‫يمكننببا باسببتخدام )(‪ each‬أن ُن ِ‬
‫نشبئ حلقببة تكببرار ضببمنية لضببافتنا‪ .‬وهببذا يعببني ّ‬
‫أنه لببو احتببوت‬
‫طبق دالبببببة الضبببببافة على كبببببل عنصبببببر في‬ ‫ُ‬

‫فسبببببت ّ‬ ‫عنصبببببر واحبببببد‪،‬‬
‫ٍ‬ ‫مجموعبببببة التغليبببببف على أكبببببثر من‬
‫مجموعة التغليف‪.‬‬
‫بة عامب ٌ‬
‫بة ُتسببتخ َدم للمببرور‬ ‫يمكننا فعل ذلبك باسببتخدام الدالببة )(‪ each‬في ‪ ،jQuery‬والببتي هي دالب ٌ‬
‫على عناصر الكائنات أو المصفوفات‪ .‬وهي ُت ِ‬

‫سه ل إنشاء حلقات التكرار‪ .‬سنمر في المثببال التي على‬
‫وستشببير الكلمببة المحجببوزة ‪ this‬داخببل الدالببة المُ مب ِبررة إلى )(‪ each‬إلى كببل‬
‫ُ‬ ‫كببائن ‪ jQuery‬نفسببه‪،‬‬
‫كائن موجود في مجموعة التغليف )مثال حي(‪:‬‬
‫‪176‬‬
<!DOCTYPE html>
<html lang="en">
<body>
<div id="counter1"></div>
<script
y.min.js"></script>
<script>
(function($)
{
{
this.each(function()
{
// ‫ الحالي‬jQuery ‫ هنا إلى كائن‬this ‫ُشير‬
‫ت‬
// ‫ّاد ليبدأ من الصفر‬
‫ضبط العد‬
$this.text('0');
{
// ‫المهلة الزمنية‬
}, 1000);
177
‫;)}‬
‫;}‬
‫;)(‪jQuery('#counter1, #counter2').count‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫بروري جب ًد ا إن كنت تريببد من إضببافتك أن تسببتعمل المببرور الضببمني‬

‫ٌ‬ ‫اسببتخدام الدالببة )(‪ each‬ضب‬
‫)‪ (implicit iteration‬على عناصر مجموعة التغليف‪.‬‬
‫عموما كائن ‪ jQuery‬لكي نتمكن من متابعة‬

‫ً‬ ‫‪ُ .5‬تعيد الضافات‬
‫السلسلة باستخدام دوال ‪ jQuery‬الخرى‬

‫كببببائن ‪ jQuery‬لكي ل تببببؤدي الضببببافة إلى »كسببببر«‬
‫َ‬ ‫ِ‬
‫الضببببافات‬ ‫ُ‬
‫أغلبيببببة‬ ‫من الطبببببيعي أن ُتعيببببد‬
‫معينببة فيجب أن تسببمح بإكمببال‬

‫ّ‬ ‫السلسبلة‪ .‬بعبببارةٍ أخببرى‪ ،‬إذا لم تحتبباج في الضببافة إلى إعببادة قيمببة‬
‫السلسببببلة لكي ُت ّ‬
‫طبق المزيببببد من الببببدوال على مجموعببببة التغليببببف‪ .‬سبببب ُنعيد في المثببببال التي كببببائن‬
‫‪ jQuery‬عب بببر التعليمب ببة ;‪ return this‬لكي ل نكسب ببر السلسب ببلة‪ .‬لحب ببظ ّ‬
‫أنني أسب ببتخدام الب ببدالتين‬
‫ُ‬
‫استدعيت الدالة )(‪ count‬الخاصة بالضافة )مثال حي(‪:‬‬ ‫)(‪ parent‬و )(‪ append‬بعد أن‬
‫‪178‬‬
<body>
<script
y.min.js"></script>
<script>
(function($)
{
{
return this.each(function()
{
// each() ‫" بعد‬this" ‫ أو‬،jQuery ‫إعادة كائن‬
$this.text('0');
{
}, 1000);
});
};
})(jQuery);
jQuery('#counter1, #counter2')
179
‫)(‪.count‬‬
‫ّنا من إكمال السلسلة لن الدالة )(‪// count‬‬
‫تمك‬
‫أعادت كائن ‪// jQuery‬‬
‫)(‪.parent‬‬
‫;)'>‪.append('<p>Chaining still works!</p‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫ً‬
‫هادمة وذلك عند عدم إعادتها لكائن‬ ‫من الممكن أن تكون دالة الضافة‬
‫ملحاظة‬
‫‪.jQuery‬‬
‫‪ .6‬خيارات الضافة الفتراضية‬

‫خيبببارات ُتعت ََبببب ر ّ‬
‫أنهبببا الضببببط الفتراضبببي الساسبببي لليبببة عمبببل‬ ‫ٍ‬ ‫ً‬
‫عبببادة على‬ ‫تحتبببوي الضبببافات‬
‫ُ‬
‫سأ ِ‬
‫نش ب بئ في المثب ببال التي كب ببائن‬ ‫وتسب ببتخ َدم تلب ببك الخيب ببارات عنب ببدما ُتسب ببتدعى الضب ببافة‪.‬‬
‫الضب ببافة‪ُ ،‬‬
‫‪ defaultOptions‬يحتببوي على خاصببيةٍ وحيببدةٍ )‪ (startCount‬وقيمببةٍ )‪ .(0‬ويُ خب ّبزن هببذا الكببائن‬
‫ضمن الدالة ‪) count‬أي ‪ ،($.fn.count.defaultOptions‬ونفعببل ذلببك لكي نتمكن من تخصببيص‬
‫تلك الخيارات من خارج الضافة )مثال حي(‪:‬‬
‫>‪<body‬‬
‫‪180‬‬
<script
y.min.js"></script>
<script>
(function($)
{
{
{
// 0 ‫ّاد إلى‬
‫ضبط قيمة بداية العد‬
$this.text($.fn.count.defaultOptions.startCount +
'');
{
}, 1000);
});
};
181
‫{ = ‪$.fn.count.defaultOptions‬‬
‫‪startCount: 100‬‬
‫;}‬
‫;)(‪jQuery('#counter1, #counter2').count‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫‪ .7‬خيارات مخصصة للضافة‬

‫مرر في‬ ‫ً‬
‫عببادة تجبباوز الخيببارات الفتراضببية للضببافة عبببر ضبببط خيببارات مخصصببة‪ .‬سبب ُن ِ‬ ‫يمكن‬
‫سبببيدمَ ج هبببذا الكبببائن مبببع كبببائن‬

‫ُ‬ ‫المثبببال التي الكبببائن ‪ customOption‬كمعامبببل إلى دالبببة الضبببافة‪.‬‬
‫‪ defaultOptions‬لنشبببباء كببببائن ‪ options‬وحيببببد‪ .‬سنسببببتخدم الدالببببة )(‪ extend‬الببببتي توفرهببببا‬
‫كائن وحيببد‪ .‬تسببمح لنببا الدالببة )(‪ extend‬بإضببافة خاصببيات )أو قيم(‬ ‫‪ jQuery‬لدمج ِ‬
‫عدة كائنات في‬
‫ٍ‬
‫ِ‬
‫سأمرر‬ ‫جديدة إلى كائن‪ .‬ويمكننا الن تمرير الخيارات إلى دالة الضافة بعد تغييرنا لشيفرتها‪ .‬حيث‬
‫في المث ببال التي ال ببرقم ‪ 500‬إلى الدال ببة ‪ count‬لكي يُ س ببتخ َدم كنقط ببة بداي ببة للعبب ّداد‪ ،‬وه ببذا الخي ببار‬
‫المُ خصص سيتجاوز القيمة الفتراضية ‪) 0‬مثال حي(‪:‬‬
‫>‪<body‬‬
‫‪182‬‬
<script
y.min.js"></script>
<script>
(function($)
{
$.fn.count = function(customOptions)
{
// ‫ وملؤه‬،‫ جديد‬option ‫إنشاء كائن‬
// customOptions ‫ و‬defaultOptions ‫بخاصأيات‬
var options = $.extend(
{}, $.fn.count.defaultOptions, customOptions);
{
// ‫ضبط قيمة بداية العداد إلى القيمة الفتراضية‬
// ‫َت إلى الضافة‬
‫ِر‬
ّ‫ُر‬
‫َصة إن م‬
ّ‫مخص‬
ُ‫أو إلى القيمة ال‬
$this.text(options.startCount + '');
{
}, 1000);
});
183
‫;}‬
‫{ = ‪$.fn.count.defaultOptions‬‬
‫;}‬
‫َصة سيؤدي إلى تجاوز القيم الفتراضية ‪//‬‬

‫ُخصّ‬
‫تمرير خيارات م‬
‫(‪jQuery('#counter1, #counter2').count‬‬
‫{‬
‫;)}‬
‫>‪</body‬‬
‫>‪</html‬‬
‫‪ .8‬تجاوز القيم الفتراضية دون تغيير شيفرة الضافة‬

‫لمّ ا كان من الممكن الوصول إلى الخيارات الفتراضية من خببارج الضببافة‪ ،‬فمن الممكن أن ُت ّ ب‬
‫غي ر‬
‫أردت أن ُتعب ِبرف قيمً ب ا للخيببارات دون تعببديل شببيفرة‬

‫َ‬ ‫قيمتهببا قبببل اسببتدعاء الضببافة‪ .‬وهببذا مفيب ٌد إن‬
‫لنك ُت ّ‬
‫هيئ الضببافة لتعمببل كمببا تشبباء‬ ‫بسبط عمليببات اسببتدعاء الضببافات‪ّ ،‬‬
‫سي ِ‬
‫الضافة‪ .‬وفعلببك لببذلك ُ‬
‫دون أن ُت ِ‬
‫عدل شيفرتها )مثال حي(‪:‬‬
‫>‪<body‬‬
‫‪184‬‬
<script
y.min.js"></script>
<script>
(function($)
{
$.fn.count = function(customOptions)
{
var options = $.extend(
{}, $.fn.count.defaultOptions, customOptions);
{
$this.text(options.startCount + '');
{
}, 1000);
});
};
$.fn.count.defaultOptions = {
startCount: 100
185
‫;}‬
‫تجاوز القيم الفتراضية ‪//‬‬

‫;‪jQuery.fn.count.defaultOptions.startCount = 200‬‬
‫ً‬
‫بدل من ‪// startCount: 0‬‬ ‫سنستخدم ‪startCount: 200‬‬
‫;)(‪jQuery('#counter1').count‬‬
‫(‪jQuery('#counter2').count‬‬
‫{‬
‫تجاوز القيم الفتراضية ‪}); //‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫برمجيا‬
‫ً‬ ‫‪ .9‬إنشاء العناصر أثناء التنفيذ واستدعاء الضافات‬
‫اعتما ًد ا على طبيعة إضافتك‪ ،‬قد تهتم بإمكانية استدعاء الضافة بشببكل اعتيببادي )عبببر عناصببر‬
‫ٌ‬
‫أوقات سيظهر فيها مربببع‬ ‫أن لدينا إضافة لنشاء مربع حوار‪ :‬هنالك‬
‫وبرمجيا‪ .‬تخيل ّ‬
‫ً‬ ‫وأحداث ‪(DOM‬‬
‫باء على‬
‫بان أخببرى سببنحتاج إلى إظهببار مربببع الحببوار بنب ً‬
‫باء على أفعببال المسببتخدم‪ ،‬وفي أحيب ٍ‬
‫الحببوار بنب ً‬
‫أحداث تتعلق بالبيئة أو النظام؛ وفي هذه الحالت يمكنك استدعاء الضافة دون وجود أيّ ب ة عناصببر‬
‫ٍ‬
‫ببببرمجي لكي يسبببتدعي الضبببافة‪ .‬سأسبببتدعي في الشبببيفرة التيبببة‬ ‫عنصبببر‬

‫ٍ‬ ‫في ‪ DOM‬وذلبببك بإنشببباء‬
‫ٍ‬
‫الضافة )(‪ dialog‬عند تحميل الصفحة‪ ،‬وذلك بإنشاء عنصر جديد )مثال حي(‪:‬‬
‫‪186‬‬
<!DOCTYPE html>
<html lang="en">
<body>
<a href="#" title="Hi">dialog, say Hi</a>
<a href="#" title="Bye">dialog, say Bye</a>
<script
y.min.js"></script>
<script>
(function($)
{
$.fn.dialog = function(options)
{
var text = this.attr('title') || this.text();
alert(text);
};
})(jQuery);
jQuery('a').click(function()
{ // Invoked by user event
$(this).dialog();
return false;
});
$(window).load(function()
{
187
‫إنشاء عنصر لستدعاء الضافة ‪//‬‬

‫‪jQuery("<a></a>").attr('title', 'I say Hi when‬‬
‫ً ‪invoked!').dialog(); //‬‬
‫الستدعاء مباشرة‬
‫;)}‬
‫>‪</body‬‬
‫>‪</html‬‬
‫باء على خيببارات‬ ‫كمببا هببو واضببح‪ ،‬يمكن أن تكببون هنالببك عب ِ‬

‫بد ة تعببديلت على الطريقببة السببابقة بنب ً‬
‫برمجي ا عبببر‬
‫ًب‬ ‫وتعقيببد ووظيفببة الضببافة‪ .‬لكن الفكببرة الساسببية هنببا هي إمكانيببة اسببتدعاء الضببافات‬
‫ً‬
‫مسبقا بالضافة إلى العناصر المُ نشأة أثناء التنفيذ‪.‬‬ ‫عناصر ‪ DOM‬الموجودة‬
‫‪188‬‬
‫الفصل التاسع‪:‬‬
‫تحسين أداء شيفرات ‪jQuery‬‬
‫‪9‬‬
‫تعلم ‪jQuery‬‬ ‫الفصل التاسع‪ :‬تحسين أداء شيفرات ‪jQuery‬‬
‫‪ .1‬استخدم آخر إصدار من ‪jQuery‬‬

‫فريق تطوير ‪ jQuery‬نشب ٌ‬
‫بط للغايببة ويواصببل تحسببين شببيفرة ‪ jQuery‬من ناحيببة الداء‪ .‬وبالتببالي‬
‫من المهم أن تسب ببتعمل دومً ب ب ا آخب ببر إصب ببدار من ‪ .jQuery‬أنصب ببحك –كمطب ب ِبور ‪ –jQuery‬أن تقب ببرأ سب ببجل‬
‫إصدارات جديدة التي تحتببوي‬

‫ٍ‬ ‫أن عليك التحديث إلى‬
‫التغييرات )‪ (release notes‬وتضع بالحسبان ّ‬
‫على تحسينات كبيرة في الداء‪.‬‬
‫حسن من الداء‬
‫سي ّ‬
‫‪ .2‬تمرير »سياق« إلى دالة ‪ُ jQuery‬‬
‫بياقا )‪ (context‬إلى دالببة ‪،jQuery‬‬ ‫ً‬
‫قليل من تنفيذ طلبية ‪ jQuery‬عنببدما ُتمب ِبرر سب ً‬ ‫يمكنك أن ُت ِ‬
‫سرع‬
‫ثان إلى دالببة‬ ‫ست ِ‬

‫وبفعل لذلك ُ‬
‫وسيط ٍ‬
‫ٍ‬ ‫قلل عدد عناصر ‪ DOM‬التي ستبحث ‪ jQuery‬فيها؛ وذلك بتمرير‬
‫وسيسببتخ َدم هبذا العنصببر كنقطببة انطلق لطلبيببة‬

‫ُ‬ ‫‪ ،jQuery‬الذي هو مرجعيببة إلى عنصببر ‪ DOM‬وحيببد‪،‬‬
‫‪) DOM‬مثال حي(‪:‬‬
‫>‪<body‬‬
‫>‪<div‬‬
‫>‪<div‬‬
‫>"‪<div id="context‬‬
‫>‪<a href="#">jQuery</a‬‬
‫>‪</div‬‬
‫>‪</div‬‬
‫>‪</div‬‬
‫‪190‬‬
‫‪<script‬‬
‫{‬
‫الناتج‪// "context" :‬‬
‫‪alert($('a',‬‬
‫;)‪document.getElementById('context')).context.id‬‬
‫لن تحصل على تحسين في الداء‪ .‬الناتج "‪// "document‬‬

‫;)‪alert($('a', '#context').context.nodeName‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫تحسين فعلي للداء‪ ،‬فعليك أن ُت ِ‬

‫مرر مرجعية فعلية لعنصر‬ ‫ٍ‬ ‫لكي تحصل على‬
‫ٍ‬
‫كوسيط ثان‪ .‬أما تمرير كائن ‪ً ) jQuery‬‬
‫مثل‪ ($('#context') :‬يتطلب‬ ‫ٍ‬
‫ٍ‬ ‫‪DOM‬‬ ‫ملحاظة‬
‫البحث في كامل المستند عن ذاك العنصر‪ ،‬وهذا يفقد هذه التقنية مغزاها‪.‬‬
‫يمكن تطبيق هذه الطريقة على الحببالت الببتي تتببوافر فيهببا قيمببة ‪this‬؛ وذلببك عبببر تمريببر قيمببة‬
‫‪ this‬كسياق للبحث فيه ً‬

‫بدل من البحث في كامل المستند )مثال حي(‪:‬‬
‫‪191‬‬
jQuery ‫تعلم‬ jQuery ‫ تحسين أداء شيفرات‬:‫الفصل التاسع‬
<!DOCTYPE html>
<html lang="en">
<body>
<div>
<div>
<div id="context">
<a href="#">jQuery</a>
</div>
</div>
</div>
<script
y.min.js"></script>
<script>
(function($)
{
$('div#context').click(function()
{
// ‫الناتج‬: "object HTMLDivElement"
alert($('a', this).context);
}).click();
})(jQuery);
</script>
192
‫>‪</body‬‬
‫>‪</html‬‬
‫حددات‬
‫الم ِ‬
‫‪ .3‬فهم كيفية تحسين أداء ُ‬
‫بواء عنب ببدما نتحب ببدث عن الداء‪ .‬فهب ببل جميب ببع المتصب ببفحات‬ ‫ليسب ببت جميب ببع مُ حب ب ِ‬
‫بددات ‪ jQuery‬سب ب ً‬
‫ومحركببات ‪ JavaScript‬وأنظمببة التشببغيل وعتبباد الحواسببيب متسبباوية؟ إضب ً‬

‫بافة إلى صببعوبة الجببزم‬ ‫ِ‬
‫بأداء المُ ِ‬
‫حددات بشكل قاطع‪.‬‬
‫ً‬
‫مباشرة بمجموعةٍ مما يلي‪:‬‬ ‫ٌ‬
‫مرتبط‬ ‫أن أداء المُ ح ّددات‬
‫ضع ببالك ّ‬
‫نوع المُ ِ‬
‫حدد المستخدم‪.‬‬ ‫•‬
‫تعقيد تعبير التحديد‪.‬‬ ‫•‬
‫تعقيد وحجم شجرة ‪ DOM‬التي سيتم البحث فيها‪.‬‬ ‫•‬
‫ً‬
‫مثل‪getElementsByTagName() :‬‬ ‫ِ‬
‫ببببببببببببدد‪.‬‬‫تببببببببببببوفر دالببببببببببببة ‪ JavaScript‬مرتبطببببببببببببة بالمُ ح‬ ‫•‬
‫و )(‪ getElementById‬و )(‪getElementsByClassName‬‬
‫و )(‪.querySelectorAll‬‬
‫المتصفح‪ ،‬ونظام التشغيل‪ ،‬وعتاد الحاسوب‪.‬‬ ‫•‬
‫مقيدة‪:‬‬ ‫ولوجود هذه المتغيرات‪ ،‬فيجب أن يعتمد أداء المُ ِ‬

‫حددات على قواعد بسيطة وغير ّ‬
‫حبب ِ‬
‫بدد عناص ب ببر ‪ DOM‬باسبببببتخدام ‪ ID‬أينم ب ببا اس ب ببتطعت‪ ،‬فتنفي ب ببذ ذل ب ببك س ب ببريعٌ ل ب ببدعم جميبببببع‬ ‫•‬
‫َ‬
‫استخدمت اسببم فئببة ‪ ،CSS‬فل تسببتعملها‬ ‫المتصفحات للدالة )(‪ .getElementById‬أما إذا‬
‫‪193‬‬
‫بمفردهببا؛ وإنمببا اسببتعمل )'‪ $('td.class‬أو )'‪ .$('#nav.class‬لكن بعببد هببذا الحببد لن‬
‫ً‬
‫ضئيل‪.‬‬ ‫ِ‬
‫تؤثر أنواع المُ ِ‬
‫حددات على الداء إل تأثيرًا‬
‫حدد وحيد إلى دالة ‪ jQuery‬أسرع بكثير من تمرير ِ‬

‫عدة ُمح ّددات‪.‬‬ ‫تمرير مُ ِ‬ ‫•‬
‫مثل )'‪ً $('#fine‬‬

‫بدل‬ ‫عمومً ا كلما كان تعبير التحديد أبسط كان الداء أسرع‪ ،‬استخدم ً‬ ‫•‬
‫من )'‪.$('#div div.class .right#fine‬‬
‫البحث في ُبببنى ‪ DOM‬البسببيطة أسببرع بكثببير من ُ‬

‫البب نى الكبببيرة والمعقببدة‪ .‬وبالتببالي يصبببح‬ ‫•‬
‫تمرير »السياق« مهمً ا ج ًدا عندما نتعامل مع بُنى ‪ DOM‬الكبيرة‪.‬‬
‫بددات ال ببتي ُت ِ‬
‫مرره ببا لدال ببة‬ ‫بع ببد معرفت ببك له ببذه المعلوم ببات‪ ،‬لن يص ببعب علي ببك الموازن ببة بين المُ ح ب ِ‬
‫ٌ‬
‫دالببة‬ ‫ِ‬
‫حببددات أسببرع بكثببير عنببدما تكببون هنالببك‬ ‫‪ jQuery‬وبين تحسببين أداء الشببيفرة‪ .‬ستصبببح المُ‬
‫ً‬
‫مبثببببببببببببل‪:‬‬ ‫)‬ ‫ٌ‬
‫موجبببببببببببودة في ‪ JavaScript‬والبببببببببببتي يمكن اسبببببببببببتعمالها من ‪jQuery‬‬ ‫ٌ‬
‫مكافئبببببببببببة لهبببببببببببا‬
‫)(‪.(getElementsByClassName‬‬
‫ً‬
‫مقارنة‬ ‫في أغلبية الحالت‪ ،‬توفير سياق إلى دالة ‪ jQuery‬سيزيد الداء كثيرًا‬
‫ملحاظة‬
‫بكتابة مُ ح ّددات مُ ّ‬
‫حسنة‪.‬‬
‫ستخدم أكثر من مرة‬

‫َ‬ ‫حددة التي ُت‬
‫الم ّ‬
‫‪ .4‬تخزين مجموعة العناصر ُ‬
‫مؤقتً ا‬
‫ً‬
‫مرجعية إلى نتيجة الطلبيببة‪ .‬فلببو‬ ‫ل ُت ِ‬
‫كر ر إنشاء طلبيات لنفس العناصر عندما تستطيع أن تملك‬
‫ببقا‪ ،‬فخب ِبزن نتيجببة المُ حب ِ‬

‫بدد في‬ ‫بئت إعب َ‬
‫بادة اسببتخدام مجموعببةِ تغليب ٍبف تحتببوي عناصببر مُ ح ب ّددة مسب ً‬ ‫شب َ‬
‫‪194‬‬
‫متغير محلي ومن ثم استخدم الكائن المحفوظ في الذاكرة عند الحاجة‪.‬‬

‫ٍ‬
‫مهم ج ًدا عندما نتعامل مع حلقات التكرار‪ .‬فيجب أن ُت ّ‬

‫خزن مجموعة التغليببف في‬ ‫ٌ‬ ‫هذا المفهوم‬
‫متغير محلي خارج الحلقة‪ ،‬لكي نتفادى تنفيذ نفس الطلبية في كل تكرار‪.‬‬
‫ٍ‬
‫ٌ‬
‫مثال بطيء‪// :‬‬
‫تنفيذ )'‪ $('ul li‬في كل تكرار ‪//‬‬
‫{ )‪for (i = 0; i < $('ul li').length; i++‬‬
‫تنفيذ )'‪ $('ul‬في كل تكرار ‪//‬‬
‫;)(‪$('ul').eq(i).text‬‬
‫}‬
‫ٌ‬
‫مثال سريع‪// :‬‬
‫تخزين الطلبية ‪//‬‬
‫;)'‪var list = $('ul‬‬
‫تخزين طول )عدد عناصأر( الطلبية ‪//‬‬
‫;‪var listLength = list.find('li').length‬‬
‫أخذ قيمة طول الطلبية من الذاكرة ‪//‬‬
‫{ )‪for (i = 0; i < listLength; i++‬‬
‫أخذ قيمة الطلبية من الذاكرة ‪//‬‬
‫;)(‪list.eq(i).text‬‬
‫}‬
‫‪195‬‬
‫حدثة على ‪ DOM‬أقل ما يمكن‬

‫الم َ‬
‫أبق التغييرات ُ‬
‫‪ِ .5‬‬
‫من المهم ج ب ًدا عنببد تحسببين أداء صببفحة الببويب أن ُنبقي تغيببيرات شببجرة ‪ DOM‬أقببل مببا يمكن‪،‬‬
‫أنه كلمببببا ّ‬
‫قلت تعاملتببببك معهببببا كلمببببا كببببان‬ ‫وعليببببك دائمًبببب ا أن تخبببببر نفسببببك عنببببد تعاملببببك مببببع ‪ّ DOM‬‬
‫ذلك أفضل‪.‬‬
‫جليبب ا عنببدما يببأتي المببر إلى التعامببل مببع حلقببات التكببرار‪ ،‬فببأوّ ل حلقببة في‬
‫ً‬ ‫يظهببر هببذا المفهببوم‬
‫لنك ل تحتاج إل إلى التعامل مببع‬ ‫ست ِ‬

‫حدث ‪ DOM‬بمقدار ‪ 100‬مرة! وهذا غير مقبول ّ‬ ‫الشيفرة التية ُ‬
‫ً‬
‫واحدة فقط‪.‬‬ ‫ً‬
‫مرة‬ ‫‪DOM‬‬
‫ٌ‬
‫;)'‪var list = $('ul‬‬
‫{ )‪for (i = 0; i < 100; i++‬‬
‫التعامل مع ‪ DOM‬لمئة مرة ‪//‬‬
‫;)'>‪list.append('<li>List item ' + i + '</li‬‬
‫}‬
‫ٌ‬
‫سلسة نصية فارغة ‪var listItems = ''; //‬‬
‫{ )‪for (i = 0; i < 100; i++‬‬
‫ُنية ‪//‬‬
‫ُنشِئ سلسلة نصية تحتوي على كامل ب‬
‫سن‬
‫‪ DOM‬التي نريد إضافتها ‪//‬‬
‫;'>‪listItems += '<li>List item ' + i + '</li‬‬
‫}‬
‫‪196‬‬
‫ً فقط ‪//‬‬
‫ً واحدة‬
‫سنستخدم الدالة )(‪ html‬لتحديث شجرة ‪ DOM‬مرة‬
‫;)‪$('ul').html(myListItems‬‬
‫ً‬
‫سلسلة نصية تحتوي على كامل بُنية ‪DOM‬؛ وبعببد ذلببك اسببتخدمنا‬ ‫استخدمنا في الحلقة الثانية‬
‫ً‬
‫واحدة فقط بتمريرها إلى الدالة )(‪.html‬‬ ‫ً‬
‫مرة‬ ‫هذه السلسلة النصية لتحديث ‪DOM‬‬
‫ً‬
‫قليل‪ ،‬فيمكننا استخدام الخاصية ‪ innerHTML‬لعنصر‬ ‫لتسريع تعديل بنى ‪DOM‬‬
‫ً‬
‫فبدل من )‪ $('div').html(stringOfHTML‬استعمل ‪$‬‬ ‫ً‬
‫مباشرة‪.‬‬ ‫‪DOM‬‬
‫ملحاظة‬
‫‪ .('div')[0].innerHTML = stringOfHTML‬وبهذا ستتخطى التعقيدات‬
‫الموجودة داخل دالة )(‪.html‬‬
‫‪ .6‬تحسين الداء عبر تمرير كائن يحتوي على مفاتيح وقيم إلى‬
‫دوال ‪jQuery‬‬
‫زوج وحيبببببدٍ‬ ‫ً‬
‫إضبببببافة إلى‬ ‫تقببببببل البببببدالتان )(‪ attr‬و )(‪ css‬كائنًبببببا فيبببببه الخاصبببببيات وقيمهبببببا‪،‬‬
‫ٍ‬
‫سي ِ‬
‫حسب ب ن تمري ببر ك ببائن من أداء الش ببيفرة بتقلي ببل ع ببدد كائن ببات ‪ jQuery‬المُ نش ببأة وبتقليل‬ ‫من القيم‪ُ .‬‬
‫الشيفرة المُ كرّ رة‪.‬‬
‫ٌ‬
‫;)'‪$('a').css('display', 'block‬‬
‫;)'‪$('a').css('color', 'red‬‬
‫;)'‪$('a').attr('title', 'Title Txt‬‬
‫;)'‪$('a').atrr('href', 'http://www.jquery.com‬‬
‫‪197‬‬
‫ٌ‬
‫)'‪$('a‬‬
‫)}'‪.css({'display': 'block', 'color': 'red‬‬
‫‪.attr({'title': 'Title Txt', 'href':‬‬
‫;)}'‪'http://www.jquery.com‬‬
‫حددات إلى دالة ‪jQuery‬‬

‫عدة ُم ِ‬
‫‪ .7‬تحسين الداء بتمرير ِ‬
‫من الممكن تجميع المُ ِ‬
‫حددات مع بعضها وتمريرها إلى دالة ‪ jQuery‬كمعامل وحيببد وذلببك بفصببل‬
‫تلك المحددات بفاصلة )كما في ‪ .(CSS‬سببيزيد ذلببك من الداء بتقليببل عببدد كائنببات ‪ jQuery‬المُ نشببأة‬
‫وبتقليل الشيفرة المُ كرّ رة‪.‬‬
‫ٌ‬
‫;)(‪$('#div1').hide‬‬
‫;)(‪$('#div2').hide‬‬
‫;)(‪$('#div3').hide‬‬
‫ٌ‬
‫;)(‪$('#div1, #div2, #div3').hide‬‬
‫‪ .8‬تحسين الداء باستخدام الدوال كسلسلة‬

‫ل تج ب ب ِر عمليب ببات بحث في ‪ DOM‬دون فائب ببدة‪ .‬من المنطقي اسب ببتخدام سلسب ببلة من الب ببدوال على‬
‫نفس الكببببببببائن وسببببببببيزيد ذلببببببببك من كفبببببببباءة الشببببببببيفرة‪ .‬وبفعلنببببببببا لببببببببذاك سببببببببنزيد من الداء بتقليل‬
‫تكرار الشيفرات‪.‬‬
‫‪198‬‬
‫ِة نسخ من كائن ‪// jQuery‬‬

‫ُنشِئ عد‬ ‫ٌ‬
‫مثال بطيٌ‬
‫ء ي‬
‫;)(‪$('div .open').hide‬‬
‫;)(‪$('div .close').show‬‬
‫;)(‪$('div').fadeIn‬‬
‫ٌ يستخدم سلسلة دوال ‪//‬‬ ‫ٌ‬

‫مثال سريع‬
‫للتعامل مع مجموعة التغليف الصألية ‪//‬‬
‫)'‪$('div‬‬
‫)'‪.find('.open‬‬
‫)(‪.hide‬‬
‫)(‪.end‬‬
‫)'‪.find('.close‬‬
‫)(‪.show‬‬
‫)(‪.end‬‬
‫;)(‪.fadeIn‬‬
‫ٍ بديل أن نفعل التي‪// :‬‬

‫يمكننا بشكل‬
‫ًا ‪var $div = $(div); //‬‬
‫ًا مؤقت‬
‫تخزين مجموعة التغليف تخزين‬
‫;)(‪$div.find('.open').hide‬‬
‫;)(‪$div.find('.close').show‬‬
‫;)(‪$div.fadeIn‬‬
‫‪ .9‬استخدم حالقة التكرار ‪ for‬عند التعامل مع حالقات التكرار الكبيرة‬

‫الدوال وبنى التحكم المُ ضمّ نة في المتصفح أسببرع دومًب ا! لكن السببؤال الببذي يجب أن نسببأله في‬
‫أغلبيبببة الحبببالت هبببو‪ :‬بكم أسبببرع؟ الزيبببادة في السبببرعة في أغلبيبببة الحبببالت تكبببون ضبببئيلة‪ .‬فلهبببذا‬
‫‪199‬‬
‫أسببببببتخدمُ الدالببببببة )(‪ each‬في ‪ jQuery‬ب ً‬

‫ببببببدل من اسببببببتخدام حلقببببببة تكببببببرار موجببببببودة في أسبببببباس‬
‫لغة ‪.JavaScript‬‬
‫أن جميع المهام التكراريببة الصببغيرة )الببتي تكببون أقببل من ‪ 1000‬تكببرار(‬

‫القاعدة التي أتبعها هي ّ‬
‫سيسب ِبهل من كتابببة الشببيفرات‪ ،‬وهببذا أكببثر‬ ‫ُت ِ‬

‫ناس بب الدالببة )(‪ each‬تمامًب ا‪ .‬واسببتخدام الدالببة )(‪ُ each‬‬
‫قيم ب ً‬
‫بة من التحس ببين الض ببئيل في الداء الببذي يببأتي من اس ببتخدام حلق ببات التك ببرار المُ ضببمنة في لغببة‬
‫بفبببببارق حقيقي عنبببببدما‬

‫ٍ‬ ‫‪ JavaScript‬في حلقبببببات التكبببببرار الصبببببغيرة‪ .‬والحبببببق يُ قبببببال أنبببببني ل أشبببببعر‬
‫ِ‬
‫أجرب الصفحة‪.‬‬
‫أمببا عنببدما يببأتي المببر إلى حلقببات التكببرار الكبببيرة )أكببثر من ‪ 1000‬تكببرار( فربمببا عليببك أن تبببدأ‬
‫مهم جب ًدا في متصببفح‬

‫ٌ‬ ‫بقيبباس الفببرق بين تنفيببذ حلقببات ‪ JavaScript‬وحلقببات ‪ .jQuery‬هببذا الختبببار‬
‫‪ Internet Explorer‬الذي يتعامل ببطء شديد مع جميع حلقات التكرار الكبيرة‪.‬‬
‫‪ .10‬تغيير المظهر باستخدام ‪ ID‬و ‪ً Class‬‬

‫بدل من تعديل خاصيات‬
‫مباشرة‬
‫ً‬ ‫‪style‬‬
‫عندما نتعامل مع خاصيات ‪ CSS‬فمن الفضل تحديث عنصر ‪ DOM‬وإضافة فئة )‪ (class‬جديدة‬
‫ً‬
‫مباشرة عبر الدالة )(‪) css‬مثال حي(‪:‬‬ ‫أو خاصية ‪ً id‬‬
‫بدل من تحديث خاصية ‪style‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫‪200‬‬
.newStyles {
background-color: red;
display: block;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div></div>
<script
y.min.js"></script>
<script>
(function($)
{
ٌ
// :‫مثال بطيء‬
$('div').css(
{
'display': 'block',
'width': '100px',
'height': '100px',
'background-color': '#f00'
});
201
ٌ
// :‫مثال سريع‬
$('div').addClass('newStyles');
})(jQuery);
</script>
</body>
</html>
202
‫الفصل العاشر‪:‬‬
‫المؤثرات في ‪jQuery‬‬
‫‪10‬‬
jQuery ‫تعلم‬ jQuery ‫ المؤثرات في‬:‫الفصل العاشر‬
jQuery ‫ تعطيل جميع دوال المؤثرات في‬.1

true ‫ بإسببناد القيمببة‬jQuery ‫من الممكن تعطيببل جميببع دوال الحركببات والمببؤثرات الببتي توفرهببا‬
:(‫ كما يلي )مثال حي‬off ‫إلى الخاصية‬
<!DOCTYPE html>
<html lang="en">
<body>
<div style="height:100px; width:100px; background-
color:red; position:absolute;
left:20px;">
Try to animate me!
</div>
<script
y.min.js"></script>
<script>
(function($)
{
jQuery.fx.off = true;
// ‫ً دون مؤثرات‬
‫سيختفي العنصر مباشرة‬
$('div').slideUp();
})(jQuery);
</script>
</body>
</html>
204
‫ فلن تظه ببر أيّب ب ة حرك ببات في دوال الت ببأثيرات وس ببتظهر أو‬true ‫ إلى‬off ‫عن ببد ض بببط الخاص ببية‬
ً ‫تختفي مباشب‬
‫ يمكنببك‬.display:block ‫ و‬display:none ‫ الببتي هي‬CSS ‫برة باسببتخدام خاصببيات‬
:(‫ )مثال حي‬off ‫ إلى الخاصية‬false ‫إعادة تفعيل الحركات بإسناد القيمة‬
<!DOCTYPE html>
<html lang="en">
<body>
left:20px;">
Try to animate me!
</div>
<script
y.min.js"></script>
<script>
(function($)
{
jQuery.fx.off = true;
// ‫ً دون حركات‬
‫سيختفي العنصر مباشرة‬
$('div').slideUp();
jQuery.fx.off = false; // ‫ً أخرى‬

‫تفعيل الحركات مرة‬
$('div').slideDown(); // ‫سيظهر العنصر مع حركات‬
205
‫تعلم ‪jQuery‬‬ ‫الفصل العاشر‪ :‬المؤثرات في ‪jQuery‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫‪ .2‬فهم آلية عمل دالة الحركات )(‪stop‬‬

‫حاليببب ا قببببل الببببدء ببببأخرى‪ .‬على سببببيل المثبببال عنبببد‬
‫ً‬ ‫ً‬
‫عبببادة إيقببباف حركبببة تجبببري‬ ‫من الضبببروري‬
‫استخدام الحداث الخاصببة ‪ mouseenter‬و ‪) mouseleave‬أو الدالببة )(‪ (hover‬فقببد ُتفعّ ل الحركببة‬
‫ً‬
‫نتيجبببة لحبببدث ‪ mouseenter‬أو ‪ mouseleave‬سبببابق‪ .‬وبسببببب محاولبببة‬ ‫ً‬
‫سبببلفا‬ ‫عنصبببر يتحبببرك‬ ‫على‬
‫ٍ‬
‫إجببراء مجموعببة من الحركببات‪ ،‬فسببيؤدي ذلببك إلى حببدوث خطببأ واضببح في الحركببة؛ ولتفببادي ذلببك‬
‫استخدم الدالة )(‪ stop‬ليقاف الحركة الحالية قبل البدء بحركة جديدة )مثال حي(‪:‬‬
‫>‪<body‬‬
‫‪<div style="height:100px; width:100px; background-‬‬
‫;‪color:red; position:absolute‬‬
‫>";‪left:20px‬‬
‫!‪Hover over Me‬‬
‫>‪</div‬‬
‫‪<script‬‬
‫‪206‬‬
‫{‬
‫(‪$('div').hover‬‬
‫)(‪function‬‬
‫{‬
‫;)'‪$(this).stop().animate({left: 75}, 'fast‬‬
‫‪},‬‬
‫)(‪function‬‬
‫{‬
‫;)'‪$(this).stop().animate({left: 20}, 'fast‬‬
‫}‬
‫;)‬
‫>‪</body‬‬
‫>‪</html‬‬
‫ِ‬
‫عبببدة مبببرات لبببترى مببباذا‬ ‫ِ‬
‫وحبببرك الفبببأرة فب ببوق العنصب ببر‬ ‫أزل دوال )(‪ stop‬من الشبببيفرة السبببابقة‬
‫س ببيحدث بالحرك ببة‪ .‬تحري ببك الف ببأرة ف ببوق العنص ببر س ببيؤدي إلى ت ببراكم الحرك ببات‪ ،‬وه ببذا م ببا ل تري ببده‬
‫بكل تأكيد‪.‬‬
‫‪207‬‬
‫ً‬
‫أيضا‬ ‫بالضافة إلى إمكانية إيقاف الحركة الحالية للعنصر المُ ح ّدد‪ ،‬يمكنك‬
‫إيقاف جميع الحركات المتراكمة بتمرير القيمة ‪ true‬إلى الدالة )(‪ stop‬وهذا‬
‫ً‬ ‫ملحاظة‬
‫مفعلة )أي تجري‬ ‫سواء كانت‬
‫ً‬ ‫سيؤدي إلى إيقاف جميع الحداث المتراكمة‬
‫الن( أم ل‪.‬‬
‫‪ .3‬معرفة إن كان العنصر يخضع إلى حاركة عبر ‪:animated‬‬

‫حالي ا إلى حركببة‪.‬‬
‫ًب‬ ‫يمكن أن يُ ستعمَ ل المُ ِ‬
‫رشح الخاص ‪ :animated‬لتحديد العناصر الببتي تخضببع‬
‫سأسبببببببتخدم في المثبببببببال التي هبببببببذا المُ ح ِ‬

‫بببببببدد لضبببببببافة نص إلى عنصبببببببر >‪ <div‬خاضبببببببع للحركة‬
‫>‪<body‬‬
‫>‪color:red; color:white"></div‬‬
‫‪<script‬‬
‫{‬
‫)(‪function recursiveAnimate‬‬
‫{‬
‫;)‪$('div').slideToggle('slow', recursiveAnimate‬‬
‫‪208‬‬
‫;}‬
‫;)(‪recursiveAnimate‬‬
‫;)'‪$('div:animated').text('I am animating‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫‪ .4‬استخدام الدوال )(‪ show‬و )(‪ hide‬و )(‪ toggle‬دون حاركة‬

‫سبببببيؤدي تمريبببببر معامبببببل إلى البببببدوال )(‪ show‬و )(‪ hide‬و )(‪ toggle‬إلى إظهبببببار أو إخفببببباء‬
‫العناصببر مببع اسببتخدام حركببة عبببر تغيببير خاصببيات ‪ CSS‬التاليببة‪ height :‬أو ‪ width‬أو ‪ opacity‬أو‬
‫‪ margin‬أو ‪ .padding‬من الممكن أن نوقف الحركات عند إخفاء أو إظهار العناصر‪ ،‬وذلببك عنببد عببدم‬
‫تمرير أيّ ة وسائط لتلك الدوال‪ ،‬وهذا سيؤدي إلى تغيير كيفية تعديل تلك الببدوال لظهببور العنصببر؛ إذ‬
‫ً‬
‫مباشبببرة دون حركبببات‪ ،‬وذلبببك عب بببر تعبببديل قيمبببة خاصب ببية‬ ‫سب ببتظهر أو سب ببتختفي العناصب ببر المتبببأثرة‬
‫‪ display‬في ‪) CSS‬مثال حي(‪:‬‬
‫>‪<head‬‬
‫>"‪<style type="text/css‬‬
‫‪209‬‬
div {
height: 100px;
width: 100px;
background-color: red;
color: white;
margin: 5px;
}
</style>
</head>
<body>
<div>Click Me (hide animation)</div>
<div>Click Me (hide no animation)</div>
<script
y.min.js"></script>
<script>
(function($)
{
// ‫إخفاء مع حركات‬
$('div:first').click(function()
{
$(this).hide(1000)
});
// ‫إخفاء دون حركات‬
$('div:last').click(function()
{
210
‫)(‪$(this).hide‬‬
‫;)}‬
‫>‪</body‬‬
‫>‪</html‬‬
‫دوال ‪ hide() jQuery‬و )(‪ show‬و )(‪ toggle‬و )(‪slideUp‬‬

‫و )(‪ slideDown‬و )(‪ slideToggle‬عندما ُتستخ َدم على العناصر التي لها‬
‫ملحاظة‬
‫غير مؤق ًتا إلى ‪display:block‬‬ ‫ُ‬
‫فست ّ‬ ‫القيمة ‪ inline‬لخاصية ‪،display‬‬
‫خلل مدة الحركة‪.‬‬
‫‪ .5‬فهم الحركات المتزامنة وغير المتزامنة‬

‫وقت واحببد‪ ،‬وبين الحركببات الببتي‬
‫ٍ‬ ‫من المهم أن تفهم الفببرق بين الحركببات الببتي تحببدث معً ب ا في‬
‫تتعب بباقب خلل فب ببترةٍ من الب ببزمن‪ .‬افتراضب ب ًبيا‪ ،‬عنب ببدما ُتسب ببتعمَ ل دوال المب ببؤثرات كسلسب ببلة فسب ببتحدث‬
‫المؤثرات بالتتالي بعضها تلو بعض )مثال حي(‪:‬‬
‫>‪<body‬‬
‫;‪color:red; position:absolute‬‬
‫>"‪left:20px; border:1px solid #ff9933‬‬
‫‪211‬‬
Animate me!
</div>
left:20px; top:100px; border:1px solid #ff9933">
Animate me!
</div>
<script
y.min.js"></script>
<script>
(function($)
{
// ‫كل مؤثر سيحدث على حدة بعد انتهاء‬
// ‫المؤثر الذي قبله‬
$('div:first')
.slideUp('slow').slideDown('slow').hide('slow');
// ‫كل مؤثر سيحدث على حدة بعد انتهاء‬

// ‫المؤثر الذي قبله‬
$('div:last').animate(
{
width: '200px'
}, 1000).animate(
{
borderLeftWidth: '10px'
212
}, 1000);
})(jQuery);
</script>
</body>
</html>
‫ فيمكننببا أن نضبببط حببدوث المببؤثرات في الببوقت نفسببه‬animate() ‫أمببا عنببد اسببتخدام الدالببة‬
‫ سببيزداد في المثببال‬.‫ وحيببدة‬animate() ‫ الببتي نريببد تغييرهببا إلى دالببة‬CSS ‫بتمريببر جميببع خاصببيات‬
:(‫وسي ضاف له إطار على طرفه اليسر في نفس الوقت )مثال حي‬
ُ <div> ‫التي عرض العنصر‬
<!DOCTYPE html>
<html lang="en">
<body>
left:20px; border:1px solid #ff9933">
Animate me!
</div>
<script
y.min.js"></script>
<script>
(function($)
{
213
‫سيحدث كل المؤثرين في نفس الوقت ‪//‬‬

‫(‪$('div').animate‬‬
‫{‬
‫‪width: '200px',‬‬
‫'‪borderLeftWidth: '10px‬‬
‫;)‪}, 1000‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫‪ .6‬الدالة )(‪ animate‬هي الدالة الساسية‬

‫الدالببة )(‪ animate‬هي الدالببة الساسببية ذات المسببتوى المنخفض )‪ (low level‬الببتي ُتسببتخ َدم‬
‫مثل‪ hide() :‬أو )(‪ (slideDown‬وت ب ِ‬

‫بوفر الق ببدرة على‬ ‫ببقا ) ً‬
‫لنش بباء جمي ببع الحرك ببات المض بببوطة مس ب ً‬
‫تغيير قيمة الخاصية ‪) style‬خلل فترة زمنية(‪.‬‬
‫هذا ما يجب عليك أن تعرفه عندما تستخدم هذه الدالة‪:‬‬
‫بكلم آخببر‪ ،‬ل يمكنببك‬

‫ٍ‬ ‫الخاصيات الوحيدة المدعومة هي الخاصيات التي تقبل قيمً ا رقميب ً‬
‫بة‪.‬‬ ‫•‬
‫إنشببباء مبببؤثرات لقيمبببة الخاصبببية ‪) backgroundColor‬على القبببل ليس ببببدون إضبببافة(‪.‬‬
‫وكذلك المر للخاصيات التي تأخذ أكثر من قيمة مثل ‪.backgroundPosition‬‬
‫في إص ببدار ‪ jQuery 1.2‬وم ببا بعببده‪ ،‬يمكن ببك إنشبباء مببؤثرات لخاص ببيات ‪ CSS‬باس ببتخدام ‪em‬‬ ‫•‬
‫و ‪ %‬إن أمكن ذلك‪.‬‬
‫‪214‬‬
‫يمكن إنشاء مؤثرات نسبية باسببتخدام »=‪ «+‬أو »=‪ «-‬أمبام قيمببة الخاصببية‪ .‬حيث يمكنببك‬ ‫•‬
‫ً‬
‫نسبة إلى مكانه الحالي‪.‬‬ ‫سلبيا(‬
‫ً‬ ‫إيجابيا أو‬
‫ً‬ ‫استخدام هذه التقنية لتحريك العنصر )‬
‫ً‬
‫مببدة للحرك ببة‪ ،‬فس ببتحدث الحرك ببة‬ ‫َ‬
‫حببددت القيمببة ‪0‬‬ ‫في إص ببدار ‪ jQuery 1.3‬وم ببا بعببده‪ ،‬إذا‬ ‫•‬
‫ً‬
‫مباشرة وستتحول العناصر إلى التنسيق النهائي دون حركة‪.‬‬
‫فست َ‬
‫عكس حركة التأثير من النهاية إلى البداية‪.‬‬ ‫ُ‬ ‫كاختصار‪ ،‬إذا مُ ِررَ َ‬
‫ت القيمة ‪toggle‬‬ ‫•‬
‫جميع خاصيات ‪ CSS‬المضبوطة عبر دالة )(‪ animate‬وحيدة ستتحرك في نفس الوقت‪.‬‬ ‫•‬
‫‪ .7‬فهم آلية عمل دوال الختفاء في ‪jQuery‬‬

‫يجب أن تعي المفبببببببباهيم الثلثببببببببة التيببببببببة عنببببببببد اسببببببببتخدام دوال )(‪ fadeIn‬و )(‪fadeOut‬‬
‫و )(‪.fadeTo‬‬
‫على عكس بقية دوال المؤثرات‪ ،‬دوال الختفاء سب ُبت ِ‬

‫عدل شببفافية العنصببر‪ .‬وسب ُبيف َترَ ض عنببد‬ ‫•‬
‫ً‬
‫وعرضا‪.‬‬ ‫ً‬
‫طول‬ ‫أن العنصر الذي »سيختفي« يملك‬
‫استخدام هذه الدوال ّ‬
‫بدءا من شفافيته الحالية‪.‬‬

‫ً‬ ‫دوال الختفاء ستؤدي إلى إخفاء العنصر‬ ‫•‬
‫بدءا من شفافيته الحالية وعنببدما‬

‫ً‬ ‫استخدام الدالة )(‪ fadeOut‬سيؤدي إلى إخفاء العنصر‬ ‫•‬
‫غير قيمة الخاصية ‪ display‬في ‪ CSS‬إلى ‪.none‬‬ ‫ُ‬

‫فست ّ‬ ‫ً‬
‫شفافا بنسبة ‪%100‬‬ ‫يصبح‬
‫ّ‬
‫موضحة في الشيفرة التية )مثال حي(‪:‬‬ ‫جميع النقط السابقة‬
‫‪215‬‬
<body>
ً

color:red;"></div>
<button>Fade the rest of the way</button>
<script
y.min.js"></script>
<script>
(function($)
{
$('div').fadeTo('slow', 0.50);
{
// 0 ‫إخفاء العنصر من الشفافية الحالية إلى‬
// display:none ‫ًا عبر الخاصأية‬
‫ثم إخفاء العنصر تمام‬
$('div').fadeOut('slow');
});
})(jQuery);
</script>
</body>
</html>
216
‫الفصل الحادي عشر‪:‬‬
‫تقنية ‪Ajax‬‬
‫‪11‬‬
‫تعلم ‪jQuery‬‬ ‫الفصل الحادي عشر‪ :‬تقنية ‪Ajax‬‬
‫‪ .1‬الدالة )(‪ ajax‬هي الدالة الساسية‬

‫الدال ببة )(‪ ajax‬هي الدال ببة الساس ببية ذات المس ببتوى المنخفض ال ببتي تس ببتخدم لنش بباء طلب ببات‬
‫‪) XMLHttpRequest‬أي ‪ .(AJAX‬جميبببببع دوال ‪ AJAX‬الخبببببرى في ‪– jQuery‬مثبببببل )(‪ –load‬تسبببببتعمل‬
‫الدالب ب ببة )(‪ .ajax‬الدالب ب ببة )(‪ ajax‬لهب ب ببا الكثببببببير من المب ب ببيزات وقابلب ب ببة للتخصببببببيص لنشب ب بباء طلبب ب ببات‬
‫‪ XMLHttpRequest‬تناسب احتياجاتنا‪.‬‬
‫الكب ببائن ‪ XMLHttpRequest‬هب ببو جب ب ٌ‬

‫بزء من تقنيب ببة ‪ ،Ajax‬ويمكن باسب ببتخدام هب ببذه التقنيب ببة تمريب ببر‬
‫البيانببات بين المتصببفح والخببادم‪ ،‬ولن نحتبباج إلى تحببديث الصببفحة عنببد فعببل ذلببك‪ .‬انتشببر اسببتعمال‬
‫الكببائن ‪ XMLHttpRequest‬كثببيرًا في الفببترة الخببيرة ممببا أدى إلى بنبباء تطبيقببات ويب مثل ‪Google‬‬
‫‪ Maps‬و ‪ Gmail‬التي تستخدم الكائن ‪ XMLHttpRequest‬لعرض أجزاء أخرى من الخريطة أو رسببائل‬
‫البريد اللكتروني الجديدة دون الحاجة إلى إعادة تحميل كامل الصفحة‪.‬‬
‫ً‬
‫اختلفببا كبببيرًا‪ ،‬وهببذا‬ ‫لسوء الحظ‪ ،‬تختلف الواجهة البرمجية للتعامل مع ‪ Ajax‬بين المتصببفحات‬
‫أن على الم بببرمجين أن يأخ ببذوا بالحس بببان جمي ببع الختلف ببات بين المتص ببفحات لض ببمان عم ببل‬
‫يع ببني ّ‬
‫موح ً‬
‫دة الفروقببات بين‬ ‫ِ‬ ‫بدعم لتقنيببة ‪Ajax‬‬
‫بكل سببليم؛ لكن لحسببن الحببظ‪ ،‬تببأتي ‪ jQuery‬بب‬
‫ٍ‬ ‫تقنية ‪ Ajax‬بشب ٍ‬
‫بابقا‪ ،‬وت ب ِ‬
‫بوفر‬ ‫المتص ببفحات في واجه ببة برمجي ببة خاص ببة ب ببه‪ ،‬وت ب ِ‬
‫بوفر الدال ببة )(‪ ajax‬ال ببتي ذكرناه ببا س ب ً‬
‫ً‬
‫دوال أخببرى مختصببرة لنببواع ُمحب ّددة من طلبيببات ‪ .XMLHttpRequest‬هببذه الببدوال مببا‬ ‫ً‬
‫أيضا‬ ‫‪jQuery‬‬
‫ٌ‬
‫اختصارات للدالة )(‪ ،ajax‬وهي‪:‬‬ ‫هي إل‬
‫)(‪load‬‬ ‫•‬
‫)(‪get‬‬ ‫•‬
‫)(‪getJSON‬‬ ‫•‬
‫‪218‬‬
‫)(‪getScript‬‬ ‫•‬
‫)(‪post‬‬ ‫•‬
‫ٌ‬
‫مفيدة في بعض الحيببان‪ ،‬لكنهببا جميعًب ا تسببتخدم‬ ‫أن هذه الختصارات‬
‫الفكرة الساسية هنا هي ّ‬
‫)(‪ ajax‬وراء السببتار‪ .‬وعنببدما تريببد اسببتخدام جميببع المببيزات والتخصيصببات الببتي توفرهببا ‪jQuery‬‬
‫لتقنية ‪ ،AJAX‬فعليك حينها استخدام الدالة )(‪.ajax‬‬
‫أشببهر طريقتببان لرسببال الطلبيببات إلى الخببادم همببا ‪ GET‬و ‪ ،POST‬ومن المهم فهم الفببرق بينهمببا‬
‫ً‬
‫صحيحا‪.‬‬ ‫ً‬
‫استعمال‬ ‫لستعمالهما‬
‫الطريقببة ‪ GET‬تسببتعمل للعمليببات » غببير الهادمببة«‪ ،‬أي العمليببات الببتي تتضببمن »الحصببول« على‬
‫ً‬
‫فمثل‪ :‬نسببتخدم طلبيببة ‪ GET‬عنببد محاولببة الحصببول على نتببائج‬ ‫البيانات من الخببادم‪ ،‬وليس تعببديلها؛‬
‫أن طلبيبببببات ‪ GET‬يمكن تخزينهبببببا مؤق ًتب ببا )‪ (cached‬في‬

‫من أح ب ببد محرك ب ببات البحث‪ .‬يج ب ببدر بالبببببذكر ّ‬
‫المتصفحات‪ ،‬مما قد يؤدي إلى سلوكٍ غير متوقع إذا لم تضع ذلك بالحسبان‪.‬‬
‫أم ببا الطريق ببة ‪ POST‬فهي تس ببتعمل للعملي ببات »الهادم ببة«‪ ،‬أي العملي ببات ال ببتي ت ببؤدي إلى تع ببديل‬
‫ظ المسبببتخدم منشبببورًا في مدونتبببه فيجب حينئبببذٍ‬ ‫ً‬

‫فمثل‪ ،‬إذا َحفِببب َ‬ ‫البيانبببات الموجبببودة في الخبببادم‪.‬‬
‫ً‬
‫عبببادة‬ ‫أن طلبيبببات ‪ POST‬ل ُت ّ‬
‫خبببزن مؤق ًتبببا‬ ‫اسبببتخدام الطريقبببة ‪ POST‬لنقبببل البيانبببات؛ يجبببدر بالبببذكر ّ‬
‫من المتصفح‪.‬‬
‫افتراضيا‪ ،‬الدالتان )(‪ ajax‬و )(‪ load‬ستستخدمان الطريقة ‪ GET‬في‬

‫ً‬
‫ملحاظة‬
‫بروتوكول ‪.HTTP‬‬
‫لمزيدٍ من المعلومات والمثلة عن استعمال الدالة )(‪ ،ajax‬يرجى مراجعة التوثيق الرسمي‪.‬‬
‫‪219‬‬
‫‪ .2‬تدعم ‪ jQuery‬تقنية ‪ JSONP‬العابرة للنطاقات‬

‫تقنية ‪) JSONP‬اختصببار للعبببارة ‪ (JSON with Padding‬هي تقنيببة تسببمح لمُ ِ‬
‫رسبل طلبيببة ‪HTTP‬‬
‫ِ‬
‫يوفر اسمً ا للدالة الببتي ُ‬
‫ستسببتدعى ويُ مببرّ ر كببائن ‪ JSON‬إليهببا كوسببيط‪.‬‬ ‫–عندما ُتعاد صيغة ‪ –JSON‬أن‬
‫ه ببذه التقني ببة ل تس ببتخدم ‪XHR‬؛ وإنم ببا تس ببتخدم العنص ببر ‪ script‬لكي نتمكن من اس ببتقبال وإرس ببال‬
‫أي موق ببع‪ .‬اله ببدف من ه ببذه التقني ببة ه ببو اللتف بباف على المح ببدوديات الناجم ببة عن‬
‫البيان ببات من وإلى ّ‬
‫»سياسة المصدر الواحد« )‪ (same-origin policy‬في تقنية ‪.XHR‬‬
‫ببببباق‬
‫باسبببببتخدام دالبببببة ‪ jQuery‬ذات السبببببم )(‪ getJSON‬يمكننبببببا تحميبببببل بيانبببببات ‪ JSON‬من نط ٍ‬
‫)‪ (domain‬آخر عندما ُتضاف الدالببة المُ عالِجببة لطلبيببة ‪ JSONP‬إلى رابببط ‪ .URL‬كمثببال‪ ،‬هببذا هببو رابببط‬
‫‪ URL‬الذي سنستخدمه للوصول إلى الواجهة البرمجية لموقع ‪.flickr‬‬
‫‪http://api.flickr.com/services/feeds/‬‬
‫?‪photos_public.gne‬‬
‫?=‪tags=resig&tagmode=all&format=json&jsoncallback‬‬
‫القيمببة ? ُتسببتخ َدم كاختصببار يخبببر ‪ jQuery‬أن تسببتدعي الدالببة الببتي مُب ِررت كوسببيط إلى الدالببة‬
‫)(‪ .getJSON‬يمكنك وضع اسم الدالة التي تريدها إن لم تشأ استخدام هذا الختصار‪.‬‬
‫سأضببيف إلى صببفحة الببويب في المثببال التي أحببدث الصببور الببتي تملببك الوسببم » ‪ «resig‬عبببر‬
‫استخدام الواجهة البرمجية لموقببع ‪ .flickr‬لحببظ أنببني أسببتخدم الختصببار ? لكي تسببتدعي ‪jQuery‬‬
‫ُ‬
‫مررتها إلى الدالةِ )(‪ .getJSON‬الوسيط الذي ُ‬
‫سيمرّ ر إلى تلك الدالة هو كائن ‪ JSON‬الذي‬ ‫َ‬
‫الدالة التي‬
‫استقبلناه من الموقع الخارجي )مثال حي(‪:‬‬
‫‪220‬‬
jQuery ‫تعلم‬ Ajax ‫ تقنية‬:‫الفصل الحادي عشر‬
<!DOCTYPE html>
<html lang="en">
<body>
<script
y.min.js"></script>
<script>
(function($)
{
// ‫استخدام ? سيعني استدعاء الدالة‬
// getJSON() ‫التي مررناها إلى الدالة‬
$.getJSON("http://api.flickr.com/services/feeds/photos_public
.gne?tags=resig&tagmode=all&format=json&jsoncallback=?",
function(data)
{
// ‫ الذي‬JSON ‫ هو كائن‬data ‫الوسيط‬
// Flickr ‫استقبلناه من‬
$.each(data.items, function(i, item)
{
$('<img />').attr("src",
item.media.m).appendTo('body');
if (i == 30) return false;
});
});
})(jQuery);
221
‫>‪</body‬‬
‫>‪</html‬‬
‫راجع توثيق الواجهة البرمجية )‪ (API‬للخدمة التي تستقبل البيانات منها لكي‬
‫تعرف الستخدام الصحيح لها‪ .‬على سبيل المثال‪ ،‬موقع ‪ Flickr‬يستعمل‬ ‫ملحاظة‬
‫?=‪ jsoncallback‬بينما !‪ Yahoo‬و ‪ Digg‬يستخدمان ?=‪.callback‬‬
‫‪ .3‬منع المتصفح من تخزين طلبيات ‪ XHR‬مؤقتً ا‬

‫نشبئ طلبيببة ‪ ،XHR‬فسب ُبي ِ‬
‫خزن متصبفح ‪ Internet Explorer‬الببرد )‪ (response‬مؤق ًتببا‪ .‬وإذا‬ ‫عندما ُت ِ‬
‫كان الرد ثاب ًت ا والذي سيصلح لفترةٍ من الزمن‪ ،‬فمن المستحسن تخزينه مؤق ًتا‪ .‬أما إذا كببان المحتببوى‬
‫أن المتصببفح لن‬ ‫ّ‬

‫تتأكببد ّ‬ ‫يتغير في أيّ ة ثانية‪ ،‬فعليببك حينئببذٍ أن‬
‫ّ‬ ‫الذي تطلبه هو محتوى ديناميكي وقد‬
‫يُ خ ب ِبزن ال ببرد مؤق ًتببا‪ .‬أح ببد الحل ببول الممكن ببة ه ببو تمري ببر قيم ببة فري ببدة في عن ببوان ‪ URL‬للطلبي ببة‪ ،‬وبه ببذا‬
‫أن كل طلبية يجريها المتصفح هي طلبية فريدة لها رابط ‪ URL‬مختلف‪.‬‬

‫ستتأكد ّ‬
‫إضافة عبارة فريدة في نهاية الرابط ‪//‬‬

‫(‪jQuery.ajax‬‬
‫‪url:'some.php?nocache='+(new Date()).getTime(),‬‬
‫'‪type:'POST‬‬
‫;)‬
‫‪222‬‬
‫أحببد الحلببول الخببرى – وهببو حب ٌ‬

‫بل عببامٌ– هببو أن تضبببط عببدم تخببزين الطلبيببات مؤق ًتببا في جميببع‬
‫طلبيببات ‪ Ajax‬وهببذا باس ببتخدام الخيببار ‪ .cache‬سنس ببتخدم هن ببا الدالببة ‪ ajaxSetup‬لضبببط تعطي ببل‬
‫التخزين المؤقت لجميع طلبيات ‪:Ajax‬‬
‫{( ‪$.ajaxSetup‬‬
‫القيمة هي ‪ true‬افتراضي‬
‫ًا ‪//‬‬
‫القيمة ‪ false‬تعني إيقاف التخزين المؤقت ‪//‬‬
‫‪cache: false‬‬
‫;)}‬
‫معينببة‪ ،‬فيمكنببك ببسبباطة تغيببير الخيببار‬

‫ّ‬ ‫َ‬
‫أردت الن تفعيببل التخببزين المببؤقت لطلبيببات ‪XHR‬‬ ‫وإن‬
‫ٌ‬
‫مثبال أجرينببا فيببه طلبيببة ‪ XHR‬باسببتخدام الدالببة )(‪ ajax‬مببع‬ ‫‪ cache‬باستخدام الدالة )(‪ .ajax‬هببذا‬
‫تجاوز الضبط الفتراضي وتخزين الرد مؤق ًتا‪:‬‬
‫{( ‪$.ajaxSetup‬‬
‫‪cache: false‬‬
‫;)}‬
‫(‪jQuery.ajax‬‬
‫‪cache: true,‬‬
‫‪url: 'some.php',‬‬
‫'‪type:'POST‬‬
‫;)‬
‫‪223‬‬
‫الفصل الثاني عشر‪:‬‬
‫مواضيع متفرقة‬
‫‪12‬‬
‫تعلم ‪jQuery‬‬ ‫الفصل الثاني عشر‪ :‬مواضيع متفرقة‬
‫‪ .1‬تخزين البيانات في عناصر ‪DOM‬‬

‫من الممكن عبببر الدالببة )(‪ data‬تخببزين قيم ‪) JavaScript‬أي السلسببل النصببية والعببداد والقيم‬
‫المنطقيببة ]‪ [boolean‬والكائنببات والمصببفوفات…( ضببمن عناصببر ‪ .DOM‬هببذا الحببل لتخببزين البيانببات‬
‫ً‬
‫فمثل‪ ،‬علينببا تفببادي تخببزين البيانببات‬ ‫في عناصر ‪ DOM‬أفضل من تخزينهببا كقيمببة لخاصببيات العنصببر‪.‬‬
‫ُ‬
‫سأ ِ‬
‫خز ن في المثال التي اللون الذي تم اختيبباره من القائمببة في‬ ‫في خاصيات ‪ title‬و ‪ alt‬و ‪.rel‬‬
‫ً‬
‫لحقا‪.‬‬ ‫عنصر >‪ ، <ul‬والذي يمكن أن نحصل على القيمة المُ ّ‬
‫خزنة فيه‬
‫>"‪<style type="text/css‬‬
‫{ ‪.selected‬‬
‫;‪background-color: #ffc‬‬
‫}‬
‫>‪<body‬‬
‫>‪<ul‬‬
‫>‪<li><a href="#">red</a></li‬‬
‫>‪<li><a href="#">orange</a></li‬‬
‫>‪<li><a href="#">blue</a></li‬‬
‫>‪<li><a href="#">green</a></li‬‬
‫>‪</ul‬‬
‫‪<script‬‬
‫‪225‬‬
jQuery ‫تعلم‬ ‫ مواضيع متفرقة‬:‫الفصل الثاني عشر‬
<script>
(function($)
{
$('a').click(function()
{
$this = $(this);
$ul = $this.closest('ul');
// ‫تخزين القيمة النصية الموجودة داخل العنصر‬
$ul.data('selectedColor', $this.text());
$ul.find('a').removeClass('selected')
.end().end().addClass('selected');
// ‫مختار‬
ُ‫إظهار اللون ال‬
alert($ul.data('selectedColor'));
})
})(jQuery);
</script>
</body>
</html>
ً ) jQuery ‫بببببادة على عنصبببببرٌ ُمحببببب ّدد عببببببر دالبببببة‬

:‫مثل‬ ً ‫ ُتسبببببتخ َدم ع‬data() ‫أن الدالبببببة‬
ّ ‫بببببحيح‬
ٌ ‫ص‬
ً
.‫ بمفردها‬data() ‫أيضا استخدام الدالة‬ ‫( لكن من الممكن‬$('div').data()
ِ
:‫ كل الحالتين‬jQuery ‫يوضح توثيق‬
http://api.jquery.com/data •
http://api.jquery.com/jQuery.data •
226
‫عنببد تخببزين البيانببات في عناصببر ‪ ،DOM‬فأفضببل حببل هببو اسببتخدام الدالببة )(‪ data‬الموجببودة‬
‫في ‪.jQuery‬‬
‫‪ .2‬إضافة دوال جديدة إلى مجال أسماء ‪jQuery‬‬

‫من المفي ب ببد ع ب ب ً‬
‫بادة إع ب ببادة اس ب ببتخدام مج ب ببال الس ب ببماء ) ‪ (namespace‬الخ ب بباص بمكتب ب ببة ‪jQuery‬‬
‫) ً‬
‫بدل من إنشاء مجببال أسببماء خبباص بببك( لتعريببف الببدوال لكي تتفببادى كتابببة شببيفرات موجببودة في‬
‫المجببال العببام )‪ (global scope‬لكي تتجنب التضبباربات‪ .‬إضب ً‬

‫بافة إلى ّ‬
‫أنه من المستحسببن تخببزين أيّ ب ة‬
‫دوال متعلقة بمكتبة ‪ jQuery‬والتي ل تتطلب مجموعب ً‬

‫بة من عناصببر ‪ DOM‬في مجببال أسببماء ‪.jQuery‬‬
‫يمكنك فعل ذلك بإضافة خاصية جديدة إلى كائن ‪ .jQuery‬سأضببيف في المثببال التي دالب ً‬
‫بة جديب ً‬
‫بدة‬
‫باسم )(‪ customAlert‬إلى كائن ‪) jQuery‬مثال حي(‪:‬‬
‫>‪<body‬‬
‫‪<script‬‬
‫{‬
‫)‪$.customAlert = function(text‬‬
‫{‬
‫تخزين الدالة ‪ customAlert‬في كائن ‪// jQuery‬‬
‫‪227‬‬
‫;)‪alert(text‬‬
‫;}‬
‫استدعاء الدالة ‪// customAlert‬‬

‫;)'‪$.customAlert('Hi‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫إذا كانت لديك ِ‬

‫عدة دوال مرتبطة ببعضها‪ ،‬فعليك استضافتها جميعًب ا في مجببال أسببماء مختلببف‬
‫ُ‬
‫سأن ِشبئ في المثببال التي الكببائن ‪myDialog‬‬ ‫لكي تتجنب حدوث فوضى في مجببال أسببماء ‪.jQuery‬‬
‫دوال داخل الكائن ‪ myDialog‬تتعلق به‪.‬‬ ‫خزن بدوره في كائن ‪jQuery‬؛ وسأستضيف ِ‬
‫عدة‬ ‫الذي يُ ّ‬
‫ٍ‬
‫إنشاء الكائن ‪$.myDialog = { // myDialog‬‬

‫‪ },‬شيفرة ‪show: function(){ // Show‬‬
‫‪ },‬شيفرة ‪hide: function(){ // Hide‬‬
‫‪ },‬شيفرة ‪position: function(){ // Position‬‬
‫} شيفرة ‪initiate: function(){ // Initiate‬‬
‫;}‬
‫)(‪$.myDialog.initiate‬‬
‫‪228‬‬
‫‪ .3‬حاساب قيمة خاصية من خاصيات أحاد العناصر‬

‫قبببل ضبببط قيمببة عنصببر مببا‪ ،‬من الممكن حسبباب القيمببة بتمريببر دالببة إلى الدالببة )(‪ attr‬بب ً‬
‫بدل من‬ ‫ٍ‬
‫تمريببر سلسببلة نصببية كثبباني معامببل‪ .‬وهببذا يسببمح لببك بببالمرور على العناصببر في مجموعببة التغليببف‬
‫وإضافة قيم فريدة إليها )مثال حي(‪:‬‬
‫>‪<body‬‬
‫>‪<div>0</div‬‬
‫>‪<div>1</div‬‬
‫>‪<div>2</div‬‬
‫‪<script‬‬
‫{‬
‫المرور على كل عنصر >‪ <div‬وإعطاؤه قيمة ‪ id‬فريدة ‪//‬‬
‫)‪$('div').attr('id', function(i‬‬
‫{‬
‫‪return 'div' + i‬‬
‫;)}‬
‫‪229‬‬
‫يمكن أن نكتب أيضًا ‪//‬‬

‫*‪/‬‬
‫{)‪$('div').each(function(i‬‬
‫;)‪$(this).attr('id', 'div' + i‬‬
‫;)}‬
‫‪*/‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫‪ .4‬استخدام خاصيات ‪ CSS‬أو مكافآتها في ‪JavaScript‬‬

‫عند الحصببول أو ضبببط خاصببيات ‪ CSS‬في عناصببر ‪ ،HTML‬فببأنت أمببام خيببارين‪ :‬إمببا أن تسببتعمل‬
‫النسخة الببتي فيهببا شببرطات )‪ (-‬من اسببم الخاصببية ) ً‬

‫مثل‪ (background-color :‬وإمببا أن تسببتعمل‬
‫خاصببية ‪ JavaScript‬المكافئببة لهببا ) ً‬

‫مثل‪ .(backgroundColor :‬أهم مببا في المببر –وبغض النظببر عن‬
‫النوع الذي اخترتببه– ّ‬

‫أن ه يجب تمريببر الخاصببية كسلسببلة نصببية )أي أن تضببعها بين علمتَي اقتببباس(‬
‫ِ‬
‫أفضب ل اسببتخدام أسببماء الخاصببيات الببتي فيهببا شببرطات لنهببا تماثببل مببا‬ ‫إلى الدالببة )(‪ .css‬شخصب ًبيا‪،‬‬
‫أكتبه باستخدام ‪) CSS‬مثال حي(‪:‬‬
‫>‪<body‬‬
‫>‪<p style="background-color:#990033">jQuery</p‬‬
‫‪230‬‬
<script
y.min.js"></script>
<script>
(function($)
{
alert($('p').css('background-color'));
alert($('p').css('backgroundColor'));
})(jQuery);
</script>
</body>
</html>
JavaScript ‫خاصية‬ CSS ‫خاصية‬
background background
backgroundAttachment background-attachment
backgroundColor background-color
backgroundImage background-image
backgroundPosition background-position
backgroundRepeat background-repeat
border border
borderBottom border-bottom
borderBottomColor border-bottom-color
231
borderBottomStyle border-bottom-style
borderBottomWidth border-bottom-width
borderColor border-color
borderLeft border-left
borderLeftColor border-left-color
borderLeftStyle border-left-style
borderLeftWidth border-left-width
borderRight border-right
borderRightColor border-right-color
borderRightStyle border-right-style
borderRightWidth border-right-width
borderStyle border-style
borderTop border-top
borderTopColor border-top-color
borderTopStyle border-top-style
borderTopWidth border-top-width
borderWidth border-width
clear clear
clip clip
color color
cursor cursor
display display
232
filter filter
font font
fontFamily font-family
fontSize font-size
fontVariant font-variant
fontWeight font-weight
height height
left left
letterSpacing letter-spacing
lineHeight line-height
listStyle list-style
listStyleImage list-style-image
listStylePosition list-style-position
listStyleType list-style-type
margin margin
marginBottom margin-bottom
marginLeft margin-left
marginRight margin-right
marginTop margin-top
overflow overflow
padding padding
paddingBottom padding-bottom
233
paddingLeft padding-left
paddingRight padding-right
paddingTop padding-top
pageBreakAfter page-break-after
pageBreakBefore page-break-before
position position
styleFloat float
textAlign text-align
textDecoration text-decoration
textDecorationBlink text-decoration: blink
textDecorationLineThrough text-decoration: line-through
textDecorationNone text-decoration: none
textDecorationOverline text-decoration: overline
textDecorationUnderline text-decoration: underline
textIndent text-indent
textTransform text-transform
top top
verticalAlign vertical-align
visibility visibility
width width
zIndex z-index
234
‫‪ .5‬الوصول إلى محتوى ‪iframe‬‬

‫عنببببببببببببببببببببببببببببدما ُتسببببببببببببببببببببببببببببتخ َدم الدالببببببببببببببببببببببببببببة )(‪ contents‬على عنصببببببببببببببببببببببببببببر ‪) iframe‬م ً‬
‫ثل‪:‬‬
‫)(‪ ($('#myiFrame').contents‬يحت ببوي على مس ببتند مُ ستض بباف على نفس النط بباق فسنحص ببل‬
‫على محتوى المستند الموجود في عنصر ‪ ،iframe‬ممببا يعطينببا وصب ً‬

‫بول إلى شببجرة ‪ DOM‬التابعببة لببه‪.‬‬
‫بزءا‬
‫وبالتالي يمكننببا اسببتخدام ‪ jQuery‬لتعببديل عناصببر ‪ DOM‬التابعببة لعنصببر ‪ iframe‬كمببا لببو كببانت جب ً‬
‫من الصفحة الصلية‪.‬‬
‫الحصول على قيمة ‪ innerHTML‬للعنصر >‪ <body‬داخل عنصر ‪// iframe‬‬

‫;)(‪$('iframe').contents().find('body').html‬‬
‫ضبط قيمة ‪ innerHTML‬للعنصر >‪ <body‬داخل عنصر ‪// iframe‬‬

‫;)'>‪$('iframe').contents().find('body').html('<p>Hi</p‬‬
‫عليك أن تعرف ما هي المحدوديات عند استخدام ‪ iframe‬يُ شير إلى مستند‬

‫ملحاظة‬
‫نطاق آخر قبل أن تحاول استخدام التقنية السابقة‪.‬‬
‫ٍ‬ ‫موجود على‬
‫‪ .6‬التحميل المسبق للصور‬

‫حم ل الصور قبل أن يحتبباج المسببتخدم إليهببا )ربمببا للحببدث ‪ .(:hover‬هبذه دالب ٌ‬
‫بة‬ ‫من الحكمة أن ُن ِ‬
‫ٌ‬
‫مخصصة في ‪ jQuery‬للتحميل المسبق للصور‪.‬‬
‫‪235‬‬
(function($) {
// preloadImages() ‫تعريف الدالة‬
// jQuery ‫إضافة دالة خاصأة إلى مجال أسماء‬
$.preloadImages = function(arrayOfImages) {
$(arrayOfImages).each(function() {
// src ‫ وضبط الخاصأية‬img ‫إنشاء عنصر‬
$('<img/>')[0].src = this;
});
};
// preloadImages() ‫استخدام الدالة‬

$(window).load(function() {
// window.onload ‫تحميل الصور بعد الحدث‬
$.preloadImages(['img1.jpg', 'img2.jpg',
'img3.jpg']);
});
})(jQuery);
‫ إن لم تكن طريقببة‬jQuery ‫ راجببع فصببل الضببافات في‬،‫يمكن أن تك َتب الدالببة السببابقة كإضببافة‬
ً
.‫مألوفة لديك‬ ‫كتابة إضافات‬
(function($) {
$.fn.preloadImages = function() {
// jQuery ‫ تمثل كائن‬this
return this.each(function() {
236
‫ً في المصفوفة ‪//‬‬
‫‪ this‬تمثل قيمة‬
‫;‪$('<img/>')[0].src = this‬‬
‫;)}‬
‫;}‬
‫{ )(‪$(window).load(function‬‬
‫تمرير مصفوفة إلى ‪// jQuery‬‬
‫)]'‪$(['img1.jpg', 'img2.jpg', 'img3.jpg‬‬
‫;)(‪.preloadImages‬‬
‫;)}‬
‫‪ .7‬التحميل المسبق للوسائط عبر ‪XHR‬‬

‫من الممكن أن ُتخب ِبزن وسببائط الصببفحة مؤق ًتببا عبببر اسببتخدام طلبيببات ‪ُ ،XHR‬‬
‫وتسب ِبهل ‪ jQuery‬من‬
‫ذلبببك كثبببيرًا‪ .‬الفكبببرة هنبببا هي طلب الوسبببائط في الخلفيبببة )أي بعيببب ًدا عن أعين المسبببتخدمين( بعبببد‬
‫اكتمال تحميل الصفحة‪.‬‬
‫نس ببتطيع طلب الوس ببائط )‪ .js‬و ‪ .gif‬و ‪ .png‬و ‪ .jpeg‬و ‪ (.css‬باس ببتخدام الح ببدث )(‪load‬‬
‫ً‬
‫مسبقا قبل أن يطلبها المسببتخدم‪ .‬سببأريك في مببا‬ ‫ودالة )(‪ ajax‬في ‪ ،jQuery‬والتي يمكن أن ُن ِ‬
‫خزنها‬
‫يلي مثب ً‬
‫بال عن شببيفرةٍ يمكن أن ُتسببتعمَ ل لتخببزين الملفببات مؤق ًتببا بعببد جلبهببا من الخببادم عبببر عمليببات‬
‫تجري في الخلفية بعد إكمال تحميل الصفحة‪.‬‬
‫‪237‬‬
‫{)‪(function($‬‬
‫انتظار الحدث ‪// window.onload‬‬
‫{)(‪$(window).on("load", function‬‬
‫ًا ‪//‬‬
‫ثم تحميل الوسائط وتخزينها مؤقت‬
‫;)} "‪$.ajax({ url:"javascript.js", dataType:"text‬‬
‫;)} "‪$.ajax({ url:"image.gif", dataType:"text‬‬
‫;)} "‪$.ajax({ url:"flash.swf", dataType:"text‬‬
‫;)} "‪$.ajax({ url:"styles.css", dataType:"text‬‬
‫;)}‬
‫افتراضيا‪ ،‬لكن يمكنك تمرير‬

‫ً‬ ‫ست ّ‬
‫خزن مؤق ًتا‬ ‫أن الملفات المطلوبة ُ‬
‫أبق في ذهنك ّ‬
‫ِ‬
‫وسيط إلى دالة )(‪) ajax‬الذي هو }‪ ({cache: false‬لكي تطلب عدم‬
‫تخزين عنوان ‪ URL‬المطلوب مؤق ًتا‪ً .‬‬
‫إذا من الممكن إجبار المتصفح على عدم‬
‫أن ذلك عديم الفائدة لننا نحاول من‬

‫تخزين الوسائط التي تطلبها؛ ربما ترى ّ‬ ‫تنويه‬
‫الصل تخزين الملفات مؤق ًتا‪ ،‬لكن ذلك جديرٌ بالذكر ويمكن أن تستفيد منه في‬
‫الحالت التي تريد أن يحصل فيها المستخدم على نسخةٍ جديدةٍ من الملف‬
‫في كل مرة‪.‬‬
‫‪238‬‬
‫‪ .8‬إضافة فئة ‪ CSS‬إلى عناصر ‪ HTML‬لكي تظهر تلك العناصر في‬
‫عط َلت ‪JavaScript‬‬

‫المتصفحات التي ّ‬
‫يمكننبببا أن تعبببرف إن كبببان متصبببفح المسبببتخدم قبببادرًا على تشبببغيل شبببيفرات ‪ JavaScript‬عببببر‬
‫معينببة للخاصببية ‪ class‬في عناصببر ‪ .HTML‬وذلببك بإنشبباء فئببة ُت ّ‬

‫طبق على عناصببر‬ ‫ّ‬ ‫اسببتخدام قيمببة‬
‫صفحة ‪ HTML‬في المتصفحات التي تدعم ‪ JavaScript‬فقببط‪ ،‬وسنسببتفيد كثببيرًا من هببذه التقنيببة إذا‬
‫أردنا إخفاء أجزاء من الصبفحة إن كبان المتصبفح يببدعم ‪ .JavaScript‬وإن لم يكن يببدعمها )أو كببانت‬
‫معطل ً‬
‫ببببببة( فلن ُتخفى أيّبببببب ة عناصببببببر‪ .‬سببببببنخفي في المثببببببال التي جميببببببع عناصببببببر >‪ <div‬إذا كببببببانت‬
‫‪ JavaScript‬مفعّ ً‬
‫لة )مثال حي(‪:‬‬
‫>‪<style‬‬
‫{ ‪.js div‬‬
‫;‪display: none‬‬
‫}‬
‫>‪<body‬‬
‫>‪<div>Hide if JavaScript is enabled!</div‬‬
‫‪<script‬‬
‫‪239‬‬
{
$('html').addClass('js');
})(jQuery);
</script>
</body>
</html>
240

jQueryEnlightenment-arabic-17.05-itwadi.com

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

jQueryEnlightenment-arabic-17.05-itwadi.com

Uploaded by

Copyright:

Available Formats

‫ﻋﺒﺪ اﻟﻠﻄﻴﻒ اﻳﻤﺶ‬

‫عبد اللطيف ايمش‬

‫وأظهرت الحصائيات أنها مستعملة في أكثر من نصف مواقع الويب‪.‬‬

‫أساسبا للمعلومببات الببتي‬

‫لحقا باسم »‪ُ .«jQuery Succinctly‬ن ِش ب َ‬

‫بعد أخذ إذن المؤلف‪.‬‬

‫أكثر عن هذا الترخيص راجع هذه الصفحة‪.‬‬

‫عبد اللطيف محمد أديب ايمش‬

‫حلب‪ ،‬سورية ‪2017/5/3‬‬

‫عربي يُ عنى بتتبع أخبار البرمجيات الحببرة والمببواد التعليميببة المتعلقببة‬

‫‪ .2‬طريقة تنظيم هذا الكتاب ‪15..............................................................................‬‬

‫‪ .4‬لماذا أستخدم )(‪ alert‬في المثلة؟! ‪15..................................................................‬‬

‫‪ .5‬التنسيق واللوان ‪16........................................................................................‬‬

‫‪ .7‬ما هو ‪ JS Bin‬ولماذا أستخدمه؟ ‪18......................................................................‬‬

‫الفصل الول‪ :‬المفاهيم الساسية في ‪19.............jQuery‬‬

‫‪ .2‬المفهوم وراء المفهوم الذي يقف وراء ‪21..................................................... jQuery‬‬

‫‪ .3‬كيفية التحقق من إصدار ‪22..................................................................... jQuery‬‬

‫‪ .4‬تتطلب ‪ jQuery‬أن يكون مستند ‪ HTML‬بنمط المعايير أو نمط المعايير التقريبي‪23............‬‬

‫‪ .6‬استخدام نسخة ُمستضافة من ‪24............................................................. jQuery‬‬

‫‪ .7‬تنفيذ الشيفرة عندما تجهز شجرة ‪ DOM‬لكن قبل الحدث ‪25..................window.onload‬‬

‫‪ .8‬تنفيذ شيفرات ‪ jQuery‬عندما ينتهي المتصفح من تحميل كامل المستند‪28.....................‬‬

‫‪ .10‬استخدام ‪ $‬دون القلق من حدوث تضاربات ‪31......................................................‬‬

‫‪ .11‬فهم كيفية عمل السلسل في ‪33............................................................. jQuery‬‬

‫‪ .12‬كسر السلسلة باستخدام دوال »هادمة« ‪34..........................................................‬‬

‫‪ .13‬استخدام الدوال الهادمة في ‪ jQuery‬والعودة منها باستخدام )(‪36........................end‬‬

‫‪ .15‬معرفة متى ُتشير الكلمة المحجوزة ‪ this‬إلى كائنات ‪41.....................................DOM‬‬

‫‪ .17‬التحقق إن كانت مجموعة التغليف فارغة ‪48........................................................‬‬

‫‪ .18‬إنشاء اسم بديل للوصول إلى الدالة ‪50..................................................... jQuery‬‬

‫‪ .21‬تحديد ما هو السياق المُ ستخ َدم من دالة ‪57............................................... jQuery‬‬

‫‪ .22‬إنشاء بُنية ‪ DOM‬كاملة مع أحداثها في سلسلةٍ وحيدة ‪58.........................................‬‬

‫الفصل الثاني‪ :‬تحديد العناصر في ‪61...................jQuery‬‬

‫‪ .3‬استخدام الدالة )(‪ is‬لعادة قيمة منطقية ‪64...........................................................‬‬

‫أن عنصرًا ما قد ُح ِد َد‪67...........................................................................‬‬

‫خصصة لتحديد العناصر ‪68.........................................................‬‬

‫‪ .9‬إنشاء سلسلة من المُ ِ‬

‫‪ .11‬التعرف على استعمالت المُ رشح )(‪82.................................................... :nth-child‬‬

‫‪ .12‬تحديد العناصر عبر البحث في قيم الخاصيات باستخدام التعابير النمطية‪84................‬‬

‫‪ .13‬الفرق بين تحديد الولد المباشرين وبين تحديد البناء والحفاد‪86............................‬‬

‫‪ .14‬تحديد الولد المباشرين عندما يُ ح ّدد السياق ‪88...................................................‬‬

‫الفصل الثالث‪ :‬التنقل في شجرة ‪90.......................DOM‬‬

‫‪ .2‬تمرير دالة إلى )(‪ً filter‬‬

‫‪ .3‬التنقل في شجرة ‪97................................................................................. DOM‬‬

‫‪ .4‬دوال التنقل تقبل تمرير تعبيرات ‪ CSS‬كوسائط اختيارية ‪99........................................‬‬

‫الفصل الرابع‪ :‬تعديل شيفرات ‪101........................HTML‬‬

‫‪ .2‬فهم آلية عمل الدالة )(‪105......................................................................... index‬‬

‫‪ .3‬فهم طريقة عمل الدالة )(‪108....................................................................... text‬‬

‫‪ .4‬تبديل أو إزالة المحارف باستخدام التعابير النمطية ‪109............................................‬‬

‫‪ .5‬شرح كيفية عمل الدالة )(‪110................................................................ contents‬‬

‫‪ .6‬استخدم )(‪ remove‬لن يُ زيل العناصر من مجموعة التغليف ‪115....................................‬‬

‫‪ .3‬اختيار أو عدم اختيار مربع اختيار أو مربع انتقاء ‪121...............................................‬‬

‫‪ .4‬اختيار وإلغاء اختيار ِ‬

‫‪ .7‬ضبط أو الحصول على قيمة الخاصية ‪ value‬لحقل إدخال ‪127....................................‬‬

‫‪ .9‬ضبط والحصول على النص الموجود ضمن عنصر ‪130...................................textarea‬‬

‫‪ .10‬ضبط والحصول على قيمة الخاصية ‪ value‬للعنصر ‪131.................................button‬‬

‫‪ .11‬تعديل مكونات العنصر ‪132.................................................................... select‬‬

‫‪ .12‬تحديد حقول النموذج عبر نوعها ‪135.................................................................‬‬

‫‪ .13‬تحديد جميع عناصر النماذج ‪136......................................................................‬‬

‫الفصل السادس‪ :‬الحداث في ‪138......................jQuery‬‬

‫‪ .2‬إضافة أو إزالة الحداث باستخدام )(‪ on‬و )(‪139................................................. of‬‬

‫برمجيا عبر دوال الحداث المختصرة ‪143..........................‬‬

‫وح َدت ‪ jQuery‬طريقة التعامل مع الكائن ‪144................................................. event‬‬

‫‪ .5‬فهم مجالت أسماء الحداث في ‪146......................................................... jQuery‬‬

‫‪ .6‬ما هو تفويض الحداث ‪150..............................................................................‬‬

‫‪ .8‬إضافة دالة لمعالجة أكثر من حدث ‪154.................................................................‬‬