JQuery

jQuery Event

سوف تتعلم في هذا الدرس طريقة استخدام ال Events بواسطة مكتبة ال jQuery

التاريخ

28 نوفمبر 2021

الدروس

22

المستوى

العامة

اللغة

انجليزي

المشاهدات

509

المواضيع

4
الشروحات chevron_left jQuery Event chevron_left JQuery

jQuery Event

</> jQuery Event

تم تصميم jQuery خصيصًا لتنفيذ Events علي اي Element داخل  صفحةHTML
ال Event هو حدث ما يحدث داخل صفحة الويب عند تفاعل الزوار مع اي Elements مثل اخفاء جزء معين من الصفحة عن الضغط علي زر علي سبيل المثال

كيف يتم ذلك ؟

تسمى جميع إجراءات الزوار المختلفة مع صفحة الويب ب بالأحداث Events.
 يمثل Event اللحظة التي يحتك الزائر مع صفحة الويب وعندما يحدث شيء ما.
يتم ال Event عندما يقوم الزائر ب :
  • الضغط علي اي زر من الازرار الموجوده بالفــأره ال Mouse مثل Left Click أو Right Click أو ال Scroll اثناء تصفحة صفحة الويب.
  • الضغط علي اي زر موجود علي لوحة المفاتيح Keyborad اثناء تصفحة صفحة الويب.
  • او استخدام النقر Touch باستخدام الاجهزة التي تدعم ال Touch Screen اثناء تصفحة صفحة الويب.
فيما يلي بعض Event DOM الشائعة:
Mouse Events Keyboard Events Form Events Form Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave - blur unload

</> JQuery Events Syntax

يتم اختيار ال HTML Elements الذي نقوم بربط حدث ما به عن طريق ال Selector متبوعاً ب ال Event
$("p").click();

نقوم بكتابة function بداخل ال Event لتنفيذ مجموعة اوامر برمجية علي ال Element

$("p").click(function(){
  // action goes here!!
});

</> Hide Element With Event

تكتب جميع اوامر ال jQuery بداخل function ready لكي يتم تنفيذ ال Event عندما يتم تحميل وقراءة جميع ال HTML Elemnts علي المتصفح

يتم اخفاء ال Element p عندما يقوم الزائر بالضغط علي نفس ال Element عن طريق click Evenet

تحتوي ال click Event علي function بداخلها امر اخفاء ال Element p

$("p").click(function(){
  $(this).hide();
});

</> dblclick Event

ال dblclick method تحتوي علي function يكتب بداخلها امر اخفاء ال Element عندما يقوم الزائر بالضغط مرتين  double click علي زر ال mouse 

$("p").dblclick(function(){
  $(this).hide();
});

</> mouseenter Event

ال mouseenter method تحتوي علي function يكتب بداخلها امر اظهار ال alert عندما يقوم الزائر بتمرير  زر ال mouse

$("#p1").mouseenter(function(){
  alert("You entered p1!");
});

</> mouseleave Event

ال mouseleave method تحتوي علي function يكتب بداخلها امر اظهار ال alert عندما يقوم الزائر بتمرير  زر ال mouse علي ال Element ثم تحريكه خارج حدوده مده اخري

$("#p1").mouseleave(function(){
  alert("Bye! You now leave p1!");
});
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
1
1
1
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
1
عدد التقييمات