J Query

‫تعلم‬
‫مكتبة ‪jQuery‬‬
‫جمع وإعداد ‪:‬‬

‫أحمد إبراهيم‬
‫الي سؤال او استفسار يمكنكم التواصل مع الكاتب عبر الفيسبوك ‪:‬‬

‫‪https://www.facebook.com/ah.ib.93‬‬
‫كتب اخرى للكاتب في لغات برمجية مختلفة مثل ( ‪HTML, CSS‬‬

‫‪ ) JavaScript, Java, PHP, Quick Basic‬تجدونها على هذا الرابط ‪:‬‬
‫‪https://drive.google.com/open?id=0B2aI_a6mphOUQi1jdzlYSFhITWs‬‬
‫فهرس الكتاب‬
‫المقدمة ‪3 .................................................................................‬‬
‫الفصل األول ( المحددات ‪5 ........................................... ) Selector‬‬
‫الفصل الثاني ( الدوال ‪12 ............................................ ) Functions‬‬
‫الفصل الثالث ( األحداث ‪28 .............................................. ) Events‬‬
‫الفصل الرابع ( الحركات ‪35 ...................................... ) Animations‬‬
‫الفصل الخامس ( التخاطب مع الخادم عبر تقنية ‪42 ...................... ) Ajax‬‬
‫الفصل السادس ( اإلضافات ‪50 .......................................... ) Plugins‬‬
‫مالحظات عامة ‪54 ........................................................................‬‬

‫المقدمة‬
‫مكتبة ‪ jQuery‬هي كأي صفحة مستقلة مكتوبة بلغة ‪ JavaScript‬نحتاج أن نستدعيها في صفحة‬
‫‪ HTML‬نكتب الكود الخاص باالستدعاء في رأس الصفحة بين وسمي البداية والنهاية للوسم‬
‫>‪ <head‬وكود االستدعاء هو ‪-:‬‬
‫>‪<script type="text/JavaScript" src=" jquery.js"> </script‬‬
‫حيث أن ‪ jquery.js‬هو اسم المكتبة وامتدادها ) ‪ ( .js‬لكن يمكن أن يكون اسمها مختلف او في‬
‫مجلد آخر وهنا يجب أن نذكر اسم المجلد واالسم الصحيح الخاص بالمكتبة ‪ ,‬وكتبنا الوسمين‬
‫السابقين الستدعاء المكتبة ولكتابة شيفرات وأكواد المكتبة فيجب أن نضع األكواد بين هذين‬
‫الوسمين في داخل الوسم >‪ <head‬وهما ‪-:‬‬
‫>"‪<script type="text/JavaScript‬‬
‫{ ) ( ‪$ ( document ).ready ( function‬‬
‫شيفرة جي كويري هنا‬
‫;)}‬
‫>‪</script‬‬
‫وال يمكن بأي شكل من األشكال كتابة أكواد ‪ jQuery‬خارج هذه المنطقة المحددة للمكتبة ( لكن‬
‫يمكن في بعض األحيان الكتابة في داخل الوسم >‪ ) <body‬وهذا الكود الذي كتبناه في البداية‬
‫وهو ‪:‬‬
‫{ ) ( ‪$ ( document ).ready( function‬‬
‫;)}‬
‫يعني أن يتم تنفيذ ( قراءة ) أكواد المكتبة عند أول تحميل الصفحة ‪ ,‬بالنتيجة سيكون الشكل العام‬
‫للصفحة الرئيسية هكذا ‪-:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫{ ) ( ‪$ ( document ).ready ( function‬‬
‫;)}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫أكواد هوتميل ( الجزء الظاهر من الصفحة )‬
‫>‪</body‬‬
‫>‪</html‬‬
‫* يمكن كتابة ملف ‪ jQuery‬في صفحة مستقلة وبعد ذلك يتم استدعائها ‪ ,‬حيث سنكتب بالصفحة‬
‫الخاصة بالجكوري الكود مباشرتا ً بدون أي وسوم بداية او أي شيء نبدأ مباشرتا ً بكتابة ما نريد‬
‫ونحفظها باالمتداد ) ‪ , ( name.js‬ثم وفي الصفحة التي نحتاجها نستدعيها وأيضا سوف نستدعي‬
‫المكتبة ليكون كامل كود االستدعاء بهذا الشكل‬
‫>‪<head‬‬
‫>‪.js"> </script‬اسم الصفحة"=‪<script type="text/JavaScript" src‬‬
‫>‪<script type="text/JavaScript" src="jquery.js"> </script‬‬
‫>‪</head‬‬
‫وتكون صفحة الجكوري المستقلة بهذا الشكل‬

‫;)}‬
‫الفصل األول‬
‫( المحددات ‪) Selectors‬‬
‫المحددات تستخدم لتحديد مجموعة من عناصر مستند الويب ( صفحة ‪ ) html‬في البداية ليتم‬
‫تطبيق شيء من الدوال او حركات ‪ jQuery‬عليها الحقا ً ‪ ,‬لكي تقوم بتحديد عدد من عناصر‬
‫الصفحة في ‪ jQuery‬يجب أن تكتب شيفرة ‪ jQuery‬بالشكل التالي ‪-:‬‬
‫; ) '‪jquery ( 'selector‬‬
‫او بهذا الشكل‬

‫; ) '‪$ ( 'selector‬‬
‫وال يوجد فرق بين الشكلين ألن ‪ $‬و ‪ jquery‬يعتبران اسمين لتابع واحد ‪ ,‬و ‪ selector‬يمثل‬
‫المحدد الذي يعني مجموعة معينة من عناصر الصفحة مثال إذا أردنا تحديد جميع الروابط في‬
‫الصفحة سنستخدم المحدد ‪ a‬والذي يشير إلى وسم الرابط >‪ <a‬بهذا الشكل‬
‫; ) '‪$ ( 'a‬‬
‫وإذا أردنا تحديد كافة الصور الموجودة في الصفحة نستخدم المحدد ‪ img‬والذي يشير إلى الوسم‬
‫>‪ <img /‬الخاص بالصور بهذا الشكل‬
‫; ) '‪$ ( 'img‬‬
‫وإذا أردنا تحديد كافة الجداول الموجودة في الصفحة والتي تحتوي على صور داخلها نستخدم‬
‫المحدد )‪ td:has(img‬بهذا الشكل ‪-:‬‬
‫; ) )‪$ ( 'td:has(img‬‬
‫* هكذا مع المحددات يمكننا وضع أي وسم من وسوم ‪ html‬لنحدده او يمكن وضع اسم ‪ id‬او‬
‫اسم ‪ class‬ألي عنصر مع مالحظة أنه نسبق اسم ‪ id‬بعالمة ‪ #‬ونسبق اسم ‪ class‬بالنقطة ) ‪( .‬‬
‫او يمكن كتابة اسم وسمين ليعني إذا كان وسم بداخل وسم وهو مشابه لتحدد الوسوم في صفحة‬
‫‪CSS‬‬
‫* هذا الجدول يوضح كيفية تحديد العناصر ( المحددات ‪) selectors‬‬
‫الوصف ‪Description‬‬ ‫المحدد ‪selector‬‬

‫يعني جميع العناصر الموجودة في المستند‬ ‫*‬
‫يعني جميع عناصر الوسم ‪ T‬في المستند ( مثالً ‪ P‬يعني جميع‬ ‫‪T‬‬
‫عناصر الوسم ‪ P‬التي في الصفحة و‪ a‬يعني جميع عناصر‬
‫الوسم ‪ a‬و‪ img‬يعني جميع عناصر الوسم ‪ img‬وهكذا )‬
‫يعني جميع عناصر الوسوم التي تنتمي لصف األنماط ‪C‬‬ ‫‪.C‬‬
‫(الوسوم ذات الخاصية "‪ class="C‬أيا ً كان نوعها ‪.‬‬
‫يعني جميع الوسوم التي تنتمي لصفوف األنماط المذكورة ‪C1‬‬ ‫‪.C1.C2.C3 … .Cn‬‬
‫و ‪ C2‬و‪ C3‬و ‪ Cn‬وكل ما تم ذكره ‪.‬‬
‫يعني جميع عناصر الوسوم ذات المعرف ‪ ( X‬الوسوم ذات‬ ‫‪#X‬‬
‫الخاصية "‪ id="X‬أيا ً كان نوعها )‬
‫يعني جميع عناصر الوسوم ‪ F‬الموجودة ضمن عناصر الوسم‬ ‫‪TF‬‬
‫‪ T‬بشكل مباشر وغير مباشر‬
‫يعني جميع عناصر الوسم ‪ F‬الموجودة بشكل مباشر ضمن‬ ‫‪T>F‬‬
‫عناصر الوسم ‪T‬‬
‫( عندما نكتب مثالً ‪ div>a‬فإننا نعني جميع الروابط‬
‫الموجودة ضمن ‪ div‬بشكل مباشر فلو كان هذا ال ‪ div‬ذاته‬
‫يحتوي على جدول وأحد خاليا هذا الجدول تحتوي على رابط‬
‫فلن يكون هذا األخير من ضمن الروابط التي يعيدها المحدد ‪,‬‬
‫عند إذ يمكننا أن نستخدم الصيغة السابقة ‪ div a‬لتحديد كل‬
‫الروابط التي ضمن وسوم ‪ div‬بشكل مباشر او غير مباشر )‬
‫يعني جميع عناصر الوسم ‪ F‬المجاورة لعناصر الوسم ‪( T‬‬ ‫‪T+F‬‬
‫يقصد بالعناصر المجاورة العناصر األبناء من نفس المستوى‬
‫)‬
‫يعني جميع عناصر الوسم ‪ T‬التي تحتوي داخلها عنصرا ً ابنا ً‬ ‫)‪T:has(F‬‬
‫واحدا ً على األقل من الوسم ‪ ( F‬مثالً )‪ table:has(a‬يعني‬
‫أي جدول يحتوي رابطا ً واحدا ً او أكثر من رابط ضمن‬
‫محتوياته )‬
‫يعني جميع عناصر الوسم ‪ T‬التي تحمل الخاصية ‪ A‬مهما‬ ‫]‪T[A‬‬
‫كانت قيمة هذه الخاصية ‪ ( A‬مثالً نستطيع أن نكتب المحدد‬
‫]‪ a[href‬لتعيد جميع الروابط التي تحتوي على خاصية ‪href‬‬
‫مهما كانت قيمتها )‬
‫يعني جميع عناصر الوسم ‪ T‬التي تحمل الخاصية ‪ A‬شرط‬ ‫]‪T[A=Value‬‬
‫أن تكون قيمة هذه الخاصية هي القيمة ‪ ( Value‬مثالً تستطيع‬
‫أن تكتب المحدد ] ‪ a [ target=_blank‬لتعيد جميع‬
‫الروابط التي تفتح في نافذة هدف جديد‬
‫يعني جميع عناصر الوسم ‪ T‬التي تعرف الخاصية ‪ A‬شرط‬ ‫]‪T[A^=Value‬‬
‫أن تكون بداية القيمة التي تحتويها هذه الخاصية هي القيمة‬
‫‪ ( Value‬فمثالً لو أردنا تحديد كافة الروابط التي تنقلك لموقع‬
‫يبدأ بحرفي ‪ de‬فالمحدد ]‪ a[href^=www.de‬يلبي حاجتنا‬
‫تماما ً )‬
‫يعني جميع عناصر الوسم ‪ T‬التي تعرف الخاصية ‪ A‬شرط‬ ‫]‪T[A$=Value‬‬
‫أن تكون نهاية القيمة التي تحتويها هذه الخاصية هي القيمة‬
‫‪ ( Value‬المحدد ] ‪ a [ href$=.mp3‬علي سبيل المثال‬
‫يعني جميع الروابط التي تشير إلى ملفات من نمط ‪) mp3‬‬
‫يعني جميع عناصر الوسم ‪ T‬التي تعرف الخاصية ‪ A‬شرط‬ ‫]‪T[A*=Value‬‬
‫أن تكون القيمة التي تحتويها هذه الخاصية تتضمن القيمة‬
‫‪ ) Value‬المحدد ]‪ a[href*=great‬يعني جميع الروابط‬
‫التي يحتوي عنوانها على الكلمة ‪) great‬‬
‫يعني أول عنصر مطابق للمحدد ‪ selector‬على مستوى‬ ‫‪selector:first‬‬
‫المستند ( استخدام المحدد ‪ a:first‬على سبيل المثال يعيد أول‬
‫عنصر رابط في المستند واستخدام المحدد ‪div img:first‬‬
‫يعيد أول عنصر صورة موجود ضمن وسم ‪ div‬في المستند )‬
‫يعني آخر عنصر مطابق للمحدد ‪ selector‬على مستوى‬ ‫‪selector:last‬‬
‫المستند‬
‫يعني أول عنصر أبن مطابق للمحدد ‪ selector‬على مستوى‬ ‫‪selector:first-child‬‬
‫‪div‬‬ ‫المحدد ( إذا استخدمنا على سبيل المثال المحدد‬
‫‪ a:first-child‬فإننا نعني كل أول رابط موجود ضمن كل‬
‫وسم ‪ div‬في المستند وليس أول حالة مطابقة للمحدد فقط كما‬
‫هو الحال مع ‪) first‬‬
‫يعني آخر عنصر ابن مطابق للمحدد ‪ selector‬على مستوى‬ ‫‪selector:last-child‬‬
‫المحدد‬
‫يعني العنصر االبن المطابق للمحدد ‪ selector‬شرط أن‬ ‫‪selector :only-child‬‬
‫يكون وحيدا ً في وسمه ( لو أردنا أن نعيد جميع الروابط‬
‫الموجودة ضمن الوسم ‪ ) div‬شرط أن ال يوجد أكثر من‬
‫رابط ابن مجاور في كل ‪ div‬فإن استخدام المحدد ‪div‬‬
‫‪ a:only-child‬سيلبي مطلبنا )‬
‫يعني العنصر االبن رقم ‪ n‬المطابق للمحدد ‪ ( selector‬مثالً‬ ‫)‪selector:nth-child(n‬‬
‫لو أردنا تحديد الرابط الرابع الموجود في كل وسم ‪ div‬فإننا‬
‫نكتب المحدد التالي )‪) div a:nth-child(4‬‬
‫يعني العناصر األبناء ذات األرقام الزوجية المطابقة للمحدد‬ ‫‪selector:nth-‬‬
‫‪selector‬‬ ‫)‪child(event‬‬
‫يعني العناصر األبناء ذات األرقام الفردية المطابقة للمحدد‬ ‫)‪selector:nth-child(odd‬‬
‫‪selector‬‬
‫يعني العناصر األبناء ذات األرقام التي من مضاعفات ‪( X‬‬ ‫)‪selector:nth-child(Xn‬‬
‫مثالً في حال كون ال‪ X‬يحمل القيمة ‪ 3‬فإن المحدد النهائي‬
‫يصبح )‪ div a:nth-child(3n‬ويعني جميع الروابط‬
‫الموجودة في الوسم ‪ div‬على أن يكون ترتيبها من مضاعفات‬
‫العدد ‪ 3‬وهذه الروابط هي الرابط الثالث والسادس والتاسع‬
‫والثاني عشر و‪ ...‬وهكذا )‬
‫يعني ‪ Y‬عنصرا ً ابنا ً بعد كل ‪ X‬أبناء ( مثالً في حال كون‬ ‫‪selector:nth-‬‬
‫قيمة ‪ Y‬هي ‪ 2‬وقيمة ‪ X‬هي ‪ 3‬سيصبح شكل المحدد النهائي‬ ‫)‪child(Xn+Y‬‬
‫)‪ div a:nth-child(3n+2‬وهكذا يعني تحديد رابطين بعد‬
‫كل ثالثة روابط من أبناء ‪ div‬مما يعني الروابط الرابع‬
‫والخامس ( رابطين بعد الرابط الثالث ) والسابع والثامن (‬
‫رابطين بعد الرابط السادس ) والعاشر والحادي عشر (‬
‫رابطين بعد الرابط التاسع ) ‪ ....‬وهكذا )‬
‫يعني العناصر ذات األرقام الزوجية المطابقة للمحدد‬ ‫‪selector:even‬‬
‫‪ selector‬على مستوى المستند‬
‫يعني العناصر ذات األرقام الفردية المطابقة للمحدد‬ ‫‪selector:odd‬‬
‫‪ selector‬على مستوى المستند‬
‫يعني العنصر ذو الترتيب ‪ n‬المطابق للمحدد ‪ selector‬على‬ ‫)‪selector:eq(n‬‬
‫مستوى المستند‬
‫يعني العنصر ذو الترتيب ‪ n‬المطابق للمحدد ‪selector‬‬ ‫)‪selector:qt(n‬‬
‫وجميع العناصر المطابقة التي تليه على مستوى المستند‬
‫يعني العنصر ذو الترتيب ‪ n‬المطابق للمحدد ‪selector‬‬ ‫)‪selector:lt(n‬‬
‫وجميع العناصر المطابقة التي تسبقه على مستوى المستند‬
‫يعني جميع العناصر التي تخضع لحركة حاليا ً‬ ‫‪:animated‬‬
‫يعني جميع عناصر األزرار الموجودة في المستند سوا ًء‬ ‫‪button‬‬
‫أكانت من النوع ‪ submit‬او ‪ reset‬او النوع ‪ button‬بشكل‬
‫عام‬
‫يعني جميع عناصر صناديق االختيار ‪check boxes‬‬ ‫‪:checkbox‬‬
‫يعني جميع عناصر صناديق االختيار المحددة ( أعني‬ ‫‪:checked‬‬
‫بالمحددة ما يكون حالتها ‪ checked‬سواء أكانت ‪checkbox‬‬
‫او ‪) radio‬‬
‫يعني جميع العناصر التي تحتوي على النص ‪ ( S‬مثالً يعيد‬ ‫)‪:contains(S‬‬
‫المحدد ) ‪ P:contains ( jQuery‬جميع عناصر النصوص‬
‫التي تحتوي على كلمة ‪ jQuery‬ويجدر اإلشارة هنا أن هذا‬
‫المحدد حساس لحالة األحرف الصغيرة والكبيرة )‬
‫يعني جميع العناصر المعطلة ( العناصر غير الفعالة )‬ ‫‪:disabled‬‬
‫يعني جميع العناصر الفعالة‬ ‫‪:enabled‬‬
‫يعني جميع عناصر اختيار الملفات زهو مكافئ للمحدد‬ ‫‪:filed‬‬
‫]"‪input [type="file‬‬
‫يعني جميع عناصر الوسوم الخاصة بالعناوين ‪h1 , h2 , h3‬‬ ‫‪:header‬‬
‫‪, h4 , h5 , h6‬‬
‫يعني جميع العناصر المخفية‬ ‫‪:hidden‬‬
‫يعني جميع وسوم صور النماذج وهو مكافئ للمحدد‬ ‫‪:image‬‬
‫]‪input[type=image‬‬
‫يعني جميع وسوم النماذج ‪input‬‬ ‫‪:input‬‬
‫يعني جميع الوسوم التي ال تطابق المحدد ‪ ( selector‬مثالً‬ ‫)‪:not(selector‬‬
‫يعيد المحدد )‪ input:not(:button‬جميع عناصر النماذج‬
‫عدا األزرار منها‬
‫يعني جميع عناصر الوسوم اآلباء ( التي تحتوي على عناصر‬ ‫‪:parent‬‬
‫وسوم فرعية بما فيها النصوص )‬
‫يعني جميع عناصر إدخال كلمات المرور وهو مكافئ للمحدد‬ ‫‪:password‬‬
‫]‪input[type=password‬‬
‫يعني جميع عناصر أزرار االختيار ‪radio‬‬ ‫‪:radio‬‬
‫يعني جميع أزرار إعادة التعيين‬ ‫‪:reset‬‬
‫يعني جميع عناصر االختيار المختارة ‪( selected option‬‬ ‫‪:selected‬‬
‫)‬
‫يعني جميع أزرار اإلرسال‬ ‫‪:submit‬‬
‫يعني جميع مربعات إدخال النصوص وهو مكافئ للمحدد‬ ‫‪:text‬‬
‫]‪input[type=text‬‬
‫يعني جميع العناصر الظاهرة‬ ‫‪:visible‬‬
‫يعني اجتماع جميع عناصر الوسوم التي تعيدها المحددات‬ ‫‪selector1 , selector2 ,‬‬
‫المذكورة ويقصد بالمحدد هنا كل ما هو مذكور في هذا‬ ‫‪… , selectorn‬‬
‫الجدول وهذه القاعدة تعتبر مفيدة جدا ً في حال الرغبة بتحديد‬
‫أجزاء كثيرة من الصفحة ال يستطيع محدد واحد أن يقوم‬
‫بتحديدها‬
‫* المحددات وكما قلنا في البداية هي فقط تحدد العناصر ولتطبيق تأثير او حركة ما يجب أن‬
‫نستعمل دوال المكتبة لبتم تطبيقها على العناصر المحددة وتكتب بهذا الشكل‬
‫; ) ( ‪$ ( 'a' ) . function‬‬
‫حيث ‪ function‬هي اسم الدالة التي نريد تطبيق تأثيرها على العناصر المحددة بالدالة ‪ $‬التي‬
‫تأخذ العناصر التي حددناها كأنها مصفوفة وسترسل هذه المحددات ( مصفوفة العناصر ) إلى‬
‫الدالة ‪ function‬التي بدورها ستطبق التأثير على العناصر ‪.‬‬
‫ يمكننا تطبيق أكثر من دالة على المحددات وذلك بكتابتها بهذا الشكل‬/ ‫مالحظة‬
$ ( 'selector' ).function1 ( ).function2 ( ) ;
. ‫ويمكننا كتابة ما نشاء من الدوال بنفس الطريقة فقط نفصل بينها بنقطة‬
‫ للعناصر المحددة‬class ‫ إلعطاء اسم‬addClass ‫* تستخدم الدالة‬
/‫مثال‬
$ ( 'a' ).addClass( 'red' ) ;
‫ لجميع الروابط الموجودة في الصفحة أي كما لو أننا‬red ‫ هو‬class ‫في هذا المثال أعطينا اسم‬
( clss=red ) html ‫كتبنا بداخل كل رابط في صفحة‬
/ ‫مثال‬
<html>
<head>
<script type="text/JavaScript" src=" jquery.js"> </script>
<script type="text/JavaScript">
$ ( document ).ready ( function ( ) {
$( '#Button1' ).click( function ( ) {
$( '#TextArea1' ).toggle( 'slow' ) ;
})
});
</script>
</head>
<body>
<input type="button" id="Button1" />
<textarea id="TextArea1" name="S1"> </textarea>
</body>
</html>
‫توليد محتويات ‪ HTML‬جديدة‬
‫لتوليد محتوى ‪ html‬جديد في الصفحة نستخدم الصيغة التالية‬

‫) '‪$ ( 'html‬‬
‫حيث أن ‪ html‬هنا تعني المحتوى الجديد الذي نريد توليده مكتوب بلغة ‪ html‬العادية مثالً‬
‫إلضافة طبقة ‪ div‬جديد نكتب الشكل التالي ) '>‪ $ ( '<div‬او يمكن كتابته بالشكل التالي (‪$‬‬
‫) '>‪ '<div> </div‬الحظ أنه ال يوجد فرق أي بمعنى أنه يمكن عدم إغالق الوسوم ألن المكتبة‬
‫ستقوم بهذا بدالً عنا ‪ ,‬ولكن عند استعمال هذه الصيغة فأن مكتبة ‪ jQuery‬تعيد المحتوى الجديد‬
‫الذي تم إنشائه لكنها ال تضيفه إلى الصفحة لتعطيك بذلك حرية إضافته في المكان المطلوب تماما ً‬
‫من الصفحة فمثالً يمكن الكتابة بهذا الشكل‬
‫; ) '‪$( '<div> Hello </div>' ).appendTo( '#id‬‬
‫ليتم إضافة الوسم >‪ <div‬إلى نهاية المنطقة التي تمتلك االسم ‪. id‬‬
‫مالحظة ‪ /‬مكتبة ‪ jQuery‬ال تمكننا من إنشاء عناصر الوسم ‪ script‬باستخدام هذه الطريقة ‪.‬‬
‫الفصل الثاني‬
‫( الدوال ‪) functions‬‬
‫سنقسم الدوال إلى مجموعات حسب الوظيفة الخاصة بكل منها إلى ما يلي ‪-:‬‬
‫أوالً ‪ -:‬دوال التعامل مع خصائص الوسوم ‪Attributes‬‬
‫الدالة ‪attr‬‬
‫كما تعلم فإن لكل وسم في لغة ‪ html‬مجموعة من الخصائص ولجلب قيمة إحدى هذه الخصائص‬
‫او إضافة قيمة لخاصية معينة نستخدم الدالة ‪ , attr‬لجلب قيمة خاصية معينة نستخدم الصيغة‬
‫التالية‬
‫; ) 'اسم الخاصية' ( ‪$ ( '#id' ).attr‬‬
‫هنا سيتم جلب قيم الخاصية التي ذكرنا اسمها الخاصة بالوسم ذو المعرف ‪ , id‬وإلعطاء قيمة إلى‬
‫خاصية معينة نستخدم الصيغة العامة التالية‬
‫; ) 'القيمة' ‪' ,‬اسم الخاصية' ( ‪$ ( '#id' ).attr‬‬
‫هنا سيتم إعطاء القيمة المحددة إلى الخاصية المذكورة الخاصة بالوسم ذو المعرف ‪. id‬‬
‫* مع مالحظة أن الطرق السابقة تشمل محدد واحد معرف بالخاصية ‪ id‬ولقراءة خاصية معينة‬
‫لجميع عناصر مجموعة معينة نستخدم الصيغة التالية‬
‫{ ) ( ‪$ ( 'selector' ).each( function‬‬
‫; ) 'اسم الخاصية' (‪$ ( this ).attr‬‬
‫;)}‬
‫حيث أن ‪ each‬هي حلقة تكرار و ‪ this‬هي كلمة محجوزة تشير إلى العنصر الحالي أثناء‬
‫الدوران ‪ ,‬وإلضافة قيمة لخاصية معينة نستخدم الصيغة العامة التالية‬
‫{ ) ‪$ ( 'selector' ).each( function ( n‬‬
‫; ) 'القيمة' ‪' ,‬اسم الخاصية' (‪$ ( this ).attr‬‬
‫;)}‬
‫او يمكن إضافة قيم لمجموعة من الخواص لمحدد ما وذلك باستخدام الصيغة العامة التالية‬
‫(‪$ ( 'selector' ).attr‬‬
‫} 'القيمة'‪:‬اسم الخاصية ‪' ,‬القيمة'‪:‬اسم الخاصية {‬
‫;)‬
‫ويسمى هذا ما بين القوسين المعقوفين } { بالمتغير ) ‪. ( JSON‬‬
‫مثال ‪/‬‬
‫(‪$ ( ':input' ).attr‬‬
‫} '‪{ value:' ' , title:'welcome‬‬
‫;)‬
‫في هذا المثال سيتم إضافة قيم نصية فارغة إلى الخاصية ‪ value‬لجميع عناصر الوسم ‪input‬‬
‫وكذلك يتم إضافة القيمة ‪ welcome‬إلى الخاصية ‪. title‬‬
‫* يمكن أن نكتب داخل قوسي الدالة ‪ attr‬اسم ‪ function‬ونضيف داخل هذه ال ‪function‬‬
‫بارامترين األول يعبر عن الخاصية والثاني يعبر عن القيمة ونختار لهم أي اسمين ‪.‬‬
‫مثال‪ /‬إلضافة قيمة جديدة إلى الخاصية ‪ title‬لكن ال يحذف القيمة القديمة للخاصية بل يضيف‬
‫القيمة الجديدة على القيمة القديمة‬
‫{ ) ‪$ ( '#a' ).attr( 'title' , function( x , y‬‬
‫; "‪return y+ "new text‬‬
‫;)}‬
‫الدالة ‪removeAttr‬‬
‫وهي تستخدم لحذف خاصية معينة مع قيمتها من وسم معرف بالخاصية ‪ id‬او لجميع مجموعة‬
‫الوسوم الواحدة الموجودة في الصفحة ‪ ,‬ولها الصيغة العامة التالية‬
‫; ) 'اسم الخاصية' (‪$( ( '#id' ).removeAttr‬‬
‫مثال‪ /‬لحذف الخاصية ‪ target‬لجميع الروابط في الصفحة‬

‫; ) '‪$ ( 'a' ).removeAttr( 'target‬‬
‫الدالة ‪prop‬‬
‫هذه الدالة نفس الدالة ‪ attr‬تماما ً وال يوجد أي فرق ( وكل ما نستطيع فعله بالدالة ‪ attr‬يمكن فعله‬
‫بالدالة ‪ , ) prop‬حيث أنها تستخدم لجلب قيمة خاصية معينة وتكون الصيغة العامة لها هي‬
‫;) 'اسم الخاصية' (‪$ ( 'selector' ).prop‬‬
‫وتستخدم أيضا ً إلضافة قيمة للخاصية المحددة بالشكل التالي‬
‫; ) 'القيمة' ‪' ,‬اسم الخاصية' (‪$ ( 'selector' ).prop‬‬
‫لكن بالصيغة السابقة يمكن التعامل مع خاصية واحدة ولكي نتعامل مع عدة خواص يجب أن‬
‫نكتبها داخل المتغير ‪JSON‬‬
‫الدالة ‪removeProp‬‬
‫تستخدم هذه الدالة إلزالة قيمة خاصية معينة أي أنها ال تزيل الخاصية بل تزيل فقط القيمة التي‬
‫تحملها هذه الخاصية المحددة بخالف الدالة ‪ removeAttr‬التي تزيل الخاصية مع ما تحمل من‬
‫قيمة والصيغة العامة لها هي‬
‫; ) 'اسم الخاصية' (‪$( ( '#id' ).removeAttr‬‬
‫ثانيا ً ‪ -:‬دوال التعامل مع األنماط ‪style‬‬
‫الدالة ‪addClass‬‬
‫تستخدم هذه الدالة إلضافة اسم ‪ class‬للعناصر المحددة ‪ ,‬والصيغة العامة لها هي‬
‫; ) 'اسم الكالس' (‪$ ( 'selector' ).addClass‬‬
‫الدالة ‪removeClass‬‬
‫تستخدم هذه الدالة لحذف أحد صفوف األنماط التي ينتمي إليها كائن معين أي أنها ستحذف اسم‬
‫‪ class‬للعنصر المحدد والصيغة العامة لها هي‬
‫; ) 'اسم الكالس' (‪$ ( 'selector' ).removeClass‬‬
‫الدالة ‪toggleClass‬‬
‫تستخدم هذه الدالة للقلب حيث أنها تقوم بإضافة أحد صفوف النمط إلى العناصر التي ال تنتمي إليه‬
‫من المجموعة التي يعيدها المحدد ( أي تضيف اسم ‪ ) class‬وتقوم بنفس الوقت بإقاف تطبيق‬
‫ذات الصف على العناصر التي تنتمي إليه من المجموعة التي يعيدها المحدد ( أي تحذف اسم‬
‫‪ , ) class‬والصيغة العامة لهذه الدالة هي‬
‫; ) 'اسم الكالس' (‪$ ( 'selector' ).toggleClass‬‬
‫الدالة ‪hasClass‬‬
‫تستخدم هذه الدالة للتحقق إن كان اسم هذا الصف ) ‪ ( class‬موجود في المحدد المذكور أو ال‬
‫ويمرر اسم الصف ) ‪ ( class‬المطلوب البحث عنه بين قوسيها حيث أنها ستعيد القيمة ‪ true‬إذا‬
‫كان موجود وتعيد القيمة ‪ false‬إذا كان غير موجود والصيغة العامة لها هي‬
‫;) 'اسم الكالس' (‪$ ( 'selsctor' ).hasClass‬‬
‫الدالة ‪css‬‬
‫تسمح لنا بقراءة قيمة خاصية نمط العنصر بشكل مباشر عبر الصيغة العامة التالية‬
‫; ) '‪$ ( '#id' ).css( 'name‬‬
‫حيث ستقوم الدالة بإعادة قيمة الخاصية ‪ name‬من خصائص أنماط العنصر الذي يحمل المعرف‬
‫‪ , id‬أما إلسناد قيمة خاصية نمط لعنصر معين يمكن استعمال الصيغة التالية‬
‫(‪$ ( '#id' ).css‬‬
‫} "‪{ "name1":"value1" , "name2":"value2‬‬
‫;)‬
‫ويسمى ما بين القوسين المعقوفين { } من خصائص بالمتغير او الكائن ) ‪. ( JSON‬‬
‫مثال‪/‬‬
‫; ) } "‪$ ( '#div' ).css( { "color":"red‬‬
‫يمكن كتابة نفس المثال السابق لكن بطريقة مختلفة مع مالحظة أن هذه الطريقة الجديدة تستخدم‬
‫فقط مع خاصية واحدة وال يمكن تطبيق أكثر من خاصية بعكس الطريقة في المثال السابق حيث‬
‫يمكن تطبيق أكثر من خاصية ( الطريقة في المثال السابق هي األفضل )‬
‫; ) "‪$ ( '#div' ).css( "color" , "red‬‬
‫{ (‪$ ( '#test' ).css‬‬
‫‪"color" : "red" ,‬‬
‫‪"font-size" : "30px" ,‬‬
‫"‪"background" : "#999‬‬
‫;)}‬
‫* مع مالحظة أنه يمكن كتابة هذه الخواص بسطر واحد او بعدة أسطر ال يوجد فرق ‪.‬‬
‫الدالة ‪width‬‬
‫من خالل هذه الدالة يمكن التعامل مع عرض العنصر في صفحة ال ‪ CSS‬حيث يمن قراءة‬
‫عرض العنصر عبر الصيغة التالية‬
‫; ) (‪$ ( '#id' ).width‬‬
‫او يمكن إسناد قيمة لعرض العنصر بالشكل التالي‬

‫; ) 'القيمة' (‪$ ( '#id' ).width‬‬
‫* وكذلك يمكن من خالل هذه الدالة قراءة عرض النافذة المفتوحة ‪ window‬إذا مررنا كلمة‬
‫‪ window‬كمحدد لهذه الدالة ( لكن بدون عالمات تنصيص ) هكذا‬
‫;) (‪$ ( window ).width‬‬
‫او قراءة عرض المستند الحالي ‪ document‬إذا مررنا كلمة ‪ document‬كمحدد لهذه الدالة (‬
‫لكن بدون عالمات تنصيص ) هكذا‬
‫;) (‪$ ( document ).width‬‬
‫وهذا مهم لتغير نمط الموقع بحسب حجم الشاشة لدى الزائر ‪.‬‬
‫الدالة ‪height‬‬
‫من خالل هذه الدالة يمكن التعامل مع ارتفاع العنصر في صفحة ال ‪ CSS‬حيث يمن قراءة‬
‫ارتفاع العنصر عبر الصيغة التالية‬
‫; ) (‪$ ( '#id' ).height‬‬
‫او يمكن إسناد قيمة الرتفاع العنصر بالشكل التالي‬

‫; ) 'القيمة' (‪$ ( '#id' ).height‬‬
‫* وكذلك يمكن من خالل هذه الدالة قراءة ارتفاع النافذة المفتوحة ‪ window‬إذا مررنا كلمة‬
‫‪ window‬كمحدد لهذه الدالة ( لكن بدون عالمات تنصيص ) هكذا‬
‫;) (‪$ ( window ).height‬‬
‫او قراءة عرض المستند الحالي ‪ document‬إذا مررنا كلمة ‪ document‬كمحدد لهذه الدالة (‬
‫لكن بدون عالمات تنصيص ) هكذا‬
‫;) (‪$ ( document ).height‬‬
‫وهذا مهم لتغير نمط الموقع بحسب حجم الشاشة لدى الزائر ‪.‬‬
‫الدالتين ‪ innerWidth‬و ‪outerWidth‬‬
‫هذه الدالتين هما تماما ً نفس الدالة ‪ width‬لكن الفرق هو أن الدالة ‪ innerWidth‬تقيس العرض‬
‫الداخلي للعنصر وال تقيس ما هو خارج ذلك من إطار للعنصر او إزاحة خارجية للعنصر (‬
‫) ‪ margin‬وهي أيضا ً ال تقيس اإلزاحة الداخلية للعنصر ) ‪ ( padding‬لكن يمكن أن نجعلها‬
‫تقيسها وذلك بوضع ‪ true‬بين قوسيها وإذا وضعنا ‪ false‬فهي لن تقيسها ألن ‪ false‬هي القيمة‬
‫االفتراضية ( أي ال يوجد فرق سواء كتبناها او لم نكتبها ) ‪ ,‬وتكون الصيغة العامة لها بهذا الشكل‬
‫; ) (‪$ ( 'selector' ).innerWidth‬‬

‫; ) ‪$ ( 'selector' ).innerWidth( true‬‬
‫أما الدالة ‪ outerWidth‬فهي تقيس كل العرض مع المسافة الخارجية وهي بشكل افتراضي ال‬
‫تقيس اإلزاحة الخارجية للعنصر ) ‪ ( margin‬لكن يمكن أن نجعلها تقيسها وذلك بوضع ‪true‬‬
‫بين قوسيها وإذا وضعنا ‪ false‬فهي لن تقيسها ألن ‪ false‬هي القيمة االفتراضية ( أي ال يوجد‬
‫فرق سواء كتبناها او لم نكتبها ) ‪ ,‬وتكون الصيغة العامة لها بهذا الشكل‬
‫; ) (‪$ ( 'selector' ).outerWidth‬‬

‫; ) ‪$ ( 'selector' ).outerWidth( true‬‬
‫الدالتين ‪ innerHeight‬و ‪outerHeight‬‬

‫هذه الدالتين هما تماما ً نفس الدالة ‪ Height‬لكن الفرق هو أن الدالة ‪ innerHeight‬تقيس‬
‫االرتفاع الداخلي للعنصر وال تقيس ما هو خارج ذلك من إطار للعنصر او إزاحة خارجية‬
‫للعنصر ) ‪ ( margin‬وهي أيضا ً ال تقيس اإلزاحة الداخلية للعنصر ) ‪ ( padding‬لكن يمكن أن‬
‫نجعلها تقيسها وذلك بوضع ‪ true‬بين قوسيها وإذا وضعنا ‪ false‬فهي لن تقيسها ألن ‪ false‬هي‬
‫القيمة االفتراضية ( أي ال يوجد فرق سواء كتبناها او لم نكتبها ) ‪ ,‬وتكون الصيغة العامة لها بهذا‬
‫الشكل‬
‫; ) (‪$ ( 'selector' ).innerHeight‬‬

‫; ) ‪$ ( 'selector' ).innerHeight( true‬‬
‫أما الدالة ‪ outerHeight‬فهي تقيس كل االرتفاع مع المسافة الخارجية وهي بشكل افتراضي ال‬
‫تقيس اإلزاحة الخارجية للعنصر ) ‪ ( margin‬لكن يمكن أن نجعلها تقيسها وذلك بوضع ‪true‬‬
‫بين قوسيها وإذا وضعنا ‪ false‬فهي لن تقيسها ألن ‪ false‬هي القيمة االفتراضية ( أي ال يوجد‬
‫فرق سواء كتبناها او لم نكتبها ) ‪ ,‬وتكون الصيغة العامة لها بهذا الشكل‬
‫; ) ( ‪$ ( 'selector' ).outerHeight‬‬

‫; ) ‪$ ( 'selector' ).outerHeight( true‬‬
‫ثالثا ً ‪ -:‬دوال التعامل مع محتوى عناصر المستند ‪Inner Content‬‬

‫الدالة ‪html‬‬
‫تقوم هذه الدالة بقراءة محتوى عنصر معين عبر الشكل التالي‬
‫; ) (‪$ ( '#id' ).html‬‬
‫حيث أنها تعيد شيفرة ‪ html‬التي تمثل المحتوى الموجود داخل العنصر ذو المعرف ‪ id‬وتقوم‬
‫بإسناد قيمة جديدة للمحتوى ( استبداله ) بهذا الشكل‬
‫; ) ‪$ ( '#id' ).html( com‬‬
‫حيث أن ‪ com‬هو شيفرة ‪ html‬التي تمثل المحتوى الجديد ‪.‬‬
‫الدالة ‪text‬‬
‫فهي مماثلة للدالة السابقة عدا أنها تتعامل مع المحتوى كنص عادي وليس كشيفرة ‪ ( html‬ال‬
‫يمكن أن نكتب بين قويها وسوم ‪ , ) html‬ولها الشكل التالي في حالة القراءة‬
‫; ) (‪$ ( '#id' ).text‬‬
‫والشكل التالي في حالة اإلسناد‬

‫; ) ‪$ ( '#id' ).text( com‬‬
‫* مقارنة بين الدالة ‪ html‬والدالة ‪text‬‬
‫لو كال لدينا في صفحتنا ما يلي‬

‫>"‪<ul id="myul‬‬
‫>‪<li> 1 </li‬‬
‫>‪<li> 2 </li‬‬
‫>‪</ul‬‬
‫ثم قمنا بإسناد الدالة ‪ text‬كما يلي‬
‫; ) (‪$ ( '#myul' ).text‬‬
‫فإنها ستعيد القيمة ‪ 1 2‬كنص ‪ ,‬أما في حالة استدعاء الدالة ‪ html‬بنفس الطريقة فإنها ستعيد‬
‫المحتوى‬
‫>‪<li> 1 </li‬‬
‫>‪<li> 2 </li‬‬
‫الدالة ‪size‬‬
‫تستخدم هذه الدالة لتعيد عدد العنصر او الوسوم الموجودة ( المحدد ) تعيد لنا عددها بشكل رقم‬
‫وليس مصفوفة كما تفعل الدالة ‪. index‬‬
‫; ) (‪$ ( 'ul li' ).size‬‬
‫الدالة ‪index‬‬
‫تستخدم هذه الدالة لمعرفة عدد العناصر او الوسوم الموجود ( المحددة ) وتعيد لنا أعدادها بشكل‬
‫مصفوفة وليس بشكل رقم كما تفعل الدالة ‪ size‬وهي تأخذ بارامتر وهو الكائن ‪ this‬ليشير إلى‬
‫هذه الوسوم المحددة ‪.‬‬
‫; ) ‪$ ( '#div ul > li' ).index( this‬‬
‫الدالة ‪next‬‬
‫تستخدم هذه الدالة إذا كنا قد حددنا عنصر وأردنا أن يجري التطبيق او التأثير على العنصر‬
‫المجاور له وليس عليه ‪ ,‬مثالً لو كان لدينا وسم >‪ <div‬وبداخله مثالً وسمين >‪ <div‬آخرين‬
‫األول يحمل الخاصية "‪ id="box1‬والثاني يحمل الخاصية "‪ id="box2‬وأردنا عند الضغط‬
‫على الصندوق األول يختفي الصندوق الثاني يمكن أن نكتب ما يلي‬
‫{ ) (‪$ ( '#box1' ).click( function‬‬
‫; ) "‪$ ( this ).next(‘#box2’).hide( "slow‬‬
‫;)}‬
‫الدالة ‪children‬‬
‫تستخدم هذه الدالة إذا كنا قد حددنا عنصر وأردنا أن يجري التطبيق او التأثير على العنصر االبن‬
‫له وليس‬
‫{ ) (‪$ ( '#box1' ).click( function‬‬
‫; ) "‪$ ( this ). children (‘p’ ).hide( "slow‬‬
‫;)}‬
‫الدالة ‪is‬‬
‫تستخدم هذه الدالة مع أدوات الشرط حيث من خاللها نسأل هل حالة العنصر المحدد كذا ( مثال‬
‫مخفي ) وستعود بقيمة ‪ true‬إذا كان السؤال صح او تعود بالقيمة ‪ false‬إذا كان خطأ ‪.‬‬
‫{ ) (‪$ ( '#box' ).click(function‬‬

‫; ) "‪$ ( '#box' ).hide( "slow‬‬
‫{ ) ) '‪if ( $ ( this ).is( ':hidden‬‬
‫; ) "‪alert( "yes‬‬
‫{ ‪} else‬‬
‫; ) "‪alert( "no‬‬
‫}‬
‫;)}‬
‫الدالتين ‪ append‬و ‪appendTo‬‬
‫بالنسبة للدالة ‪append‬‬
‫تستخدم الدالة ‪ append‬إلضافة محتوى ‪ html‬جديد إلى نهاية العنصر المحدد وتستعمل بالشكل‬
‫التالي‬
‫; ) '‪$ ( 'selector' ).append( 'HTML‬‬
‫ولهذه الدالة عمل مهم آخر يمكننا من نقل او نسخ مجموعة من عناصر المستند من مكانها ضمن‬
‫المستند إلى مكان آخر ضمنه ‪ ,‬والصيغة العامة لها تكون بهذه الشكل‬
‫; ) ) '‪$ ( 'targetSelector' ).append( $ ( 'sourceSelector‬‬
‫حيث هنا مررنا مجموعة من العناصر للدالة عن طريق استدعاء محدد ‪ sourceSelector‬ولم‬
‫نقم بتمرير محتوى ‪ HTML‬بشكل مباشر وفي هذه الحالة ستقوم هذه التعليمة بأخذ العناصر التي‬
‫يعيدها المعرف ‪ sourceSelector‬ونقلها من مكانها األصلي إلى المكن الهدف مما يعني حذفها‬
‫من مكانها األصلي وإضافتها في المكان الهدف وهو آخر العنصر الذي يعيده ‪targetSelector‬‬
‫وإن كان ما يعيده هو عنصرا ً واحدا ً أما إن كان أكثر من عنصر فإن الدالة ستقوم بعمليه نسخ بدالً‬
‫من النقل مما يعني أنها ستحافظ على المحتوى المصدر وتضيف محتوى مماثل له تماما ً آخر كل‬
‫كائن يعيده المحتوى الهدف ‪ ,‬وكمثال على الموضوع تصور أن لدينا المحتوى التالي في المستند‬
‫>‪<ul‬‬
‫>‪<li> 11 </li‬‬
‫>‪<li id="item12"> 12 </li‬‬
‫>‪</ul‬‬
‫>‪<ol‬‬
‫>‪<li> 22 </li‬‬
‫>‪</ol‬‬
‫في هذه الحالة فإن االستدعاء‬

‫; ) ) '‪$ ( '#item12' ).append( $ ( 'ol‬‬
‫سيقوم بحذف القائمة الثانية من موضعها األصلي وإضافة واحدة جديدة مطابقة لها تماما ً وجعلها‬
‫جزءا ً من القائمة األولى تابعا ً للعنصر الثاني في نهايته ‪ ,‬في حين أن االستدعاء‬
‫; ) ) '‪$ ( 'ul li' ).append( $ ( 'ol‬‬
‫سيقوم بنسخ القائمة الثانية بدون أن يؤثر عليها وينشأ قائمة مطابقة لها تماما ً يضيفها إلى نهاية كل‬
‫عنصر من عناصر القائمة األولى‬
‫* نستنتج مما سبق الخالصة التالية إذا كان المحدد الهدف يعيد أكثر من عنصر ( مصفوفة من‬
‫العناصر ) فإن استدعاء الدالة ‪ append‬يقوم بنسخ المصدر أما إن كان ما يعيده المحدد الهدف‬
‫عنصرا ً واحدا ً فأن استدعاء الدالة يقوم بنقل المصدر ‪.‬‬
‫أما بالنسبة للدالة ‪appendTo‬‬
‫فهي تماما ً نفس الدالة ‪ append‬لكن الفرق الوحيد بينهما هو أن الدالة ‪ appendTo‬يكون‬
‫الباراميتر الموجود بين قوسيها هو المحدد الهدف الذي ستنقل له العناصر على عكس الدالة‬
‫‪ append‬حيث أن الباراميتر الذي يكون بين قوسيها هو المصدر الذي ستأخذ منه العناصر ‪,‬‬
‫والصيغة العامة للدالة ‪ appendTo‬هي‬
‫; ) '‪$ ( 'sourceSelector' ).appendTo( 'targetSelector‬‬
‫الدالتين ‪ prepend‬و ‪prependTo‬‬
‫تعمل هاتان الداللتان نفس عمل ألدالتي السابقتين ) ‪ ( append , appendTo‬لكن الفرق الوحيد‬
‫هو أن ألدالتي السابقتين تعيدان المحتوى في نهاية المحتوى الداخلي للعنصر المحدد ( قبل وسم‬
‫اإلغالق الخاص بكل منهما ) أما هاتان الداللتان فإنهما تعيدان المحتوى الجديد في بداية المحتوى‬
‫الداخلي للعنصر ( بعد وسم البدأ لكل مهما ) حيث تعمل ‪ prepend‬بنفس طريقة ‪append‬‬
‫وتعمل ‪ prependTo‬بنفس عمل ‪appendTo‬‬
‫الدالتين ) ( ‪ before‬و ) ( ‪insertBefore‬‬
‫تعمل هاتان الداللتان بنفس أسلوب الدالتين السابقتين ) ‪ ( prepend , prependTo‬تماما ً لكن‬
‫باختالف أن هاتين الدالتين تضيفان العناصر قبل الهدف تماما ً أي قبل وسم البدأ الخاص به أما‬
‫الدالتين السابقتين تضيفان العناصر بعد وسم البدأ الخاص بالعنصر الهدف‬
‫; ) '>‪$ ( 'p img ' ).before( '<p> I love America </p‬‬
‫يقوم المثال السابق بإضافة الجملة ) ‪ ( I love America‬قبل كل عنصر يعيد المحدد ‪, p img‬‬
‫ويقوم المثال التالي بنفس المهمة‬
‫; ) '‪$ ( '<p> I love America </p>' ).insertBefore( 'p img‬‬
‫الداللتان ) ( ‪ after‬و ) ( ‪insertAfter‬‬
‫هاتان الداللتان تعمالن تماما ً مثل الدالتين ) ‪ ( append , appendTo‬باختالف واحد أال وهو أن‬
‫الداللتان ) ‪ ( append , appendTo‬تضيفان المحتوى في نهاية العنصر الهدف أي قبل وسم‬
‫الغلق للعنصر الهدف أما هاتان الداللتان ) ‪ ( after , insertAfter‬فإنهما تضيفان المحتوى في‬
‫نهاية العنصر الهدف لكن بعد وسم الغلق للعنصر الهدف ‪.‬‬
‫‪$ ( 'a[ href ^=http://www. ]' ).after( '<small style="color:red"> external‬‬
‫; ) '>‪</small‬‬
‫يقوم هذا المثال بإضافة الكلمة ‪ external‬بعد كل رابط يشير إلى موقع خارجي ‪ ,‬ويقوم المثال‬
‫التالي بنفس الوضيفة‬
‫( ‪$ ( '<small style="color:red"> external </small>' )insertAfter‬‬
‫; ) '] ‪'a[ href ^=http://www.‬‬
‫الدالة ‪clone‬‬
‫تستخدم هذه الدالة لنسخ عناصر المستند وهي غالبا ً ما تستخدم مع الدوال ‪ before‬و ‪ after‬و‬
‫‪append‬‬
‫مثال‪ /‬يقوم بنسخ عنصر ‪ div‬من المستند ويضيفها إلى نهاية ‪ div‬آخر‬
‫; ) '‪$ ( '#sourceDiv' ).clone( ).appendTo( '#targetDiv‬‬
‫رابعا ً ‪ -:‬دوال التغليف ‪wrapping‬‬
‫أحيانا ً نحتاج للقيام بتغليف محتوى ما بوسم معين او مجموعة من الوسوم فمثالً لنفرض أننا نريد‬
‫تغليف جميع وسوم >‪ <img‬بالوسم >‪ <a‬مثالً او نريد تغليف جميع العناصر ‪ p a‬بالوسم‬
‫>‪ , <div‬ولهذه العملية تؤمن لنا مكتبة ‪ jQuery‬مجموعة من الدوال وهي ‪-:‬‬
‫الدالة ‪wrap‬‬
‫تقوم هذه الدالة بتغليف كل عنصر من مجموعة العناصر التي تطبق عليها بالغالف الممرر لها‬
‫كوسيط ‪ parameter‬والصيغة العامة لها هي‬
‫; ) 'وسم الغالف' (‪$ ( 'selector' ).wrap‬‬
‫مثال‪ /‬لتغليف كل عنصر صور برابط‬

‫; ) '>‪$ ( '<img [src]>' ).wrap( '<a href="#"> </a‬‬
‫الدالة ‪wrapAll‬‬
‫وهي نفس الدالة السابقة باختالف أن هذه الدالة تقوم بتغليف جميع العناصر المحددة بغالف واحد‬
‫فقط ‪.‬‬
‫الدالة ‪wrapInner‬‬
‫تقوم هذه الدالة بتغليف محتوى مجموعة من العناصر بدالً من تغليفها نفسها ‪ ,‬والصيغة العامة لها‬
‫هي‬
‫; ) 'وسم الغالف' (‪$ ( 'selector' ).wrapInner‬‬
‫مالحظة‪ /‬يمكن االستفادة من دوال التغليف لنسخ العناصر من مكان إلى آخر ضمن المستند وذلك‬
‫عن طريق جعل الغالف الجديد عنصرا ً من العناصر الموجودة أصالً في المستند ‪.‬‬
‫خامسا ً ‪ -:‬دوال حذف عناصر المستند‬
‫الدالة ‪remove‬‬
‫تستخدم هذه الدالة لحذف جميع العناصر التي يعيدها المحدد ‪ ,‬والصيغة العامة لها هي‬
‫; ) ( ‪$ ( 'selector' ).remove‬‬
‫الدالة ‪empty‬‬
‫تستخدم هذه الدالة لحذف المحتوى الداخلي الخاص بالناصر المحددة واإلبقاء على العناصر نفسها‬
‫‪ ,‬والصيغة العامة لها هي‬
‫; ) ( ‪$ ( 'selector' ).empty‬‬
‫سادسا ً ‪ -:‬دوال التعامل مع عناصر النماذج ‪Form Elements‬‬
‫الدالة ‪val‬‬
‫تستخدم لقراءة القيم من عناصر النموذج وهي اختصار لكلمة ‪ , value‬والصيغة العامة لها هي‬
‫; ) ( ‪$ ( 'selector' ).val‬‬
‫تعيد هذه الدالة قيمة وحيدة في حال كان المحدد ‪ selector‬يعيد عنصرا ً واحدا ً وهي قيمة ذلك‬
‫العنصر أما في حال كان المحدد يعيد أكثر من عنصر فإن الدالة ‪ val‬تعيد قيمة أول عنصر من‬
‫هذه العناصر ‪ ,‬والمقصود بالقيمة هنا هي القيمة التي تحملها الخاصية ‪value‬‬
‫مالحظة‪ /‬إن الدالة ‪ val‬في حال استدعائها على عنصر تحديد يسمح باختيار أكثر من خيار في‬
‫وقت واحد فإن الدالة ‪ val‬تعيد مصفوفة تمثل الخيارات المنتقاة من قبل المستخدم ‪.‬‬
‫مثال‪ /‬يعيد قيمة الخاصية ‪ value‬للعنصر ذو المعرف ‪firstName‬‬

‫; ) ( ‪$ ( '#firstName' ).val‬‬
‫مالحظة‪ /‬إذا كان أول عنصر من المجموعة التي يعيدها المحدد ليس عنصر نموذج فإن خطأ‬
‫برمجي سيظهر في مستند الويب ‪.‬‬
‫مالحظة‪ /‬الدالة ‪ val‬تعيد قيمة الخاصية ‪ value‬لعناصر صناديق االختيار ‪ checkbox‬و‬

‫‪ button‬و ‪ radio‬بغض النظر عن كون هذه العناصر في حالة تحديد ‪ selected‬او ال ولكن حالً‬
‫لهذه المشكلة يتوفر بسهولة بعد مراجعة جدول المحددات وكتابة شيء شبيه بما يلي‬
‫; ) (‪$ ( '[ name=radioGroup ]:selected' ).val‬‬
‫* للدالة ‪ val‬استخدام آخر غير قراءة القيم من عناصر النموذج حيث يمكن إسناد القيم لها وفي‬
‫هذه الحالة ستكون الصيغة العامة لها بهذا الشكل‬
‫; ) 'القيمة' (‪$ ( 'selector' ).val‬‬
/‫مثال‬
$ ( '#text' ).val( 'Hello' ) ;
‫ وتكون قيمتها تساوي‬value ‫ يحمل الخاصية‬text ‫وفي هذا المثال سيجعل العنصر ذو المعرف‬
Hello
‫ وعناصر‬checkbox ‫ و‬radio ‫ و‬button ‫ للقيام بتغيير حالة عناصر‬val ‫كما تستخدم الدالة‬
‫ فالجملة التالية مثال‬, selected ‫< إلى حالة التحديد‬select> ‫الوسم‬
$ ( 'input' ).val( [ 'ahmed' , 'jQuery' , 'JavaScript' ] ) ;
‫ وتكون هذه‬value ‫ حالة لجميع عناصر النموذج التي تحمل الخاصية‬selected ‫تجعل الحالة‬
. JavaScript ‫ او‬jQuery ‫ او‬ahmed ‫الخاصية مساوية ألحد هذه القيم‬
/‫مثال‬
<html>
<head>
<script src="jquery.js" type="text/JavaScript">
</script>
$ ( document ).read( function ( ) {
$ ( '*' ).val( [ 'Ahmed' , 'jQuery' , 'JavaScript' ] ) ;
});
</script>
</head>
<body>
<select id="select1">
<option value="x"> Ahmed </option>
<option value="x"> jQuery </option>
<option> JavaScript </option>
</select>
</body>
</html>
‫الفصل الثالث‬
‫( األحداث ‪) Events‬‬
‫دوال األحداث في ‪ jQuery‬مشابهه لألحداث المستخدمة مع ‪ JavaScript‬مع اختالف بسيط‬

‫وهو مثالً إذا أردنا استجابة الحدث لضغط زر ما فبدال من أن نكتب ‪ onclick‬سنكتب ‪ click‬أي‬
‫فقط نحذف ‪ on‬وهذا ينطبق على جميع دوال األحداث األخرى ‪ ,‬والجدول التالي يوضح هذه‬
‫األحداث‬
‫* دوال األحداث الخاصة بالنافذة ( المستند ككل )‬
‫لحظة تفجير الحدث‬ ‫اسم دالة الحدث‬

‫عند تحميل المستند‬ ‫‪load‬‬
‫عند غلق المستند‬ ‫‪unload‬‬
‫* دوال األحداث الخاصة بعناصر النموذج‬

‫عند انتقال التركيز إلى العنصر ( مثالً في حالة االنتقال بين مجموعة من حقول‬ ‫‪ focusin‬او‬
‫اإلدخال فإن الحدث ‪ focus‬يقع على حقل اإلدخال التالي بمجرد االنتقال إليه عن‬ ‫‪focus‬‬
‫طريق مفتاح الجدول ‪ Tab‬مثالً )‬
‫عند ابتعاد التركيز عن العنصر ( عكس الدالة السابقة )‬ ‫‪focusout‬‬
‫عند خسارة العنصر للتركيز وهو معاكس تماما ً للحدث ‪focus‬‬ ‫‪blur‬‬
‫عند حدوث تغيير على العنصر‬ ‫‪change‬‬
‫عند إرسال القيم إلى الخادم‬ ‫‪submit‬‬
‫عند اختيار بند من محتويات العنصر بمعنى تحديد او تظليل النص او العنصر (‬ ‫‪select‬‬
‫نرى هذا الحدث في مثل حالة العنصر >‪) <select‬‬
‫عند تحريك أشرطة التمرير ( نرى هذا الحدث في مثل حالة العنصر ‪) textarea‬‬ ‫‪scroll‬‬
‫مالحظة‪ focusin /‬هي نفس ‪ focus‬لكن يفضل استخدام ‪ focusin‬ألنها تتوافق مع متصفحات‬
‫أكثر ‪ ,‬وكذلك فإن ‪ focusout‬هي نفس ‪ blur‬لكن يفضل استخدام ‪ focusout‬ألنها تتوافق مع‬
‫متصفحات أكثر ‪.‬‬
‫* الحدث ‪ submit‬عند استخدامه يجب ان نحدد الـ ‪ form‬وليس زر اإلرسال ‪ ,‬الحظ هذا‬
‫المثال‪-:‬‬
‫{ ) (‪$(“#myform”).submit(function‬‬
‫;)”‪alert(“yes‬‬
‫}‬
‫* دوال األحداث الخاصة بلوحة المفاتيح‬
‫عند الضغط على مفتاح من لوحة المفاتيح‬ ‫‪keydown‬‬
‫بعد الضغط على مفتاح من لوحة المفاتيح وتحريره‬ ‫‪keypress‬‬
‫عند تحرير مفتاح من لوحة المفاتيح‬ ‫‪keyup‬‬
‫* دوال األحداث الخاصة بأزرار الفأرة‬

‫عند النقر المفرد‬ ‫‪click‬‬
‫عند النقر المزدوج‬ ‫‪dblclick‬‬
‫عند الضغط على زر الفأرة ( أثناء الضغط )‬ ‫‪mousedown‬‬
‫عند تحرير زر الفأرة ( االنتهاء من الضغط )‬ ‫‪mouseup‬‬
‫عند مرور مؤشر الفأرة ( وكل حركة فوق العنصر )‬ ‫‪mousemove‬‬
‫عند مرور مؤشر الفأرة على العنصر‬ ‫‪hover‬‬
‫عند مرور مؤشر الفأرة على العنصر‬ ‫‪mouseenter‬‬
‫عند دخول مؤشر الفأرة‬ ‫‪mouseover‬‬
‫عند خروج مؤشر الفأرة ( يقصد بدخول مؤشر الفأرة أول مرور له فوق العنصر‬ ‫‪mouseout‬‬
‫ويقصد بالخروج لحظة ابتعاده عنه )‬
‫عند خروج مؤشر الفأرة من العنصر‬ ‫‪mouseleave‬‬
‫* دوال األحداث األخرى‬

‫عند حدوث خطأ‬ ‫‪error‬‬
‫عند تغيير الحجم‬ ‫‪resize‬‬
‫جميع الدوال في الجدول أعله لها الشكل العام التالي‬

‫; ) ‪$ ( 'selector' ).event( function‬‬
‫حيث تقوم بتعيين الدالة ‪ function‬استجابة للحدث ‪ event‬لجميع العناصر التي يعيدها المحدد‬
‫‪. selector‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>"‪<script type="text/JavaScript" src="jquery.js‬‬
‫{ ) ( ‪$ ( '#Button1' ).click( function‬‬
‫; ) "تم النقر على الزر" (‪alert‬‬
‫;)}‬
‫{ ) ( ‪$ ( 'img' ).mousemove ( function‬‬
‫; ) "تم مرور المؤشر فوق الصورة" ( ‪alert‬‬
‫;)}‬
‫;)}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<input id="Button1" type="button" /‬‬
‫>‪<img src="mypic.gif" /‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫كما الحظت في هذا المثال فإننا ال نكتب او ال نستدعي الحدث من داخل الوسوم الخاصة به بل‬
‫تكون الكتابة فقط في جزء كود ‪ , jQuery‬ويمكن تطبيق أي حدث من هذه األحداث بنفس‬
‫الطريقة لهذا المثال ال يوجد فرق ‪.‬‬
‫* كما تعرف أن الحدث ‪ hover‬يستخدم ليدل إذا أصبح مؤشر الفأرة فوق العنصر المحدد نفذ هذا‬
‫التأثير لكن إذا أردناه أن يطبق تأثير معين عند ابتعاد مؤشر الفأرة من العنصر يمكن أن نسند له‬
‫‪ function‬آخر وبداخله نضع تأثير ابتعاد المؤشر‬
‫{ ) (‪$ ( '.my' ).hover( function‬‬
‫; ) ‪$ ( '.my' ).fadeTo( 200 , 1‬‬
‫{ ) (‪} , function‬‬
‫; ) ‪$ ( '.my' ).fadeTo( 400 , 0.3‬‬
‫;)}‬
‫الحدث ‪toggle‬‬
‫يستخدم هذا الحدث عندما نريد تطبيق تأثير معين عند الضغط بزر الفأرة عليه وعند الضغط مرة‬
‫أخرى يتم تنفيذ تأثير آخر وعند الضغط مجدداً سيتم تنفيذ تأثير ثالث وهكذا نضيف التأثيرات بعدد‬
‫ما نشاء حيث سنضيف كل تأثير ب ‪ function‬جديد توضع ال ‪ functions‬بين قوسي الحدث‬
‫ونفصل بين الواحدة واألخرى بفارزة ‪.‬‬
‫(‪$ ( '#test' ).toggle‬‬
‫{ ) (‪function‬‬
‫; ) "‪$ ( this ).css( "color","red‬‬
‫‪},‬‬
‫{ ) (‪function‬‬
‫; ) "‪$ ( this ).css( "color","blue‬‬
‫;)}‬
‫الدالة ‪bind‬‬
‫تستخدم لتحديد دالة معينة كاستجابة لحدث محدد ولها الشكل العام التالي‬
‫; ) ‪' , function‬اسم الحدث' (‪$ ( 'selector' ).bind‬‬
‫مثال‪ /‬الحظ أن هاتان التعليمتان تقومان بنفس العمل تماما ً‬
‫; ) ‪$ ( 'img' ).click( myFunction‬‬
‫; ) '‪$ ( 'img' ).bind( 'click' , 'myFunction‬‬
‫عمل الدالة ‪ bind‬على نفس العنصر أكثر من مرة يؤدي إلى تنفيذ جميع الدوال التي تربطها‬
‫بالعنصر عند تفجير الحدث وهذا ممكن أيضا ً باستخدام الدوال البسيطة لذا فإن التعليمة التالية‬
‫) ‪$ ('img' ).bind( 'click' , F1 ).bind( 'click' , F2 ).bind( 'click' , F3‬‬
‫تقوم باستدعاء الدوال ‪ F1 , F2 , F3‬بالترتيب عند تفجير حدث النقر الخاص بعناصر الصور‬
‫في المستند وإن التعليمة التالية تقوم بالمثل أيضا ً‬
‫) ‪$ ( 'img' ).click( F1 ) .click( F2 ) .click( F3‬‬
‫الدالة ‪unbind‬‬
‫هذه الدالة هي نقيضه الدالة ‪ bind‬حيث أنها تعمل على إلغاء ربط أحد الدوال بحدث معين ولها‬
‫نفس الشكل العام الخاص بالدالة ‪ bind‬لذا فإن التعليمتين التاليتين‬
‫; ) ‪$ ( 'img' ).bind( 'click' , F1 ) .bind( 'click' , F2 ) .bind( 'click' , F3‬‬
‫; ) ‪$ ( 'img' ).unbind( 'click' , F2‬‬
‫ستقومان باستدعاء الدالتين ‪ F1‬و ‪ F3‬عند تفجير حدث النقر الخاص بعناصر الصور في المستند‬
‫دون تطبيق استدعاء الدالة ‪ F2‬وذلك ألن الدالة ‪ unbind‬قامت بإلغاء ربطها بالحدث ‪.‬‬
‫الدالة ‪one‬‬
‫هي تماما ً نفس الدالة ‪ bind‬لكن الفرق بينهما هو أن الدالة ‪ bind‬تستدعي مجموعة من الدوال‬
‫عند تفجير حدث واحد فقط بينما تستطيع الدالة ‪ one‬أن تستدعي مجموعة من الدوال عند تفجير‬
‫مجموعة من األحداث ‪ .‬لذا فإن التعليمة التالية‬
‫; ) '‪$ ( 'img' ).one( "click , mousemove , dblclick" , 'myFunction‬‬
‫تقوم باستدعاء الدالة ‪ myFunction‬عند تفجير أي من األحداث ‪ dblclick‬او ‪mousemove‬‬

‫او ‪click‬‬
‫الكائن ‪event‬‬
‫يكتب هذا الكائن اختصارا ً ‪ e‬وهو يمكن أن يكتب كوسيط أخياري داخل قوسي أي واحدة من‬
‫دوال األحداث ‪ ,‬حيث أن هذا الوسيط ) ‪ ( e‬يحمل معلومات هامة تخص الحدث ‪.‬‬
‫{ ) ‪$ ( 'a' ).click( function ( e‬‬
‫; ) "‪alert ( "Hello‬‬
‫;)}‬
‫ال يختلف عمل األسطر أعاله عن عملها بدون تمرير الوسيط ‪ e‬أبدأ فهي تقوم بعرض الرسالة‬
‫‪ Hello‬عند النقر على أي رابط في الصفحة ولكن ما يميزها هو أن وسيطها ‪ e‬يحمل قيما ً‬
‫خاصة تمثل معلومات عن الحدث ‪ click‬يمكن االستفادة منها في جسم الدالة فمثالً يمكن أن نكتب‬
‫; ) ‪alert ( e.type‬‬
‫;)}‬
‫وستكون نتيجة النقر على الروابط هي رسالة تحتوي على الكلمة ‪ click‬وهي هنا قيمة الخاصية‬
‫‪. type‬‬
‫مالحظة‪ /‬على الرغم من أن الصيغة ذاتها تستخدم لتعرف الكائن ‪ e‬في جميع دوال األحداث إال‬
‫أن خاصية الكائن ‪ e‬تختلف من حدث آلخر ‪.‬‬
‫* هذا الجدول فيه أهم خواص الكائن ‪e‬‬
‫المعلومات التي تحتويها‬ ‫الخاصية‬

‫تحتوي على القيمة ‪ true‬في حال كون المفتاح ‪ alt‬مضغوطا ً لحظة تفجير‬ ‫‪altKey‬‬
‫الحدث وتحتوي ‪ false‬في الحالة المعاكسة‬
‫تحتوي على القيمة ‪ true‬في حال كون المفتاح ‪ ctrl‬مضغوطا ً لحظة تفجير‬ ‫‪ctrlKey‬‬
‫تتعلق بالحدثين ‪ keyup‬و ‪ keydown‬وتعيد هذه الخاصية قيمة ‪ASCII‬‬ ‫‪keyCode‬‬
‫( الترميز الستعشري ) الخاص بالمفتاح المضغوط ( وفي حالة الضغط‬
‫على حرف ما فإنها تعيد قيمة الحرف الكبير ‪-‬كابيتل لتر‪ -‬او ‪upper case‬‬
‫فمثالً هذه الخاصية ستحتوي القيمة ‪ 65‬في حالة ضغط المفتاح ‪ a‬او ‪) A‬‬
‫تتعلق بأحداث الفأرة وتعيد اإلحداثيات األفقية ‪ X‬الخاصة بمؤشر الفأرة‬ ‫‪pageX‬‬
‫بالنسبة للصفحة ( بعد مؤشر الفأرة عن حافة الصفحة اليسرى عادة ً )‬
‫تتعلق بأحداث الفأرة وتعيد اإلحداثيات العمودية ‪ Y‬الخاصة بمؤشر الفأرة‬ ‫‪pageY‬‬
‫بالنسبة للصفحة ( بعد مؤشر الفأرة عن حافة الصفحة العلوية عادة ً )‬
‫تتعلق بأحداث الفأرة وتعيد اإلحداثيات األفقية ‪ X‬الخاصة بمؤشر الفأرة‬ ‫‪screenX‬‬
‫بالنسبة للشاشة ( بعد مؤشر الفأرة عن حافة الشاشة اليسرى عادة ً )‬
‫تتعلق بأحداث الفأرة وتعيد اإلحداثيات العمودية ‪ Y‬الخاصة بمؤشر الفأرة‬ ‫‪screenY‬‬
‫بالنسبة للشاشة ( بعد مؤشر الفأرة عن حافة الشاشة العلوية عادة ً )‬
‫‪ relatedTarget‬تتعلق ببعض أحداث الفأرة وتعيد معرف العنصر الذي دخل إليه ‪ /‬خرج‬
‫عنه مؤشر الفأرة لحظة تفجير الحدث‬
‫تحتوي القيمة ‪ true‬في حال كون المفتاح ‪ shift‬مضغوطا ً لحظة تفجير‬ ‫‪shiftKey‬‬
‫تستعمل مع جميع األحداث وتعيد اسم الحدث‬ ‫‪type‬‬
‫بالنسبة ألحداث لوحة المفاتيح تعيد هذه الخاصية قيمة ‪ ( ASCII‬الترميز‬ ‫‪which‬‬
‫الستعشري ) الخاص بالمفتاح المضغوط ‪ ,‬أما بالنسبة ألحداث الفأرة تعيد‬
‫رقما ً يمثل زر الفأرة المضغوط حيث أن الرقم ‪ 1‬يمثل زر الفأرة األيسر‬
‫والرقم ‪ 2‬يمثل زر الفأرة األيمن‬
‫الدالة ‪preventDefault‬‬
‫هذه الدالة خاصة بالكائن ‪ e‬وهي تسمح بإلغاء االستجابة االفتراضية لحدث ما ‪ ,‬مثالً عند النقر‬
‫على رابط سينقلنا مباشرتا ً إلى عنوان الصفحة المذكور لكن بواسطة هذه الدالة يمكن إلغاء‬
‫االنتقال هذا‬
‫; ) ( ‪e.preventDefault‬‬
‫;)}‬
‫وفي هذه الحالة لن يتم االنتقال إلى أي مكان عند النقر على أي رابط في الصفحة ‪.‬‬
‫الفصل الرابع‬
‫( الحركات ‪) Animations‬‬
‫المؤثرات البسيطة‬
‫الدالة ‪show‬‬
‫تستخدم هذه الدالة إلظهار العناصر المخفية والصيغة العامة لها هي‬
‫; ) '‪$ ( 'selector' ).show( 'speed' , 'F‬‬
‫ويمكن عدم تمرير أي باراميتر بين قوسيها ‪ ,‬او يمكن تمرير باراميتر واحد فقط ‪.‬‬
‫* إن ‪ speed‬تعني السرعة ويمكن كتابة السرعة بطريقتين‬

‫‪ -1‬صيغة نصية ( توضع بين عالمات تنصيص ) ‪:‬‬
‫للسرعة البطيئة ‪.‬‬ ‫أ‪slow -‬‬
‫ب‪ normal -‬للسرعة الطبيعية ‪.‬‬
‫للسرعة السريعة ‪.‬‬ ‫ج ‪fast -‬‬
‫‪ -2‬صيغة رقمية ( ال توضع بين عالمات تنصيص ) تمثل زمن تنفيذ المؤثر بالملي ثانية‬
‫‪ ,‬كل ‪ 1‬ثانية يساوي ‪ 1000‬ملي ثانية ‪.‬‬
‫وأن ‪ F‬تعني اسم دالة أخرى موجودة في المستند يتم تنفيذها بعد انتهاء هذا المؤثر ‪.‬‬
‫الدالة ‪hide‬‬
‫تستخدم هذه الدالة إلخفاء العناصر والصيغة العامة لها هي‬
‫; ) '‪$ ( 'selector' ).hide( 'speed' , 'F‬‬
‫ويمكن عدم تمرير أي باراميتر بين قوسيها ‪ ,‬او يمكن تمرير باراميتر واحد فقط ‪.‬‬

‫الدالة ‪toggle‬‬
‫تستخدم هذه الدالة لقلب العناصر حيث تقوم بإظهار العناصر إن كانت مخفية وإخفائها إن كانت‬
‫ظاهرة والصيغة العامة لها هي‬
‫; ) '‪$ ( 'selector' ).toggle( 'speed' , 'F‬‬

‫مؤثرات التالشي‬
‫الدالة ‪fadeIn‬‬
‫تستخدم هذه الدالة للظهور المتالشي ( أي أن يكون العنصر مخفي وهذه الدالة تظهره ) والصيغة‬
‫العامة لها هي‬
‫; ) '‪$ ( 'selector' ).fadIn( speed , 'F‬‬
‫* إن ‪ speed‬تعني السرعة وتكتب بصيغة رقمية ( ال توضع بين عالمات تنصيص ) تمثل زمن‬
‫تنفيذ المؤثر بالملي ثانية ‪ ,‬كل ‪ 1‬ثانية يساوي ‪ 1000‬ملي ثانية ‪.‬‬
‫الدالة ‪fadeOut‬‬
‫تستخدم هذه الدالة لإلخفاء المتالشي والصيغة العامة لها هي‬

‫; ) '‪$ ( 'selector' ).fadeOut( speed , 'F‬‬
‫الدالة ‪fadeTo‬‬
‫تستخدم هذه الدالة أيضا ً لإلخفاء المتالشي لكن من خالل هذه الدالة يمكن تحديد الشفافية والصيغة‬
‫; ) '‪$ ( 'selector' ).fadeTo( 'speed' , 'opacity' , 'F‬‬

‫وأن ‪ opacity‬تمثل درجة الشفافية للعنصر التي ينتقل إليها أثناء تنفيذ المؤثر ويستقر عليها بعد‬
‫انتهاء تنفيذ المؤثر ويمكن أن تكون درجة الشفافية بين ‪ ( 0‬شفافة لدرجة عدم الظهور ) و ‪( 1‬‬
‫ظهور بشكل طبيعي ) والدرجات األخرى تكون بشكل أرقام عشرية بين الصفر والواحد ‪ ,‬وأن ‪F‬‬
‫تعني اسم دالة أخرى موجودة في المستند يتم تنفيذها بعد انتهاء هذا المؤثر وهذا الباراميتر‬
‫اختياري أي يمكن أن ال نضعه بخالف البارامترين السابقين فهما إجباريان أي ال تعمل الدالة إذا‬
‫لم نضعهم ‪.‬‬
‫مالحظة‪ /‬الدالة ‪ fadeTo‬ال تقوم بحذف العناصر بعد انتهاء الحركة كما تفعل الدالة ‪. fadeOut‬‬
‫; ) ‪$ ( '#div' ).fadeTo( 4000 , 0.4‬‬
‫مؤثرات االنزالق‬
‫الدالة ‪slideDown‬‬
‫تستخدم هذه الدالة لتطبيق تأثير االنزالق السفلي ( أي أن يكون العنصر مخفي وتظهره هذه الدالة‬
‫باالنزالق السفلي ) والصيغة العامة لها هي‬
‫; ) '‪$ ( 'selector' ).slideDown( speed , 'F‬‬
‫الدالة ‪slideUp‬‬
‫تستخدم هذه الدالة لتطبيق تأثير االنزالق العلوي ( أي أن يكون العنصر ظاهر وتخفيه هذه الدالة‬
‫باالنزالق العلوي ) والصيغة العامة لها هي‬
‫; ) '‪$ ( 'selector' ).slideUp( speed , 'F‬‬
‫الدالة ‪slideToggle‬‬
‫وهي تستخدم كدالة قلب للدالتين السابقتين ( أي بمعنى دمج الدالتين ) حيث أنها تقوم بإخفاء‬
‫العناصر الظاهرة باستخدام الدالة ‪ slideUp‬وإظهار العناصر المخفية باستخدام الدالة‬
‫‪ , slideDown‬والصيغة العامة لها هي‬
‫; ) '‪$ ( 'selector' ).slideToggle( speed , 'F‬‬
‫إيقاف الحركة‬
‫الدالة ‪stop‬‬
‫تستخدم هذه الدالة إليقاف تنفيذ أي حركة قيد التنفيذ والصيغة العامة لها هي‬
‫; ) (‪$ ( 'selector' ).stop‬‬
‫الدالة ‪delay‬‬
‫تستخدم هذه الدالة إليقاف تنفيذ تأثير حركة او أي مؤثر فترة زمنية معينة ثم يمكن أن يعود لينفذ‬
‫تأثير مؤثر آخر والصيغة العامة لها هي‬
‫; ) ‪$ ( 'selector' ).delay( speed‬‬
‫* إن ‪ speed‬تعني السرعة وتكتب بصيغة رقمية ( ال توضع بين عالمات تنصيص ) وهي تمثل‬
‫زمن توقف المؤثر عن العمل ‪.‬‬
‫; ) ‪$ ( '#div' ).slideDown( 3000 ).delay( 4000 ).slideUp( 3000‬‬
‫إنشاء حركات خاصة‬
‫الدالة ‪animate‬‬
‫يمكن إنشاء حركات خاصة بنا غير تلك االفتراضية التي تقدمها المكتبة وذلك من خالل الدالة‬
‫‪ animate‬والصيغة العامة لها هي‬
‫; ) '‪$ ( 'selector' ).animate( { properties } , 'speed‬‬
‫وفكرة هذه الدالة هي االنتقال من الشكل الطبيعي للعنصر إلى الشكل الجديد الذي يحمل‬
‫الخصائص ‪ , properties‬حيث أن هذه الخصائص ‪ properties‬يمكن أن تحمل خصائص‬
‫األنماط الخاصة بالعنصر والتي تأخذ قيما ً رقمية فقط في العادة مثل ‪ height‬و ‪ opacity‬و ‪top‬‬
‫و ‪ .. size-font‬الخ ‪ ,‬او أن تأخذ أسماء إحدى دوال المكتبة الجاهزة الخاصة بالحركة مثل‬
‫‪ show‬و ‪ toggle‬و ‪ ... hide‬الخ ‪.‬‬

‫{ (‪$ ( '#div' ).animate‬‬
‫‪"width" : "300px" ,‬‬
‫‪"height" : "200px" ,‬‬
‫"‪"margin-top" : "150px‬‬
‫"‪"padding-right" : "20px‬‬
} , 1000 ) ;
‫ لتكبير حجم العنصر ثالثة أضعاف‬/‫مثال‬
$ ( '‫) 'اسم العنصر المحدد‬.animate(
{ width: $( this ).width ( ) * 3 , height: $( this ).height ( ) * 3 } , 'slow' ) ;
‫ ونضع بعدهم عالمة = لتدل على أن يتم جمع او إنقاص‬- ‫ او‬+ ‫* يمكن أن نستخدم أحد العالمتين‬
. ‫القيمة القديمة وإضافة القيمة الجديدة عليها‬
/‫مثال‬
<html>
<head>
<script type="text/JavaScript" src="jquery.js"> </script>
$ ( document ).ready( function ( ) {
$ ( '#box' ).animate( { left :"+=50px" } , 2000 ) ;
});
</script>
<style type="text/css">
#box {
position:absolute; left:2px; top:2px ;
border:1px solid #ccc ;
height:200px ; width:300px ;
}
</style>
</head>
<body>
<div id="box"> Hi </div>
</body>
</html>
‫ او أي‬left ‫* وكما الحظت في المثال عندما نستخدم حركة عن جهة معينة ( مثالً استخدمنا هنا‬
. CSS ‫ موجودة للعنصر في ال‬position ‫اتجاه آخر ) فيجب أن تكون خاصية‬
‫الفصل الخامس‬
‫( التخاطب مع الخادم عبر تقنية ‪) AJAX‬‬
‫جلب المحتويات من الخادم‬
‫الدالة ‪load‬‬
‫تستخدم هذه الدالة لتأمين إرسال الطلبات غير المتزامنة للخادم ‪ server‬والصيغة العامة لها هي‬
‫; ) ‪$ ( 'selector' ).load( url , Json , F‬‬
‫حيث أن الوسيط ‪ url‬يمثل اسم الصفحة التي سيرسل إليها الطلب في الخادم في حين أن الوسيط‬
‫االختياري ‪ Json‬هو كائن يمثل مجموعة من الوسطاء التي سترسل إلى الصفحة ذاتها في الخادم‬
‫أما الوسيط االختياري ‪ F‬فهو يمثل اسما ً لدالة موجودة في الصفحة تستدعى لحظة انتهاء تنفيذ‬
‫الطلب وبعد قدوم االستجابة من الخادم ويمكن تمرير استجابة الخادم كوسيط لهذه الدالة ‪.‬‬
‫مالحظة‪ /‬الدالة ‪ load‬تقوم باستدعاء محتوى الكائنات التي يعيدها المحدد ‪ selector‬بالمحتوى‬
‫الذي سيعود من الخادم ‪ server‬نتيجة تنفيذ الطلب على شكل ‪ ( HTML‬في الحقيقة ستعود‬
‫الصفحة المطلوبة كاملة ) ‪.‬‬
‫; ) '] ‪$ ( '#divA' ).load( 'mypage.php a[ href=www.aw.com‬‬
‫حيث تقوم الشيفرة السابقة باستبدال محتوى الوسم ذو المعرف ‪ divA‬بالمحتوى الذي يطابق‬
‫المحدد ]‪ a[href=www.aw.com‬والذي ستعيده الدالة ‪ load‬من الصفحة ‪. mypage.php‬‬
‫كمثال على تمرير وسطاء للصفحة الهدف في الخادم لنفرض أن الصفحة التي نريد استعادة قيم‬
‫من محتواها تملك العنوان التالي‬
‫‪/mypage.php?p1=v1&p2=v2‬‬
‫عند إذ يمكننا أن نكتب الشيفرة التالية‬

‫; )} '‪$ ( '#divA' ).load( '/mypage.php' , { p1:'v1' , p2:'v2‬‬
‫حيث أن الوسيط الثاني هنا هو عبارة عن كائن ‪ JSON‬يمثل وسطاء الصفحة الهدف ( أي‬
‫سترسل هذه المعلومات إلى الصفحة الهدف ) ‪.‬‬
‫مالحظة‪ /‬مستعرض اإلنترنت إكسبلورر يقوم بتخزين نسخة مؤقتة من الصفحات المطلوبة‬
‫‪ cache‬لذا إن كانت الصفحة التي تنوي جلب المعلومات منها متجددة بشكل سريع مثل صفحات‬
‫أسعار العمالت مثالً عندها أحرص على تزويد وسيط ذا قيمة تتغير عشوائيا ً للدالة ألن هذا يجعل‬
‫المستعرض سالف الذكر يعتبر كل طلب منها صفحة مستقلة عن األخرى وبالتالي لن يؤثر عمل‬
‫‪ cache‬إلحدى الصفحات على عمل المتبقي منهن ‪.‬‬
‫; )"‪$ ( '#div' ).load( "test.php‬‬
‫حيث سيقوم هذا المثال بجلب محتويات الصفحة المسماة ‪ test.php‬ويعرضها في الوسم ذو‬
‫المعرف ‪ , div‬يمكننا أن نعرض جزء محدد من الصفحة ‪ test.php‬وذلك بكتابة محدد للعنصر‬
‫الذي سيظهر بعد اسم الصفحة‬
‫; )"‪$ ( '#div' ).load( "test.php #id‬‬
‫لكن لو افترضنا أن هذه الصفحة غير موجودة ففي هذه الحالة سوف لن يعرض لنا أي شيء لكن‬
‫إذا أردناه أن يعرض لنا الخطأ فيمكن أن نضيف له ‪ function‬ونسند لها ثالثة بارامترات‬
‫وبالترتيب حيث أن األول يعبر عن محتوى الملف الذي سنجلبه وهو ‪ responsText‬والثاني‬
‫يعبر عن حالة اإلرسال ( تمت بنجاح او ال ) وهو ‪ status‬والثالث يعبر عن الكائن الخاص بال‬
‫‪ AJAX‬وهو ‪ , xmlHttpRequest‬ويمكن التعبير عن كل باراميتر بأي اسم ‪ ,‬حيث يمكن‬
‫االستفادة من هذه البارامترات من خالل أداة شرط‬
‫{ ) ‪$ ( '#div' ).load( "test.php" , function( r , s , xhr‬‬
‫{ ) '‪if ( s == 'error‬‬
‫} ; ) "‪$ ( this ).text( "Error File Not Found‬‬
‫;)}‬
‫في هذا المثال سيتم عرض العبارة ‪ Error File Not Found‬إذا تحقق الشرط وهو وجود خطأ‬
‫وكما الحظت هنا استخدمنا الباراميتر الثاني وهو ‪ status‬لكن يمكن أن نستخدم الباراميتر الثالث‬
‫وهو ‪ xmlHttpRequest‬حيث إذا كتبنا بعده نقطة ثم ‪ status‬فإنه سيعبر عن رقم الخطأ أما إذا‬
‫كتبنا بعده نقطة ثم ‪ statusText‬فإنه سيعبر عن الخطأ لكن بشكل نصي ‪ ,‬الحظ هذا المثال‬
‫{ ) '‪if ( s == 'error‬‬
‫} ; ) ‪$ ( this ).text( "Error Number" + xhr.status + " " + xhr.statusText‬‬
‫;)}‬
‫في هذا المثال سيعرض رقم الخطأ و تعبير نصي عن الخطأ ‪ ,‬الباراميتر األول كما قلنا فهو يعبر‬
‫عن محتوى الملف الذي سنجلبه فإن كان موجود سيعرض في المكان الذي حددناه له لكن إن لم‬
‫يجد الصفحة او المحتوى فإنه سيعرض رسالة الخطأ وإلظهار هذه الرسالة نستخدم الدالة ‪html‬‬
‫وال يصح أن نستخدم الدالة ‪ text‬كما فعلنا في المثال السابق لوجود وسوم ‪ html‬وبالتالي يمكن‬
‫تغيير المثال السابق لهذا الشكل‬
‫{ ) '‪if ( s == 'error‬‬
‫} ; ) ‪$ ( this ).html( r‬‬
‫;)}‬
‫تمرير وسطاء للخادم من حقول النموذج‬
‫الدالة ‪serialize‬‬
‫تستخدم هذه الدالة احيانا ً مع الدالة السابقة ‪ load‬حيث تمرر لها قيما ً من أحد نماذج الصفحة‬
‫‪ Form‬كوسطاء للصفحة الهدف فمثالً الستدعاء الصفحة ‪ myPage.php‬مع وسطاء قيمهم‬
‫قادمة من النموذج ذو المعرف ‪ myForm‬يمكن أن نكتب ما يلي ‪:‬‬
‫; ) ) ( ‪$ ( '#divA' ).load( '/myPage.php' , $ ( '#myForm' ).serialize‬‬
‫وستتولى الدالة ‪ serialize‬في هذا المثال توليد كائن ‪ JSON‬المناسب للدالة ‪ load‬والذي‬
‫سيمثل وسطاء الصفحة الهدف ‪. myPage.php‬‬
‫مالحظة‪ /‬في حال تزويد قيمة للوسيط االختياري ‪ JSON‬ستقوم الدالة بإرسال الطلب بالطريقة‬
‫‪ POST‬وفي حال عدم تزويد قيمة لذات الوسيط ستقوم الدالة بإرسال الطلب بالطريقة ‪.GET‬‬
‫مثال‪ /‬نكتب في صفحة النموذج الكود التالي‬

‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<script type="text/ecmascript" src="jquery.js"> </script‬‬
‫>"‪<script type="text/javascript‬‬
$( document ).ready( function( ) {
$( '#myForm' ).submit( function( e ) {
var send = $( this ).serialize( ) ;
$.ajax( {
url:"1.php" ,
type:"POST" ,
data: send ,
dataType:"json" ,
success: function( r , s , xhr ) {
$( '#div' ).html( r.name + "<br>" + r.comment ) ;
}
});
return false ;
});
});
</script>
</head>
<body>
<form id="myForm" method="post">
Name: <input type="text" name="name" /> <br>
Comment: <textarea name="comment"></textarea> <br>
<input type="submit" value="Submit Comment" />
</form>
<div id="div"> </div>
</body>
</html>
‫ التي ستعالج البيانات الكود التالي‬php ‫ونكتب في صفحة الـ‬
<?php
$n = $_REQUEST['name'];
$c = $_POST['comment'];
$arr = array('name'=>$n , 'comment'=>$c);
echo json_encode($arr);
?>
GET ‫إرسال طلبات من النوع‬
‫ و‬GET ‫ بإرسال طلبات غير متزامنة من نوع محدد من النوعين‬jQuery ‫تسمح لنا مكتبة‬
-: ‫ عبر مجموعة من الدوال منها‬POST
$.get ‫الدالة‬
‫تقوم هذه الدالة بإرسال طلب غير متزامن من النوع ‪ ( GET‬تستخدم هذه الدالة في الغالب‬
‫إلرسال البيانات القليلة مثل عنوان صفحة او ما شابه ) إلى الخادم وتعيد كائنا ً يمثل االستجابة‬
‫التي أعادها الخادم والصيغة العامة لها هي‬
‫; ) ‪$.get ( url , JSON , F‬‬
‫حيث أن الوسيط ‪ url‬يمثل اسم الصفحة التي سيرسل إليها الطلب في الخادم ويمثل الوسيط‬
‫االختياري ‪ JSON‬مجموعة من الوسطاء التي سترسل إلى الصفحة ذاتها في الخادم أما الوسيط‬
‫االختياري ‪ F‬فهو يمثل اسما ً لدالة موجودة في الصفحة تستدعى لحظة انتهاء تنفيذ الطلب ويمكن‬
‫تمرير استجابة الخادم كوسيط لهذه الدالة ‪.‬‬
‫وهنا يجدر التنبيه أن هذه الدالة تعتبر من دوال ‪ jQuery‬الوظيفية ( مجموعة من دوال المكتبة‬
‫تستدعى مباشرتا ً دون الحاجة للمحددات ويكون لهذه الدوال الصيغة التالية ‪ $.X‬حيث ‪ X‬هنا‬
‫يمثل اسم الدالة ) ‪.‬‬
‫وكمثال الستخدام هذه الدالة يمكن أن نكتب ما يلي‬

‫; ) } ; ) ‪$.get ( '/myPage.php' , { p1:'10' , p2:'cat' } , Function( data ) { alert( data‬‬
‫حيث أن تنفيذ هذه الشيفرة يرسل طلبا غير متزامن إلى الصفحة ‪:‬‬
‫‪/myPage.php?p1=10&p2=cat‬‬
‫ويأخذ القيمة التي تعيدها هذه الصفحة ليسندها للكائن ‪ data‬الذي يمثل وسيطا ً لدالة بسيطة تقوم‬
‫بعرض قيمة هذا الوسيط في صندوق رسالة ‪.‬‬
‫* يمكن تمرير ثالث بارامترات إلى الدالة ‪ F‬وهذه البارامترات الثالثة هي نفسها التي شرحناها‬
‫مع الدالة ‪load‬‬
‫* وكما تالحظ فإننا لم نحدد مكان ( محدد ) لتعرض فيه الصفحة الهدف ولتحديد مكان يمكن أن‬
‫نكتب المحدد داخل الـ‪function‬‬
‫{ ) ‪$.get ( '/myPage.php' , { p1:'10' , p2:'cat' } , Function( d , s , xhr‬‬
‫; ) ‪$(‘#id’).html( d‬‬
‫;)}‬
‫في هذا المثال ستعرض الصفحة ‪ myPsge.php‬في المحدد ‪#id‬‬
‫إرسال الطلبات من النوع ‪POST‬‬

‫الدالة ‪$.post‬‬
‫وهي تشبه الدالة السابقة حيث أنها ترسل طلبات غير متزامنة لكن من النوع ‪ ( POST‬تستخدم‬
‫هذه الدالة في الغالب إلرسال البيانات الكبيرة مثل التعليقات او ما شابه ) إلى الخادم والصيغة‬
‫; ) ‪$.post ( url , JSON , F‬‬
‫حيث أن الوسيط ‪ url‬يمثل اسم الصفحة في الخادم ‪ ,‬و ‪ JSON‬يمثل وسطاء هذه الصفحة ‪ ,‬و ‪F‬‬
‫يمثل اسما ً لدالة تستدعى عند انتهاء تنفيذ الطلب ويمكن أن تمرر استجابة الخادم كوسيط لها ‪.‬‬
‫إرسال الطلبات لخادم معلومات نوع االستجابة‬
‫من الممكن أن يعيد التطبيق الموجود في الخادم استجابة في أي شكل يحدده مبرمج هذا التطبيق ‪,‬‬
‫فإن كنا على بينة ويقين إن التطبيق الذي نرسل إليه الطلب سيعيد استجابته بالتمثيل ‪ JSON‬فإن‬
‫مكتبة ‪ jQuery‬توفر دالة خاصة لمثل هذه الحالة وهي ‪-:‬‬
‫الدالة ‪$.getJSON‬‬
‫وهي تشبه كثيرا ً الدالة الوظيفية ‪ $.get‬عدا أنها مصممة الستعادة كائنات ‪ JSON‬والصيغة‬
‫; ) ‪$.getJSON ( url , JSON , F‬‬
‫حيث أن الوسيط ‪ url‬يمثل الصفحة الهدف في الخادم و‪ JSON‬يمثل وسطاء هذه الصفحة ‪ ,‬أما‬
‫الوسيط ‪ F‬فيمثل اسما ً لدالة في المستند تستدعى لحظة انتهاء الطلب ويمكن أن يمرر لها وسيط‬
‫يعبر عن استجابة الخادم ويكون هذا الوسيط كائنا ً من كائنات ‪. JSON‬‬
‫الدوال الوظيفية‬
‫من الدوال الوظيفية الدوال التالية ‪-:‬‬

‫الدالة ‪$.getScript‬‬
‫تقوم هذه الدالة بجلب ملف ‪ JavaScript‬من الخادم وتنفيذه داخل الصفحة بشكل غبر متزامن‬
‫والصيغة العامة لها هي‬
‫; ) ‪$.getScript ( url , F‬‬
‫حيث أن الوسيط ‪ url‬يمثل ملف ‪ JavaScript‬في الخادم ويمثل الوسيط ‪ F‬اسما ً لدالة موجودة في‬
‫المستند تستدعى لحظة اكتمال الطلب ‪.‬‬
‫الدالة ‪$.ajax‬‬
‫من خالل هذه الدالة يمكننا التحكم الكامل بكل ما يتعلق بطلبات ‪ AJAX‬وتعتبر هي الدالة األم‬
‫لجميع دوال ‪ AJAX‬والصيغة العامة لها هي‬
‫; ) ‪$.ajax ( options‬‬
‫حيث أن الوسيط ‪ options‬هو عبارة عن كائن ‪ JSON‬يمثل مجموعة الخيارات الخاصة بالطلب‬
‫والتي سيتم تنفيذه بناءا ً عليها ‪.‬‬
‫* الجدول التالي يوضح خيارات الدالة ‪$.ajax‬‬
‫الوصف‬ ‫النوع‬ ‫االسم‬

‫رابط الصفحة التي سيرسل لها الطلب في الخادم‬ ‫نص‬ ‫‪url‬‬
‫طريقة إرسال الطلب ‪ GET‬او ‪POST‬‬ ‫نص‬ ‫‪type‬‬
‫كائن ‪ JSON‬يمثل مجموعة وسطاء الصفحة التي سيرسل لها‬ ‫كائن ‪JSON‬‬ ‫‪data‬‬
‫الطلب ( المعلومات التي سترسل إلى الصفحة الهدف وفي‬
‫الغالب تكون مع رابط الصفحه )‬
‫قيمة من القيم التالية التي تعبر عن نوع البيانات التي نتوقع أن‬ ‫نص‬ ‫‪dataType‬‬
‫يعيدها الخادم (نوع الصفحة التي سنستقبلها ) واألنواع هي ‪:‬‬
‫‪ XML‬و ‪ JSON‬و ‪ ACRIPT‬و ‪ TEXT‬و ‪ html‬و ‪script‬‬
‫يمثل الزمن األعظمي لتنفيذ الطلب بالملي ثانية فإن لم يتم اكتمال‬ ‫رقم‬ ‫‪timeout‬‬
‫الطلب خالل هذا الزمن فإن الدالة تقوم بإلغاء الطلب معتبرة‬
‫حدوث خطأ ما‬
‫دالة يتم استدعائها لحظة اكتمال الطلب بنجاح ويمكن أن تأخذ‬ ‫دالة‬ ‫‪success‬‬
‫ثالث بارامترات وبالترتيب األول هو ‪ data‬يمثل بيانات الملف‬
‫الذي تم استدعائه والثاني هو ‪ statutsText‬يمثل رسالة تحمل‬
‫هل تمت العملية بنجاح او ال بصيغة نصية والبارامتر الثالث هو‬
‫‪ xmlHttpRequest‬يمثل معامل ‪ AJAX‬وهذا الباراميتر إذا‬
‫وضعنا بعده نقطة ثم ‪ status‬فإنه سيعطي رقم الحالة أما إذا‬
‫وضنا بعده نقطة وثم ‪ statusText‬فإنه سيعطي الحالة بصيغة‬
‫نصية ‪ ,‬ويمكن أن نعطي لهذه البارامترات أي اسم لكن بالترتيب‬
‫دالة يتم استدعائها لحظة حصول خطأ ما في الطلب‬ ‫دالة‬ ‫‪error‬‬
‫دالة يتم استدعائها لحظة اكتمال الطلب سوا ًء أتم بنجاح أم ال‬ ‫دالة‬ ‫‪complete‬‬
‫دالة يتم استدعائها قبل إرسال الطلب تماما ً‬ ‫دالة‬ ‫‪beforeSend‬‬
‫عندما تسند إليها القيمة ‪ true‬يتم إرسال الطلب بشكل غير‬ ‫قيمة منطقية‬ ‫‪async‬‬
‫متزامن ( أي يمكن أن تجري عمليات أخرى في الموقع أثناء‬
‫معالجة الطلب وعدم التوقف إلى أن ينتهي الطلب ) وهي الحالة‬
‫االفتراضية ويفضل استخدامها والعكس في حالة إسناد القيمة‬
‫‪ false‬وهي عادتا ً تستخدم إذا كان هناك ضغط على الخادم‬
‫والسرعة بطيئة جداً ‪.‬‬
‫بشكل افتراضي يتم ترميز البيانات المرسلة بواسطة الوسيط‬ ‫قيمة منطقية‬ ‫‪processData‬‬
‫‪ data‬إلى ترميز مالئم مستعرض الويب وهي الحالة ذاتها التي‬
‫تحدث عند إسناد القيمة ‪ true‬لهذه الخاصية والعكس عند إسناد‬
‫القيمة ‪false‬‬
‫ينفذ إذا كان هناك خطأ وهو سيوقف العمليات التي بعده حيث‬ ‫كائن ‪JSON‬‬ ‫‪statusCode‬‬
‫يمكن أن نضع داخله مجموعة شروط ونطلب منه مثالً إذا كان‬
‫الخطأ الفالني اعرض الرسالة التالية ( وهنا نكتب رقم الخطأ )‬
‫تأخذ القيمة ‪application/x-www-form-urlencoded‬‬ ‫‪contentType‬‬
‫وتكون هذه القيمة هي أفتراضية وهي لها عالقة بطريقة‬
‫اإلرسال ‪.‬‬
‫تستخدم هذه الخاصية إذا طلبنا صفحة وكانت هذه الصفحة‬ ‫‪username‬‬
‫محمية باسم مستخدم وكلمة سر فهذه الخاصية ستحمل اسم‬
‫المستخدم ‪.‬‬
‫تستخدم هذه الخاصية إذا طلبنا صفحة وكانت هذه الصفحة‬ ‫‪Password‬‬
‫محمية باسم مستخدم وكلمة سر فهذه الخاصية ستحمل كلمة السر‬
‫وكمثال على استخدام هذه الدالة قد نكتب شيء مماثل لما يلي ‪-:‬‬
‫{ ( ‪$.ajax‬‬
‫‪url : 'myPage.php' ,‬‬
‫‪type : 'GET' ,‬‬
‫‪data : { id:10&name:”ahmed” } ,‬‬
‫‪dataType : 'XML' ,‬‬
‫{ ) (‪beforSend : function‬‬
‫; ) " … ‪$ ( '#div' ).text( "loading‬‬
‫‪},‬‬
‫{ ‪statusCode :‬‬
‫{ ) ‪404 : function( r , s , xhr‬‬
‫‪$ ( '#div' ).text( "number is"+ xhr.status+" "+ xhr.statusText ) ; } ,‬‬
‫{ ) ‪200 : function( r , s , xhr‬‬
‫} ; ) "‪$ ( '#div' ).text( "Ok‬‬
‫‪},‬‬
‫‪contentType : “application/x-www-form-urlencoded” ,‬‬
‫{ ) ‪success : function( d , st , xhr‬‬
‫; ) ‪$ ( '#div' ).text( d‬‬
‫; ) ‪$ ( '#div' ).text( st‬‬
‫; ) ‪$ ( '#div' ).text( "number is"+ xhr.status+" "+ xhr.statusText‬‬
‫}‬
‫;)}‬
‫والحظ بأن المحدد ‪ #div‬الذي استخدمناه في المثال هو الذي ستعرض فيه الصفحة الهدف‬
‫‪myPage.php‬‬
‫الدالة ‪$.ajaxSetup‬‬
‫من خالل هذه الدالة يمكن تعيين إعدادات افتراضية لكل الطلبات المرسلة عبر الدالة ‪$.ajax‬‬
‫والصيغة العامة لها هي‬
‫; ) ‪$.ajaxSetup ( properties‬‬
‫حيث أن الوسيط ‪ properties‬هو كائن ‪ JSON‬يمثل مجموعة الخاصيات التي ستصبح‬

‫افتراضيةً للدالة ‪ $.ajax‬ويمكن أن يحتوي الوسيط ‪ properties‬الخيارات ذاتها الموضحة في‬
‫الجدول السابق ‪ ,‬وكمثال على عمله يمكن أن نكتب شيء مشابها ً لما يلي لتغيير اإلعدادات‬
‫الخاصة بالدالة ‪$.ajax‬‬
‫( ‪$.ajaxSetup‬‬
‫{‬
‫‪type : 'GET' ,‬‬
‫‪dataType : 'XML' ,‬‬
‫{ ) ‪error : function ( err‬‬
‫; ) ‪alert ( 'erro message is :' + msg‬‬
‫‪},‬‬
‫‪timeout : 10000‬‬
‫}‬
‫;)‬
‫األحداث الخاصة بطلبات ‪AJAX‬‬
‫* الجدول التالي يوضح هذه األحداث‬
‫لحظة التفجير‬ ‫اسم الحدث‬

‫عند انتهاء أي طلب من طلبات ‪AJAX‬‬ ‫‪ajaxComplete‬‬
‫عند فشل أي طلب من طلبات ‪AJAX‬‬ ‫‪ajaxError‬‬
‫قبل إرسال أي طلب من طلبات ‪AJAX‬‬ ‫‪ajaxSend‬‬
‫عند بداية إرسال أي طلب من طلبات ‪AJAX‬‬ ‫‪ajaxStart‬‬
‫عند إنتهاء تنفيذ جميع طلبات ‪AJAX‬‬ ‫‪ajaxStop‬‬
‫عند انتهاء تنفيذ أي من طلبات ‪ AJAX‬بنجاح‬ ‫‪ajaxSuccess‬‬
‫الفصل السادس‬
‫( اإلضافات ‪) plugins‬‬
‫اإلضافة هي عبارة عن ملف ‪ JavaScript‬يتم تضمينه بعد المكتبة ويبنى باالعتماد عليها لذا فهو‬
‫يسمى أي اسم ويكون باالمتداد ‪ js‬لكن فريق عمل مكتبة ‪ jQuery‬ينصح بأن تكون تسمية‬
‫اإلضافة بهذا الشكل‬
‫‪.js‬االسم‪jQuery.‬‬
‫لكن يمكن التسمية بدون كلمة ‪ jQuery‬ويكون الشكل العام لشيفرة اإلضافة بهذا الشكل ‪-:‬‬
‫{ ) ‪(function( $‬‬
‫هنا ستكون شيفرة اإلضافة‬
‫; ) ‪} ) ( jQuery‬‬
‫وكما تعرف فأن هناك نوعين من الدوال دوال تستخدم معها المحددات ونوع آخر سميناه الدوال‬
‫الوظيفية لذا إن أردنا أن ننشأ دالة من النوع األول ستكون اإلضافة بهذا الشكل‬
‫{ ) ‪$.fn.F = function ( parameters‬‬
‫جسم الدالة‬
‫}‬
‫; ) ‪} ) ( jQuery‬‬
‫حيث أن ‪ F‬هو اسم الدالة الجديدة و ‪ parameters‬هي قائمة الوسطاء التي تأخذها هذه الدالة ‪ ,‬أما‬
‫عند بناء دالة وظيفية جديدة ( من النوع الثاني ) يكون الشكل العام للدالة هكذا‬
‫{ ) ‪$.F = function ( parameters‬‬
‫جسم الدالة‬
‫;}‬
‫; ) ‪} ) ( jQuery‬‬
‫حيث أن ‪ F‬هو اسم الدالة الجديدة و ‪ parameters‬هي قائمة الوسطاء التي تأخذها هذه الدالة ‪.‬‬
‫مثال‪ /‬لكتابة إضافة من النوع الثاني‬
‫{ ) ‪( function( $‬‬
‫{ ) ‪$.ourMessage = function( msg‬‬
‫; ) (‪var m = msg.toString‬‬
‫; ) ‪alert( m‬‬
‫;}‬
‫; ) ‪} ) ( jQuery‬‬
‫في هذا المثال ستقوم الدالة بعرض رسالة معلومات تحتوي على قيمة الوسيط الممرر إليها واآلن‬
‫يمكن أن نستدعي هذه الدالة في صفحتنا في شيفرة ‪ jQuery‬كما يلي‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<script type="text/JavaScript" src="jquery.js"></script‬‬
‫>‪.js"></script‬اسم الملف"=‪<script type="text/JavaScript" src‬‬
‫; ) "‪$.ourMessage( "Hello world‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫مثال‪ /‬لكتابة إضافة من النوع األول‬

‫{ ) ‪( function( $‬‬
‫{ ) ‪$.fn.Ahmed = function( spd , del‬‬
‫; ) ‪return this.hide( spd ).delay( del ).show( spd‬‬
‫}‬
‫; ) ‪} ) ( jQuery‬‬
‫كما الحظت هنا استخدمنا ‪ this‬وهي تشير إلى هذا المحدد أي طبق التأثير على المحدد الذي سيتم‬
‫تحديده ‪ ,‬وكما الحظت استخدمنا أيضا ً الدالة ‪ return‬وهي تستخدم إذا كانت لدينا أكثر من دالة‬
‫في داخل اإلضافة حيث نكتبها مع الوظيفة األساسية التي يتم عليها التنفيذ ( الحظ أنه يمكن كتابة‬
‫أكثر من دالة داخل اإلضافة الواحدة ) ‪ ,‬واآلن يمكن أن نستدعي هذه الدالة في صفحتنا في شيفرة‬
‫‪ jQuery‬كما يلي‬
‫>‪<html‬‬
‫>‪<head‬‬
‫{ ) (‪$ ( 'a' ).click( function‬‬
‫; ) ‪$ ( this ).Ahmed( 2000 , 1000‬‬
‫;)}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<a >Example</a‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫* يمكننا أن نكون اإلضافات وإعطاء قيم افتراضية تنفذ إذا لم ندخل للدالة قيم وإذا أعطيناها قيم‬
‫ستطيق القيم الجديدة وذلك من خالل استخدام الكائن ‪JSON‬‬
‫مثال‪ /‬يكتب داخل ملف اإلضافة‬

‫{ ) ‪( function( $‬‬
‫{ ) ‪$.fn.Ahmed = function( op‬‬
‫{ = ‪var set‬‬
‫‪"HS" : 2000 ,‬‬
‫'‪"DS" : 1000‬‬
‫‪"SS" : 2000‬‬
‫;}‬
‫; ) ‪$.extend( set , op‬‬
‫; ) ]'‪this.hide( set['HS'] ).delay( set['DS'] ).show( set['SS‬‬
‫}‬
‫; ) ‪} ) ( jQuery‬‬
‫كما الحظت كتبنا المتغير وسميناه ‪ set‬وهو يعبر عن الكائن ‪ ( JAON‬ويمكن إعطائه أي اسم )‬
‫ووضعنا في داخله الخصائص وبجانبها القيم االفتراضية وكما الحظت وضعنا بين قوسي الدالة‬
‫باراميتر واحد وسميناه ‪ ( op‬ويمكن إعطائه أي اسم ) وللربط بين هذا البارميتر والمتغير ‪set‬‬
‫استخدمنا الدالة ‪ extend‬حيث أنها تأخذ بارامترين األول يعبر عن الكائن ‪ JSON‬والثاني هو‬
‫الباراميتر وبذلك ستتحول الخصائص وقيمها من الكائن إلى الباراميتر داخل الدالة وكما الحظت‬
‫كتبنا مثال داخل الدالة ‪ hide‬اسم الكائن حيث نتعامل معه كمصفوفة ووضعنا بداخل قوسي‬
‫المصفوفة رتبتها وهي هنا كما سميناها ‪ ( HS‬ويمكن تسميتها بأي اسم ) حيث ستأخذ ‪hide‬‬
‫القيمة االفتراضية المسندة لهذه الرتبة ‪ HS‬ونفس الكالم بالنسبة للدالتين األخرتين ‪ delay‬و‬
‫‪ , show‬واآلن يمكن أن نستدعي هذه الدالة في صفحتنا في شيفرة ‪ jQuery‬كما يلي‬
‫>‪<html‬‬
‫>‪<head‬‬
‫{ ) (‪$ ( 'a' ).click( function‬‬
‫{ (‪$ ( this ).Ahmed‬‬
‫‪HS : 3000 ,‬‬
‫‪SS : 4000‬‬
‫;)}‬
‫;)}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<a >Example</a‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫وفي هذا المثال ستأخذ الدالة ‪ delay‬القيمة االفتراضية وهي ‪ 1‬ثانية أما الدالتين ‪ show‬و ‪hide‬‬
‫ستأخذ القيم المسندة لها هنا وهي ‪ 4‬ثانية للدالة ‪ show‬و ‪ 3‬ثانية للدالة ‪ , hide‬وكم الحظت‬
‫نضيف القيم للدالة بشكل كائن ‪JSON‬‬
‫مالحظات عامة‬
‫مالحظة‪ // 1‬الكائن ‪ this‬يستخدم لإلشارة إلى العنصر الذي يكتب بداخله هذا الكائن ‪ ,‬مثالً إذا‬
‫أردنا تطبيق تأثير معين على عنصر عند حدوث حدث ما على نفس العنصر فيمكن أن نستخدم‬
‫‪ this‬الحظ هذا المثال سنكتبه بطريقتين‬
‫‪)1‬‬
‫{ ) ( ‪$ ( '#test' ).hover( function‬‬
‫; )} '‪$ ( '#test' ).css({ color:'#ff0000‬‬
‫; )}‬
‫‪)2‬‬
‫{ ) ( ‪$ ( '#test' ).hover( function‬‬
‫; )} '‪$ ( this ).css({ color:'#ff0000‬‬
‫; )}‬
‫كما الحظت في المثال السابق ال يوجد فرق بين الطريقتين لكن الحظ هذا المثال ستتجلى فائدة‬
‫الكائن ‪ this‬بوضوح‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<script type="text/JavaScript" src="jquery.js"> </script‬‬
‫{ ) ( ‪$( 'h1' ).click( function‬‬
‫; ) ‪$( 'h1' ).hide( 1000‬‬
‫;)}‬
‫;)}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<h1> 1 </h1‬‬
‫>‪<h1> 2 </h1‬‬
‫>‪<h1> 3 </h1‬‬
‫>‪<h1> 4 </h1‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫في هذا المثال إذا تم الضغط على أي رقم من هذه األرقام ( >‪ ) <h1‬سوف يؤدي ذلك إلى اختفاء‬
‫كل األرقام ) >‪ , ( <h1‬لكن إذا أردنا أن يطبق تأثير االختفاء فقط على العنصر الذي يتم الضغط‬
‫علية هنا يجب أن نستخدم الكائن ‪ this‬لتصبح شيفرة ‪ jQuery‬بهذا الشكل‬
‫{ ) ( ‪$( 'h1' ).click( function‬‬
‫; ) ‪$( this ).hide( 1000‬‬
‫;)}‬
‫;)}‬
‫مالحظة‪ // 2‬الكائن ‪ JSON‬هو عبارة عن تنظيم او ترتيب لمجموعة الخواص والقيم التي نريد‬
‫أن نضيفها إلى دالة او إلى أي شيء حيث أنه يكتب بشكل قوسين معقوفين } { وبداخلهم نكتب‬
‫الخاصية بين عالمات تنصيص ثم نقطتين فوق بعض ‪ :‬ثم قيمتها بين عالمات تنصيص ثم فارزة‬
‫وبعدها نكتب الخاصية مع قيمتها كما فعلنا مع الخاصية األولى وهكذا نستمر بإضافة القيم‬
‫للخواص بعدد ما نشاء ‪ ,‬سيصبح الشكل العام بهذا الشكل‬
‫{‬
‫‪"key1":"value1" ,‬‬
‫‪"key2":"value2" ,‬‬
‫‪"key3":"value3" ,‬‬
‫‪.‬‬
‫‪.‬‬
‫‪"key n":"value n" ,‬‬
‫}‬
‫* ويمكن أن نكتب اسم الخاصية او المفتح ) ‪ ( key‬بدون عالمة تنصيص لكن يجب كتابة القيمة‬
‫‪ value‬بين عالمات التنصيص ‪.‬‬
‫مالحظة‪ // 3‬في بعض األحيان نريد أن نستخدم في صفحتنا مكتبات ‪ JavaScript‬أخرى وأيضا ً‬
‫نريد استخدام مكتبة ‪ jQuery‬لكن في هذه الحالة سيحصل تضارب بين المكتبات ألننا سنعرف‬
‫أكود مكتبة ‪ jQuery‬بالعالمة ‪ $‬وهذا متغير عام تستخدمه جميع المكتبات وهنا سيحصل‬
‫التضارب بين أكود المكتبات لذا سنستخدم الدالة ) (‪ noConflict‬لتحويل هذه العالمة في مكتبة‬
‫‪ jQuery‬إلى عالمة او حرف او كلمة نحن نختارها لنكتبها مكانها ( وكما قلنا سابقا ً إن العالمة ‪$‬‬
‫تعادل كلمة ‪ ) jQuery‬لذلك سنعرف متغير جديد ونعطيه اسم ليكون اسمه هو العالمة البديلة‬
‫للعالمة السابقة ‪ $‬بهذا الشكل‬
‫; ) ( ‪var J = jQuery.noConflict‬‬
‫وبذلك سيكون الحرف ‪ J‬هو العالمة البديلة للعالمة ‪ $‬وسنكتب الحرف ‪ J‬في أي مكان كنا نكتب‬
‫فيه العالمة ‪ $‬داخل المكتبة ‪ ,‬بمعنى لو أردنا تحديد عنصر وإجراء تأثير ما علية ال نكتب ‪ $‬بل‬
‫سنكتب ‪ J‬بدال عنه‬
‫; ) (‪J ( 'selector' ).function‬‬
‫كنا سابقا ً نكتب الكود التالي ونضع بداخله أكواد ‪jQuery‬‬

‫شيفرة جكوري هنا‬
‫;)}‬
‫وكما قلنا سابقا ً فإن هذا الكود يعني أن يتم تحميل المكتبة عند ما يبدأ بتحميل الصفحة لكن اآلن‬
‫وبوجود مكتبة أخرى ال يصح أن نكتب هذه التعليمة بل سنلغيها وسيكون الكود التالي بدالً عنها‬
‫{ ) ( ‪$ ( function‬‬
‫;}‬
‫لكن بما أننا عرفّنا أن الحرف ‪ J‬هو سيكون البديل للعالمة ‪ $‬سيكون الكود السابق بهذا الشكل‬
‫{ ) ( ‪J ( function‬‬
‫;}‬
‫وبالنتيجة سيكون شكل الصفحة كامالً بصورة عامة هكذا‬

‫>‪<html‬‬
‫>‪<head‬‬
‫; ) ( ‪var J = jQuery.noConflict‬‬
‫{ ) ( ‪J ( function‬‬
‫شيفرة جي كويري هنا ‪//‬‬
‫; ) ( ‪// J ( 'selector' ).function‬‬
‫;)}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫أكواد هوتميل ( الجزء الظاهر من الصفحة )‬
‫>‪</body‬‬
‫>‪</html‬‬
‫* كتب اخرى من اعداد احمد ابراهيم‬
‫‪ -1‬كتاب المختصر المفيد في لغة ‪PHP‬‬
‫‪ -2‬كتاب المختصر المفيد في لغة ‪HTML‬‬
‫‪ -3‬كتاب المختصر المفيد في لغة ‪CSS‬‬
‫‪ -4‬كتاب المختصر المفيد في لغة ‪JavaScript‬‬
‫‪ -5‬تصميم قالب ‪Wordpress‬‬
‫‪ -6‬تعلم لغة ‪Quick Basic‬‬

J Query

Uploaded by

Document Information

Original Title

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

J Query

Uploaded by

Copyright:

Available Formats

‫تعلم‬

‫جمع وإعداد ‪:‬‬

‫الي سؤال او استفسار يمكنكم التواصل مع الكاتب عبر الفيسبوك ‪:‬‬

‫كتب اخرى للكاتب في لغات برمجية مختلفة مثل ( ‪HTML, CSS‬‬

‫الفصل األول ( المحددات ‪5 ........................................... ) Selector‬‬

‫الفصل الثاني ( الدوال ‪12 ............................................ ) Functions‬‬

‫الفصل الثالث ( األحداث ‪28 .............................................. ) Events‬‬

‫الفصل الرابع ( الحركات ‪35 ...................................... ) Animations‬‬

‫الفصل الخامس ( التخاطب مع الخادم عبر تقنية ‪42 ...................... ) Ajax‬‬

‫الفصل السادس ( اإلضافات ‪50 .......................................... ) Plugins‬‬

‫مالحظات عامة ‪54 ........................................................................‬‬

‫{ ) ( ‪$ ( document ).ready( function‬‬

‫او بهذا الشكل‬

‫* هذا الجدول يوضح كيفية تحديد العناصر ( المحددات ‪) selectors‬‬

‫الوصف ‪Description‬‬ ‫المحدد ‪selector‬‬

‫ للعناصر المحددة‬class ‫ إلعطاء اسم‬addClass ‫* تستخدم الدالة‬

‫لتوليد محتوى ‪ html‬جديد في الصفحة نستخدم الصيغة التالية‬

‫أوالً ‪ -:‬دوال التعامل مع خصائص الوسوم ‪Attributes‬‬

‫ويسمى هذا ما بين القوسين المعقوفين } { بالمتغير ) ‪. ( JSON‬‬

‫مثال‪ /‬لحذف الخاصية ‪ target‬لجميع الروابط في الصفحة‬

‫ثانيا ً ‪ -:‬دوال التعامل مع األنماط ‪style‬‬

‫;) 'اسم الكالس' (‪$ ( 'selsctor' ).hasClass‬‬

‫ويسمى ما بين القوسين المعقوفين { } من خصائص بالمتغير او الكائن ) ‪. ( JSON‬‬

‫او يمكن إسناد قيمة لعرض العنصر بالشكل التالي‬

‫او يمكن إسناد قيمة الرتفاع العنصر بالشكل التالي‬

‫الدالتين ‪ innerWidth‬و ‪outerWidth‬‬

‫او بهذا الشكل‬

‫او بهذا الشكل‬

‫الدالتين ‪ innerHeight‬و ‪outerHeight‬‬

‫او بهذا الشكل‬

‫او بهذا الشكل‬

‫ثالثا ً ‪ -:‬دوال التعامل مع محتوى عناصر المستند ‪Inner Content‬‬

‫حيث أن ‪ com‬هو شيفرة ‪ html‬التي تمثل المحتوى الجديد ‪.‬‬

‫والشكل التالي في حالة اإلسناد‬

‫* مقارنة بين الدالة ‪ html‬والدالة ‪text‬‬

‫لو كال لدينا في صفحتنا ما يلي‬

‫{ ) (‪$ ( '#box' ).click(function‬‬

‫الدالتين ‪ append‬و ‪appendTo‬‬

‫بالنسبة للدالة ‪append‬‬

‫في هذه الحالة فإن االستدعاء‬

‫أما بالنسبة للدالة ‪appendTo‬‬

‫الدالتين ‪ prepend‬و ‪prependTo‬‬

‫الدالتين ) ( ‪ before‬و ) ( ‪insertBefore‬‬

‫الداللتان ) ( ‪ after‬و ) ( ‪insertAfter‬‬

‫رابعا ً ‪ -:‬دوال التغليف ‪wrapping‬‬

‫مثال‪ /‬لتغليف كل عنصر صور برابط‬

‫خامسا ً ‪ -:‬دوال حذف عناصر المستند‬

‫مثال‪ /‬يعيد قيمة الخاصية ‪ value‬للعنصر ذو المعرف ‪firstName‬‬

‫مالحظة‪ /‬الدالة ‪ val‬تعيد قيمة الخاصية ‪ value‬لعناصر صناديق االختيار ‪ checkbox‬و‬

‫دوال األحداث في ‪ jQuery‬مشابهه لألحداث المستخدمة مع ‪ JavaScript‬مع اختالف بسيط‬

‫* دوال األحداث الخاصة بالنافذة ( المستند ككل )‬

‫لحظة تفجير الحدث‬ ‫اسم دالة الحدث‬

‫* دوال األحداث الخاصة بعناصر النموذج‬

‫لحظة تفجير الحدث‬ ‫اسم دالة الحدث‬

‫* دوال األحداث الخاصة بأزرار الفأرة‬

‫لحظة تفجير الحدث‬ ‫اسم دالة الحدث‬

‫لحظة تفجير الحدث‬ ‫اسم دالة الحدث‬

‫جميع الدوال في الجدول أعله لها الشكل العام التالي‬

‫مثال‪ /‬الحظ أن هاتان التعليمتان تقومان بنفس العمل تماما ً‬

‫; ) ‪$ ( 'img' ).click( myFunction‬‬

‫; ) '‪$ ( 'img' ).bind( 'click' , 'myFunction‬‬

‫) ‪$ ( 'img' ).click( F1 ) .click( F2 ) .click( F3‬‬

‫; ) ‪$ ( 'img' ).unbind( 'click' , F2‬‬