با سلا م به شما دوستان عزیز ، امیدوارم که حالتون خوب باشه و با اموزشهای ماهمراه بمانید.انتخاب گرهای jQuery یکی از مهترین اعضای تشکیل دهنده ی کتابخانه jQuery محسوب می شود.

انتخاب گرهای (jQuery Selectors) jQuery

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

با انتخاب گرهای jQuery می توان المان هایHTML را با توجه به شناسه، کلاس، نوع، نام خاصیت (property)، مقدار خاصیت و … یافت. در این روش از انتخاب گرهای CSS استفاده می شودعلاوه بر انتخاب گرهای سی اس اس ،jQuery تعدادی انتخاب گر اختصاصی نیز دارد.

تمامی انتخاب گرهای موجود در jQuery با علامت “$” آغاز و داخل پرانتز احاطه می شوند :$()

انتخاب المان بر مبنای نام آن (Element selector)

Element selector کتابخانه ی jQuery المان ها را بر اساس اسم آن ها انتخاب می نماید (به عبارتی دیگر این زمینه برای شما فراهم می کند تا المان های اچ تی ام ال را مبتنی بر نام تگ انتخاب کنید).

می توان تمامی المان های

روی صفحه را بدین صورت گزینش و بازیابی کرد:

$(“p”)

مثال

هنگامی که کاربر بر روی دکمه کلیک می کند، کلیه ی المان های

مخفی می گردند:

نمونه

$(document).ready(function () {

$(“button”).click(function () {

$(“p”).hide();

});

});

انتخاب گر#id

انتخاب گر #id ، از مقدار خصیصه ی id تگ HTML برای یافتن عنصر مد نظر استفاده می کند.

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

جهت پیدا کردن یک المان با شناسه ی معین، از کاراکتر هش “#” همراه با شناسه ی مورد نظر استفاده کنید.

$(“#test”)

در نمونه ی زیر، به محض اینکه کاربر بر روی دکمه کلیک کند، عنصر با شناسه “test” پنهان می گردد:

نمونه یک
?
۱
۲
۳
۴
۵
۶
۷

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

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

class Selector عناصر با کلاس معین را پیدا می کند.

به منظور یافتن عناصر با نام کلاس مشخص، از کاراکتر “.” همراه با اسم کلاس مورد نظر کمک بگیرید:

$(“.test”)

مثال

به مجرد اینکه کاربر بر روی دکمه کلیک می کند، المان با کلاس “test” از نظر مخفی می شوند:

نمونه دو
?
۱
۲
۳
۴
۵
۶
۷

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

نمونه های بیشتر از انتخاب گر های jQuery

ساختار نگارشی

شرح

$(“*”)

تمامی عناصر موجود را انتخاب می کند.

$(this)

عنصر فعلی را انتخاب می کند.

$(“p.intro”)

کلیه ی تگ های

با کلاس “intro” را انتخاب می کند.

$(“p:first”)

نخستین تگ

را انتخاب می کند.

$(“ul li:first”)

اولین آیتم از اولین عنصر