چگونه در جی کوئری تگی را برای اعمال افکت انتخاب کنیم

در این مقاله Selector های اصلی در جی کوئری را توضیح داده ایم.

آموزش طراحی سایت

هر زبانی برای اینکه تغییری در المانی ایجاد کند. باید راهی برای فراخوانی آن داشته باشد در کتابخانه جی کوئری selectors کار انتخاب المان ها در Html را انجام میدهند.

jQuery Selectors :

انتخابگرها در جی کوئری به شما اجازه انتخاب و اعمال افکت به تگ های HTML را می دهند. انتخابگرها براساس نام تگ ، ID،کلاس،نوع صفت ، مقدار صفت و ... یک تگ را انتخاب می کنند ، انتخاب گرهای جی کوئری براساس انتخاب گرهای CSS ایجاد شده اند و به آنها انتخابگرهای جدیدی نیز افزوده شده است.

هر انتخابگر در جی کوئری با یک علامت $ آغاز میشود.

انتخاب با استفاده از نام تگ

برای انتخاب تمام عناصر از یک جنس میتوانید عناصر را با نام آنها فراخوانی کنید. مثلا اگر بخواهید که به تمام تگ های <p> در صفحه افکتی بدهید از این دستور زیر برای انتخاب تمام تگهای p استفاده خواهید کرد:

$("p")

مثال:

هنگامی که کاربر روی دکمه کلیک کرد تمام تگ های P مخفی خواهند شد:

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

مشاهده نتیجه

انتخاب یک تگ براساس ID

اگر بخواهیم که افکتی به یک تگ خواص اعمال شود میتوانیم از id آن تگ استفاده کنیم ، برای اینکه عنصری را با یک id خاص انتخاب کنید از دستور زیر استفاده کنید:

$("#test")

مثال:

هنگامیکه کاربران روی دکمه کلیک کنند تگی که id="test" دارد مخفی می گردد:

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

مشاهده نتیجه

انتخاب تگ ها با کمک کلاس

اگر بخواهیم چند تگ را با ویژگی مشخصی انتخاب کنیم میتوانیم آنها را براساس کلاس انتخاب نماییم برای اینکار از دستور زیر استفاده می کنیم:

$(".test")

مثال

وقتی که کاربر روی دکمه کلیک کرد ، تمام تگ های دارای کلاس class="test" مخفی میشوند:

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

مشاهده نتیجه

مثال های بیشتر از انتخابگرهای جی کوئری:

انتخابگر	توضیحات	مثال
$("*")	انتخاب همه تگها	مشاهده کد
$(this)	انتخاب تگی که کد جی کوئری در آن نوشته شده است	مشاهده کد
$("p.intro")	انتخاب همه تگ های p که کلاس class="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")	انتخاب تمام دکمه ها وتمام تگ های input که نوع type="button" دارند.	مشاهده کد
$("tr:even")	انتخاب تمام سطرهای زوج تگ <tr>	مشاهده کد
$("tr:odd")	انتخاب همه عناصرفرد تگ <tr>	مشاهده کد

قراردادن کدها در فایل جداگانه

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