أحداث jQuery

تعتبر لغة jQuery سلسلة من الأحداث .


وظائف الأحداث

تعتبر طرائق أحداث jQuery صلب الأكواد الوظيفية functions في jQuery .

الطرائق البديلة هي أحداث يتم استدعائها عند حدوث شيء ما .

من الشائع والمهم وضع أكواد 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>

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

$("button").click(function() {..الكود هنا ... } )
 

تخفي الطريقة جميع الفقرات <p> في الصفحة :

$("p").hide();
 

وضع functions في ملف منفصل

ان كان موقعك يحتوي على الكثير من الصفحات وتريد أن تكون أكواد و وظائف jQuery سهلة القراءة والتعديل عندها يمكنك وضعها في ملف منفصل امتداده .js

عندما قمنا بشرح أمثلة jQuery كان الكود موضوع ضمن قسم <head> و لكن من الأفضل وضع الأكواد في ملف منفصل ووضعه في قسم <head> ثم طلب الملف من خلال اللاحقة src :

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

الخلافات حول الاسم

تستخدم jQuery إشارة $ كإختصار لاستخدام jQuery .

لكن بعض مكتبات الجافاسكربت تستخدم أيضاً إشارة $ لضبط functions لديهم .

تحدد طريقة noConflict() الاسم الافتراضي ( مثل jq ) عوضاً عن استخدام اشارة $ .


أحداث jQuery

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