انواع انتخاب کننده ها در jquery:
به جرات میشه گفت بزرگترین نعمتی که در jquery در اختیار برنامه نویسان قرار گرفت، انتخاب کننده هایی بود که در این فریم ورک جای گرفت. به کمک این انتخاب کننده ها شما میتونید به راحتی هر عنصری را از روی صفحه انتخاب کنید و هر کاری دوست دارید انجام بدید. اما در کنار این سادگی پیچیدگی های زیادی هم وجود داره. به خاطر کاربرد بعضی از این انتخاب کننده ها بسیار مشهور هستند و بعضی دیگر اصلا شناخته شده نیستن. در این مقاله سعی میکنیم همه انتخاب کننده هایی که در jquery وجود دارند رو با هم بررسی کنیم.
Id Selector:
یکی از مشهورترین انتخاب کننده های jquery این گزینه است. برای تشخیص این انتخاب کننده مانند CSS از # استفاده میکنیم. برای مثال قطعه کد زیر را در نظر بگیرید:
$('#myid') این قطعه کد، عنصری روی صفحه که شناسه اون برابر با myid باشه رو پیدا میکنه و میتونیم با اون کار کنیم. و یا $('p#myid') از میان تگ هایp اون تگی که شناسه اون myid باشه رو برای ما پیدا میکنه.
Element selector:
این انتخاب کننده دقیقا یک تگ html را برای ما پید میکند. مثلا $('div') تمام تگ های div را انتخاب میکند.
Class selector:
به کمک این انتخاب کننده میتوانیم عناصری روی صفحه که کلاس Css خاصی به آنها داده شده است را پیدا کنیم.
مثلا $('.myclass')تمامی عناصری که کلاس myclass داشته باشند را پیدا میکند. به نقش (.) در این انتخاب کننده دقت کنید.
مانند مثال های قبل میتوانیم انتخاب کننده ها را با هم ترکیب کنیم تا از قدرت بیشتری برخودار شوند. مثلا $('p.myclass') تمام p هایی که myclass دارند را پیدا میکند. و یا $('.myclass.otherclass') تمام عناصری که کلاس های myclass و otherclass را به طور همزمان داشته باشند را انتخاب میکند.
تا اینجای کار 3 انتخاب کننده اصلی jquery را با هم شناختیم. مسلما این سه انتخاب کننده، مهم ترین و پرکاربرد ترین هستند، اما انتخاب کننده های دیگیری نیز وجود دارند که به کمک آنها میتوانیم از قدرت jquery بهتر استفاده کنیم.
انتخاب کننده های زیر مجموعه:
$('#container p') به کمک این نوع ترکیب میتوانیم عناصر زیر مجموعه را پیدا کنیم. مثلا در این مورد تمام P هایی که زیر مجموعه آیتمی با شناسه container هستند انتخاب میشوند.
انتخاب کننده فرزند مستقیم:
$('li > ul') در این مورد تمامی ulهایی که مستقیما زیر مجموعه یک li باشند انتخاب میشوند و در صورتی که در لایه دیگری باشند انتخاب نمیشوند.
انتخاب کننده های فرزند مستقیم و فوری:
$('li + ul') در این انتخاب کننده نه تنها باید عنصر مورد نظر فرزند مستیم باشد بلکه باید فورا بعد از تگ آغازین تگ والد قرار گیرد. بدین جهت اگر بعد از تگ li تگ دیگری قرار گیرد و بعد ulبیاید هرگز انتخاب نخواهد شد.
انتخاب چندتایی:
در صورتی که بخواهیم چندین گزینه مختلف را به طور یکجا انتخاب کنیم و کار واحدی روی همه آنها انجام دهیم میتوانیم موارد متفاوت را با ، از هم جدا کنیم مانند $('code, em, strong') که هم code و em و هم strong را برای ما انتخاب خواهد کرد.
انتخاب به کمک محل قرار گیری:
$('li:nth-child(2)') به کمک این دستور تمامی liهایی که فرزند دوم والد خود هستند انتخاب میشوند. دقت کنید که این انتخاب کننده تنها موردی هست که اندیس آن از 1 شروع میشود و بقیه انتخاب کننده اندیسشان از صفر شروع میشود.
اولین و آخرین فرزند:
$('li:first-child') به کمک این انتخاب کننده میتوانید li را انتخاب کنیدکه اولین فرزند والد خود باشد. دقیقا مانند همین گزینه last-child نیز وجود دارد.
فقط فرزند:
به کمک این گزینه تنها تگ هایی انتخاب میشوند که فقط فرزند تگ دیگری باشند. $(':only-child')
نقض کننده:
$(':not(.myclass)') به کمک این گزینه میتوانیم ابتدا آیتم هایی را انتخاب کنیم و سپس به جز آنها بقیه را انتخاب کنیم. در این مثال تمامی گزینه هایی که myclassندارند انتخاب میشوند.
تهی:
$(':empty') تمامی تگ های تهی صفحه انتخاب میشوند.
در قسمت آینده انتخاب کننده های صفت را با هم بررسی خواهیم کرد.
به جرات میشه گفت بزرگترین نعمتی که در jquery در اختیار برنامه نویسان قرار گرفت، انتخاب کننده هایی بود که در این فریم ورک جای گرفت. به کمک این انتخاب کننده ها شما میتونید به راحتی هر عنصری را از روی صفحه انتخاب کنید و هر کاری دوست دارید انجام بدید. اما در کنار این سادگی پیچیدگی های زیادی هم وجود داره. به خاطر کاربرد بعضی از این انتخاب کننده ها بسیار مشهور هستند و بعضی دیگر اصلا شناخته شده نیستن. در این مقاله سعی میکنیم همه انتخاب کننده هایی که در jquery وجود دارند رو با هم بررسی کنیم.
Id Selector:
یکی از مشهورترین انتخاب کننده های jquery این گزینه است. برای تشخیص این انتخاب کننده مانند CSS از # استفاده میکنیم. برای مثال قطعه کد زیر را در نظر بگیرید:
$('#myid') این قطعه کد، عنصری روی صفحه که شناسه اون برابر با myid باشه رو پیدا میکنه و میتونیم با اون کار کنیم. و یا $('p#myid') از میان تگ هایp اون تگی که شناسه اون myid باشه رو برای ما پیدا میکنه.
Element selector:
این انتخاب کننده دقیقا یک تگ html را برای ما پید میکند. مثلا $('div') تمام تگ های div را انتخاب میکند.
Class selector:
به کمک این انتخاب کننده میتوانیم عناصری روی صفحه که کلاس Css خاصی به آنها داده شده است را پیدا کنیم.
مثلا $('.myclass')تمامی عناصری که کلاس myclass داشته باشند را پیدا میکند. به نقش (.) در این انتخاب کننده دقت کنید.
مانند مثال های قبل میتوانیم انتخاب کننده ها را با هم ترکیب کنیم تا از قدرت بیشتری برخودار شوند. مثلا $('p.myclass') تمام p هایی که myclass دارند را پیدا میکند. و یا $('.myclass.otherclass') تمام عناصری که کلاس های myclass و otherclass را به طور همزمان داشته باشند را انتخاب میکند.
تا اینجای کار 3 انتخاب کننده اصلی jquery را با هم شناختیم. مسلما این سه انتخاب کننده، مهم ترین و پرکاربرد ترین هستند، اما انتخاب کننده های دیگیری نیز وجود دارند که به کمک آنها میتوانیم از قدرت jquery بهتر استفاده کنیم.
انتخاب کننده های زیر مجموعه:
$('#container p') به کمک این نوع ترکیب میتوانیم عناصر زیر مجموعه را پیدا کنیم. مثلا در این مورد تمام P هایی که زیر مجموعه آیتمی با شناسه container هستند انتخاب میشوند.
انتخاب کننده فرزند مستقیم:
$('li > ul') در این مورد تمامی ulهایی که مستقیما زیر مجموعه یک li باشند انتخاب میشوند و در صورتی که در لایه دیگری باشند انتخاب نمیشوند.
انتخاب کننده های فرزند مستقیم و فوری:
$('li + ul') در این انتخاب کننده نه تنها باید عنصر مورد نظر فرزند مستیم باشد بلکه باید فورا بعد از تگ آغازین تگ والد قرار گیرد. بدین جهت اگر بعد از تگ li تگ دیگری قرار گیرد و بعد ulبیاید هرگز انتخاب نخواهد شد.
انتخاب چندتایی:
در صورتی که بخواهیم چندین گزینه مختلف را به طور یکجا انتخاب کنیم و کار واحدی روی همه آنها انجام دهیم میتوانیم موارد متفاوت را با ، از هم جدا کنیم مانند $('code, em, strong') که هم code و em و هم strong را برای ما انتخاب خواهد کرد.
انتخاب به کمک محل قرار گیری:
$('li:nth-child(2)') به کمک این دستور تمامی liهایی که فرزند دوم والد خود هستند انتخاب میشوند. دقت کنید که این انتخاب کننده تنها موردی هست که اندیس آن از 1 شروع میشود و بقیه انتخاب کننده اندیسشان از صفر شروع میشود.
اولین و آخرین فرزند:
$('li:first-child') به کمک این انتخاب کننده میتوانید li را انتخاب کنیدکه اولین فرزند والد خود باشد. دقیقا مانند همین گزینه last-child نیز وجود دارد.
فقط فرزند:
به کمک این گزینه تنها تگ هایی انتخاب میشوند که فقط فرزند تگ دیگری باشند. $(':only-child')
نقض کننده:
$(':not(.myclass)') به کمک این گزینه میتوانیم ابتدا آیتم هایی را انتخاب کنیم و سپس به جز آنها بقیه را انتخاب کنیم. در این مثال تمامی گزینه هایی که myclassندارند انتخاب میشوند.
تهی:
$(':empty') تمامی تگ های تهی صفحه انتخاب میشوند.
در قسمت آینده انتخاب کننده های صفت را با هم بررسی خواهیم کرد.
0 نظرات:
ارسال یک نظر