هل ترغب بانجاز عملك بوقت أقل؟ هل تريد أن تصنع نوع التفاعلية مع المستخدمين؟ هل ترغب بأن يكون موقعك محاكي لما يقوم به المستخدم؟ هل ترغب التحقق من البيانات عن طريق المتصفح قبل الخادم؟ هل ترغب بأمر سهل ..أسهل بكثير من الجافا سكربت؟ اذا تعال معنا للتعلم إحدى أقوى مكتباب الجافا سكربت دورة جي كويري قم بزيارة الموقع 2nees.com لتحميل الملف مع كامل الأمثلة ... (دورة مجانية)

1. ثس الله اىشح اىشحٌٞ
البرمجة باستخدام jQuery
تقديم الطالب : أنيس حكمت أبو حميد
التخصص : نظم معلومات حاسوبية
جامعة ال البيت الأردن
أنيس حكمت أبو حميد
Anees_hikmat@yahoo.com
هذا العمل مجاني وخالص لوجه الله تعالى , لا يجوز بيعه

2. ثس الله عٗيٚ ثشمخ الله جّذأ
بعض الملاحظات المهمة
لطر قٌة استعراض هذه
الشرائح
هذا العمل مجان , لا جٌوز ب عٌه

3. بٍ ٜٕ JQuery ؟
• ه عبارة عن مكتبة ضخمة تحتوي على أكواد جافا سكربت , قام
بتجم عٌها مجموعة من المبرمج نٌ , لتسه لٌ عمل ةٌ كتابة الأكواد
المختلفة , لأن الجافا سكربت معقدة نوعا ما ف التعامل , وتحتوي
هذه المكتبة على مجموعة كب رٌة من function الرائعة والمهمة لدى
أي مبرمج .
هذا العمل مجان , لا جٌوز ب عٌه

4. زٍطيجبد د سٗح jQuery
• أولا : Html بشكل ج دٌ
• ثان اٌ : JavaScript ) بشكل مفاه مٌ ( بح ثٌ عٌرف ك فٌ تٌعامل
مع javscript وتعر فٌ المتغ رٌات وبعض الأمور البس طٌة.
• ثالثا : Css بشكل بس طٌ جدا .
أنيس حكمت أبو حميد
Anees_hikmat@yahoo.com
هذا العمل مجان , لا جٌوز ب عٌه

5. طشٝقخ رح َٞو JQuery
أنيس حكمت أبو حميد
Anees_hikmat@yahoo.com
هذا العمل مجان , لا جٌوز ب عٌه

6. طشٝقخ رح َٞو JQuery
هذا العمل مجان , لا جٌوز ب عٌه

7. طشٝقخ رح َٞو JQuery
هذا العمل مجان , لا جٌوز ب عٌه

8. طشٝقخ رح َٞو JQuery
هذا العمل مجان , لا جٌوز ب عٌه

9. طشٝقخ رح َٞو JQuery
هذا العمل مجان , لا جٌوز ب عٌه

10. اىي لا بٍ عّ ى بَ أعطٞذ لٗا عٍطٜ ى اَب
عٍْذ لٗا ٝ فْع را اىجذ لٍْ اىجذ
هذا العمل مجان , لا جٌوز ب عٌه

11. طشٝقخ رض َٞ اى نَزجخ
• داخل head نقوم بكتابة هذا السطر البرمج لتضم نٌ المكتبة
•<script type="text/JavaScript" src=”اسم الملف .js"></script>
جٌب أن تعلم أن ملف jquery.js جٌب ان كٌون فوق اي فانكشن أي لا جٌوز استخدام فانكشن
داخل هذه المكتبة قبل استدعائها ف مكان .
هذا العمل مجان , لا جٌوز ب عٌه

12. ثٍبه عيٚ طشٝقخ اىزض َِٞ
هذا العمل مجان , لا جٌوز ب عٌه

13. مٞف جّذأ ثنزبثخ function داخو jQuery
• أولا :
$(document).ready(
function () {}
);
OR
$(document).ready(function(){
});
ملاحظة : قد تراها مكتوبة بأي من الشكل نٌ الت بالأعلى
ونقصبد $(document).ready أنه مجرد ما تم استدعاء الصفحة نفذ
ما ف داخلها
هذا العمل مجان , لا جٌوز ب عٌه

14. مٞف جّذأ ثنزبثخ function داخو jQuery
• ثان اٌ : مٌكننا أ ضٌا الكتابة بهذا الشكل
$(function(){ // jQuery methods go here... });
jQuery(function($){ ثالثا : هذه الطريقة
// jQuery methods go here... });
ملاحظة : لك الخ اٌر بأي واحدة من هذه الطرق الثلاث ان تكتب برنامجك ولكن تم ذكر
الطرق هذه لمساعدتك ف فهم اي كود ج كو رٌي قد تراه .
هذا العمل مجان , لا جٌوز ب عٌه

15. ثٍبه JQuery
هذا العمل مجان , لا جٌوز ب عٌه

16. طشٝقخ اى ص٘ ه٘ لأٛ tag داخو body
للوصل لأي tag داخل body كل ما عل نٌا هو الآت :
$(document).ready(function(){
$(“?????")……
});
أرأئ تٌم علامات الاستقهام ؟ ... تٌم وضع مكان علامات الاستفهام tag الذي نر دٌ ان حٌدث عل هٌ أي تغ رٌٌ .
انظروا الى هذا المثال ) وهو المثال السابق ( نرى عندنا أننا وضعنا P وهذه P ه tag داخل html وتتعلق
بالفقرات ..لذلك عند تنف ذٌك للمثال السابق كان أي ش ءً داخل فقرة عند الضغط عل هٌ خٌتف .
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
اذا قمنا بوضع مكان P رمز * .... وهذا عٌن كل اش داخل الصفحة ...
هذا العمل مجان , لا جٌوز ب عٌه

17. طشٝقخ اى ص٘ ه٘ لأٛ tag داخو body
لكن هناك سؤال مهم ؟ ماذا لو كنت ار دٌ أن كٌون الحدث فقط لفقرة واحة ل سٌ
لجم عٌ الفقرات كما كان المثال الأول ؟؟
جواب السؤال حلها كٌون عن طر قٌ وضع id أو class كما ف Css
مثال :
$(document).ready(function(){
$(".nameOFclass").click(function(){
$(this).hide();
});
});
ملاحظة : class رٌمز له بالنقطة ) . ( و id رٌمز له # والفرق ب نٌهم أن ID لا مٌكن ان سٌتعمله الا tag واحد أما ال class ف مٌكن الوصول ال هٌ من أكثر
من tag .
هذا العمل مجان , لا جٌوز ب عٌه

18. ثٍبه عيٚ طشٝقخ اى ص٘ ه٘ لأٛ tag
هذا العمل مجان , لا جٌوز ب عٌه

19. hide Method
تستخدم هذه method لأخفاء الأش اٌء من على صفحة الانترنت , وكانت
أمثلتنا السابقة جم عٌا عل هٌا ...
مثال :
$(document).ready(function(){
$(".1").click(function(){
$(this).hide(5000);
});
});
ان لهذه ال method خصائص , وه التحكم بسرعة الاختفاء
$(this).hide(5000); هنا عن طر قٌ الثوان كل 1000 = اثان ةٌ
$(this).hide(“slow”); هنا بط ءً
$(this).hide(“fast”); هنا بسرعة
هذا العمل مجان , لا جٌوز ب عٌه

20. show method
تستخدم هذه method لأظهار الأش اٌء من على صفحة الانترنت ,
والت ه بالأصل مخف ةٌ )مصمم الصفحة أخفى هذه المعلومات لح نٌ
استدعائها ( وه عكس لل hide ..
مثال :
$(document).ready(function(){
$(".a").show(5000);
});
ما نٌطبق على hide نٌطبق على show ...
هذا العمل مجان , لا جٌوز ب عٌه

21. رطجٞق عيٚ show And hide method
ملاحظة : مٌكن وضع أكثر من method وراء بعضها لك تنفذ و
بنفس التسلسل
مثال :
$(document).ready(function(){
$(".a").show(5000).hide(2000).show(3000);
});
ف هذا المثال فإنه أولا س قٌوم باظهار النص بعد 5 ثوان ثم خٌتف بعد
ثان تٌان وثم ظٌهر بعد 3 ...
اذا دققت بالمثال فإنه مٌش بشكل متسلسل حسب الترت بٌ و فٌصلها
نقاط.
هذا العمل مجان , لا جٌوز ب عٌه

22. delay Method
وتستخدم هذه ال method لتأخ رٌ تنف ذٌ أمر مع نٌ ..
مثل :
$(document).ready(function(){
$(".a").show(2000).delay(4000).hide(2000);
});
هنا ف هذا المثال :
س قٌوم باظهار النص اولا ثم س تٌوقف ثان ةٌ وثم س خٌف النص بعد ثان تٌان
هذا العمل مجان , لا جٌوز ب عٌه

23. fadeIn Method
تستخدم هذه ال method لأظهار النصوص بشكل متدرج , صٌبح
الظهور أوضح ش ئٌا فش ئٌا , مثل فكرت الفلاش ...
مثال :
$(document).ready(function(){
$(".a").fadeIn(2000);
});
وهنا أ ضٌا مٌكن تحد دٌ الوقت الذي ستستغرقه ..
هذا العمل مجان , لا جٌوز ب عٌه

24. fadeOut Method
وهذه ال method عكس fadeIn ...
مثال :
$(document).ready(function(){
$(".a").fadeOut(5000);
});
هذا العمل مجان , لا جٌوز ب عٌه

25. أحت اىصبىحٞ ىٗسذ ىعيٜ أ أ بّه ث شفبعخ
أٗمش رجبسر اى عَبصٜ ىٗ م س ا٘ء فٜ اىجضبعخ
أنيس حكمت أبو حميد
Anees_hikmat@yahoo.com
هذا العمل مجان , لا جٌوز ب عٌه

26. append method
وتستخدم هذه ال method للاضافة داخل الصفحة ..
مثال :
$(document).ready(function(){
$(".a").append("Aneesused Append");
});
هذا العمل مجان , لا جٌوز ب عٌه

27. appendTo method
وتستخدم هذه ال method للاضافة داخل الصفحة ) تض فٌ بعد تنف ذٌ الكلاس
الأصل ( ولاكن كٌتب بداخلها مثلا tag مع نٌ
مثال :
$(document).ready(function(){
$(“<h1>Jordan</h1>").appendTo(“.a");
});
ملاحظة : عكس ال append وال appendTo هو prepend
و prependTo وبنفس الطر قٌة كٌتبوا الاثن نٌ ولكن الفرق ان ال append تض فٌ لنها ةٌ النص ب نٌما prepend تض فٌ لأول النص.
هذا العمل مجان , لا جٌوز ب عٌه

28. Click Event
سٌتخدم هذا الحدث عند الضغط بزر الفأرة ..
مثال :
$(document).ready(function(){
$(".a").click(function(){
// any code
});
هنا عندما قٌوم بالضغط س قٌوم بتنف ذٌ كود مع نٌ ...
هذا العمل مجان , لا جٌوز ب عٌه

29. dblclick Event
سٌتخدم هذا الحدث عند الضغط بزر الفأرة مرت نٌ متتابعت نٌ ..
مثال :
$(document).ready(function(){
$(".a").dblclick(function(){
// any code
});
هنا عندما قٌوم بالضغط مرت نٌ س قٌوم بتنف ذٌ كود مع نٌ ...
هذا العمل مجان , لا جٌوز ب عٌه

30. ظٗٞفخ
س 1 ( انشاء صفحة تحتوي على اسم الطالب وتخصصه وعند الضغط
على اسم الطالب خٌتف تخصص الطالب و ظٌهر السنة الدراس ةٌ .
س 2 ( انشاء صفحة تحتوي button وهذه ال button تقوم على
اظهار اسمك , مع ملاحظة أن الاسم أر دٌه أن ظٌهر بعد 5 ثوان وبعد الضغط على ال button مرت نٌ ) double click . )
س 3 ( انشاء صفحة تحتوي على اسم أكثر مادة بتحبها , وعند الضغط
بزر الفأرة على اسم المادة لمرة واحدة , قٌوم باضافة المعدل لهذه
المادة دون ان خٌتف اسم المادة .
هذا العمل مجان , لا جٌوز ب عٌه

31. Text Method
تستخدم هذه الطر قٌة لاضافة نص داخل الصفحة ولكنها تمح النص
الأصل أو الموجود سابقا ..
مثال :
$(document).ready(function(){
$(".a").click(function(){
$(this).text("I HATE FOOTBALL GAME");
});
});
هذا العمل مجان , لا جٌوز ب عٌه

32. Html Method
تستخدم هذه الدالة لاضافة ما أحتاجه على الصفحة عن طر قٌ الج query وتختلف عن text بانها تنفذ tag المختلفة بداخلها أما text
فلا تنفذها وستقوم على طباعتها كما ه ...
$(document).ready(function(){
$(this).html(“<span style=„color:#f0f0ff;background:#ff0000;‟>Welcome</span>");
});
هذا العمل مجان , لا جٌوز ب عٌه

33. this
تستخدم هذه الدالة لتقول لأي function من هو العنصر الذي أنا ف هٌ
حال اٌ أو تم له حدث مع نٌ ..أي بعبارة أخرى اذا كان لدي 3 أزرار
كل زر رقمه 1 فك فٌ ل أن أعرف أي منهم هو الذي تم الضغط
عل هٌ ؟ ..الإجابة ببساطة عن طر قٌ this .
$(document).ready(function(){
$(".aa").click(function(){
$(this).hide(1000).show(1000).hide(1000).show( 1000); }); });
اذا دققنا النظر نرى $(this) وهذه ه الت ستخبرنا من هو الذي
حدث عل هٌ الإجراء.
هذا العمل مجان , لا جٌوز ب عٌه

34. CSS
تقوم هذه الدالة على التحكم بالتصام مٌ من ح ثٌ حجم الخط والألوان
وغ رٌها .. ومن اسمها فه تحوي نفس خصائص css الت نتعامل
معها بتصم مٌ الصفحات
كٌتب css بشكل نٌ الأول حٌتوي على خاص ةٌ واحدة فقط كما ف الآت :ً
$(".aa").css('color','blue');
أما الشكل الثان فأنه حٌتوي على اكثر من خاص ةٌ كما ف الآت :
$(".aaa").css({"color":"green","background":"red" });
وكما نلاحظ عند وضع أكثر من خاص ةٌ نضمنهم داخل {}
هذا العمل مجان , لا جٌوز ب عٌه

35. hover
نٌطلق هذا الحدث عندما مٌر مؤشر الفأرة فوق أي ش ءً وضعت له
الحدث hover .
$("h1").hover(function (){
$(this).css({"color":"blue","background":"black"
});
مجرد مرور مؤشر الفأرة فوق أي ش ءً مضمن داخل tag <h1>
فانه س طٌبق الدالة css .
هذا العمل مجان , لا جٌوز ب عٌه

36. شن د٘ اىٚ مٗٞع س ء٘ حفظٜ
فأسشذ ّٜ ىزشك اى عَبصٜ
أٗخجش ّٜ أ اىعي سّ٘
سّٗ٘ الله لا ٝ ذٖٙ ىعبصٜ
أنيس حكمت أبو حميد
Anees_hikmat@yahoo.com
هذا العمل مجان , لا جٌوز ب عٌه

37. toggle
تستخدم هذه ال method للتبد لٌ ب نٌ عنصر نٌ , بح ثٌ تقوم بعمل
hide ثم show ..
هذا العمل مجان , لا جٌوز ب عٌه

38. animate
تستخدم هذه الدالة لتحر كٌ)ز اٌدة أو نقصان ف أحد الاتجاهات ( أي جزء داخل الصفحة بأي اتجاه :
مع ملاحظة أن هذه الدالة لا تعمل الا اذا تم حصرها مثلا داخل div أو تم وضع ال position
سٌاوي absolute
هذا العمل مجان , لا جٌوز ب عٌه

39. stop
هذه الدالة توقف الحركة وه عكس لل animate ..
هذا العمل مجان , لا جٌوز ب عٌه

40. alert
هذه الدالة تستخدم لإخراج صندوق حٌتوي نص مع نٌ ..وه موجودة
ف الجافا سكربت ..
$(document).ready(function(){
alert("hi Anees");
});
هذا العمل مجان , لا جٌوز ب عٌه

41. attr
تستخدم هذه الدالة لأخذ ق مٌة ال href أو rel من أي link وهذا احدى الدوال المهمة ف الأمور
المتقدمة ..و مٌكن استخدامها لتعد لٌ الق مٌ مثل الطول والعرض أثناء تنف ذٌ الصفحة ..
هذا العمل مجان , لا جٌوز ب عٌه

42. sildeToggle
تستخدم هذه الدالة لأخفاء أي مكون من مكونات الصفحة ومن ثم
اظهارها بعد اعادة الحدث .. عٌن لو وضعنا زر عند الضغطة الأولى
س خٌتف ما ار دٌ واذا قمت اٌلضغط ثان ةٌ س ظٌهر النص مجددا
المثال
الثانً
المثال
الأول
هذا العمل مجان , لا جٌوز ب عٌه

43. slideDown
تستخدم هذه الدالة لأظهار النصوص المخف ةٌ وان قمنا بعدها بالضغط مرة أخرى فلن حٌدث تغ رٌٌ
وهذا هو الفرق ب نٌها وب نٌ slideToggle مع ملاحظة أنه جٌب أن كٌون النص مخف بالأصل
فإذا كان ظاهرا فلم حٌصل ش ءً
نص مخفً
هذا العمل مجان , لا جٌوز ب عٌه

44. slideUp
وه عكس لل slideDown تماما ..وهنا جٌب ان كٌون النص ظاهرا
ل تٌم اخفائه ...لاحظ هنا ان قد قمت بحذف display:none ..
هذا العمل مجان , لا جٌوز ب عٌه

45. val
تستخدم هذه الدالة لأخذ الق مٌة المخزنة داخل عنصر مع نٌ ..وه مهمة
جدا جدا ..
هذا العمل مجان , لا جٌوز ب عٌه

46. parent
تستخدم هذه الدالة تستخدم للتعامل مع أي tag تعلوها )نعن بذلك أي
tag مضمنة داخل tag اخر مثل (<a><p></p></a> فهنا
<p> مضمنة وال <a> ه parent ..
هذا العمل مجان , لا جٌوز ب عٌه

47. addClass
تستخدم هذه الدالة لتضم نٌ أي cssstyle موجود داخل الصفحة داخل
أي tag أر دٌه وهذه الكلاس الرائع سٌاعدنا على التحكم بتصم مٌ
الصفحة بشكل مرن وسهل
هذا العمل مجان , لا جٌوز ب عٌه

48. removeClass
تستخدم هذه الدالة لحذف cssclass موجود داخل الصفحة )طبعا الحذف المقصود
به وقف التنف ذٌ لهذا الكلاس اثناء عرض الصفحة حسب حدث مع نٌ ( وه عكس
لل addClass .
*ملاحظة : ما نٌطبق على اضافة الكلاس نٌطبق على الحذف فلا نضع نقطة قبل
اسم الكلاس
هذا العمل مجان , لا جٌوز ب عٌه

49. toggleClass
تستخدم هذه الدالة للتبد لٌ ب نٌ 2 class موجود نٌ داخل الصفحة ,
وهكذا مٌكننا تبد لٌ خصائص اي عنصر بمجرد ق اٌم حدث مع نٌ .
هذا العمل مجان , لا جٌوز ب عٌه

50. hasClass
تستخدم هذه الدالة لمعرفة هل هذا الكلاس موجود أم لا , بمعنى آخر
هل الكلاس مستخدم أم لا داخل ما تم اخت اٌره .
هذا العمل مجان , لا جٌوز ب عٌه

51. keydown
هذا احدى انواع Event وهو حدث نٌطلق عند الدخول مثلا داخل
مربع نص والبدء بالكتابة ..) نٌطلق عند الضغط على المفتاح(
ملاحظة : توجد مشكلة اذا استخدمنا keydown ..انظر للمثال
وأدخل ولاحظ الناتج انه س كٌون ناقص حرف ...
هذا العمل مجان , لا جٌوز ب عٌه

52. keyup
هذا احدى انواع Event وهو حدث نٌطلق عند الدخول مثلا داخل
مربع نص والبدء بالكتابة ..) نٌطلق بعد رفع ال دٌ عن اي مفتاح(
لاحظ الآن بعد تنف ذٌ المثال أنك لن تواجه المشكلة
السابقة لانه الآن ضٌ فٌ ثم أٌخذ الق مٌة ..انظر للمثال
هذا العمل مجان , لا جٌوز ب عٌه

53. Keyupand keydown
انظر الى هذا المثال و حٌتوي كلا من الحدث نٌ
السابق نٌ ..
هذا العمل مجان , لا جٌوز ب عٌه

54. keypress
هذا الحدث شب هٌ بال keydown ولكن الفرق ب نٌهم هو أن keypress لا تقبل shift ولا alt
...الخ ب نٌما ال keydown تقبل جم عٌ ما على لوحة المفات حٌ
عند تطب قٌ المثال اضغط alt داخل كل
مربع نص وانظر الى ما س حٌدث
هذا العمل مجان , لا جٌوز ب عٌه

55. change
تستخدم هذه الدالة لمراقبة التغ رٌٌ , فعند حدوث اي تغ رٌٌ مثلا داخل
مربع نص نٌطلق ..
هذا العمل مجان , لا جٌوز ب عٌه

56. مٗفٚ ثبى دَ٘ اٗعظب
اىي إ بّ سّأىل سح زَل فبغفش ى بْ ٝبالله
أنيس حكمت أبو حميد
Anees_hikmat@yahoo.com
هذا العمل مجان , لا جٌوز ب عٌه

57. focusin
نٌطلق هذا الحدث مجرد الدخول او تحد دٌ أي عنصر ..
هذا العمل مجان , لا جٌوز ب عٌه

58. focusout
هذا الحدث نٌطلق عند الخروج من التحد دٌ وهو عكس لل focusin
هذا العمل مجان , لا جٌوز ب عٌه

59. select
المقصود بهذا الدالة هو“ التحد دٌ ”, أي عندما قٌوم المستخدم بتحد دٌ
نص مع اٌَ مثلا ... ماذا س حٌصل ..
هذا العمل مجان , لا جٌوز ب عٌه

60. submit
من الأمور المهمة جدا ف الانترنت submit وه عمل ةٌ رفع الب اٌنات الموجودة داخل فورم مع نٌ
الى ال server ...ولاحظ انن قلت فورم ...
هذا العمل مجان , لا جٌوز ب عٌه

61. Submit example 2
هذا العمل مجان , لا جٌوز ب عٌه

62. عّ د٘ اٟ اىٚ attr
تكلمنا عن هذه الدالة سابقا , الآن سنتعرف على وظائف اخرى , فكما تم ذكرها سابقا
على انها تلجب الرابط فانها الآن مٌكنها التعد لٌ عل هٌ كما ف المثال التال :
هذا العمل مجان , لا جٌوز ب عٌه

63. عّ د٘ اٟ اىٚ 2 attr
كما مٌكننا أ ضٌا اضافة رابط وان لم وٌضع رابط داخل الل نٌك وبنفس
الطر قٌة السابقة :
هذا العمل مجان , لا جٌوز ب عٌه

64. عّ د٘ اٟ اىٚ 3 attr
كما مٌكننا أ ضٌا التعد لٌ أو الاضافة لل title ( title هو مستط لٌ صغ رٌ الحجم ظٌهر عند وضع
مؤشر الفأرة على ش ءً ما ( لاحظها ف المثال التال :
هذا العمل مجان , لا جٌوز ب عٌه

65. عّ د٘ اٟ اىٚ 4 attr
أ ضٌا مٌكننا من التعد لٌ او الاضافة بنفس الوقت على الرابط ..بالطر قٌة
التال ةٌ :
هذا العمل مجان , لا جٌوز ب عٌه

66. عّ د٘ اٟ اىٚ 5 attr
كما مٌكن أن نقوم بالأضافة أوالتعد لٌ , مٌكننا الق اٌم بعمل ةٌ حذف
باستخدام removeAttr :
هذا العمل مجان , لا جٌوز ب عٌه

67. عّ د٘ اٟ اىٚ 6 attr
استخدام ال function داخل attr , ح ثٌ مٌكننا برمجة function مع نٌ
قٌوم بالتعد لٌ على الخصائص ..كما ف المثال التال :
هذا العمل مجان , لا جٌوز ب عٌه

68. اىي صو سٗي ثٗبسك عيٚ أمش خيقال
سٞذ بّ حٍ ذَ صو الله عيٞ سٗاي حزاٚ
ٝشضٚ عيٞ اىصلاح اىسلا أنيس حكمت أبو حميد
Anees_hikmat@yahoo.com
هذا العمل مجان , لا جٌوز ب عٌه

69. prop
تستخدم هذه الدالة لإرجاع الق مٌة لخاص ةٌ مع نٌة مثلا ما هو اللون الموجود حال اٌ ؟ ..بحدد خاص ةٌ
color والدالة تجلب ل ق مٌتها , و مٌكن ا ضٌا استخدامها لوضع ق مٌ داخل الخصائص أو حتى
تعد لٌ الق مٌ وه تشبه attr ..ولكن هناك فرق سنراه بالشر حٌة التال ةٌ ..الآن انظر الى المثال :
هذا العمل مجان , لا جٌوز ب عٌه

70. prop
كما لاحظنا ف المثال السابق فانه لا خٌتلف عن attr اذن ما الفرق؟
الجواب هو بكل بساطة أن attr تحذف الخاص ةٌ مع الق مٌة ب نٌما prop تحذف الق مٌة فقط عٌن لو
فرضنا ان هناك <a href=“anees”>
اذا استخدمت attr لحذف الرابط فان الرابط س حٌذف )لن تستط عٌ الضغط عل هٌ (
ب نٌما لو قمنا باستخدام prop فس بٌقى الرابط لكن ولكن بدون ق مٌة ..
انظر المثال التال وستتوضح الفكرة باذن الله تعالى ...
هذا العمل مجان , لا جٌوز ب عٌه

71. mouseenter
هذا الحدث نٌطلق عند مرور مؤشر الفأرة فوق أي ش ءً حددت له الدث
mouseenter وهو شٌبه hover ...
هذا العمل مجان , لا جٌوز ب عٌه

72. mousedown
نٌطلق هذا الحدث عند الضغط بزر الفأرة الأ سٌر فوق أي ش ءً تم
تحد دٌه بالحدث mousedown
هذا العمل مجان , لا جٌوز ب عٌه

73. mouseup
نٌطلق هذا الحدث بعد رفع زر الفأرة الأ سٌر من الضغطة عٌن قلنا ف ال musedown عند الضغط نٌطلق الحدث , أما ف mouseup
فان الحدث نٌطلق بعد الضغط –بمجرد رفع اصبع عن الزر
الأ سٌر.
هذا العمل مجان , لا جٌوز ب عٌه

74. mouseleave
هنا س نٌطلق الحدث بمجرد ابتعاد مؤشر الفأرة عن الش ءً الذي تم
اعطائه هذا الحدث ...
هذا العمل مجان , لا جٌوز ب عٌه

75. mousemove
هنا نٌطلق الحدث طالما مؤشر الفأرة داخل نطاق الخاص ةٌ الت تحتوي
على mouseover .
هذا العمل مجان , لا جٌوز ب عٌه

76. بْٕك أٝضب ...
وٌجد هناك أ ضٌا mouseover و mouseout ....
وهم شٌبهو تقر بٌا ال mouseenter وال mouseleave
لمعرفة الفرق اضغط هنا ... هنا و هنا
اذا لاحظت فإن الاختلاف ظٌهر عند وجود inner و outer ...
Mouseout و mouseover عند انتقاله من outer الى inner وعلى
العكس عٌتبرها حدث ...
ب نٌما mouseenter وال mouseleave فهم عٌبروه حدثا واحدا ح نٌ
الدخول من outer الى inner
هذا العمل مجان , لا جٌوز ب عٌه

77. find()
تستخدم هذه الدالة للبحث داخل الصفحة والبحث كٌون لل tag ان كان
parent وان كان child ..
هذا العمل مجان , لا جٌوز ب عٌه

78. after
وهذه الدالة تستخدم لإضافة محتوى محدد الى احدى العناصر ...
هذا العمل مجان , لا جٌوز ب عٌه

79. find and after example
رأ نٌا بالشر حٌت نٌ السابقت نٌ ك فٌ تعاملنا مع find و after ..وهذا مثال حٌتوي
على find و after معا ..فنحن نعلم أن ال find اٌت بعدها الاجراء الذي
سنقوم باتخاذه , وهذه المرة لنجعل الاجراء هو after
هذا العمل مجان , لا جٌوز ب عٌه

80. أش ذٖ أ لا اىا الا الله حٗاذ لا شاشٝل
ى , ى اى يَل ىٗ اىح ذَ عياٚ ماو
شاااااااااااااااااااااااٜء اااااااااااااااااااااااذٝش
أٗش ذٖ أ حٍ ذَ سس ه٘ الله
أنيس حكمت أبو حميد
Anees_hikmat@yahoo.com
هذا العمل مجان , لا جٌوز ب عٌه

81. first()
تستخدم هذه الدالة لتنف ذٌ الاجراء على أول ما تٌم قرائته او استرجاعه
من الخصائص , عٌن لو كان عنا قائمة ف هٌا عشرة عناصر س أٌخذ
أول عنصر ...وهناك طر قٌت نٌ لكتابة هذه الدالة ...
هذا العمل مجان , لا جٌوز ب عٌه

82. last()
تستخدم هذه الدالة لتنف ذٌ الاجراء على آخر ما تم قرائته او استرجاعه من الخصائص
, عٌن لو كان عنا قائمة ف هٌا عشرة عناصر س أٌخذ آخر عنصر ...وهناك
طر قٌت نٌ لكتابة هذه الدالة وبنفس الأسلوب للدالة first ...
هذا العمل مجان , لا جٌوز ب عٌه

83. prev
تستخدم هذه الدالة لتنف ذٌ الاجراء على العنصر قبل الآخير من ما تتم قرائته او
استرجاعه.مع ملاحظة أنه مٌكننا استخدامها للرجوع عنصر عنصر للوراء ..و
تكتب حسب التسلسل التال ...
هذا العمل مجان , لا جٌوز ب عٌه

84. next
تستخدم هذه الدالة لتنف ذٌ الاجراء على العنصر بعد الأول من ما تتم
قرائته او استرجاعه.مع ملاحظة أنه مٌكننا استخدامها للتقدم ...
هذا العمل مجان , لا جٌوز ب عٌه

85. blur
هذا الحدث نٌطلق بمجرد انهاء التأش رٌ , أو بمعنى آخر الخروج من
موقع تم تحد دٌه ...
هذا العمل مجان , لا جٌوز ب عٌه

86. width()
تستخدم هذه الدالة ف ال ج كو رٌي لمعرفة العرض لأي ش ءً ف الصفحة ...
$(document).width()
هذا العمل مجان , لا جٌوز ب عٌه

87. height
وتستخدم هذه الدالة لمعرفة ارتفاع أي من الخصائص ف الصفحة ..
هذا العمل مجان , لا جٌوز ب عٌه

88. الا ثزمش الله رط ئَ اىقي ة٘ , فزمش اٗ الله اىعظٞ لا اى الا الله حٍ ذَ سس ه٘ الله
أنيس حكمت أبو حميد
Anees_hikmat@yahoo.com
هذا العمل مجان , لا جٌوز ب عٌه

89. serialize
تستخدم هذه الدالة لأخذ الق مٌ من أي خاص ةٌ قمت بتحد دٌها وتجه زٌ هذه المعلومات لارسالها للخادم ..
و مٌكن أن تستخدم على مستوى form كامل أو على مستوى ش ءً محدد , مع مراعاة أنه جٌب
أن كٌون للعناصر أسماء والا فلن تعمل بشكل صح حٌ
هذا العمل مجان , لا جٌوز ب عٌه

90. each
تستخدم هذه الدالة للمرور على جم عٌ العناصر الت تم تحدد الخاص ةٌ
لها , وه تشبه عمل ةٌ الدوران ...) loop )
هذا العمل مجان , لا جٌوز ب عٌه

91. on
تستخدم هذه الدالة للتحكم بحدث أو بمجموعة احداث ووضعها لعنصر مع نٌ , مثل
انطلاق أمر مع نٌ عند ضغطة واحدة أو ضغطت نٌ ..وهكذا ..و كٌمنها أ ضٌا
التحكم بأحداث على مستوى فورم مثل عمل ةٌ submit ..وهذه التقن ةٌ استخدمت
عند الاصدار 1.7 وهذه الدالة مٌكن استخدامها مع التطو رٌات المستقبل ةٌ لو تم
اضافة احداث جد دٌة على سكربت ... وه بد لٌ عن bind وه دالة قد مٌة ..
وهذه ه الص غٌة العامة لها وأنا ف المثال والشرح الذي سأذكره ..سأستخدم اسهل
ص غٌة لهذه الدالة ..
Syntax
$(selector).on(event,childSelector,data,function,map)
لمز دٌ من التفاص لٌ حول هذا الموضوع
رٌجى الضغط هنا –س ذٌهب بك الى موقع
W3school
تابع
هذا العمل مجان , لا جٌوز ب عٌه

92. on
هذا العمل مجان , لا جٌوز ب عٌه

93. off
تستخدم هذه الدالة لا قٌاف عمل حدث مع نٌ تم استخدامه من قبل الدالة
on , وهذا عٌن أن off تقوم على ا قٌاف عمل on ...
هذا العمل مجان , لا جٌوز ب عٌه

94. Ajax and jQuery
Ajax : ًييه javascript+ xml ولكيين بييدون مزامنيية , عٌنيي مٌكننييا
الوصول الى أي ق مٌة داخل أحد الخصيائص والتعاميل معهيا بيدول ميا نعميل
reload لصفحة ...
ما ه علاقة Ajax مع jQuery ؟
jQuery قٌوم على طرح عدة أسال بٌ أو طيرق لسسيتفادة مين الوظيائف التي تقوم بها Ajax .
باسييتخدام ال jQuery وال Ajax مٌكننييا عمييل request لييل text أو
xml أو Html أو Josn عيين طر يٌيق السيي رٌفر باسييتخدام POST وال
GET ...مييع امكان يٌية عمييل load لب اٌنييات خارج يٌية ووضييعها داخييل أحييد
العناصر الموجودة داخل web page .
هذا العمل مجان , لا جٌوز ب عٌه

95. load(jqueryand ajax) method
هذه الدالة بس طٌة , ولكن رغم بساطتها فإنها تعط قوة ره بٌة لل Ajax
تقوم هذه الدالة على جلب الب اٌنات من الس رٌفر ومن ثم وضعها
بالصفحة الت انا ف هٌا ....
ملاحظة : قد يحدث خطأ عند استخدام هذه الدالة لاننا نتعامل مع صفحات على نفس
الجهاز ..لذلك استخدم fireFox أو اذا ظهرت عندك المشكلة قم بالبحث عن شيء
يسمى Allow acssesfile
هذا العمل مجان , لا جٌوز ب عٌه

96. load(jqueryand ajax) method
من الب نٌات الخارج ةٌ الت مٌكن استدعائها .. مٌكننا استدعاء صفحات
الانترنت ...مثل .html ...
هذا العمل مجان , لا جٌوز ب عٌه

97. load(jqueryand ajax) method
و مٌكننا أ ضٌا استدعاء جزء من صفحة عن طر قٌ id أو class أو اي
ش ءً آخر ...
هذا العمل مجان , لا جٌوز ب عٌه

98. load(jqueryand ajax) method
ومن التطب قٌات الت مٌكن استخدامها معرفة هل ام تحم لٌ الصفحة
بنجاح أم لا ع طر قٌ window ..مثال :
هذا العمل مجان , لا جٌوز ب عٌه

99. unload
تنطلق هذه الدالة بمجرد حدوث أحد الأحداث التال ةٌ :
a link to leave the page is clicked
a new URL is typed in the address bar
the forward or back buttons are used
the browser window is closed
the page is reloaded
قد تص بٌ هذه الدالة بعض المشاكل بخصوص
المتصفحات فقم بتجربتها على أكثر من متصفح
هذا العمل مجان , لا جٌوز ب عٌه

100. نعيـب سماننـا والعيـب فيـنـا
ومـال سماننـا عـيـب سـىانـا
ونهجى ذا الشمـان بغيـز ذنـب
ولـى نطـق الشمـان لنـا هجانـا
وليس الذئب يأكـل لحـم ذئـب
ويأكـل بعضنـا بـعـض عيـانـا
الشافعي رحمه الله
أنيس حكمت أبو حميد
Anees_hikmat@yahoo.com
هذا العمل مجان , لا جٌوز ب عٌه

101. $.post
تستخدم هذه الدالة لارسال ب اٌنات لخارج الصفحة واستقبال المعلومات الراجعة
.وبمعناها الدق قٌ ه عمل ةٌ جلب الب اٌنات من الس رٌفر الى الصفحة ..وه من
أهم الدوال الموجودة والمستخدمة ف صفحات الانترنت
والص غٌة العامة لها داخل jQuery :
$.post(“ اسم الصفحة التي ستذهب لها المعلومات ”,” البيانات المراد ارسالها ”, “ استقبال البيانات ”);
تابع
هذا العمل مجان , لا جٌوز ب عٌه

102. $.post
هذا العمل مجان , لا جٌوز ب عٌه

103. $.post
ف المثال السابق قمنا باستخدام button لارسال الب اٌنات , لكن لو قمنا
باستخدام submit فهذا الكود لن عٌمل بشكل صح حٌ لان submit تقوم
على اعادة تحم لٌ الصفحة عندما تنفذ , ولتلاف هذه المشكلة نقوم بوضع
return داخل click ..لا قٌاف التحم لٌ ..والارجاع كٌون false
هذا العمل مجان , لا جٌوز ب عٌه

104. $.get
تستخدم أ ضٌا لجلب الب اٌنات , ولكن هذه الب اٌنات تكون موجودة داخل
الس رٌفر والق مٌ موجودة داخل url وأي فورم أنا أقوم بانشائه كٌون
افتراض اٌ GET ...
هذا العمل مجان , لا جٌوز ب عٌه

105. error
نست طٌع استخدام هذه الدالة لتلاف حصول الأخطاء الغ رٌ متوقعة ..
مثلا عند الذهاب لصفحة غ رٌ موجودة ..وأي من الأخطاء الت لم نأخذها بع نٌ الإعتبار ..
هذا العمل مجان , لا جٌوز ب عٌه

106. $.ajax(){}
الآن سنتعامل مع ال ajax باسلوب أقوى من get وال post الت استخدمناها ف الدروس الماض ةٌ , ح ثٌ كانت get and post من
الأمثلة البس طٌة على ajax ..والآن سنتعلم بإذن الله تعالى ك فٌ نز دٌ
من قوة الصفحة وجعلها أكثر مرونة باستخدام $.ajax ..
سأتكم أولا عن المكونات الرئ سٌ ةٌ والموجودة داخل $.ajax ..
ملاحظة : فٌصل ب نٌ كل مكون والآخر فاصلة الا اذا كان أخر مكون لا نضع خلفه فاصلة ول سٌ
جم عٌها الزام ...
المكون الأول
هذا العمل مجان , لا جٌوز ب عٌه

107. $.ajax(){}
المكون الثاتً
هذا العمل مجان , لا جٌوز ب عٌه

108. $.ajax(){}
المكون الثالث
هذا العمل مجان , لا جٌوز ب عٌه

109. $.ajax(){}
المكون الرابع
هذا العمل مجان , لا جٌوز ب عٌه

110. $.ajax(){}
المكون الخامس
هذا العمل مجان , لا جٌوز ب عٌه

111. $.ajax(){}
المكون السادس
هذا العمل مجان , لا جٌوز ب عٌه

112. $.ajax(){}
الأمثلة
هذا العمل مجان , لا جٌوز ب عٌه

113. $.ajaxexample
المثال الأول : )لا يوجد خطأ ( :
المثال الثاني : )خطأ 404 :)
هذا العمل مجان , لا جٌوز ب عٌه

114. فٜٗ اىخزب أشنش الله اىعيٜ اىعظٞ ى بَ فٗق ْٜ اىٞ أٗسزغفش أٗر ة٘ اىٞ أٗسأه الله سح زَ اٗع ر٘ ثبلله سخط اٗى بْس اىي ا زٕا اىع وَ خبىص ى ج٘ لٖ اىنشٝ فزقجي ٍْٜ ٝب الله ٝب سح ٝب
سحٞ اىي عي بَْ بٍ ٝ فْع بْ اٗ فّع بْ ث بَ عي زَ بْ ا لّ أ ذّ اىعيٞ اىحنٞ اىي اغفش ىٜ ىٗ ا٘ىذٛ ىٗي ؤَ ٍْٞ أحٞبئ أٗ اٍ٘ر ..اىي آ ٍٞ اخ ا٘ ّٜ لا ر سْ ّٜ٘ صبىح دعبئن لٗا ر سْ ا اىعي أ بٍ خّ ىٗيعي صمبح صٗمبح اىعي شّش ... اٗلله ىٜٗ
اىز ف٘ٞق
آٗخش دع ا٘ بّ أ اىح ذَ لله سة اىعبى َِٞ
اخ م٘ أ ّٞس
أنيس حكمت أبو حميد
Anees_hikmat@yahoo.com
هذا العمل مجان , لا جٌوز ب عٌه