Selector ها در jquery

سلکتور ها یا انتخابگر ها یکی از مهمترین بخش های کتابخانه ی جی کوئری هستند. اگر میخواهید کار با جی کوئری را به درستی بیاموزید، لازم است که بتوانید به خوبی با سلکتور ها کار کنید.
همانطور که از نام سلکتور نیز مشخص است، بوسیله ی آن میتوانید عناصر دلخواه HTML را انتخاب کرده و سپس از طریق جی کوئری تغییرات دلخواه را بر روی عنصر انتخابی خود اعمال کنید. سلکتور ها میتوانند عنصر مورد نظر را بر اساس آی دی (id)، کلاس (class)، نوع (type)، صفت (attribute)، مقادیر صفات (value) و … یافته و جهت انجام اعمال دلخواه، در اختیار شما قرار دهند. در جی کوئری علاوه بر سلکتور های اختصاصی موجود در این کتابخانه، میتوانید از تمامی سلکتور های استاندارد CSS نیز استفاده کنید.
تمامی سلکتور ها در جی کوئری با یک علامت دلار که با پرانتز همراهی میشود به نمایش در می آیند :

$()

انتخابگر عناصر

سلکتور یا انتخابگر عناصر همانطور که از نامش مشخص است، مسئول یافتن عنصر (element) مشخص شده توسط شماست. این انتخابگر، نام عنصر را دریافت کرده و آن را انتخاب میکند. مثلا فرض کنیم میخواهیم تمامی عناصر p موجود در صفحه را انتخاب کنیم. برای این کار از کد زیر استفاده میکنیم :

$(“p”)

حالا در یک مثال کاربردی میخواهیم کاری کنیم که وقتی کاربر روی دکمه ای کلیک میکند، تمامی عناصر p موجود در صفحه، محو شوند :

$(document).ready(function(){

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

        $(“p”).hide();

    });

});

انتخابگر id

این سلکتور جهت یافتن عنصر مربوطه، از id مشخص شده در تگ HTML استفاده میکند. هر id در هر صفحه باید منحصر به فرد باشد. بنابراین وقتی شما از انتخابگر id استفاده میکنید، هدف شما باید پیدا کردن تنها یک عنصر منحصر به فرد باشد. فرض کنیم میخواهیم عنصری با آی دی test را در صفحه انتخاب کنیم، برای این کار از کد زیر استفاده میکنیم :

$(“#test”)

این بار مثال قبل را کمی تغییر میدهیم. میخواهیم کاری کنیم که وقتی کاربر روی دکمه ای در صفحه کلیک میکند، عنصری که آی دی آن معادل test است محو شود. برای این کار از کد زیر استفاده میکنیم :

$(document).ready(function(){

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

        $(“#test”).hide();

    });

});

انتخابگر class

حتما تا اینکه دیگر چگونگی کار به خوبی دستتان آمده و الان هم میدانید که انتخابگر class میتواند عنصری که دارای کلاس مورد نظر ماست را در صفحه بیابد. برای استفاده از این انتخابگر، کافی است در ابتدای نام کلاس یک نقطه قرار داده و سپس نام کلاس را قرار دهیم. مانند کد زیر :

$(“.test”)

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

$(document).ready(function(){

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

        $(“.test”).hide();

    });

});