Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

باللغة العربية jQuery دورة

3,481 views

Published on

هل ترغب بانجاز عملك بوقت أقل؟
هل تريد أن تصنع نوع التفاعلية مع المستخدمين؟
هل ترغب بأن يكون موقعك محاكي لما يقوم به المستخدم؟
هل ترغب التحقق من البيانات عن طريق المتصفح قبل الخادم؟
هل ترغب بأمر سهل ..أسهل بكثير من الجافا سكربت؟

اذا تعال معنا للتعلم إحدى أقوى مكتباب الجافا سكربت

دورة جي كويري

قم بزيارة الموقع
2nees.com
لتحميل الملف مع كامل الأمثلة ...
(دورة مجانية)

Published in: Education

باللغة العربية jQuery دورة

  1. 1. ثس الله اىشح اىشحٌٞ البرمجة باستخدام jQuery تقديم الطالب : أنيس حكمت أبو حميد التخصص : نظم معلومات حاسوبية جامعة ال البيت الأردن أنيس حكمت أبو حميد Anees_hikmat@yahoo.com هذا العمل مجاني وخالص لوجه الله تعالى , لا يجوز بيعه
  2. 2. ثس الله عٗيٚ ثشمخ الله جّذأ بعض الملاحظات المهمة لطر قٌة استعراض هذه الشرائح هذا العمل مجان , لا جٌوز ب عٌه
  3. 3. بٍ ٜٕ JQuery ؟ • ه عبارة عن مكتبة ضخمة تحتوي على أكواد جافا سكربت , قام بتجم عٌها مجموعة من المبرمج نٌ , لتسه لٌ عمل ةٌ كتابة الأكواد المختلفة , لأن الجافا سكربت معقدة نوعا ما ف التعامل , وتحتوي هذه المكتبة على مجموعة كب رٌة من function الرائعة والمهمة لدى أي مبرمج . هذا العمل مجان , لا جٌوز ب عٌه
  4. 4. زٍطيجبد د سٗح jQuery • أولا : Html بشكل ج دٌ • ثان اٌ : JavaScript ) بشكل مفاه مٌ ( بح ثٌ عٌرف ك فٌ تٌعامل مع javscript وتعر فٌ المتغ رٌات وبعض الأمور البس طٌة. • ثالثا : Css بشكل بس طٌ جدا . أنيس حكمت أبو حميد Anees_hikmat@yahoo.com هذا العمل مجان , لا جٌوز ب عٌه
  5. 5. طشٝقخ رح َٞو JQuery أنيس حكمت أبو حميد Anees_hikmat@yahoo.com هذا العمل مجان , لا جٌوز ب عٌه
  6. 6. طشٝقخ رح َٞو JQuery هذا العمل مجان , لا جٌوز ب عٌه
  7. 7. طشٝقخ رح َٞو JQuery هذا العمل مجان , لا جٌوز ب عٌه
  8. 8. طشٝقخ رح َٞو JQuery هذا العمل مجان , لا جٌوز ب عٌه
  9. 9. طشٝقخ رح َٞو JQuery هذا العمل مجان , لا جٌوز ب عٌه
  10. 10. اىي لا بٍ عّ ى بَ أعطٞذ لٗا عٍطٜ ى اَب عٍْذ لٗا ٝ فْع را اىجذ لٍْ اىجذ هذا العمل مجان , لا جٌوز ب عٌه
  11. 11. طشٝقخ رض َٞ اى نَزجخ • داخل head نقوم بكتابة هذا السطر البرمج لتضم نٌ المكتبة •<script type="text/JavaScript" src=”اسم الملف .js"></script> جٌب أن تعلم أن ملف jquery.js جٌب ان كٌون فوق اي فانكشن أي لا جٌوز استخدام فانكشن داخل هذه المكتبة قبل استدعائها ف مكان . هذا العمل مجان , لا جٌوز ب عٌه
  12. 12. ثٍبه عيٚ طشٝقخ اىزض َِٞ هذا العمل مجان , لا جٌوز ب عٌه
  13. 13. مٞف جّذأ ثنزبثخ function داخو jQuery • أولا : $(document).ready( function () {} ); OR $(document).ready(function(){ }); ملاحظة : قد تراها مكتوبة بأي من الشكل نٌ الت بالأعلى ونقصبد $(document).ready أنه مجرد ما تم استدعاء الصفحة نفذ ما ف داخلها هذا العمل مجان , لا جٌوز ب عٌه
  14. 14. مٞف جّذأ ثنزبثخ function داخو jQuery • ثان اٌ : مٌكننا أ ضٌا الكتابة بهذا الشكل $(function(){ // jQuery methods go here... }); jQuery(function($){ ثالثا : هذه الطريقة // jQuery methods go here... }); ملاحظة : لك الخ اٌر بأي واحدة من هذه الطرق الثلاث ان تكتب برنامجك ولكن تم ذكر الطرق هذه لمساعدتك ف فهم اي كود ج كو رٌي قد تراه . هذا العمل مجان , لا جٌوز ب عٌه
  15. 15. ثٍبه JQuery هذا العمل مجان , لا جٌوز ب عٌه
  16. 16. طشٝقخ اى ص٘ ه٘ لأٛ tag داخو body للوصل لأي tag داخل body كل ما عل نٌا هو الآت : $(document).ready(function(){ $(“?????")…… }); أرأئ تٌم علامات الاستقهام ؟ ... تٌم وضع مكان علامات الاستفهام tag الذي نر دٌ ان حٌدث عل هٌ أي تغ رٌٌ . انظروا الى هذا المثال ) وهو المثال السابق ( نرى عندنا أننا وضعنا P وهذه P ه tag داخل html وتتعلق بالفقرات ..لذلك عند تنف ذٌك للمثال السابق كان أي ش ءً داخل فقرة عند الضغط عل هٌ خٌتف . $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); اذا قمنا بوضع مكان P رمز * .... وهذا عٌن كل اش داخل الصفحة ... هذا العمل مجان , لا جٌوز ب عٌه
  17. 17. طشٝقخ اى ص٘ ه٘ لأٛ tag داخو body لكن هناك سؤال مهم ؟ ماذا لو كنت ار دٌ أن كٌون الحدث فقط لفقرة واحة ل سٌ لجم عٌ الفقرات كما كان المثال الأول ؟؟ جواب السؤال حلها كٌون عن طر قٌ وضع id أو class كما ف Css مثال : $(document).ready(function(){ $(".nameOFclass").click(function(){ $(this).hide(); }); }); ملاحظة : class رٌمز له بالنقطة ) . ( و id رٌمز له # والفرق ب نٌهم أن ID لا مٌكن ان سٌتعمله الا tag واحد أما ال class ف مٌكن الوصول ال هٌ من أكثر من tag . هذا العمل مجان , لا جٌوز ب عٌه
  18. 18. ثٍبه عيٚ طشٝقخ اى ص٘ ه٘ لأٛ tag هذا العمل مجان , لا جٌوز ب عٌه
  19. 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. 20. show method تستخدم هذه method لأظهار الأش اٌء من على صفحة الانترنت , والت ه بالأصل مخف ةٌ )مصمم الصفحة أخفى هذه المعلومات لح نٌ استدعائها ( وه عكس لل hide .. مثال : $(document).ready(function(){ $(".a").show(5000); }); ما نٌطبق على hide نٌطبق على show ... هذا العمل مجان , لا جٌوز ب عٌه
  21. 21. رطجٞق عيٚ show And hide method ملاحظة : مٌكن وضع أكثر من method وراء بعضها لك تنفذ و بنفس التسلسل مثال : $(document).ready(function(){ $(".a").show(5000).hide(2000).show(3000); }); ف هذا المثال فإنه أولا س قٌوم باظهار النص بعد 5 ثوان ثم خٌتف بعد ثان تٌان وثم ظٌهر بعد 3 ... اذا دققت بالمثال فإنه مٌش بشكل متسلسل حسب الترت بٌ و فٌصلها نقاط. هذا العمل مجان , لا جٌوز ب عٌه
  22. 22. delay Method وتستخدم هذه ال method لتأخ رٌ تنف ذٌ أمر مع نٌ .. مثل : $(document).ready(function(){ $(".a").show(2000).delay(4000).hide(2000); }); هنا ف هذا المثال : س قٌوم باظهار النص اولا ثم س تٌوقف ثان ةٌ وثم س خٌف النص بعد ثان تٌان هذا العمل مجان , لا جٌوز ب عٌه
  23. 23. fadeIn Method تستخدم هذه ال method لأظهار النصوص بشكل متدرج , صٌبح الظهور أوضح ش ئٌا فش ئٌا , مثل فكرت الفلاش ... مثال : $(document).ready(function(){ $(".a").fadeIn(2000); }); وهنا أ ضٌا مٌكن تحد دٌ الوقت الذي ستستغرقه .. هذا العمل مجان , لا جٌوز ب عٌه
  24. 24. fadeOut Method وهذه ال method عكس fadeIn ... مثال : $(document).ready(function(){ $(".a").fadeOut(5000); }); هذا العمل مجان , لا جٌوز ب عٌه
  25. 25. أحت اىصبىحٞ ىٗسذ ىعيٜ أ أ بّه ث شفبعخ أٗمش رجبسر اى عَبصٜ ىٗ م س ا٘ء فٜ اىجضبعخ أنيس حكمت أبو حميد Anees_hikmat@yahoo.com هذا العمل مجان , لا جٌوز ب عٌه
  26. 26. append method وتستخدم هذه ال method للاضافة داخل الصفحة .. مثال : $(document).ready(function(){ $(".a").append("Aneesused Append"); }); هذا العمل مجان , لا جٌوز ب عٌه
  27. 27. appendTo method وتستخدم هذه ال method للاضافة داخل الصفحة ) تض فٌ بعد تنف ذٌ الكلاس الأصل ( ولاكن كٌتب بداخلها مثلا tag مع نٌ مثال : $(document).ready(function(){ $(“<h1>Jordan</h1>").appendTo(“.a"); }); ملاحظة : عكس ال append وال appendTo هو prepend و prependTo وبنفس الطر قٌة كٌتبوا الاثن نٌ ولكن الفرق ان ال append تض فٌ لنها ةٌ النص ب نٌما prepend تض فٌ لأول النص. هذا العمل مجان , لا جٌوز ب عٌه
  28. 28. Click Event سٌتخدم هذا الحدث عند الضغط بزر الفأرة .. مثال : $(document).ready(function(){ $(".a").click(function(){ // any code }); هنا عندما قٌوم بالضغط س قٌوم بتنف ذٌ كود مع نٌ ... هذا العمل مجان , لا جٌوز ب عٌه
  29. 29. dblclick Event سٌتخدم هذا الحدث عند الضغط بزر الفأرة مرت نٌ متتابعت نٌ .. مثال : $(document).ready(function(){ $(".a").dblclick(function(){ // any code }); هنا عندما قٌوم بالضغط مرت نٌ س قٌوم بتنف ذٌ كود مع نٌ ... هذا العمل مجان , لا جٌوز ب عٌه
  30. 30. ظٗٞفخ س 1 ( انشاء صفحة تحتوي على اسم الطالب وتخصصه وعند الضغط على اسم الطالب خٌتف تخصص الطالب و ظٌهر السنة الدراس ةٌ . س 2 ( انشاء صفحة تحتوي button وهذه ال button تقوم على اظهار اسمك , مع ملاحظة أن الاسم أر دٌه أن ظٌهر بعد 5 ثوان وبعد الضغط على ال button مرت نٌ ) double click . ) س 3 ( انشاء صفحة تحتوي على اسم أكثر مادة بتحبها , وعند الضغط بزر الفأرة على اسم المادة لمرة واحدة , قٌوم باضافة المعدل لهذه المادة دون ان خٌتف اسم المادة . هذا العمل مجان , لا جٌوز ب عٌه
  31. 31. Text Method تستخدم هذه الطر قٌة لاضافة نص داخل الصفحة ولكنها تمح النص الأصل أو الموجود سابقا .. مثال : $(document).ready(function(){ $(".a").click(function(){ $(this).text("I HATE FOOTBALL GAME"); }); }); هذا العمل مجان , لا جٌوز ب عٌه
  32. 32. Html Method تستخدم هذه الدالة لاضافة ما أحتاجه على الصفحة عن طر قٌ الج query وتختلف عن text بانها تنفذ tag المختلفة بداخلها أما text فلا تنفذها وستقوم على طباعتها كما ه ... $(document).ready(function(){ $(this).html(“<span style=„color:#f0f0ff;background:#ff0000;‟>Welcome</span>"); }); هذا العمل مجان , لا جٌوز ب عٌه
  33. 33. this تستخدم هذه الدالة لتقول لأي function من هو العنصر الذي أنا ف هٌ حال اٌ أو تم له حدث مع نٌ ..أي بعبارة أخرى اذا كان لدي 3 أزرار كل زر رقمه 1 فك فٌ ل أن أعرف أي منهم هو الذي تم الضغط عل هٌ ؟ ..الإجابة ببساطة عن طر قٌ this . $(document).ready(function(){ $(".aa").click(function(){ $(this).hide(1000).show(1000).hide(1000).show( 1000); }); }); اذا دققنا النظر نرى $(this) وهذه ه الت ستخبرنا من هو الذي حدث عل هٌ الإجراء. هذا العمل مجان , لا جٌوز ب عٌه
  34. 34. CSS تقوم هذه الدالة على التحكم بالتصام مٌ من ح ثٌ حجم الخط والألوان وغ رٌها .. ومن اسمها فه تحوي نفس خصائص css الت نتعامل معها بتصم مٌ الصفحات كٌتب css بشكل نٌ الأول حٌتوي على خاص ةٌ واحدة فقط كما ف الآت :ً $(".aa").css('color','blue'); أما الشكل الثان فأنه حٌتوي على اكثر من خاص ةٌ كما ف الآت : $(".aaa").css({"color":"green","background":"red" }); وكما نلاحظ عند وضع أكثر من خاص ةٌ نضمنهم داخل {} هذا العمل مجان , لا جٌوز ب عٌه
  35. 35. hover نٌطلق هذا الحدث عندما مٌر مؤشر الفأرة فوق أي ش ءً وضعت له الحدث hover . $("h1").hover(function (){ $(this).css({"color":"blue","background":"black" }); مجرد مرور مؤشر الفأرة فوق أي ش ءً مضمن داخل tag <h1> فانه س طٌبق الدالة css . هذا العمل مجان , لا جٌوز ب عٌه
  36. 36. شن د٘ اىٚ مٗٞع س ء٘ حفظٜ فأسشذ ّٜ ىزشك اى عَبصٜ أٗخجش ّٜ أ اىعي سّ٘ سّٗ٘ الله لا ٝ ذٖٙ ىعبصٜ أنيس حكمت أبو حميد Anees_hikmat@yahoo.com هذا العمل مجان , لا جٌوز ب عٌه
  37. 37. toggle تستخدم هذه ال method للتبد لٌ ب نٌ عنصر نٌ , بح ثٌ تقوم بعمل hide ثم show .. هذا العمل مجان , لا جٌوز ب عٌه
  38. 38. animate تستخدم هذه الدالة لتحر كٌ)ز اٌدة أو نقصان ف أحد الاتجاهات ( أي جزء داخل الصفحة بأي اتجاه : مع ملاحظة أن هذه الدالة لا تعمل الا اذا تم حصرها مثلا داخل div أو تم وضع ال position سٌاوي absolute هذا العمل مجان , لا جٌوز ب عٌه
  39. 39. stop هذه الدالة توقف الحركة وه عكس لل animate .. هذا العمل مجان , لا جٌوز ب عٌه
  40. 40. alert هذه الدالة تستخدم لإخراج صندوق حٌتوي نص مع نٌ ..وه موجودة ف الجافا سكربت .. $(document).ready(function(){ alert("hi Anees"); }); هذا العمل مجان , لا جٌوز ب عٌه
  41. 41. attr تستخدم هذه الدالة لأخذ ق مٌة ال href أو rel من أي link وهذا احدى الدوال المهمة ف الأمور المتقدمة ..و مٌكن استخدامها لتعد لٌ الق مٌ مثل الطول والعرض أثناء تنف ذٌ الصفحة .. هذا العمل مجان , لا جٌوز ب عٌه
  42. 42. sildeToggle تستخدم هذه الدالة لأخفاء أي مكون من مكونات الصفحة ومن ثم اظهارها بعد اعادة الحدث .. عٌن لو وضعنا زر عند الضغطة الأولى س خٌتف ما ار دٌ واذا قمت اٌلضغط ثان ةٌ س ظٌهر النص مجددا المثال الثانً المثال الأول هذا العمل مجان , لا جٌوز ب عٌه
  43. 43. slideDown تستخدم هذه الدالة لأظهار النصوص المخف ةٌ وان قمنا بعدها بالضغط مرة أخرى فلن حٌدث تغ رٌٌ وهذا هو الفرق ب نٌها وب نٌ slideToggle مع ملاحظة أنه جٌب أن كٌون النص مخف بالأصل فإذا كان ظاهرا فلم حٌصل ش ءً نص مخفً هذا العمل مجان , لا جٌوز ب عٌه
  44. 44. slideUp وه عكس لل slideDown تماما ..وهنا جٌب ان كٌون النص ظاهرا ل تٌم اخفائه ...لاحظ هنا ان قد قمت بحذف display:none .. هذا العمل مجان , لا جٌوز ب عٌه
  45. 45. val تستخدم هذه الدالة لأخذ الق مٌة المخزنة داخل عنصر مع نٌ ..وه مهمة جدا جدا .. هذا العمل مجان , لا جٌوز ب عٌه
  46. 46. parent تستخدم هذه الدالة تستخدم للتعامل مع أي tag تعلوها )نعن بذلك أي tag مضمنة داخل tag اخر مثل (<a><p></p></a> فهنا <p> مضمنة وال <a> ه parent .. هذا العمل مجان , لا جٌوز ب عٌه
  47. 47. addClass تستخدم هذه الدالة لتضم نٌ أي cssstyle موجود داخل الصفحة داخل أي tag أر دٌه وهذه الكلاس الرائع سٌاعدنا على التحكم بتصم مٌ الصفحة بشكل مرن وسهل هذا العمل مجان , لا جٌوز ب عٌه
  48. 48. removeClass تستخدم هذه الدالة لحذف cssclass موجود داخل الصفحة )طبعا الحذف المقصود به وقف التنف ذٌ لهذا الكلاس اثناء عرض الصفحة حسب حدث مع نٌ ( وه عكس لل addClass . *ملاحظة : ما نٌطبق على اضافة الكلاس نٌطبق على الحذف فلا نضع نقطة قبل اسم الكلاس هذا العمل مجان , لا جٌوز ب عٌه
  49. 49. toggleClass تستخدم هذه الدالة للتبد لٌ ب نٌ 2 class موجود نٌ داخل الصفحة , وهكذا مٌكننا تبد لٌ خصائص اي عنصر بمجرد ق اٌم حدث مع نٌ . هذا العمل مجان , لا جٌوز ب عٌه
  50. 50. hasClass تستخدم هذه الدالة لمعرفة هل هذا الكلاس موجود أم لا , بمعنى آخر هل الكلاس مستخدم أم لا داخل ما تم اخت اٌره . هذا العمل مجان , لا جٌوز ب عٌه
  51. 51. keydown هذا احدى انواع Event وهو حدث نٌطلق عند الدخول مثلا داخل مربع نص والبدء بالكتابة ..) نٌطلق عند الضغط على المفتاح( ملاحظة : توجد مشكلة اذا استخدمنا keydown ..انظر للمثال وأدخل ولاحظ الناتج انه س كٌون ناقص حرف ... هذا العمل مجان , لا جٌوز ب عٌه
  52. 52. keyup هذا احدى انواع Event وهو حدث نٌطلق عند الدخول مثلا داخل مربع نص والبدء بالكتابة ..) نٌطلق بعد رفع ال دٌ عن اي مفتاح( لاحظ الآن بعد تنف ذٌ المثال أنك لن تواجه المشكلة السابقة لانه الآن ضٌ فٌ ثم أٌخذ الق مٌة ..انظر للمثال هذا العمل مجان , لا جٌوز ب عٌه
  53. 53. Keyupand keydown انظر الى هذا المثال و حٌتوي كلا من الحدث نٌ السابق نٌ .. هذا العمل مجان , لا جٌوز ب عٌه
  54. 54. keypress هذا الحدث شب هٌ بال keydown ولكن الفرق ب نٌهم هو أن keypress لا تقبل shift ولا alt ...الخ ب نٌما ال keydown تقبل جم عٌ ما على لوحة المفات حٌ عند تطب قٌ المثال اضغط alt داخل كل مربع نص وانظر الى ما س حٌدث هذا العمل مجان , لا جٌوز ب عٌه
  55. 55. change تستخدم هذه الدالة لمراقبة التغ رٌٌ , فعند حدوث اي تغ رٌٌ مثلا داخل مربع نص نٌطلق .. هذا العمل مجان , لا جٌوز ب عٌه
  56. 56. مٗفٚ ثبى دَ٘ اٗعظب اىي إ بّ سّأىل سح زَل فبغفش ى بْ ٝبالله أنيس حكمت أبو حميد Anees_hikmat@yahoo.com هذا العمل مجان , لا جٌوز ب عٌه
  57. 57. focusin نٌطلق هذا الحدث مجرد الدخول او تحد دٌ أي عنصر .. هذا العمل مجان , لا جٌوز ب عٌه
  58. 58. focusout هذا الحدث نٌطلق عند الخروج من التحد دٌ وهو عكس لل focusin هذا العمل مجان , لا جٌوز ب عٌه
  59. 59. select المقصود بهذا الدالة هو“ التحد دٌ ”, أي عندما قٌوم المستخدم بتحد دٌ نص مع اٌَ مثلا ... ماذا س حٌصل .. هذا العمل مجان , لا جٌوز ب عٌه
  60. 60. submit من الأمور المهمة جدا ف الانترنت submit وه عمل ةٌ رفع الب اٌنات الموجودة داخل فورم مع نٌ الى ال server ...ولاحظ انن قلت فورم ... هذا العمل مجان , لا جٌوز ب عٌه
  61. 61. Submit example 2 هذا العمل مجان , لا جٌوز ب عٌه
  62. 62. عّ د٘ اٟ اىٚ attr تكلمنا عن هذه الدالة سابقا , الآن سنتعرف على وظائف اخرى , فكما تم ذكرها سابقا على انها تلجب الرابط فانها الآن مٌكنها التعد لٌ عل هٌ كما ف المثال التال : هذا العمل مجان , لا جٌوز ب عٌه
  63. 63. عّ د٘ اٟ اىٚ 2 attr كما مٌكننا أ ضٌا اضافة رابط وان لم وٌضع رابط داخل الل نٌك وبنفس الطر قٌة السابقة : هذا العمل مجان , لا جٌوز ب عٌه
  64. 64. عّ د٘ اٟ اىٚ 3 attr كما مٌكننا أ ضٌا التعد لٌ أو الاضافة لل title ( title هو مستط لٌ صغ رٌ الحجم ظٌهر عند وضع مؤشر الفأرة على ش ءً ما ( لاحظها ف المثال التال : هذا العمل مجان , لا جٌوز ب عٌه
  65. 65. عّ د٘ اٟ اىٚ 4 attr أ ضٌا مٌكننا من التعد لٌ او الاضافة بنفس الوقت على الرابط ..بالطر قٌة التال ةٌ : هذا العمل مجان , لا جٌوز ب عٌه
  66. 66. عّ د٘ اٟ اىٚ 5 attr كما مٌكن أن نقوم بالأضافة أوالتعد لٌ , مٌكننا الق اٌم بعمل ةٌ حذف باستخدام removeAttr : هذا العمل مجان , لا جٌوز ب عٌه
  67. 67. عّ د٘ اٟ اىٚ 6 attr استخدام ال function داخل attr , ح ثٌ مٌكننا برمجة function مع نٌ قٌوم بالتعد لٌ على الخصائص ..كما ف المثال التال : هذا العمل مجان , لا جٌوز ب عٌه
  68. 68. اىي صو سٗي ثٗبسك عيٚ أمش خيقال سٞذ بّ حٍ ذَ صو الله عيٞ سٗاي حزاٚ ٝشضٚ عيٞ اىصلاح اىسلا أنيس حكمت أبو حميد Anees_hikmat@yahoo.com هذا العمل مجان , لا جٌوز ب عٌه
  69. 69. prop تستخدم هذه الدالة لإرجاع الق مٌة لخاص ةٌ مع نٌة مثلا ما هو اللون الموجود حال اٌ ؟ ..بحدد خاص ةٌ color والدالة تجلب ل ق مٌتها , و مٌكن ا ضٌا استخدامها لوضع ق مٌ داخل الخصائص أو حتى تعد لٌ الق مٌ وه تشبه attr ..ولكن هناك فرق سنراه بالشر حٌة التال ةٌ ..الآن انظر الى المثال : هذا العمل مجان , لا جٌوز ب عٌه
  70. 70. prop كما لاحظنا ف المثال السابق فانه لا خٌتلف عن attr اذن ما الفرق؟ الجواب هو بكل بساطة أن attr تحذف الخاص ةٌ مع الق مٌة ب نٌما prop تحذف الق مٌة فقط عٌن لو فرضنا ان هناك <a href=“anees”> اذا استخدمت attr لحذف الرابط فان الرابط س حٌذف )لن تستط عٌ الضغط عل هٌ ( ب نٌما لو قمنا باستخدام prop فس بٌقى الرابط لكن ولكن بدون ق مٌة .. انظر المثال التال وستتوضح الفكرة باذن الله تعالى ... هذا العمل مجان , لا جٌوز ب عٌه
  71. 71. mouseenter هذا الحدث نٌطلق عند مرور مؤشر الفأرة فوق أي ش ءً حددت له الدث mouseenter وهو شٌبه hover ... هذا العمل مجان , لا جٌوز ب عٌه
  72. 72. mousedown نٌطلق هذا الحدث عند الضغط بزر الفأرة الأ سٌر فوق أي ش ءً تم تحد دٌه بالحدث mousedown هذا العمل مجان , لا جٌوز ب عٌه
  73. 73. mouseup نٌطلق هذا الحدث بعد رفع زر الفأرة الأ سٌر من الضغطة عٌن قلنا ف ال musedown عند الضغط نٌطلق الحدث , أما ف mouseup فان الحدث نٌطلق بعد الضغط –بمجرد رفع اصبع عن الزر الأ سٌر. هذا العمل مجان , لا جٌوز ب عٌه
  74. 74. mouseleave هنا س نٌطلق الحدث بمجرد ابتعاد مؤشر الفأرة عن الش ءً الذي تم اعطائه هذا الحدث ... هذا العمل مجان , لا جٌوز ب عٌه
  75. 75. mousemove هنا نٌطلق الحدث طالما مؤشر الفأرة داخل نطاق الخاص ةٌ الت تحتوي على mouseover . هذا العمل مجان , لا جٌوز ب عٌه
  76. 76. بْٕك أٝضب ... وٌجد هناك أ ضٌا mouseover و mouseout .... وهم شٌبهو تقر بٌا ال mouseenter وال mouseleave لمعرفة الفرق اضغط هنا ... هنا و هنا اذا لاحظت فإن الاختلاف ظٌهر عند وجود inner و outer ... Mouseout و mouseover عند انتقاله من outer الى inner وعلى العكس عٌتبرها حدث ... ب نٌما mouseenter وال mouseleave فهم عٌبروه حدثا واحدا ح نٌ الدخول من outer الى inner هذا العمل مجان , لا جٌوز ب عٌه
  77. 77. find() تستخدم هذه الدالة للبحث داخل الصفحة والبحث كٌون لل tag ان كان parent وان كان child .. هذا العمل مجان , لا جٌوز ب عٌه
  78. 78. after وهذه الدالة تستخدم لإضافة محتوى محدد الى احدى العناصر ... هذا العمل مجان , لا جٌوز ب عٌه
  79. 79. find and after example رأ نٌا بالشر حٌت نٌ السابقت نٌ ك فٌ تعاملنا مع find و after ..وهذا مثال حٌتوي على find و after معا ..فنحن نعلم أن ال find اٌت بعدها الاجراء الذي سنقوم باتخاذه , وهذه المرة لنجعل الاجراء هو after هذا العمل مجان , لا جٌوز ب عٌه
  80. 80. أش ذٖ أ لا اىا الا الله حٗاذ لا شاشٝل ى , ى اى يَل ىٗ اىح ذَ عياٚ ماو شاااااااااااااااااااااااٜء اااااااااااااااااااااااذٝش أٗش ذٖ أ حٍ ذَ سس ه٘ الله أنيس حكمت أبو حميد Anees_hikmat@yahoo.com هذا العمل مجان , لا جٌوز ب عٌه
  81. 81. first() تستخدم هذه الدالة لتنف ذٌ الاجراء على أول ما تٌم قرائته او استرجاعه من الخصائص , عٌن لو كان عنا قائمة ف هٌا عشرة عناصر س أٌخذ أول عنصر ...وهناك طر قٌت نٌ لكتابة هذه الدالة ... هذا العمل مجان , لا جٌوز ب عٌه
  82. 82. last() تستخدم هذه الدالة لتنف ذٌ الاجراء على آخر ما تم قرائته او استرجاعه من الخصائص , عٌن لو كان عنا قائمة ف هٌا عشرة عناصر س أٌخذ آخر عنصر ...وهناك طر قٌت نٌ لكتابة هذه الدالة وبنفس الأسلوب للدالة first ... هذا العمل مجان , لا جٌوز ب عٌه
  83. 83. prev تستخدم هذه الدالة لتنف ذٌ الاجراء على العنصر قبل الآخير من ما تتم قرائته او استرجاعه.مع ملاحظة أنه مٌكننا استخدامها للرجوع عنصر عنصر للوراء ..و تكتب حسب التسلسل التال ... هذا العمل مجان , لا جٌوز ب عٌه
  84. 84. next تستخدم هذه الدالة لتنف ذٌ الاجراء على العنصر بعد الأول من ما تتم قرائته او استرجاعه.مع ملاحظة أنه مٌكننا استخدامها للتقدم ... هذا العمل مجان , لا جٌوز ب عٌه
  85. 85. blur هذا الحدث نٌطلق بمجرد انهاء التأش رٌ , أو بمعنى آخر الخروج من موقع تم تحد دٌه ... هذا العمل مجان , لا جٌوز ب عٌه
  86. 86. width() تستخدم هذه الدالة ف ال ج كو رٌي لمعرفة العرض لأي ش ءً ف الصفحة ... $(document).width() هذا العمل مجان , لا جٌوز ب عٌه
  87. 87. height وتستخدم هذه الدالة لمعرفة ارتفاع أي من الخصائص ف الصفحة .. هذا العمل مجان , لا جٌوز ب عٌه
  88. 88. الا ثزمش الله رط ئَ اىقي ة٘ , فزمش اٗ الله اىعظٞ لا اى الا الله حٍ ذَ سس ه٘ الله أنيس حكمت أبو حميد Anees_hikmat@yahoo.com هذا العمل مجان , لا جٌوز ب عٌه
  89. 89. serialize تستخدم هذه الدالة لأخذ الق مٌ من أي خاص ةٌ قمت بتحد دٌها وتجه زٌ هذه المعلومات لارسالها للخادم .. و مٌكن أن تستخدم على مستوى form كامل أو على مستوى ش ءً محدد , مع مراعاة أنه جٌب أن كٌون للعناصر أسماء والا فلن تعمل بشكل صح حٌ هذا العمل مجان , لا جٌوز ب عٌه
  90. 90. each تستخدم هذه الدالة للمرور على جم عٌ العناصر الت تم تحدد الخاص ةٌ لها , وه تشبه عمل ةٌ الدوران ...) loop ) هذا العمل مجان , لا جٌوز ب عٌه
  91. 91. on تستخدم هذه الدالة للتحكم بحدث أو بمجموعة احداث ووضعها لعنصر مع نٌ , مثل انطلاق أمر مع نٌ عند ضغطة واحدة أو ضغطت نٌ ..وهكذا ..و كٌمنها أ ضٌا التحكم بأحداث على مستوى فورم مثل عمل ةٌ submit ..وهذه التقن ةٌ استخدمت عند الاصدار 1.7 وهذه الدالة مٌكن استخدامها مع التطو رٌات المستقبل ةٌ لو تم اضافة احداث جد دٌة على سكربت ... وه بد لٌ عن bind وه دالة قد مٌة .. وهذه ه الص غٌة العامة لها وأنا ف المثال والشرح الذي سأذكره ..سأستخدم اسهل ص غٌة لهذه الدالة .. Syntax $(selector).on(event,childSelector,data,function,map) لمز دٌ من التفاص لٌ حول هذا الموضوع رٌجى الضغط هنا –س ذٌهب بك الى موقع W3school تابع هذا العمل مجان , لا جٌوز ب عٌه
  92. 92. on هذا العمل مجان , لا جٌوز ب عٌه
  93. 93. off تستخدم هذه الدالة لا قٌاف عمل حدث مع نٌ تم استخدامه من قبل الدالة on , وهذا عٌن أن off تقوم على ا قٌاف عمل on ... هذا العمل مجان , لا جٌوز ب عٌه
  94. 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. 95. load(jqueryand ajax) method هذه الدالة بس طٌة , ولكن رغم بساطتها فإنها تعط قوة ره بٌة لل Ajax تقوم هذه الدالة على جلب الب اٌنات من الس رٌفر ومن ثم وضعها بالصفحة الت انا ف هٌا .... ملاحظة : قد يحدث خطأ عند استخدام هذه الدالة لاننا نتعامل مع صفحات على نفس الجهاز ..لذلك استخدم fireFox أو اذا ظهرت عندك المشكلة قم بالبحث عن شيء يسمى Allow acssesfile هذا العمل مجان , لا جٌوز ب عٌه
  96. 96. load(jqueryand ajax) method من الب نٌات الخارج ةٌ الت مٌكن استدعائها .. مٌكننا استدعاء صفحات الانترنت ...مثل .html ... هذا العمل مجان , لا جٌوز ب عٌه
  97. 97. load(jqueryand ajax) method و مٌكننا أ ضٌا استدعاء جزء من صفحة عن طر قٌ id أو class أو اي ش ءً آخر ... هذا العمل مجان , لا جٌوز ب عٌه
  98. 98. load(jqueryand ajax) method ومن التطب قٌات الت مٌكن استخدامها معرفة هل ام تحم لٌ الصفحة بنجاح أم لا ع طر قٌ window ..مثال : هذا العمل مجان , لا جٌوز ب عٌه
  99. 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. 100. نعيـب سماننـا والعيـب فيـنـا ومـال سماننـا عـيـب سـىانـا ونهجى ذا الشمـان بغيـز ذنـب ولـى نطـق الشمـان لنـا هجانـا وليس الذئب يأكـل لحـم ذئـب ويأكـل بعضنـا بـعـض عيـانـا الشافعي رحمه الله أنيس حكمت أبو حميد Anees_hikmat@yahoo.com هذا العمل مجان , لا جٌوز ب عٌه
  101. 101. $.post تستخدم هذه الدالة لارسال ب اٌنات لخارج الصفحة واستقبال المعلومات الراجعة .وبمعناها الدق قٌ ه عمل ةٌ جلب الب اٌنات من الس رٌفر الى الصفحة ..وه من أهم الدوال الموجودة والمستخدمة ف صفحات الانترنت والص غٌة العامة لها داخل jQuery : $.post(“ اسم الصفحة التي ستذهب لها المعلومات ”,” البيانات المراد ارسالها ”, “ استقبال البيانات ”); تابع هذا العمل مجان , لا جٌوز ب عٌه
  102. 102. $.post هذا العمل مجان , لا جٌوز ب عٌه
  103. 103. $.post ف المثال السابق قمنا باستخدام button لارسال الب اٌنات , لكن لو قمنا باستخدام submit فهذا الكود لن عٌمل بشكل صح حٌ لان submit تقوم على اعادة تحم لٌ الصفحة عندما تنفذ , ولتلاف هذه المشكلة نقوم بوضع return داخل click ..لا قٌاف التحم لٌ ..والارجاع كٌون false هذا العمل مجان , لا جٌوز ب عٌه
  104. 104. $.get تستخدم أ ضٌا لجلب الب اٌنات , ولكن هذه الب اٌنات تكون موجودة داخل الس رٌفر والق مٌ موجودة داخل url وأي فورم أنا أقوم بانشائه كٌون افتراض اٌ GET ... هذا العمل مجان , لا جٌوز ب عٌه
  105. 105. error نست طٌع استخدام هذه الدالة لتلاف حصول الأخطاء الغ رٌ متوقعة .. مثلا عند الذهاب لصفحة غ رٌ موجودة ..وأي من الأخطاء الت لم نأخذها بع نٌ الإعتبار .. هذا العمل مجان , لا جٌوز ب عٌه
  106. 106. $.ajax(){} الآن سنتعامل مع ال ajax باسلوب أقوى من get وال post الت استخدمناها ف الدروس الماض ةٌ , ح ثٌ كانت get and post من الأمثلة البس طٌة على ajax ..والآن سنتعلم بإذن الله تعالى ك فٌ نز دٌ من قوة الصفحة وجعلها أكثر مرونة باستخدام $.ajax .. سأتكم أولا عن المكونات الرئ سٌ ةٌ والموجودة داخل $.ajax .. ملاحظة : فٌصل ب نٌ كل مكون والآخر فاصلة الا اذا كان أخر مكون لا نضع خلفه فاصلة ول سٌ جم عٌها الزام ... المكون الأول هذا العمل مجان , لا جٌوز ب عٌه
  107. 107. $.ajax(){} المكون الثاتً هذا العمل مجان , لا جٌوز ب عٌه
  108. 108. $.ajax(){} المكون الثالث هذا العمل مجان , لا جٌوز ب عٌه
  109. 109. $.ajax(){} المكون الرابع هذا العمل مجان , لا جٌوز ب عٌه
  110. 110. $.ajax(){} المكون الخامس هذا العمل مجان , لا جٌوز ب عٌه
  111. 111. $.ajax(){} المكون السادس هذا العمل مجان , لا جٌوز ب عٌه
  112. 112. $.ajax(){} الأمثلة هذا العمل مجان , لا جٌوز ب عٌه
  113. 113. $.ajaxexample المثال الأول : )لا يوجد خطأ ( : المثال الثاني : )خطأ 404 :) هذا العمل مجان , لا جٌوز ب عٌه
  114. 114. فٜٗ اىخزب أشنش الله اىعيٜ اىعظٞ ى بَ فٗق ْٜ اىٞ أٗسزغفش أٗر ة٘ اىٞ أٗسأه الله سح زَ اٗع ر٘ ثبلله سخط اٗى بْس اىي ا زٕا اىع وَ خبىص ى ج٘ لٖ اىنشٝ فزقجي ٍْٜ ٝب الله ٝب سح ٝب سحٞ اىي عي بَْ بٍ ٝ فْع بْ اٗ فّع بْ ث بَ عي زَ بْ ا لّ أ ذّ اىعيٞ اىحنٞ اىي اغفش ىٜ ىٗ ا٘ىذٛ ىٗي ؤَ ٍْٞ أحٞبئ أٗ اٍ٘ر ..اىي آ ٍٞ اخ ا٘ ّٜ لا ر سْ ّٜ٘ صبىح دعبئن لٗا ر سْ ا اىعي أ بٍ خّ ىٗيعي صمبح صٗمبح اىعي شّش ... اٗلله ىٜٗ اىز ف٘ٞق آٗخش دع ا٘ بّ أ اىح ذَ لله سة اىعبى َِٞ اخ م٘ أ ّٞس أنيس حكمت أبو حميد Anees_hikmat@yahoo.com هذا العمل مجان , لا جٌوز ب عٌه

×