انتخاب عناصر صفحه
1-انتخاب عناصر صفحه برای ایجاد تغییر
خوشبختانه jQuery یک مکانیزم بسیار قوی و قدرتمند ارایه کرده است که انتخاب هر عنصری از صفحه را به سادگی امکان پذیر میسازد. انتخاب کنندههای jQuery از ساختار مربوط به CSS استفاده میکنند، بنابراین ممکن است شما هم اکنون با تعداد زیادی از آنها آشنا باشید . در ادامه شمار بیشتر و قدرتمندتری خواهید آموخت.
برای درک بهتر شما از مطالب مربوط به بخش انتخاب کننده ها، یک مثال آماده مختص به این مبحث، در قالب یک صفحه اینترنتی، را در فایل صفحه کارگاهی قرار داده ایم، این فایل در ادرس chapter2/lab.selector.htm قابل دسترسی میباشد. این مثال از پیش آماده و کامل (نوشته شده توسط نویسنده کتاب)، این امکان را به شما میدهد تا با وارد کردن یک رشته، به عنوان پارامتر انتخاب کننده، در همان زمان عنصر انتخاب کننده در صفحه را رویت کنید. زمانی که این صفحه را اجرا میکنید تصویری مانند زیر ظاهر خواهد شد.
برای درک بهتر مطالب این سلسله پستها میتوانید فایلهای کتاب را از آدرس اصلی آن یا از این آدرس در همین سایت دانلود نمایید.
این صفحه سه پنجره مجزا دارد. در پنجره سمت چپ ، یک textBox و یک دکمه دیده میشود، که با وارد کردن یک انتخاب کننده در textBox و فشردن دکمه، عنصر مورد نظر در پنجره سمت راست انتخاب میشود. برای شروع در textBox عبارت li را بنویسید و دکمه Apply را کلیک کنید.
با انجام این عمل تصویر زیر باید خروجی شما باشد. میتوانید حالتهای دیگر را خودتان امتحان کنید.
1-1- استفاده از انتخاب کنندههای ابتدایی CSS
برنامه نویسان وب برای اعمال فرمتهای ظاهری گوناگون به بخشها و عناصر مختلف یک صفحه اینترنتی، از ایک راه بسیار ساده، در عین حال قدرتمند و کارا استفاده میکنند که در تمام مرورگرهای مختلف نیز جوابگو باشد. این انتخاب کنندهها عناصر را بر اساس نام شناسه آنها، نام کلاس و یا ساختار سلسله مراتبی موجود در صفحه انتخاب میکنند.
در زیر به معرفی چند نمونه از این انتخاب کنندههای ساده CSS میپردازیم:
- a : تمام عناصر <a> را انتخاب میکند.
- specialID# : عنصری را که دارای ID با عنوان specialID باشد انتخاب میکند.
- specialClass. : عناصری را که دارای کلاس specialClass هستند انتخاب میکند.
- a#specialID.specialClass : این عبارت عنصری را انخاب میکند که شناسه آن specialID باشد، به شرط آنکه این عنصر <a> باشد و دارای کلاس specialClass نیز باشد را انتخاب میکند.
- p a.specialClass: تمام عناصر لینک (<a>) را که دارای کلاس specialClass باشند و درون یک عنصر پاراگراف (<p>) قرار گرفته باشند را انتخاب میکند.
این انتخاب کنندهها شاید ساده به نظر برسند، اما در بسیاری از مواقع پاسخگوی ما میباشند؛ به علاوه آنه که با ادغام این انتخاب کنندههای ساده، ما میتوانیم انتخاب کنندههای پیچیدهتر و تخصصیتر ایجاد کنیم.
نکته مثبت در مورد انتخاب کنندههای CSS این است که از همین انتخاب کنندهها میتوانیم در jQuery نیز استفاده کنیم. برای این کار تنها کافیست انتخاب کننده مورد نظر را به تابع ()$ ارسال کنیم. در زیر یک نمونه را مشاهده میکنید:
$("p a.specialClass")
2-1- استفاده از انتخاب کنندههای فرزند (Child) ، نگهدارنده (Container) و صفت (Attribute)
برای انتخاب کنندههای پیشرفته تر، jQuery از جدیدترین مرورگرهایی که CSS را پشتیبانی میکنند، استفاده میکند که میتوان به Mozilla Firefox, Internet Explorer 7, Safariو سایر مرورگرهای پیشرفته (مدرن) اشاره کرد. این انتخاب کنندههای پیشرفته شما را قادر میسازند تا مستقیما فرزند یک عنصر را انتخاب کنید و یا از ساختار سلسله مراتبی عناصر صفحه، مستقیما به عنصر مورد نظر دسترسی داشته باشید و یا حتی تمام عناصری که یک صفت خاص را شامل میشوند، انتخاب کنید. گاهی اوقات انتخاب فرزندی از یک شی برای ما مطلوب است. برای مثال ممکن است ما به چند مورد از یک لیست احتیاج داشته باشیم، نه یک زیر مجموعه ای از آن لیست. به قطعه کد زیر که از صفحه کارگاهی این پست گرفته شده است دقت نمایید:
<ul> <li><a href="http://jquery.com">jQuery supports</a> <ul> <li><a href="css1">CSS1</a></li> <li><a href="css2">CSS2</a></li> <li><a href="css3">CSS3</a></li> <li>Basic XPath</li> </ul> </li> <li>jQuery also supports <ul> <li>Custom selectors</li> <li>Form selectors</li> </ul> </li> </ul>
راه حل مناسب برای انتخاب چنین حالتی استفاده از انتخاب فرزند می باشد که به این منظور Parent (والد) و Child (فرزند)، به وسیله یک کاراکتر < از یکدیگر جدا میشوند:
p > a
ul.myList > li > a
انتخاب کنندههای صفت نیز بسیار قدرتمند میباشند و ما را تواناتر میسازند، فرض کنید برای منظوری خاص قصد دارید به تمام لینکهای موجود در صفحه که به مکانی خارج از این وب سایت اشاره دارند، رفتاری را اضافه کنید (مثلا مانند همین سایت به کنار آنها یک آیکن اضافه نمایید) . فرض کنید این کد (کد موجود در مثال کارگاهی) را در صفحه خود دارید:
<li><a href="http://jquery.com">jQuery supports</a> <ul> <li><a href="css1">CSS1</a></li> <li><a href="css2">CSS2</a></li> <li><a href="css3">CSS3</a></li> <li>Basic XPath</li> </ul> </li>
a[href^=http://]
می توانید این کد را در صفحه کار گاهی تست کنید.
راهای دیگری برای استفاده از انتخاب کنندههای صفت وجود دارد.
form[method]
input[type=text]
دستور زیر مثالی دیگر برای بررسی یک مقدار بر اساس کاراکترهای نخست آن میباشد:
div[title^=my]
اما اگر بخواهیم تنها بر اساس کاراکترهای انتهایی انتخابی انجام دهیم، دستور مناسب چه خواهد بود؟ برای چنین منظوری مانند زیر عمل میکنیم:
a[href$=.pdf]
a[href*=jquery.com]
فراتر از خصوصیات، بعضی مواقع ما میخواهیم بررسی کنیم که آیا یک عنصر شامل عنصر دیگری هست یا خیر. در مثالهای قبلی فرض کنید ما میخواهیم بدانیم که آیا یک li شامل a هست یا خیر، jQuery با استفاده از انتخاب کنندههای Containerها این را پشتیبانی میکند:
li:has(a)
تصویر زیر انتخاب گرهایی را نشان میدهد که ما میتوانیم در jQuery استفاده نماییم.
انشالله در پستهای بعدی ادامه مباحث را بررسی خواهد شد.