رویدادهای jQuery

تم تصميم jQuery لتكون خاصة بمعالجة الحدث.

وظيفة الحدث jQuery

هيكل وظائف الحدث هو وظيفة رئيسية في jQuery.

برنامج التدريب على الحدث هو الدالة التي يتم استدعاؤها عند حدوث بعض الأحداث في HTML. يستخدم مصطلح "تثبيت" (أو "إثارة") للحدث عادة.

عادة ما يتم وضع كود jQuery في جزء <head> من طريقة معالجة الحدث.

مثال

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>
<body>
<h2>هذه عناوين.</h2>
<p>هذه فقرة.</p>
<p>هذا فقرة أخرى.</p>
<button>انقر علي</button>
</body>
</html>

جرب بنفسك

في هذا المثال، يتم استدعاء الدالة عند انقاذ حدث الضغط على الزر:

$("button").click(function() {  // بعض الكود... } )

يخفي هذا الأسلوب جميع عناصر <p>:

$("p").hide();

الوظائف في الملف المنفصل

إذا كان موقعك يحتوي على العديد من الصفحات وأنت ترغب في أن تكون وظائف jQuery الخاصة بك سهلة التχείير، فإنه من الأفضل وضع وظائف jQuery الخاصة بك في ملف .js مستقل.

عندما نعرض jQuery في الدروس، نضيف الدوال مباشرة إلى جزء <head>. ولكن من الأفضل وضعها في ملف منفرد، مثل هذا (مرتبط عبر src):

مثال

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>

تعارض أسماء jQuery

يستخدم jQuery الرمز $ كطريقة تقديم لـ jQuery.

استخدمت بعض مكتبات JavaScript الأخرى (مثل Prototype) الرمز $ أيضًا.

يستخدم jQuery طريقة تُدعى noConflict لحل هذه المشكلة.

var jq=jQuery.noConflict()، يساعدك في استخدام اسم خاص بك (مثل jq) بدلاً من الرمز $.

جرب بنفسك

الخاتمة

بما أن jQuery تم تصميمها خصيصًا للتعامل مع أحداث HTML، فإن اتباعك لهذه المبادئ يجعل شيفتك أكثر ملاءمة وسهولة الصيانة:

  • ضع جميع كود jQuery في دالة معالج الحدث
  • ضع جميع معالجات الأحداث في معالج استعداد الوثيقة
  • ضع كود jQuery في ملف .js منفرد
  • إذا كانت هناك تعارض في الأسماء، أعد تسمية مكتبة jQuery

رویدادهای jQuery

إليك بعض الأمثلة على طرق الحدث في jQuery:

وظائف الحدث ربط الدالة إلى
$(document).ready(function) ربط الدالة إلى أحداث الاستعداد للوثيقة (عندما يتم تحميل الوثيقة بشكل كامل)
$(selector).click(function) تثبيت أو ربط الدالة إلى أحداث النقر للمكون المحدد
$(selector).dblclick(function) تثبيت أو ربط الدالة إلى أحداث الضرب المزدوج للمكون المحدد
$(selector).focus(function) تثبيت أو ربط الدالة إلى أحداث التركيز للمكون المحدد
$(selector).mouseover(function) تثبيت أو ربط الدالة إلى أحداث الاستدعاء الموسع لمس الشاشة للمكون المحدد

إذا كنت بحاجة إلى دليل مرجعي كامل، يرجى زيارة دليل مرجعي لـ jQuery للحصول على مرجع كامل، يرجى زيارة.