المشروع - كل ما يتعلق بتطوير المواقع http://www.almashroo.com/

التعريف بالحدث أو الأحداث

الحدث هو وقوع شيء ما، أي عندما نمرر الفأرة على رابط أو نضغط عليه فهذا يسمى حدث Event .
المثال ينطبق على كل العناصر داخل الصفحة

المثال الذي وضعته في الدرس السابق هو حدث click أي عندما نضغط على شيء نطلب منه ان يفعل كذا وكذا بلغة javascript

الأحداث في لغة javascript

وهي كالتالي:

• onClick
• onMouseover
• onMouseout
• onKeypress

ويتم التحكم في الحدث في مكان الحدث بهذه الطريقة

<a href="#" onClick="your function">رابط</a>

يمكنك معرفة بقية الأحداث من هنـا .

وتأتي مكتبة jQuery لتختصر وتصبح الأحداث بدون on أي:

• click
• mouseover
• mouseout
• keypress

جميع الأحداث تجدها في موقع المكتبة.

كذلك التحكم في الحدث بعيدا عن مكان الحدث اي او ملف خارجي يتم استدعائه في ايضا

مثال:
كود jquery

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$("#link").click(function(){
if(!confirm('هل تريد حقاً زيارة هذا الرابط \n'+this)){
return false; // إلغاء تحويله إلى الرابط
}

}); // #link

}); // document
</script>

كود الرابط

<a href="http://google.com" id="link">جوجل</a>

لقد تحكمنا في رابط واحد وهو جوجل من خلال id=link ولكن ماذا لو أردنا أن ننبه الزائر في جميع الروابط
نغير #link إلى a

مثال

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$("a").click(function(){
if(!confirm('هل تريد حقاً زيارة هذا الرابط \n'+this)){
return false; // إلغاء تحويله إلى الرابط
}

}); // #link

}); // document
</script>

كود الرابط

<a href="http://google.com">جوجل</a>
<a href="http://yahoo.com" >ياهو</a>
<a href="http://bp.ma">مدونة مبرمج</a>

بما أنني وضعت مثالاً عن الرابط من خلال الأحداث فأحببت أن أوضح هذه النقطة “التحكم في الروابط” بشكل اوسع قليلا.
ولكي تعرف جميع دوال المكتبة يمكنك تجربتها مباشرة من خلال هذا الموقع:
http://visualjquery.com

الآن مع:

التأثيرات Effect

هناك دوال خاصة بصنع التأثيرات منها الانزلاق والتلاشي والإخفاء.

في كل دالة هناك ثلاث مستويات من التحكم زائد التحكم بالميلي ثانية

مثلا دالة hide

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$("#myp").click(function(){
$('#mydiv').hide(); // سيتم إخفاء العنصر بسرعة

});

}); // document
</script>
<p id="myp">إخفاء</p>
<div id="mydiv">
السلام عليكم
</div>

الحالات الأخرى هي

$('div').hide('fast'); // سريع أيضاً

$('div').hide('slow'); // بطيء

$('div').hide('normal'); // طبيعي

$('div').hide(1000); // السرعة بثانية

$('div').hide(500); // السرعة  بنصف ثانية

كذلك يمكنك تغيير السرعة كما تشاء من 0 إلى أي سرعة تريدها.

هذه الاعدادات تستطيع تطبيقها على جميع دوال التأثيرات التي سأذكرها

hide(); // إخفاء
show(); // إظهار
toggle(); // إخفاء وإظهار في نفس الوقت
slideDown(); // إخفاء من الأعلى إلى الأسفل
slideUp(); // عكس السابق
slideToggle(); // إخفاء واظهار بتأثير الدالتين السابقتين
fadeIn(); // يتلاشى الى الخارج
fadeOut(); //  عكس السابق
fadeTo(); // يتلاشى في نفس المكان
وهناك دوال اخرى اكتشفها بنفسك

أما هذه الدالة فهي رائعة بمعنى الكلمة

animate();

إخفاء وإظهار

$('#mydiv').animate({
"height": "toggle", "opacity": "toggle"
},'slow');

الأن العب مع jquery

$(document).ready(function(){
$("#start").click(function(){
$(".mydiv").animate({"left": "+=100px"}, "fast");
$(".mydiv").animate({"top": "+=100px"}, "fast");
$(".mydiv").animate({"left": "+=100px"}, "fast");
$(".mydiv").animate({"top": "+=100px"}, "fast");

$(".mydiv").animate({"left": "+=100px"}, "fast");
$(".mydiv").animate({"top": "+=100px"}, "fast");
$(".mydiv").animate({"left": "+=100px"}, "fast");
$(".mydiv").animate({"top": "+=100px"}, "fast");
$(".mydiv").animate({"top": "-=100px"}, "fast");
$(".mydiv").animate({"left": "+=100px"}, "fast");
$(".mydiv").animate({"top": "-=100px"}, "fast");
$(".mydiv").animate({"left": "+=100px"}, "fast");
$(".mydiv").animate({"top": "-=100px"}, "fast");
$(".mydiv").animate({"left": "+=100px"}, "fast");
$(".mydiv").animate({"top": "-=100px"}, "fast");
$(".mydiv").animate({"left": "+=100px"}, "fast");
$(".mydiv").animate({"left": "-=750px"}, "fast");
$(".mydiv").animate({
"left": "+=350px",
"top":"+=350px",
}, 500);
$(".mydiv").animate({
"left": "-=350px",
"top":"-=350px",
}, 500).fadeOut(800);
});
}); // document

مثال حي

الدرس القادم عن استخدام تقنية اجاكس من خلال jquery

مواضيع ذات علاقة

• دليلك السهل في تعلم استخدام مكتبة jQuery [ الدرس الأول]
• دليلك السهل في تعلم استخدام مكتبة jQuery [الدرس الأخير]: AJAX