گزینشگرها در JQuery

گزینشگرها در JQuery

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

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

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

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

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


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

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

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

$(“p”)

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

مثال

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

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

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

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

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

$(“#test”)

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

مثال

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

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

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

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

$(“.test”)

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

مثال

$(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> فرد را انتخاب می کند. مثال

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

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

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

مثال

<head>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”>
</script>
<script src=”/my_jquery_functions.js”></script>
</head>


اگه خوشت اومد به اشتراک بزار


اگه به اشتراک نزاشتی حداقل لایک کن:(

نظر شما در رابطه با این آموزش چیست


بالا

تمامی حقوق مادی و معنوی این وبسایت محفوظ میباشد و متعلق است به Webtekar.ir.
Google