معرفی انواع انتخاب گر های جی کوئری jQuery Selectors

حامد محمدیحامد محمدی
199 بازدید
selectors
[cdb_box_content]

با سلام خدمت همراهان همیشگی وب سایت پرنیان طرح

با یکی دیگر از مقالات آموزشی برنامه نویسی در خدمت شما هستیم.

در ادامه مباحث آموزشی جی کوئری، امروز درباره انتخاب گر ها یا selectors در jQuery صحبت خواهیم کرد.

انتخاب گر ها یکی از بخش های بسیار مهم در کتابخانه جی کوئری  هستند.

در ادامه مقاله همراه ما باشید.

[/cdb_box_content]
[cdb_box_content]

مقدمه


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

از انتخاب گرها برای “یافتن” (یا انتخاب) عناصر HTML بر اساس نام ، شناسه یا id، کلاس ها ، انواع ، ویژگی ها ، مقادیر ویژگی ها و موارد دیگر استفاده می شود.

الگوریتم یافتن عناصر بر اساس موجودیت های CSS می باشد.

 علاوه بر این ، برخی از انتخاب گرهای سغارشی خود را نیز دارد.

همه انتخاب گرهای jQuery با علامت دلار و پرانتز شروع می شوند.()$

در ادامه انواع انتخاب گر ها را با هم مرور و تمرین میکنیم.

[/cdb_box_content]
[cdb_box_content]

انتخاب گر عنصر – The element Selector

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

برای انتخاب تمام عناصر پاراگراف یا <p> از دستور زیر استفاده می کنیم.

$(“p”)

دستور زیر با کلیک کاربر روی دکمه ، باعث می شود تا تمامی پاراگراف ها پنهان شوند:

(توجه داشته باشید که کدهای جی کوئری باید داخل تگ <script> باشند)

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

می توانید نتیجه این کد را از اینجا ببینید

[/cdb_box_content]
[cdb_box_content]

انتخاب گر آی دی – The #id Selector

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

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

بنابراین می توانید برای پیدا کردن یک عنصر واحد، از انتخابگر ID# Selector استفاده کنید.

برای یافتن یک عنصر با شناسه منحصر به فرد آن، ابتدا یک کاراکتر هش (Hash) و سپس به دنبال آن شناسه عنصر را تایپ کنید.

مانند دستور زیر :

$(“#test”)
دستور زیر، با کلیک کاربر روی دکمه، عنصر خاصی با شناسه test را پنهان خواهد کرد.
$(document).ready(function(){
$(“button”).click(function(){
$(“#test”).hide();
});
});
می توانید نتیجه را از اینجا ببینید.
[/cdb_box_content]
[cdb_box_content]

انتخاب گر کلاس – The .Class Selector

انتخاب گر کلاس، از ویژگی کلاس عناصر HTML، برای یافتن آنها استفاده می کند.

برای پیدا کردن عناصری با کلاس خاص، یک کاراکتر دوره ای و سپس نام کلاس را تایپ کنید.

مانند دستور زیر :

$(“.test”)
دستور زیر، با کلیک کاربر روی دکمه، عناصر خاصی با کلاس test را پنهان خواهد کرد.

 

$(document).ready(function(){
$(“button”).click(function(){
$(“.test”).hide();
});
});
می توانید نتیجه تکه کد بالا را از اینجا مشاهده کنید.
[/cdb_box_content]
[cdb_box_content]

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

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

این محافطت به این معناست که توابع را از دسترس کاربران و ایجاد تغییرات در آنها توسط هکرها و کاربران کنجکاو دور نگه دارید.

برای این کار می تواندی ، توابع خود را در فایلی جدا و با پسوند 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>

[/cdb_box_content]
[cdb_box_content]

اگر این مطلب برای شما مفید بود ما را در گوگل ستاره باران کنید.

ترجمه و ارائه : رویا نجفی

منبع : وب سایت w3schools

[/cdb_box_content]
دسته بندی JQuery
اشتراک گذاری
راه حل صحیح موفقیت این است که اشتیاق شما به پیروزی بیشتر از ترس شما از شکست باشد.”انیشتین“

نوشته های مرتبط

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

22+ محصولات
400+ سفارشات تکمیل شده
2086+ کاربران
399+ مطالب وبلاگ
سبد خرید

هیچ محصولی در سبد خرید نیست.

ورود به سایت