انتخاب المان ها بر اساس شناسه و کلاس (استفاده از المان ها، شناسه و کلاس ها)

با سلام به شمادوستای عزیز ،امیدوارم که حالتون خوب باشه و روز خوبی را آغاز کرده باشید. در jquery برای انتخاب المان ها بر اساس شناسه و کلاس مانند css اقدام میکنیم.در ادامه برای بررسی بیشتر با ماهمراه باشید.

انتخابگر #id

یکی از پرکاربردترین انواع selector، انتخابگر #id (گزینش المان ها بر اساس شناسه) می باشد، همان طور که در مثال “Hello, world” نظاره گر آن بودیم. در مثال نام برده، از خصیصه ی ID یک تگ HTML برای یافتن و انتخاب یک المان منحصربفرد استفاده کردیم. جهت مکان یابی یک المان با شناسه ی مشخص، یک کاراکتر هش و به دنبال آن ID المان مورد نظر را درج نمایید:

$(“#divTest”)

مثال:

نمونه یک
?
۱
۲
۳
۴
۵
۶

$(function () {
$(“#divTest”).text(“Test”);
});

اگرچه تنها یک المان در صفحه وجود دارد که با کوئری ذکر شده در این مثال منطبق می باشد، باید توجه داشته باشید که نتیجه ی برگشتی یک لیست است. بدین معنی که ممکن است نتیجه حاوی چندین المان باشد، البته در صورتی که کوئری با بیش از یک المان منطبق باشد. یک مثال رایج در این زمینه، منطبق شدن کوئری با تمامی المان هایی است که از یک یا چند کلاس CSS استفاده می کنند.

انتخابگر .class (گزینش المان بر اساس کلاس آن)

المان هایی که دارای کلاس مشخص هستند را می توان با نوشتن کاراکتر نقطه ” . ” و اسم کلاس با کوئری منطبق نموده و انتخاب کرد و در نهایت به صورت شی برگرداند. نمونه:

نمونه دو
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰

• Test 1
• Test 2
• Test 3

$(function () {
$(“.bold”).css(“font-weight”, “bold”);
});

انتخاب المان بر اساس اسم آن (element selector)

همچنین می توان المان ها را بر اساس اسم تگ آن ها انتخاب کرد. به عنوان مثال، می توانید تمامی لینک ها یک صفحه را بدین صورت (با ذکر اسم تگ آن ها) انتخاب کرد:

$(“a”)

و یا تمامی تگ های div را به شکل زیر انتخاب نمود:

$(“div”)

در صورت استفاده از یک انتخاب گر چند-المانه (مانند انتخابگر کلاس که در مثال قبلی بکار گرفته شد) و همچنین آگاهی از نوع دقیق المان های مورد انتخاب، توصیه می شود نوع المان را پیش از انتخابگر مشخص نمایید. نه تنها این روش دقیق تر است، بلکه پردازش آن برای jQuery آسان تر صورت پذیرفته که به واکنش هر چه سریعتر سایت کمک می کند. در زیر نسخه ی بازنویسی شده ی مثال قبلی را مشاهده می کنید:

$(“span.bold”).css(“font-weight”, “bold”);

این مثال تمامی المان های span که اسم کلاس آن ها bold می باشد را bold می کند. البته، این روش را می توان با دیگر selector ها نیز پیاده سازی کرد.
آموزش انتخاب المان ها بر اساس شناسه و کلاس در Jquery