سرک بکشید ، به‌‌هر‌جا که می‌خواهید

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

باید توجه داشت تعداد زیادی از قابلیت های مورد نیاز در خود عناصر  DOM  وجود دارند و فقط کافی است به آنها دسترسی داشته باشیم و از قدرت کافی جهت تغییر در ساختار آنها برخوردار باشیم. اما بگذارید تا بحث را با نحوه انتخاب عناصر جهت تغییر و دستکاری در آنها پیش ببریم.

انتخاب عناصر جهت ویرایش آنها

اولین نکته ای که باید در استفاده از دستورات جی کوئری مد نظر قرار دهیم ، انتخاب تعدادی از عناصر موجود در یک صفحهhtml  است تا بر روی آنها عملیاتی انجام دهیم. بعضی مواقع انتخاب عناصر بسیار ساده است ، به عنوان مثال انتخاب کلیه عناصر پاراگراف «»p با استفاده از دستورات جی کوئری بسیار ساده است ، اما مواقعی هم پیش می آید که انتخاب عناصر مورد نظر کمی پیچید می شود به عنوان مثال انتخاب کلیه عناصری که با کلاس listElement  مشخص شده اند و محتوی لینک می باشند!

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

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

برای کمک به آشنایی بیشتر و درک بهتر مسائل ما یک آزمایشگاه برای نمایش انتخابگر ها به شما معرفی می کنیم که در آدرس:

http://blog.pixeldesign.ir/upload/ipzjquery-selectors-lab.

برای شما در دسترس است. توصیه می شود برای درک بهتر مسائلی که از این به بعد مطرح می شود بسته های کمکی که معرفی می شوند را دریافت کنید.

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

بعد از دریافت فایل به این آدرس مراجعه کنید و صفحهhtml  را فراخوانی کنید:

chapter2/lab.selectors.html

وقتی که این صفحه را در مرورگر خود فراخوانی کردید باید تصویری شبیه به تصویر مقابل را مشاهده کنید.

بخش selector  سمت چپ شامل یک جعبه متن و یک دکمه است ، برای آزمایش یک عنصر صفحه مثل li  را در جعبه متن تایپ و دکمه  apply  را کلیک کنید ، تغییرات را مشاهده خواهید کرد!

بعد از تایپ عنصر مورد نظر و فشردن دکمه ، عنصر تایپ شده توسط جی کوئری در جعبه دیگری که در سمت راست قرار دارد و به صورت یک فریم در صفحه قرار داده شده است ، جستجو و با رنگ قرمز نمایش داده می شود.|

همینطور در زیر جعبه متن سمت چپ یک دستور جی کوئری ظاهر می شود که نحوه در اختیار گرفتن عنصر تایپ شده را نشان می دهد و در زیر آن تعداد عناصری که شامل آن انتخابگر می شوند نمایش داده می شود به عنوان مثال برای عنصر  li  نتیجه مانند زیر است:

jQuery statement:
$("li").addClass("wrappedElement") 
 match(es) 8Matched elements:
در بخشی که در پایین صفحه قرار دارد ، نمونه کدhtml  را مشاهده می کنید که در فریم سمت راست مورد استفاده قرار گرفته است. این بخش برای آشنایی بیشتر شما با نحوه به کار گیری عناصر در یک صفحه  html  قرار داده شده است. برای آشنایی بیشتر با عناصر و نحوه انتخاب آنها توسط جی کوئری می توانید از این روش ساده استفاده کنید و عناصر مختلفی را با استفاده از آزمایشگاه انتخابگر هایی که در این بخش معرفی شد ، آزمایش کنید و روش دسترسی به آنها را به صورت کاملا عینی مشاهده و فرا بگیرید.

پویا سلیمی‌