تبلیغات
یادداشت های من - JQuery – جلسه چهارم: رویدادها Events

یادداشت های روزانه من درباره اینترنت، سیاست، آبکنار، رایانه، شعر، فناوری اطلاعات و ...
هر چیزی که بهش علاقه دارم

حسین (کیوان) جهانبخش آبکنار

جستجو

 

JQuery – جلسه چهارم: رویدادها Events

چهارشنبه 4 خرداد 1390   01:29 ب.ظ

جی کوئری برای دسترسی به رویدادها سفارشی شده است!


توابع رویدادی در JQuery

متدهای دسترسی به رویداد در JQuery جزء توابع اصلی و هسته ی اصلی جی کوئری هستند. Event Handler ها متدهایی هستند که وقتی «اتفاقی در صفحه HTML رخ می دهد» صدا زده می شوند. معمولاً عبارت « توسط یک رویداد یا event، triggered (یا fired) شده» برای آن به کار می رود.

بهتر است کد JQuery را در متدهای event handler در بخش <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>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>


در مثال بالا وقتی رویداد کلیک دکمه trigger شود یک تابع صدا زده می شود.

$("button").click(function() {..some code... } )

متد مورد نظر تمام عناصر <p> را مخفی می کند.

$("p").hide();

توابع در یک فایل جداگانه

اگر وب سایت شما صفحات زیادی دارد و می خواهید توابع جی کوئری به راحتی در دسترستان باشد می توانید توابع جی کوئری را در یک فایل جداگانه با پسوند .js قرار دهید.

وقتی ما جی کوئری را در اینجا نشان می دهیم، توابع مستقیماً در بخش <head> اضافه شده است. هرچند بعضی اوقات بهتر است آن ها را مانند مثال زیر در فایل جداگانه ای قرار دهید.

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

Name Conflict در جی کوئری

جی کوئری از علامت دلار ($) به عنوان میانبری برای JQuery استفاده می کند. تعدادی دیگر از کتابخانه های JQuery هم از علامت دلار برای توابعشان استفاده می کنند.

متد noConflict() در جی کوئری برای انتساب یک نام دلخواه به جای علامت دلار برای این کار است.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var jq=jQuery.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").hide();
  });
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

رویدادهای جی کوئری

در زیر چند مثال از متدهای رویداد در جی کوئری آورده شده است:

$(document).ready(function)

مقید کردن یک تابع به رویداد ready یک صفحه (وقتی که لود شدن صفحه کامل شد)

$(selector).click(function)

مقید کردن یک تابع به یک رویداد کلیک بر روی عناصر انتخاب شده

$(selector).dblclick(function)

مقید کردن یک تابع به رویداد دابل کلیک بر روی عناصر انتخاب شده

$(selector).focus(function)

مقید کردن یک تابع به رویداد فوکوس بر روی عناصر انتخاب شده

$(selector).mouseover(function)

مقید کردن یک تابع به رویداد عبور ماوس از روی عناصر انتخاب شده

 

پس از اتمام جلسات لیست کاملی از متدهای رویداد را تحت عنوان یک پیوست خواهم آورد.


نوشته شده توسط : حسین (کیوان) جهانبخش آبکنار

نوع مطلب : JQuery ،طراحی وب ،