سوالی دارید؟

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

درس دوازدهم : استفاده از انتخاب کننده های فرزند ، شمول و صفت

jquery lesson 12-3 Top

انتخاب کننده های فرزند ( Child ) ، شمول ( Container ) و صفت ( Attribute )
برای انتخاب کننده های پیشرفته تر jQuery از جدیدترین مرورگر هایی که CSS را پشتیبانی می کنند ، استفاده می کند که می توان به Mozilla Firefox ، IE7-8-9 ، Safari و یا Chrome و دیگر مرور گر های مدرن اشاره کرد . این انتخاب کننده های پیشرفته شما را قادر می سازند تا مستقیما فرزند یک شی را انتخاب کنید و یا از ساختار سلسله مراتبی اشیا صفحه ، مستقیما به شی مورد نظر دسترسی داشته باشید و یا حتی تمام عناصری که یک صفت خاص را شامل می شوند ، انتخاب کنید . گاهی اوقات انتخاب فرزندی از یک شی برای ما مطلوب است . برای مثال ممکن است ما به چند مورد از یک لیست احتیاج داشته باشیم ، نه یک زیر مجموعه ای از آن لیست . به قطعه کد زیر که از صفحه تمرینات این دوره آموزشی برداشته شده است دقت کنید :



<ul class="myList">

<li><a href="http://cmsystem.ir">Programming Education</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 Supports

<ul>

<li>Custom Selectors</li>


<li>Form Selectors</li>

		</ul>

	</li>

</ul>



حال فرض کنید از این ساختار ، لینک وب سایت cmsystem مد نظر ماست و این کار بدون انتخاب سایر لینک های مربوط به css مطلوب است . اگر بخواهیم از دستور های انتخاب کننده ی CSS ، استفاده کنیم ، دستور به شکل ul.myList li a خواهیم داشت . اما متاسفانه این دستور تمام لینک های این ساختار را بر می گرداند ، زیرا همه ی آنها لینک هایی در عنصر li می باشند . با تایپ این دستور و فشردن دکمه apply در صفحه تمرینات این دوره تصویری همانند شکل زیر خواهید داشت .

تمام لینک های موجود در ساختار li توسط دستور ul.myList li a انتخاب می شوند .

تمام لینک های موجود در ساختار li توسط دستور ul.myList li a انتخاب می شوند .

راه مناسب برای انتخاب چنین حالتی استفاده از انتخاب فرزند می باشد که به این منظور والد ( parent ) و فرزند ، به وسیله ی یک کاراکتر < از یکدیگر جدا می شوند

P > a

این دستور تنها لینک هایی را بر می گرداند که فرزند مستقیم یک عنصر <p> می باشند . بنابراین اگر در یک <p> ، لینکی در یک عنصر <span> معرفی شده باشد ، این لینک انتخاب نمی شود ، چرا که فرزند مستقیم <p> به حساب نمی آید . در مورد مثال لینک های موجود در لیست ، می توانیم از دستور زیر به منظور انتخاب لینک مورد نظرمان استفاده می کنیم :

Ul.myList > li > a

دستور فوق از میان عناصر <ul> ، عنصری را که دارای کلاس myList می باشد ، انتخاب می کند و پس از آن ، لینک هایی که فرزند مستقیم گزینه های آن هستند ، برگردانده می شوند . همان طور که در شکل زیر دیده می شود لینک های زیر مجموعه ی عنصر <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>


موردی که یک لینک با اشاره به وب سایت خارجی را از سایر لینک ها متمایز می سازد ، شروع شدن مقدار صفت href آن ، با http:// می باشد . انتخاب لینک هایی که مقدار صفت href آن ها با http:// آغاز می شوند ، به سهولت و از طریق دستور زیر صورت می پذیرد :

a[href^='http://']

این دستور باعث انتخاب تمام لینک هایی که مقدار صفت href آن ها دقیقا با http:// آغاز می شود ، می گردد . علامت ^ موجب می شود تا بررسی ، لزوما از ابتدای مقدار صورت پذیرد و از ان جا که استفاده از این کاراکتر در سایر عبارات منظم به همین منظور صورت می پذیرد ، به ذهن سپردن آن دشوار نخواهد بود .

به صفحه کارگاهی بر گردید و بخش مربوط به chapter2 را کلیک کنید و سپس لینک lab.selectors.html را کلیک کنید . اگر دستور بالا را در قسمت مخصوص وارد کردن کد ها وارد کنید و دکمه apply را بفشارید مشاهده خواهید کرد که تنها لینک مربوط به وب سایت jQuery انتخاب می شود .

مثال :

Input[type='text']

این انتخاب کننده تمام عناصر input که نوع آنها text می باشد را انتخاب می کند .

Div[title^='my']

عناصر div که مقدار title آنها با رشته my آغاز می شود، هدف این انتخاب کننده خواهد بود .

a[href$='.pdf']

این دستور کاربرد بسیاری برای شناسایی لینک های اشاره کننده به فایل pdf دارد .

لیستی از انتخاب کننده های ابتدایی CSS که در jQuery نیز قابل استفاده می باشند .

jquery lesson 12-3 copy

تمرین :

با استفاده از جدول بالاو اطلاعات تا این قسمت دوره آموزشی و همچنین صفحه کارگاهی CHAPTER2 زمانی را صرف انتخاب کردن عناصر مختلف صفحه کنید و سعی کنید عنصر های در نظر گرفته شده را انتخاب کنید . برای مثال عنصر <span> که دارای مقدار Hello و یا Goodbye می باشد . ( به این منظوربه یک ترکیب از انتخاب کننده ها نیاز دارید . )

ارسال یک نظر

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

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