سوالی دارید؟

چنانچه سوالی دارید می‌توانید از قسمت پایین پرسیده تا پاسخ آن را بیابید!

درس ششم : مقدمات و مجموعه عناصر در jQuery

lesson-6-jquery-wrapper

تمرکز اصلی jQuery واکشی اجزای صفحه ی HTML و انجام عملیاتی بر روی آنها می باشد . اگر با CSS آشنایی داشته باشید ، از قدرت انتخاب کننده ها مطلع هستید که چگونه گروهی از اجزای یک صفحه HTML را انتخاب می کنند و مشخصات ظاهری خاصی را بر روی آنها اختصاص می دهند .
حال با استفاده از jQuery می توانیم همین کار را برای ساده کردن کد ها جاوا اسکریپت انجام دهیم.
jQUery توجه ویژه ای به پایداری صفحه ها در مرور گر های مختلف دارد و همچنین برخی از مشکل های عدیده ای جاوا اسکریپت را پشت پرده بر طرف می سازد . برای مثال مشکل انتظار تا load شدن کامل صفحه و سپس تعامل با صفحه ، به راحتی بر طرف شده است .
jQuery متد هایاز پیش ساخته شده ی قدرتمندی برای افزایش کارایی و توانش در کار با افزونه ها ارایه می دهد ، که قدرت و سهولت را برای ما به همراه دارد .
اما اکنون ببینیم که چگونه می توانیم از دانش CSS در نوشتن کد های کوتاه و مختصر و در عین حال قدرت مند با jQuery استفاده کنیم .
مجموعه عناصر در jQuery
زمانی که CSS  به عنوان یک تکنولوژی به منظور جداسازی طراحی از ساختار به دنیای صفحه های اینترنتی معرفی شد می بایست راهی برای اشاره  به اجزای صفحه  ها از طرف فایل CSS نیز معرفی می شد . این امر از طریق انتخاب کننده ها صورت پذیرفت .
شاید کسانی که با XML آشنایی داشته باشند ، انتخاب کننده های CSS را چیزی مانند Xpath فرض کنند . انتخاب کننده های CSS ، در حالی که همان قدرت را دارند ، طوری طراحی شده اند تا برای کار با صفحه HTML مناسب باشند . به علاوه آن که از اختصار بیشتر و خوانایی بالاتری نیز بهره می برند .
برای مثال انتخاب کننده ی زیر ، به تمامی عناصر <a> اشاره دارد که در یک عنصر <p> قرار گرفته اند :

p  a

jQuery نیز از چنین انتخاب کننده هایی استفاده می کند ، البته نه تنها از انتخاب کننده هایی که هم اکنون در CSS موجود می باشند ، بلکه برخی از انتخاب کننده هایی که هنوز در تمام مرور گر ها پشتیبانی نمی شوند ، از جمله شماره از انتخاب کننده های CSS3 استفاده می شود .
برای انتخاب مجموعه ای از عناصر ، یکی از دو ساختار ( Syntax ) زیر استفاده می کنیم :

$(selector)
jQuery(selector)

ممکن است در ابتدا $() کمی نا معمول به نظر آید ، اما اکثر کسانی که با jQuery کار می کنند ، از اختصار و کوتاهی این ساختار ، استفاده می کنند . مثال زیر ، نمونه ای دیگر است که در آن مجموعه ای از تمام لینک هایی که درون تگ <p> قرار دارند را ایجاد می کند :

$("p a")

تابع $() که در حقیقت نام خلاصه ای برای jQuery() می باشد ، نوع خروجی به خصوصی دارد که شامل یک آرایه از اشیایی می شود که انتخاب کننده ، آن ها را برگزیده است . این نوع خروجی این مزیت را دارد که شمار زیادی متد از پیش تعریف شده را داراست که به سادگی قابل اعمال می باشند .
در اصطلاح  برنامه نویسی به چنین توابعی که گروهی از عناصر را جمع می کنند ، Wrapper ، به معنای بسته بند می گویند زیرا تمام عناصر مطلوب را تحت یک شی بسته بندی می کند . در jQuery به آن ها jQuery wrapper و یا wrapper set می گویند که  در این دوره آموزش ما از عنوان مجموعه عناصر انتخاب شده ، استفاده می کنیم . همچنین متد های قابل اعمال بر روی آنها نیز با نام jQuery wrapper methods شناخته می شوند .
در مثال زیر می خواهیم  تمام عناصر <div> ، در صورتی که دارای کلاس notLongForThisWord باشند را مخفی کنیم :

$("div.notLongForThisWord").hide();

یکی از بر جسته ترین مزیت های اکثر متد های قابل اجرا بر روی مجموعه عناصر انتخاب شده ، آن است که خروجی خود آنها یک مجموعه ی دیگر است ، به این معنا که خروجی این متد ، آماده ی اعمال یک متد دیگر است .فرض کنید در مثال بالا پس از مخفی کردن هر div ، می خواستیم کلاس با نام removed به آن بیافزایید. به این منظور می توان کدی مانند زیر نوشت :

$("div.notLongForThisWord").hide().addClass("removed");

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

$("#someElement").html(" I Have added some text to an element");
$("someElement")[0].innetHTML = 
	"I Have added some text to an element";

در مثال فوق از شناسه ی یک عنصر برای انتخاب کننده استفاده کرده ایم . به همین دلیل تنها عنصر ، خروجی انتخاب کننده  خواهد بود . در مثال اول از متد html() مربوط به jQuery استفاده کرده ایم ، که وظیفه آن جای گزینه کردن محتویات یک عنصر است و در مثال دوم ، تنها عملیات انتخاب عنصر ، از طریق jQuery انجام شده است و پس از آن با استفاده از دستورهای جاوا اسکریپت عادی ، جایگزین کردن محتویات عنصر را انجام داده ایم که به این منظور از innerHTML استفاده کرده ایم . دقت کنید که در مثال فوق خروجی انتخاب کننده ، تنها یک عنصر داشت و با قرار دادن اندیس صفر آن را انتخاب کرده ایم . اما اگر بخواهیم همین مثال را برای یک انتخاب کننده با چندین عنصر بنویسیم ، کدی مانند زیر خواهیم داشت ( نوشتن کد مانند حالت دوم توصیه نمی شود )

$("div.fillMeIn").html("I Have added some text to an element");
var element = $("div.fillMeIn");
for (var i=0;i<element.length;i++)
	element[i].innerHTML = "I Have added some text to an element";

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

Capture

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

ارسال یک نظر

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

شما می‌توانید از این تگ‌های HTML استفاده نمائید: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>