خوب، jQuery از پس چه کارهایی بر می‌آید؟ البته بهتر است بگوییم از پس چه کارهایی بر نمی‌آید! jQuery این امتیاز را برای کاربر فراهم می‌کند که بدون نوشتن کدهای طولانی و عجیب و غریب JavaScript کارهای شگفت‌انگیز طراحی را به انجام برساند. در این فصل کوتاه تنها مواردی را بیان می‌کنیم که پیش‌زمینه‌ای برای jQuery خواهند بود.
اگر بخواهیم کارکرد jQuery را ساده توضیح دهیم به شکل زیر در می‌آید:
jQuery به مرورگر شما می‌گوید:
- این آیتم/آیتم‌ها را درون صفحه پیدا کن
- حالا این عملیات را بر روی آن پیاده‌سازی کن
تمامی این کار‌ها را با استفاده از همان دستوری که درCSS برای انتخاب المان‌ها و استایل‌دهی بر روی آن‌ها استفاده کردیم انجام خواهد داد؛ به جدول 11.1 توجه کنید:
| تمامی تگ‌های h3 درون صفحه را نامرئی می‌کند | $("h3").hide(); |
| به آرامی تمامی پاراگراف‌های موجود در صفحه را تا 50% مات می‌کند | $("p").fadeTo('slow',0.5); |
| المان‌های با id به مقدار navigation را نمایش می‌دهد (با فرض بر اینکه در گذشته به وسیله script دیگر و یا خود CSS آن‌ها را نامرئی کرده باشیم Display: none) | $("#navigation").show(); |
| هر چیزی که در کلاسی به مقدار footnotes تعریف شده باشد، نامرئی خواهد کرد | $(".footnotes").hide(); |
جدول 11.1: نمونه‌هایی از عمل‌کرد ساده و تاثیرگذار jQuery
معمولا این موارد در نتیجه رویداد‌های دیگر رخ می‌دهند_برای مثال اگر کاربری که از سایت شما استفاده می‌کند بر روی یک لینک کلیک کند، ماوس خود را بر روی یک آیتم موجود در سایت نگاه دارد یا اینکه بر روی یک بخش کلیک کند این موارد پیش می‌آیند.
به مثال‌های دیگری که در جدول 11.2 آورده‌ایم توجه کنید.
| زمانی که یک تگ input مورد توجه قرار می‌گیرد مرورگر کاربر باید محتویات این input را انتخاب کند (برای مثال وقتی بر روی نوشته‌های یک تگ input کلیک می‌کنید محتویات آن مارک می‌شوند تا بتوانید بدون فشردن کلید delete این بخش را دوباره تایپ نمایید) | $("input").focus(function(){ $(this).select(); }); |
| زمانی که بر روی المانی با خصوصیت id به مقدار confirm کلیک می‌کنید (به احتمال زیاد یک دکمه)، مرورگر شما باید این المان را با خصوصیت id به مقدار ConfirmationMessage نمایش دهد | $("#confirm").click(function(){ $("#confirmationMessage").show(); }); |
| زمانی که ماوس کاربر بر روی بخشی از صفحه با class به مقدار helpIcon قرار می‌گیرد مرورگر باید این المان را با خصوصیت id به مقدارhelpTips نمایش دهد (این بخش را به آرامی و با سرعت معمولی مرئی می‌کند) | $(".helpIcon").mouseover(function(){ $("#helpTips").fadeTo(‘medium’,1); }); |
جدول 11.2: گزاره‌هایی که شامل موارد حرفه‌ای تر jQuery هستند
راه‌های زیادی برای انجام یک کار وجود دارد. این راه‌ها به eventsهای JavaScript معروف هستند، برخی از event های معروفی که در jQuery از آن‌ها استفاده خواهید کرد در پایین آورده شده است:
- .mouseover()
- .mouseout()
- .click()
- .focus()
- .submit()
کارهایی که می‌توانید با این eventها انجام دهید گوناگونی زیادی دارند، اما در ادامه مهم‌ترین آن‌ها را برای شما فهرست می‌کنیم (این event ها بیشتر در زمینه افکت‌های ظاهری هستند):
- .hide()
- .show()
- .fadeIn()
- .fadeOut()
- .fadeTo()
- .slideUp()
- .slideDown()
برای بررسی دقیقا تمامی این event ها به اندازه یک کتاب کامل دیگر مطلب وجود دارد. خوش‌بختانه یک کتاب عالی در رابطه با jQuery وجود دارد: jQuery: Novice to Ninja . اگر با خواندن این فصل که آشنایی مختصری در رابطه با jQuery به شما می‌دهد دوست داشتید در این زمینه بیشتر بدانید حتما کتاب معرفی شده را تهیه کنید؛ کتابی دقیق و کامل که هرآن‌چه را ممکن است در مورد jQuery لازم داشته باشید به شما منتقل می‌کند. توجه کنید که این فصل تنها شروع داستان است!
