ترکیبی ‌‌اعجاب ‌‌انگیز

در ادامه بحث پوششی که jQuery به عناصر یک صفحه می‌دهد که در بخش قبل به قسمت‌هایی از آن اشاره کردیم ، اکنون به توضیحات مفصل تری در‌این‌باره می‌پردازیم. طبق مثالی که قبلا به آن اشاره کردیم با استفاده از دستور("p a")$می‌توان به کلیه عناصر لینک که در عنصر قرار دارند، دسترسی پیدا کرد. به این خاصیت jQuery ، پوشش jQuery می‌گویند.
کد خبر: ۱۷۳۰۶۳

برای مثال می‌خواهیم عنصر <div> که با کلاس hiden  در صفحه قرار داده شده است را از صفحه محو کنیمjQuery . با این دستور این کار را انجام می‌دهد:

("div.hiden").fadeOut();$

یکی از خصوصیات قابل توجهی که در اکثر روش‌های یاد شده می‌توان از آن استفاده کرد این است که دستورات jQuery   قابل تعمیم هستند، به این معنی که وقتی ما از تابع (fadeOut)  استفاده می‌کنیم تا عنصرdiv  مورد نظر را از صفحه محو کنیم.

بعد از انجام این کار ، برنامه قادر خواهد بود تا باز هم بر روی عنصر مورد نظر عملیات انجام دهد؛ برای مثال می‌خواهیم بعد از انجام عملیات محو‌سازی عنصر  div ، به آن کلاس خاصی را نسبت دهیم:

("div.hiden").fadeOut().$
addClass("removed");

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

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

به مثال زیر توجه کنید:

("someElement").html$
"your extra text");)
یا
("someElement")]0[.innerHTML$
=" your extra text");

به این دلیل که در این مثال ما از انتخابگر  ID  استفاده کرده‌ایم، تنها یک عنصر شامل حال این انتخابگر می‌شود. روش اول از تابع (html)  که در  jQuery  تعریف شده است استفاده می‌کند که با استفاده از خاصیت DOM  محتویات عنصر را تغییر می‌دهد.

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

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

("p:even");$

به کمک این انتخابگر می‌توانید به کلیه عناصر<p> به صورت یک در میان دسترسی داشته باشید.
;("(1("tr:nth-child($

به کمک این انتخابگر می‌توانید به اولین ردیف از هر جدول که در صفحه قرار دارد، دسترسی داشته باشید.
("body«div");$

به کمک این انتخابگر می‌توانید به کلیه عنصر‌های <div> که در بخش<body>قرار دارند دسترسی داشته باشید.
("a]href$=pdf[");$

به کمک این انتخابگر می‌توانید به لینک‌های که به فایل‌هایpdf  ختم می‌شوند، دسترسی داشته باشید.
("body « div:has(a)")$

و در نهایت با کمک این انتخابگر می‌توانید به تمامی لینک‌هایی که در عنصر <div> و در بخش <body> قرار دارند دسترسی داشته باشید.

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

 پویا سلیمی‌

newsQrCode
ارسال نظرات در انتظار بررسی: ۰ انتشار یافته: ۰

نیازمندی ها