مثال ها (Examples)
این صفحه مثل یک زمین بازی است؛ پر از مثال های jQuery. هر لینک یک مثال کوچک است که می توانی در ادیتور W3Schools باز کنی و نتیجه را همان لحظه ببینی.
چطور از صفحه مثال ها در jQuery استفاده کنی؟
این صفحه فقط لیست مثال ها را نشان می دهد. هر دکمه یک مثال آماده است. روی دکمه کلیک می کنی، ادیتور باز می شود و کد jQuery را مستقیم اجرا می کنی؛ درست مثل وقتی در بازی روی یک مرحله جدید می روی.
- یک بخش را انتخاب کن؛ مثلا Selectors یا Events.
- روی یکی از لینک ها کلیک کن تا ادیتور باز شود.
- کد را کمی تغییر بده و نتیجه را ببین.
نکته: پیشنهاد خوب این است که این صفحه را به عنوان مرکز مثال ها در jQuery ذخیره کنی تا همیشه برای تمرین سریع برگردی.
تمرین انتخاب گرها (Selectors)
بخش اول برای تمرین انتخاب گرهاست. انتخاب گر (Selector) روشی است برای پیدا کردن عناصر HTML، مثل این که بگویی «همه پاراگراف ها» یا «عنصری با id=test».
در لیست Selectors مثال هایی مثل $("p").hide() می بینی. یعنی «همه تگ های <p> را مخفی کن». همچنین مثال هایی برای مخفی کردن بر اساس id، کلاس و عنصر فعلی وجود دارد.
یک دکمه مهم بالای صفحه هم هست: ابزار تست انتخاب گرها در W3Schools. با این ابزار می توانی انتخاب گرهای مختلف را روی یک صفحه نمونه امتحان کنی.
- لینک Selector Tester را باز کن.
- یک انتخاب گر ساده مثل
pبنویس. - انتخاب گر را عوض کن و عناصر مختلف را امتحان کن.
رویدادها (Events) و واکنش به کاربر
بخش Events درباره واکنش نشان دادن به کارهای کاربر است. رویداد (Event) یعنی اتفاقی مثل کلیک، دوبار کلیک، رفتن ماوس روی عنصر یا فوکوس گرفتن یک input.
در این بخش لینک مثال های click()، dblclick()، mouseenter()، mouseleave()، mousedown()، mouseup()، hover() و focus()/blur() را می بینی.
هر مثال نشان می دهد وقتی رویداد اتفاق می افتد، چه تغییری روی صفحه اجرا می شود؛ مثلا رنگ عوض شود یا متن تغییر کند.
- یکی از مثال های Events را باز کن.
- روی عنصر مشخص شده کلیک کن یا ماوس را حرکت بده.
- کد داخل تابع رویداد را کمی تغییر بده.
افکت های نمایشی: Hide/Show، Fade و Slide
مخفی و نمایش (Hide/Show)
در بخش Hide/Show چند مثال برای مخفی کردن و نمایش دوباره عناصر داری. متدهای hide()، show() و toggle() کمک می کنند ظاهر عناصر را با یک دکمه عوض کنی؛ مثل روشن و خاموش کردن چراغ.
افکت محو شدن (Fade)
در بخش Fade، مثال های fadeIn()، fadeOut()، fadeToggle() و fadeTo() را می بینی. این متدها عناصر را به آرامی ظاهر یا محو می کنند و صفحه را نرم تر و زیباتر نشان می دهند.
افکت کشویی (Slide)
در بخش Slide، مثال های slideDown()، slideUp() و slideToggle() قرار دارند. این افکت ها شبیه باز و بسته شدن منوی موبایل هستند؛ محتوا از بالا به پایین یا بالعکس حرکت می کند.
- یک مثال Hide یا Fade یا Slide را باز کن.
- سرعت انیمیشن یا عنصر هدف را تغییر بده.
- نتیجه را دوباره تست کن.
انیمیشن ها و توقف آن ها
در بخش Animate، چند مثال از animate() داری که با آن می توان چند خصوصیت CSS را با هم تغییر داد، از مقادیر نسبی استفاده کرد یا چند انیمیشن را پشت سر هم اجرا کرد.
بخش Stop Animations هم مثال هایی از متد stop() دارد. با آن می توانی انیمیشن های در حال اجرا را متوقف کنی؛ مثلا اگر کاربر حوصله ادامه حرکت را نداشت.
کار با متن، HTML، Attributes و عناصر
چند بخش بعدی روی تغییر محتوا تمرکز دارند. در قسمت «Get Content and Attributes» مثال هایی برای گرفتن متن، HTML داخلی و مقدار input با متدهای text()، html() و val() داری.
در بخش «Set Content and Attributes» مثال ها نشان می دهند چطور همین متدها را برای تغییر محتوا استفاده کنی. همچنین متد attr() برای گرفتن یا تنظیم خصوصیت ها مثل href لینک یا src تصویر استفاده می شود.
بخش Add و Remove هم برای اضافه کردن، چسباندن، خالی کردن یا حذف عناصر است؛ با متدهایی مثل append()، prepend()، after()، remove() و empty().
کلاس های CSS، متد css() و ابعاد
در قسمت کلاس ها، مثال های addClass()، removeClass() و toggleClass() را می بینی. این متدها کمک می کنند با اضافه یا حذف کلاس، ظاهر عنصر را عوض کنی.
بخش css() برای گرفتن یا تنظیم مستقیم خصوصیت های CSS است. مثال ها نشان می دهند چطور یک خصوصیت یا چند خصوصیت را با هم تنظیم کنی.
بخش Dimensions هم درباره متدهایی مثل width()، height()، innerWidth()، outerWidth() و نسخه های true آن است. این متدها اندازه عناصر را همراه با padding یا border می سنجند.
پیمایش (Traversing) بین والدها، فرزندان و خواهر–برادرها
چند گروه مثال برای پیمایش عناصر داری. Traversing یعنی حرکت روی درخت DOM، مثلا از یک عنصر به والد، فرزند یا خواهر–برادرش رفتن.
در بخش Ancestors مثال های parent()، parents() و parentsUntil() قرار دارند. در بخش Descendants هم children() و find() را می بینی.
بخش Siblings درباره مثال های siblings()، next()، nextAll() و nextUntil() است. بخش Traversing Filtering نیز فیلتر کردن مجموعه ها با متدهای first()، last()، eq()، filter() و not() را نشان می دهد.
فیلتر کردن داده ها و متدهای AJAX
در انتهای صفحه چند گروه مثال مهم دیگر هست. بخش Filters همان مثال هایی است که جدول، لیست یا هر چیزی را بر اساس متن ورودی فیلتر می کنند؛ این بخش مربوط به صفحه فیلترها (Filters) است.
همچنین گروه مثال های AJAX را می بینی. بخش load() برای بارگذاری بخشی از یک صفحه در div است و در صفحه بارگذاری با AJAX (Load) توضیح داده شده است.
بخش get() و post() هم مثال هایی برای ارسال درخواست به سرور با متدهای GET و POST دارد و مربوط به صفحه متدهای Get/Post (Get/Post) است.
جمع بندی سریع
- این صفحه یک فهرست بزرگ از مثال های jQuery است.
- هر لینک یک مثال آماده در ادیتور آنلاین W3Schools باز می کند.
- مثال ها موضوعاتی مثل Selectors، Events، افکت ها و AJAX را پوشش می دهند.
- صفحه مثال ها در jQuery بهترین نقطه شروع برای تمرین روزانه است.
- برای توضیح تئوری هر بخش، از لینک های «explained» کنار هر گروه استفاده کن.