سوالی دارید؟

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

درس نهم : انتخاب عناصر در jQuery

jQuery 3

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

انتخاب عناصر برای ایجاد تغییر

اولین اقدام برای استفاده از هرگونه تابع jQuery ( در دروس قبلی با متد هایی با نام  wrapped method آشنا شدید ) مشخص و انتخاب کردن عناصری است که می خواهیم آن تابع بر روی آن عناصر اعمال شود . کاهی اوقات انتخاب این مجموعه از عناصر با یک توضیح ساده مشخص می شود ، برای مثال : تمام عناصر پاراگراف موجود در صفحه ” اما گاهی اوقات مشخص کردن این مجموعه نیاز به توضیحات پیچیده تری دارد ، برای مثال تمام عناصر لیست در صفحه که کلاس listElement را دارا می باشد و لینکی دارد که اولین عنصر آن لیست می باشد .
خوشبختانه jQuery یک مکانیزم بسیار قوی و قدرتمند را ارائه کرده است که انتخاب هر عنصری از صفحه به سادگی امکان پذیر می سازد .انتخاب کننده هایjQuery از ساختار مربوط به CSS استفاده می کنند ، بنابراین ممکن است هم اکنون نیز شما با تعداد زیادی از انها آشنا باشید و در ادامه شمار بیشتر و قدرتمند تری را خواهید آموخت .
اگر می خواهید ادامه آموزش jQuery را مطالعه کنید ، ابتدا در این مطلب سورس کد های مربوط به این دوره آموزشی را دانلود کنید .
بعد از اینکه سورس کد ها را دانلود کردید ، یک مثال آماده مختص به این مبحث ، در قالب یک صفحه اینترنتی ، را در کنار سورس کد ها قرار دارد .
این فایل در آدرس chapter2/lab.selectors.html قابل دسترسی می باشد . این مثال از پیش آماده و کامل ، که ما ان را صفحه کارگاهی می نامیم ، این امکان را به شما می دهد تا با وارد کردن یک رشته ، به عنوان پارامتر انتخاب کننده ، در همان زمان عنصر انتخاب شده در صفحه را رویت کنید . زمانی که این صفحه را اجرا می کنید تصویری همانند تصویر زیر مشاهده خواهید کرد ( اگر عناصر بر روی صفحه مرتب چیده نشده اند ، مرورگر را در حداکثر اندازه قرار دهید )

jQuery 1

اگر می خواهید به درستی فایل ها مشاهده کنید باید localhost ( IIS ) را بر روی سیستم خود فعال کنید . آموزش فعال سازی IIS را در این پست بخوانید .
این پنجره سه قسمت مجزا دارد .در پنجره سمت چپ یک textbox و یک دکمه دیده می شود که با وارد کردن یک انتخاب کننده در Textbox و فشردن دکمه ، عنصر مورد نظر در پنجره ی سمت راست انتخاب می شود. برای شروع در textbox عبارت li را بنویسید و دکمه را کلیک کنید .
با فشردن این دکمه تمام عناصر در پنجره سمت راست شرایط این انتخاب کننده را داشته باشند ، انتخاب می شوند و هم چنین به کلاسی با نام wrappedElements افزوده می شود . در این صفحه یک CSS نیز تعریف شده است که تک تک اعضای کلاس wrappedElements را میان یک کادر قرمز رنگ با رنگ پس زمینه صورتی قرار می دهد تا این عناصر از سایر عناصر صفحه متمایز شوند . با نوشتن عبارت li و فشردن دکمه ی Apply ، با تصویری مشابه تصویر زیر مواجه می شوید . دقت کنید افزون بر موارد انتخاب شده در پنجره سمت راست ، اطلاعاتی نیز در مورد این دستور انتخاب کننده و موارد انتخاب شده در پنجره  ی سمت چپ قابل مشاهده است .

jQuery 2

ارسال یک نظر

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

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