ساختار دستورات jQuery

ساختار دستورات jQuery به گونه ای طراحی شده که شما بتوانید به سادگی به عناصر HTML دسترسی و عملیاتی روی آن ها انجام دهید.

ساختار پایه دستورات به شکل زیر است:

$(selector).action()

علامت $ بیانگر این است که از کد جی کوئری استفاده می کنید (selector) عنصر مورد نظر (شی، کلاس، ID و ...) در HTML است خاصیت action بیانگر عملی است که روی عنصر HTML انجام می شود مثال:

$(this).hide() // عنصر جاری را مخفی می کند 
$("p").hide() // تمام تگ های پاراگراف موجود در صفحه را مخفی میکند 
$(".test").hide // تمام عناصری که دارای کلاس با نام تست هستند را مخفی می کند 
$("#test").hide // عنصری که شناسه آن برابر با تست باشد را مخفی می کند

رویداد Ready

توجه کنید که تمام متدهای جی کوئری باید درون رویداد Ready قرار بگیرند

$(document).ready(function(){ 
// دستورات جی کوئری را در این قسمت وارد نمایید
});

این دستور باعث میشه تا دستورات جی کوئری بعد از لود کامل کتابخانه جی کوئری اجرا شه

همچنین این کد این امکان را به شما می دهد که دستورات جاوا اسکریپت را درون بخش header سایت خود قرار دهید. برای مثال نمیتوان عنصری را که هنوز ایجاد نشده مخفی کرد و یا طول و عرض عکسی که هنوز بارگذاری نشده را بدست آورد به همین دلیل باید تا لود شدن کامل کتابخانه جی کوئری صبر کنید همچنین تیم جی کوئری یک متد کوتاه برای رویداد ready ارائه کرده است

$(function(){
 // دستورات جی کوئری
});

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

انتخابگرهای جی کوئری (jQuery selector)

یکی از بخش های مهم در کتابخانه جی کوئری selector ها هستند انتخابگرها به شما امکان انتخاب و دستکاری یک عنصر HTML را میدهند. این انتخابگر ها امکان پیدا کردن و انتخاب یک عنصر HTML بر اساس نام، id، کلاس، نوع، خصوصیت، مقدار و ... را به شما می دهد. (مشابه سلکتور های CSS)

سلکتورها در جی کوئری به صورت زیر تعریف می شوند:

$("نام سلکتور")

انتخاب عنصر بر اساس نام (Element Selector)

برای مثال برای انتخاب همه تگ های P در یک صفحه از دستور ("p")$ استفاده می کنیم مثال:

$(document).ready(function() {
    $("button").click(function() {
        $("p").hide();
    });
});

انتخاب بر اساس شناسه (id Selector#)

این انتخابگر از شناسه (id) یک تگ HTML برای پیدا کردن یک عنصر خاص استفاده میکند. دقت کنید که نام شناسه در یک صفحه باید منحصر به فرد باشد. برای انتخاب یک عنصر بر اساس شناسه قبل از نام شناسه از علامت # استفاده می شود مثال:

$(document).ready(function() {
    $("button").click(function() {
        $("#test").hide();
    });
});

انتخاب بر اساس نام کلاس (.class Selector)

برای انتخاب همه عناصری که از یک کلاس استفاده کردند از یک نقطه قبل از نام کلاس استفاده می کنیم مثال:

$(document).ready(function() {
    $("button").click(function() {
        $(".test").hide();
    });
});

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

سایر انتخابگرهای جی کوئری

$("*") //انتخاب تمام عناصر 
$(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 را انتخاب می کند 
$("tr:even") //تمام عناصر زوج در تگ tr را انتخاب میکند 
$("tr:odd") //تمام عناصر فرد در تگ tr را انتخاب میکند

به منظور مشاهده لیست کامل انتخابگر ها می توانید از مرجع انتخابگرهای جی کوئری استفاده کنید

مشاهده قسمت قبلی: قسمت اول: مقدمه

قسمت دوم: شروع کار با جی کوئری