انتخاب عناصر‌با استفاده ازتکنیک‌هایCSS

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

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

<ul class="myList">
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>
فرض کنید که ما در فهرست زیر می‌خواهیم به عنصری دسترسی داشته باشیم که لینک باشد و به صفحه‌ای از سایتی اشاره کند و همچنین نمی خواهیم به لینک‌های داخلی سایت خودمان دسترسی داشته باشیم و روی آنها عملیاتی انجام دهیم.

به نظر شما راه‌حل این مساله چیست؟ شاید در ابتدا بخواهید با استفاده از روش‌های ابتدایی که در بخش‌های قبل به آن اشاره شد این کار را انجام دهید ، مثلا راه‌حل مساله را استفاده از انتخابگر ul.myList li a  بدانید ، اما متاسفانه استفاده از این انتخابگر باعث می‌شود که عملیات مورد نظر شما  روی تمامی عناصر لینک موجود در این فهرست عمل کند! می‌توانید نتیجه استفاده از این انتخابگر را در آزمایشگاه انتخابگر‌هایی که در بخش قبل معرفی شد مشاهده کنید.

فلش شماره یک به دستوری که وارد کرده اید اشاره می‌کند و فلش شماره دو به عناصری که انتخاب می شوند. این مسئله توسط روش‌های نوینی که به آنها اشاره شد قابل حل است ، با استفاده از انتخابگر‌های والد و فرزند می‌توان این کار را انجام داد. در این روش عنصری که والد است و فرزندش که در داخل عنصر اول قرار دارند با استفاده از اشاره گر  (<)  قابل دسترسی خواهد بود ، به عنوان مثال اگر از  دستور p<a استفاده کنید عناصر لینکی که به صورت مستقیم در یک پاراگراف قرار دارند در دسترس شما قرار خواهد گرفت و اگر عنصری لینکی در داخل پاراگراف وجود داشته باشد که در داخل عنصری دیگر مثل < >span قرار گرفته باشد ، انتخاب نخواهد شد.
با استفاده از این روش ، انتخابگر  ul.myList <li<a  باعث می شود که ما به هدفمان برسیم ، کافی است این دستور را در آزمایشگاه انتخابگر‌ها وارد کنید و نتیجه را ببینید. در این روش فقط لینک‌های انتخاب می شوند که در عنصر li  و لیستی که کلاس  myList  دارد باشند.

روش دیگر استفاده از انتخابگر‌هایی است که بر روی عناصری که ویژگی خاصی دارند عمل می‌کند و در موارد مورد نیاز بسیار قدرتمند تر از روش‌های دیگر است. حتما می‌دانید که استفاده از رشته  http://  باعث می شود که لینک به خارج از سایت اصلی ایجاد شود ، ما می‌توانیم با استفاده از انتخابگر  ]ahref8=http://[  به تمامی عناصر لینکی که به خارج از سایت اشاره می‌کنند دسترسی پیدا کنیم.

برای مثال به آزمایشگاه انتخابگر‌ها بازگردید و انتخابگرa]href8=http://[  را آزمایش کنید و نتیجه را مشاهده کنید. روش‌های مشابه دیگری نیز برای دسترسی به سایر عناصر با استفاده انتخابگر‌های پیشرفته وجود دارد که می‌توانید در وب سایت www.jquery.com  آنها را مشاهده کنید.

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

پویا سلیمی‌