انتخاب گر های jQuery

سلکتور های jQuery

سلکتور ها به شما این امکان را می دهند تا عناصر html را دستکاری کنید.
سلکتور ها برای پیدا کردن یا انتخاب عناصر html براساس نام، آیدی، کلاس ، نوع، ویژگی، مقدار، صفت و... به کار می روند. این سلکتور ها از روش سلکتورهای css استفاده می کنند، که علاوه بر آن برخی سلکتور های سفارشی مخصوص خود راهم دارند.
تمام سلکتور ها در jQuery با علامت $ و () نوشته می شوند : $() .
 

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

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

$("p")

مثال:
زمانیکه کاربر روی دکمه کلیک می کند، تمام عناصر <p> مخفی می شود:

سلکتور عنصر در jQuery
$(document).ready(function(){
    $("button").click(function(){
        $("p").hide();
    });
});
مشاهده مثال

 

سلکتور id


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

$("#test")


مثال:
زمانیکه کاربر روی دکمه کلیک می کند، عنصری که "id="test است، مخفی می شود:

سلکتور id در jQuery
$(document).ready(function(){
    $("button").click(function(){
        $("#test").hide();
    });
});
مشاهده مثال

 

سلکتور class

سلکتور  .class عناصری را  کلاس  خاص پیدا می کند. برای پیدا کردن عناصری با کلاس خاص، کاراکتر . را نوشته و جلوی آن نام کلاس مورد نظرا را بنویسید:

$(".test")

مثال:
زمانی که کاربر دکمه را فشار می دهد، عناصر با کلاس class="test" مخفی می شوند:

سلکتور class
$(document).ready(function(){
    $("button").click(function(){
        $(".test").hide();
    });
});
مشاهده مثال

مثال های بیشتر از سلکتورهای jQuery

توضیح

Syntax

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

$("*")

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

$(this)

تمام عناصر <p>  را که دارای کلاس class="intro"هستند را انتخاب می کند

$("p.intro")

اولین عنصر <p> را انتخاب می کند

$("p:first")

اولین عنصر <li>از اولین <ul> را انتخاب می کند.

$("ul li:first")

اولین عنصر <li> را از تمام<ul> ها انتخاب می کند.

$("ul li:first-child")

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

$("[href]")

تمام عناصر <a> را که صفت target آن ها دارای مقدار _blank دارند را انتخاب می کند

$("a[target='_blank']")

تمام عناصر <a> را که صفت target آن ها مقدار  _blank  نیست  را انتخاب می کند

$("a[target!='_blank']")

تمام عناصر <button> و تمام عناصر ورودی <input> از نوع type="button" را انتخاب می کندو

$(":button")

تمام سطر های زوج عنصر<tr> را انتخاب می کند.

$("tr:even")

تمام سطر های زوج عنصر <tr> را انتخاب می کند.

$("tr:odd")

توابع در یک فایل جداگانه

اگر وب سایت شما شامل صفحات زیادی می شود و می خواهید از توابع jQuery به راحتی نگهداری و استفاده کنید، می توانید توابع jQuery را در فایل .js جداگانه  قرار دهید.
در این آموزش ها  توابع به بخش <head>  اضافه می شوند. بنابراین برخی اوقات می توان این توابع را در فایل جداگانه ای مانند مثال زیر قرار داد( از صفت src  برای ارجاع دادن به فایل .js استفاده کنید ).

توابع در فایل جداگانه
 <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head> 
مشاهده مثال

 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط