پرنیان طرح | انجام امور پرداختی و مجازی | فایل های گرافیکی | پرداخت های بین المللی
نویسنده: حامد محمدی 
با سلام خدمت همراهان همیشگی وب سایت پرنیان طرح
با یکی دیگر از مقالات آموزشی برنامه نویسی در خدمت شما هستیم.
در ادامه مباحث آموزشی جی کوئری، امروز درباره انتخاب گر ها یا selectors در jQuery صحبت خواهیم کرد.
انتخاب گر ها یکی از بخش های بسیار مهم در کتابخانه جی کوئری هستند.
در ادامه مقاله همراه ما باشید.
مقدمه
انتخاب گر ها ، همانطور که از نام آنها پیداست، به شما این امکان را می دهند که عناصر HTML را انتخاب کرده و سپس با کدنویسی آنها را دستکاری کنید.
از انتخاب گرها برای “یافتن” (یا انتخاب) عناصر HTML بر اساس نام ، شناسه یا id، کلاس ها ، انواع ، ویژگی ها ، مقادیر ویژگی ها و موارد دیگر استفاده می شود.
الگوریتم یافتن عناصر بر اساس موجودیت های CSS می باشد.
علاوه بر این ، برخی از انتخاب گرهای سغارشی خود را نیز دارد.
همه انتخاب گرهای jQuery با علامت دلار و پرانتز شروع می شوند.()$
در ادامه انواع انتخاب گر ها را با هم مرور و تمرین میکنیم.
انتخاب گر عنصر – The element Selector
انتخاب گر عنصر، عناصر را بر اساس نام آنها انتخاب می کند.
برای انتخاب تمام عناصر پاراگراف یا <p> از دستور زیر استفاده می کنیم.
$(“p”)
دستور زیر با کلیک کاربر روی دکمه ، باعث می شود تا تمامی پاراگراف ها پنهان شوند:
(توجه داشته باشید که کدهای جی کوئری باید داخل تگ <script> باشند)
$(document).ready(function(){
$(“button”).click(function(){
$(“p”).hide();
});
});
می توانید نتیجه این کد را از اینجا ببینید
انتخاب گر آی دی – The #id Selector
انتخاب گر آی دی، با استفاده از ویژگی id یک عنصر HTML، برای یافتن آن عنصر خاص استفاده می کند.
یک ID یا شناسه، باید در یک صفحه نویسی، برای یک عنصر خاص، منحصر به فرد باشد.
بنابراین می توانید برای پیدا کردن یک عنصر واحد، از انتخابگر ID# Selector استفاده کنید.
برای یافتن یک عنصر با شناسه منحصر به فرد آن، ابتدا یک کاراکتر هش (Hash) و سپس به دنبال آن شناسه عنصر را تایپ کنید.
مانند دستور زیر :
$(“#test”)
دستور زیر، با کلیک کاربر روی دکمه، عنصر خاصی با شناسه test را پنهان خواهد کرد.
$(document).ready(function(){
$(“button”).click(function(){
$(“#test”).hide();
});
});
می توانید نتیجه را از اینجا ببینید.
انتخاب گر کلاس – The .Class Selector
انتخاب گر کلاس، از ویژگی کلاس عناصر HTML، برای یافتن آنها استفاده می کند.
برای پیدا کردن عناصری با کلاس خاص، یک کاراکتر دوره ای و سپس نام کلاس را تایپ کنید.
مانند دستور زیر :
$(“.test”)
دستور زیر، با کلیک کاربر روی دکمه، عناصر خاصی با کلاس test را پنهان خواهد کرد.
$(document).ready(function(){
$(“button”).click(function(){
$(“.test”).hide();
});
});
می توانید نتیجه تکه کد بالا را از اینجا مشاهده کنید.
توابع در یک فایل جداگانه
اگر وب سایت شما، تعداد زیادی لینک و صفحه دارد؛ و قصد دارید که از توابع جی کوئری در وب سایت خود استفاده کنید.، حتما باید بتواندی از آنها محافظت کنید.
این محافطت به این معناست که توابع را از دسترس کاربران و ایجاد تغییرات در آنها توسط هکرها و کاربران کنجکاو دور نگه دارید.
برای این کار می تواندی ، توابع خود را در فایلی جدا و با پسوند js. ذخیره و نگهداری کنید.
در آموزش های این مقاله، توابع جی کوئری مستقبما به بخش <head> در همان صفحه اضافه می شوند.
با این وجود ، گاهی اوقات ترجیح داده می شود که آنها را در یک پرونده جداگانه قرار دهید.
برای این کار، از ویژگی src برای مراجعه به پرونده js. استفاده خواهیم کرد.
به طور مثال:
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<script src=”my_jquery_functions.js”></script>
</head>
معرفی سایر انتخاب گرهای جی کوئری
| دستور نحوی | توضیح |
|
$(“*”) |
انتخاب تمام عناصر |
|
$(this) |
انتخاب عنصر جاری |
|
$(“p.intro”) |
انتخاب تمامی عنصرهای <p> که کلاس 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”) |
انتخاب تمام عناصر<button> و عناصر <input> که از نوع <button>هستند |
|
$(“tr:even”) |
انتخاب تمام سطرهای زوج |
|
$(“tr:odd”) |
انتخاب تمام سطرهای فرد |
