در بخش اول آشنایی مقدماتی با جی کوئری (jQuery) پیدا کردید، در این بخش با گرامر جی کوئری (jQuery) ، انتخابگرهای جی کوئری (jQuery)و روش نوشتن دستورات آشنا می شوید. با استفاده از جی کوئری می توانید تعیین کنید که در صورت وقوع هر رویداد روی اجزای HTML صفحه ، چه دستوراتی اجرا شود.
گرامر جی کوئری (jQuery)
با جی کوئری (jQuery)شما می توانید عناصر HTML را انتخاب کرده و عملیاتی روی آنها انجام دهید.
گرامر جی کوئری (jQuery)دنباله ای است که ساخته شده برای انتخاب تگ های HTML و انجام بعضی عملیات روی عناصر.
گرامر اصلی آن بصورت زیر است :
$(selector).action()
- یک علامت $ که برای تعریف / مشخص کردن jQuery است
- یک (selector) برای یافتن (پرس و جوی) عناصر HTML
- یک عمل action() از jQuery که باید روی عناصر HTML انجام شود
مثال هایی از دستورات جی کوئری (jQuery)
مخفی کردن عنصر جاری:
$(this).hide()
مخفی کردن همه عناصر P
$(“p”).hide()
مخفی کردن همه عناصر با کلاس مساوی با test
$(“.test”).hide()
مخفی کردن عنصری با شناسه مساوی test
$(“#test”).hide()
| اگر شما با انتخابگرهای CSS آشنایی دارید : jQuery از همان گرامر CSS برای انتخاب عناصر استفاده می کند. |
رویداد Ready سند
هر نوع دستوری از جی کوئری (jQuery)باید در داخل رویداد Ready از سند قرارداده شود مشابه زیر:
$(document).ready(function(){
// jQuery methods go here…
});
و این به خاطر این است که از اجرای هر کدی از جی کوئری قبل از تمام شدن بارگذاری صفحه جلوگیری شود. این کار جالبی است که منتظر بماند تا صفحه به طور کامل بارگذاری شود و پس از آن کدها اجرا شوند.
اگر دستورات جی کوئری قبل از بارگذاری کامل صفحه اجرا شوند ممکن است مشکلات زیر بوجود آید:
- تلاش برای مخفی کردن عنصری که هنوز ایجاد نشده است.
- تلاش برای گرفتن اندازه یک تصویر قبل از اینکه بارگذاری شود.
نکته : تیم توسعه jQuery همچنین یک روش کوتاه تر برای رویداد آماده شدن سند ایجاد کرده اند :
$(function(){// jQuery methods go here…
});
انتخابگر های جی کوئری (jQuery)
انتخابگرهای جی کوئری (jQuery)یکی از بخش های مهم از کتابخانه جی کوئری هستند. انتخابگرهای جی کوئری به شما اجازه می دهد تا عناصر HTML را انتخاب و دستکاری کنید.
با انتخابگرهای جی کوئری می توانید عناصر را براساس شناسه، کلاس، نوع، خصوصیات، مقادیر خصوصیات و غیره پیدا کنید. آنها مبتنی بر انتخابگرهای CSS بوده و بعلاوه دارای انتخابگرهای دلخواه خودشان می باشند.
هر انتخابگری در جی کوئری با یک علامت $ شروع می شود و داخل پرانتز نوشته می شود.
انتخابگر عنصر
انتخابگر عنصر jQuery ، عناصر را براساس نام تگ آنها انتخاب می کند.
شما می توانید همه عناصر <p> یک صفحه را به صورت زیر انتخاب کنید:
$(“p”)
مثال
اگر روی دکمه کلیک کنید، عناصر <p> صفحه مخفی خواهند شد:
$(“button”).click(function(){
$(“p”).hide();
});
});
انتخابگر شناسه
انتخابگر شناسه از خصوصیت id تگ HTML برای یافتن عنصر مورد نظر استفاده می کند .
یک شناسه باید در کل صفحه منحصر بفرد باشد، بنابراین اگر می خواهید تنها یک عنصر از صفحه را مشخص کنید باید از این نوع انتخابگر استفاده کنید.
برای پیدا کردن یک عنصر با id مشخص، یک کاراکتر مربع، منتهی به شناسه عنصر را بنویسید:
مثال : وقتی کاربر روی یک دکمه کلیک کند، عنصر با شناسه مساوی test مخفی خواهند شد:
$(“button”).click(function(){
$(“#test”).hide();
});
});
انتخابگر کلاس
یک انتخابگر کلاس عناصری با کلاس مشخص را پیدا می کند.
برای پیدا کردن عناصر با کلاس مشخص، یک علامت نقطه منتهی شده به نام کلاس بنویسید:
مثال: وقتی کاربر روی یک دکمه کلیک کند، عناصر با کلاس مساوی test مخفی خواهند شد:
$(“button”).click(function(){
$(“.test”).hide();
});
});
مثال های بیشتری از انتخابگرهای jQuery
| گرامر | توصیف |
| $(“*”) | همه عناصر را انتخاب می کند |
| $(this) | عنصر جاری را انتخاب می کند |
| $(“p.intro”) | همه عناصر p با کلاس مساوی intro را انتخاب می کند |
| $(“p:first”) | اولین عنصر P را انتخاب می کند |
| $(“ul li:first”) | اولین عنصر li از اولین عنصر ul را انتخاب می کند |
| $(“ul li:first-child”) | اولین عنصر li از هر عنصر ul را انتخاب می کند |
| $(“[href]”) | همه عناصر دارای خاصیت href را انتخاب می کند |
| $(“a[target=’_blank’]”) | همه عناصر a با خاصیت target مساوی _blank را انتخاب می کند |
| $(“a[target!=’_blank’]”) | همه عناصر a با خاصیت target غیر از _blank را انتخاب می کند |
| $(“:button”) | همه عناصر button و همه تگ های input با نوع button را انتخاب می کند |
| $(“tr:even”) | همه تگ های tr با شماره زوج را انتخاب می کند |
| $(“tr:odd”) | همه تگ های tr با شماره فرد را انتخاب می کند |
متدهای رویداد جی کوئری (jQuery)
جی کوئری بصورت دنباله برای برنامه نویسی رویدادهای HTML/DOM هستند.
گرداننده های رویداد ، متدهایی هستند که وقتی چیزی اتفاق می افتد فراخوانی می شوند.
اصطلاح ” تلنگر زدن (یا آتش کردن) توسط یک رویداد ” اغلب استفاده می شود.
معمول است که کدهای جی کوئری در داخل متدهای گرداننده رویداد در داخل تگ head نوشته شوند.
در مثال زیر ، وقتی رویداد کلیک روی دکمه اتفاق می افتد ، فراخوانی می شود:
مثال :
<html>
<head>
<script src=”jquery.js”></script>
<script>
$(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>
توابع در فایل جداگانه
اگر وب سایت شما دارای صفحات زیادی است، و در همه صفحات می خواهید از جی کوئری استفاده کنید، می توانید توابع جی کوئری را در فایل js جداگانه ای قرار داده و آن را بصورت زیر ضمیمه هر صفحه کنید
<script src=”jquery.js”></script>
<script src=”my_jquery_functions.js”></script>
</head>
بعضی متدهای رویداد جی کوئری
در جدول زیر چند مثال از متدهای رویداد در جی کوئری نشان داده شده است:
| متد رویداد | توصیف |
| $(document).ready(function) | تابعی را مشخص می کند که پس از کامل شدن DOM صفحه فراخوانی شود |
| $(selector).click(function) | رویداد کلیک را برنامه نویسی می کند |
| $(selector).dblclick(function) | رویداد دابل کلیک را برنامه نویسی می کند |
| $(selector).focus(function) | رویداد تمرکز روی عنصررا برنامه نویسی می کند |
| $(selector).mouseover(function) | رویداد قرار گرفتن نشانگر ماوس روی عنصر را برنامه نویسی می کند |