jQuery Selector-انتخاب گرهای Jquery:
انتخاب گرهای jQuery یکی از مهترین اعضای تشکیل دهنده ی کتابخانه jQuery محسوب می شود.
انتخاب گرهای jQuery به شما این اجازه را می دهند تا عناصر HTML را گزینش نموده و مطابق نیاز دستکاری کنید.
با انتخاب گرهای jQuery می توان المان هایHTML را با توجه به شناسه، کلاس، نوع، نام خاصیت (property)، مقدار خاصیت و ... یافت. در این روش از انتخاب گرهای CSS استفاده می شودعلاوه بر انتخاب گرهای سی اس اس ،jQuery تعدادی انتخاب گر اختصاصی نیز دارد.
تمامی انتخاب گرهای موجود در jQuery با علامت "$" آغاز و داخل پرانتز احاطه می شوند :$()
انتخاب المان بر مبنای نام آن (Element selector)
Element selector کتابخانه ی jQuery المان ها را بر اساس اسم آن ها انتخاب می نماید (به عبارتی دیگر این زمینه برای شما فراهم می کند تا المان های اچ تی ام ال را مبتنی بر نام تگ انتخاب کنید).
می توان تمامی المان های
<p>
روی صفحه را بدین صورت گزینش و بازیابی کرد:
$("p")
مثال:
هنگامی که کاربر بر روی دکمه کلیک می کند، کلیه ی المان های
<p>
مخفی می گردند
$(document).ready(function () {
$("button").click(function () {
$("p").hide();
});
});
انتخاب گرid#
pانتخاب گر #id ، از مقدار خصیصه ی id تگ HTML برای یافتن عنصر مد نظر استفاده می کند.
شناسه داخل یک صفحه باید تک باشد، بنابراین هنگامی که بخواهید به یک عنصر منحصر بفرد و یکتا در صفحه دست پیدا کنید از این روش استفاده نمایید.
جهت پیدا کردن یک المان با شناسه ی معین، از کاراکتر هش "#" همراه با شناسه ی مورد نظر استفاده کنید.
$("#test")
در نمونه ی زیر، به محض اینکه کاربر بر روی دکمه کلیک کند، عنصر با شناسه "test" پنهان می گردد:
انتخاب براساس اسم کلاس (.class Selector)
class Selector عناصر با کلاس معین را پیدا می کند.
به منظور یافتن عناصر با نام کلاس مشخص، از کاراکتر "." همراه با اسم کلاس مورد نظر کمک بگیرید:
$(".test")
مثال:
به مجرد اینکه کاربر بر روی دکمه کلیک می کند، المان با کلاس "test" از نظر مخفی می شوند:
نمونه های بیشتر از انتخاب گر های jQuery
$("*")
تمامی عناصر موجود را انتخاب می کند.
$(this)
عنصر فعلی را انتخاب می کند.
$("p.intro")
کلیه ی تگ های <p> با کلاس "intro" را انتخاب می کند.
$("p:first")
نخستین تگ <p>را انتخاب می کند.
$("ul li:first")
اولین آیتم از اولین عنصر <ul> را انتخاب می کند.
$("ul li:first-child")
اولین آیتم از تمام عناصر <ul> را انتخاب می کند.
$("[href]")
همه ی عناصر که دارای خاصیت href هستند را انتخاب می کند.
$("a[target='_blank']")
تمام المان های <a> که خصیصه ی target آن ها با "blank_" مقدار دهی شده باشند را انتخاب می کند.
$(":button")
تمام تگ های <button> و نیز تمام عناصر <input>ی که خصیصه ی type آنها "button" است را گزینش می کند.
$("tr:even")
کلیه ی عناصر <tr> زوج را انتخاب می نماید.
$("tr:odd")
تمامی المان های <tr> فرد را select می کند.
جایگذاری توابع مورد نیاز داخل یک فایل جدا
چنانچه وب سایت شما دربردارنده ی چندین صفحه ی متعدد است و می خواهید توابع jQuery یکسانی را در آن ها بکار ببرید، می توانید توابع یاد شده را در یک فایل مجزا که دارای پسوندمی باشد قرار دهید .js .
همان طور که در بیشتر مثال های این آموزش مشاهده می کنید، توابع به طور مستقیم داخل قسمت
<head>
صفحه گنجانده می شوند. با این حال، گاهی لازم است (یا توصیه می شود) که آن ها را در یک فایل مجزا جای گذاری کنید همانند این نمونه (استفاده از خصیصه ی src برای اشاره به فایل با پسوند .js):
<head>
</head>