• تلفن: ۰۳۴۳۴۲۵۴۱۶۷
  • ۰۹۱۳۸۶۳۰۳۴۱

آموزش جی کوئری – قسمت دوم

  • بدون دیدگاه
  • ۱۶۴ بازدید

سلام

با قسمت دوم آموزش جی کوئری در خدمتتون هستم. تو این قسمت نوشتن یک برنامه ساده داخل جی کوئری رو یاد می گیریم. ساختار استاندارد نوشتن دستورات جی کوئری رو به صورت دقیق بهتون آموزش می دم تا تو قسمت های بعدی بتونید برنامه های کامل تری بنویسید.

کدهای جی کوئری رو کجا بنویسیم؟

برای نوشتن کدهای جی کوئری ۲ راه دارید.

راه اول: نوشتن کدهای جی کوئری داخل یک فایل مجزا با پسوند js و سپس اتصال اون به صفحه. دقت کنید همون جوری که داخل قسمت اول اتصال فایل جی کوئری رو توضیح دادم باید فایل کدهای خودتون رو هم وصل کنید. اگه حجم کدهای شما زیاد بشه بهتره که داخل یک فایل مجزا نوشته بشه تا پروژه مون منظم باشه.

راه دوم: نوشتن کدهای جی کوئری داخل تگ head و سپس تگ script. اگه حجم کدهاتون کمه از این روش استفاده کنید. به مثال زیر دقت کنید:

ساختار اولیه

ساختار اولیه هر دستور جی کوئری به صورت زیر است:

به جای $ از عبارت jquery نیز می تونیم استفاده کنیم.

در قسمت selector باید عنصری که قصد داریم روی اون عملیات انجام بدیم رو انتخاب کنیم.

در قسمت action عملیات انجامی بر روی selector رو می نویسیم.

انتخاب گر یا Selector

اگر selector های CSS رو بلد باشید این قسمت رو هم خیلی سریع می تونید متوجه بشید چون selector های جی کوئری و CSS دقیقا مثل هم هستند.

داخل جی کوئری در ابتدا باید یک عنصر را انتخاب می کنیم، سپس عملیات مورد نظر را روی اون انجام می دیم. انتخاب عناصر داخل JQuery به صورت زیر می تونه باشه:

یک تگ خاص را انتخاب کنید. مثلا همه p های داخل صفحه. برای انتخاب تگ کافیست اسم آن را بنویسید.

عناصری که یک کلاس خاص را دارند. مثلا کلاس test، برای انتخاب یک کلاس خاص باید قبل از نام کلاس یک . (نقطه) قرار دهید.

عنصری که یک ID خاص دارد. به عنوان مثال آیدی header، برای انتخاب یک آیدی خاص باید قبل از نام آیدی یک # قرار دهید.

انتخابگرهای بیشتری هم وجود داره، در صورتی که علاقه دارید بقیه رو هم یاد بگیرید کافیه داخل گوگل جستجو کنید انتخابگرها در جی کوئری.

رویدادها

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

موارد فوق رویدادهای جی کوئری هستند.

افکت ها

حالت های نمایشی که بر روی عناصر اعمال می کنیم افکت نام دارند. مثلا محو شدن، جا به جایی به صورت آکاردئونی، مخفی شدن و …

کل افکت هایی که داخل جی کوئری داریم موارد زیر هستند:

خب حالا وقتشه یه مثال ساده بنویسیم. قصد داریم زمانی که صفحه آماده استفاده شد، تگ های p داخل صفحه مخفی شوند:

در مثال فوق document به عنوان selector تعریف شده و ready رویداد صفحه هست. یعنی زمانی که صفحه جاری بعد از لود شدن قابل استفاده شد.

سپس یک تابع داخل اون اجرا شده، که داخل این تابع p انتخاب شده و افکت hide روی اون اجرا شده. به همین سادگی!

پیشنهاد می کنم رویدادها و افکت های مختلف رو تست کنید تا هم یه تمرین انجام داده باشید هم باید ساختار کلی جی کوئری آشنا بشید.

تو قسمت بعد کار با HTML در جی کوئری رو توضیح میدم. ممنون از توجه تون.

mahdavi1456
منشتر شده در ۱۳۹۷/۰۴/۱۰
۱۶۴
آموزش JQuery, آموزش برنامه نویسی

شما هم می توانید دیدگاه خود را ثبت کنید

ورود به حساب کاربری

بازیابی رمز عبور

ایجاد حساب کاربری جدید