سبد (0)

گزینشگرهای jQuery

گزینشگرهای jQuery یکی از مهترین بخش های کتابخانه jQuery است.


گزینشگرهای jQuery یا (jQuery Selectors)

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

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

تمام گزینشگرها در jQuery با علامت "$" آغاز و با پرانتز محصور می شوند: ()$


گزینشگر نام تگ

گزینشگر نام تگ، به شما اجازه می دهد تا عناصر را براساس نام تگ، انتخاب کنید.

می توانید تمام تگ های <p> را در صفحه مانند زیر انتخاب کنید:

$("p")

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

مثال (گزینشگرهای jQuery)

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
خودتان امتحان کنید »

گزینشگر شناسه (id#)

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

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

برای پیدا کردن یک عنصر با شناسه مشخص، از کاراکتر "#" همراه با شناسه مورد نظر استفاده نمایید:

$("#test")

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

مثال (گزینشگرهای jQuery)

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
خودتان امتحان کنید »

گزینشگر نام کلاس (class.)

گزینشگر نام کلاس، عناصر با کلاس مشخص را پیدا می کند.

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

$(".test")

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

مثال (گزینشگرهای jQuery)

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});
خودتان امتحان کنید »

مثال های بیشتر از گزینشگر های 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_" تنظیم شده باشید را انتخاب می کند. مثال
$("a[target!='_blank']") تمام عناصر <a> که خصوصیت target آنها با مقدار "blank_" تنظیم نشده باشید را انتخاب می کند. مثال
$(":button")

تمام عناصر <button> و همچنین تمام عناصر <input>ی که خصوصیت type آنها "button" است را انتخاب می کند.

مثال
$("tr:even")

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

مثال
$("tr:odd")

تمام عناصر <tr> فرد را انتخاب می کند.

مثال

For a complete reference of all the jQuery selectors, please go to our jQuery Selectors Reference.


توابع پرکاربرد در یک فایل مجزا

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

همانطور که در این آموزش دیده اید، توابع به طور مستقیم در قسمت <head> صفحه قرار داده شده اند. اما بعضی مواقع مانند بالا، ترجیح داده می شود که آنها را در یک فایل JavaScript جداگانه با پسوند js. ذخیره کنیم و مانند زیر، توسط تگ <script> به صفحه لینک کرد:

مثال (گزینشگرهای jQuery)

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script src="/my_jquery_functions.js"></script>
</head>
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه