آموزش جی کوئری درس 9: استفاده از دستور this در جی کوئری
امروز می خوایم با همدیگه یکم شیطونی کنیم و یه بازی عجیب غریب با جی کوئری انجام بدیم
در این بازی ما 4 تا تگ div داریم که با css اونارو روی همدیگه انداخته ایم. (مشابه تصویر زیر)

مقالات آموزشی دانشجویی برنامه نویسی و الکترونیک و شبکه
برای این کار ابتدا باید داخل تگ body صفحمون 4 تا تگ div اضافه کنیم و بهشون آی دی بدیم:


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

همانطور که می دانید ، برای اینکه بتونیم چند تا تگ رو روی همدیگه بندازیم باید از دستور position که یکی از دستورات پر کاربرد css است استفاده کنیم.
در صورتی که css تون ضعیفه پیشنهاد می کنم ابتدا این کتاب آموزش css رو بخونین؛ سپس مجموعه مقالات آموزش تکنیک های css بنده رو مطالعه نمایید.

کدهای استایل من اینطوریه:


استایلی که به body دادم زیاد مهم نیست و فقط برای اینه که div هام وسط صفحه نمایش داده بشن و در کل چیز خاصی نیست.
برای اینکه ترتیب قرار گرفتن تگ هام دقیقا بر اساس ترتیب نوشتن تگ های div ام باشه ، z-index همه رو یکسان مقدار دهی کرده ام، بدین ترتیب تگی که آخر باشه روی همه قرار می گیره و تگی که اول از همه نوشته شده باشه زیر همه قرار می گیره. (دقت کنین که در html ترتیب نوشتن تگ ها بسیار مهمه و بعنوان مثال در اینجا اگر تگ div2 رو آخر می نوشتم ، روی همه قرار می گرفت ... پس همیشه حین طراحی قالب پروژه هاتون این نکته مهم رو در نظر داشته باشید)

حال می خوایم با کمک جی کوئری کاری کنیم که روی هر تگی که کلیک شد ، اون تگ روی بقیه تگ ها قرار بگیره و درونش کد رنگشو نشون بده.
برای این کار چندین روش وجود داره که بنده ساده ترینشونو میگم:

نکته: برای اینکه یک تگ روی بقیه قرار بگیره ، کافیه که مقدار z-index اون بیشتر از بقیه باشه.
پس داریم:


کد بالا چند نکته دارد:
  1. ابتدا برای رویداد کلیک همه تگ های div یک تابع می نویسیم. این تابع هر بار که روی یک div کلیک شود اجرا می گردد.
  2. درون تابعی که نوشتیم به کمک دستور this می توانیم به تگی که موجب اجرا شدن تابعمان شده است دست یابیم که در اینجا همان تگی است که رویش کلیک شده است.
  3. ابتدا خصوصیت z-index همه تگ هایمان را به حالت اولیه بر می گردانیم و سپس مقدار خصوصیت z-index تگی که رویش کلیک شده است را به یک عدد بیشتر (مثلا 2) تغییر می دهیم.
  4. مقدار متن داخل همه تگ ها را نیز با کمک دستور ()html خالی می کنیم.
  5. در آموزش قبلی دستور css را آموزش دادیم و برای تغییر دادن استایل تگ ها از آن بهره بردیم. اگر این دستور را با یک ورودی استفاده نماییم ، می توانیم استایل های مختلف تگ مورد نظرمان را بخوانیم (گرفتن اطلاعات استایل یک تگ)
  6. برای ساده تر شدن کدهایمان ، ابتدا یک متغیر به کمک دستور کلیدی var ساخته ایم و سپس مقدار خصوصیت background-color تگی که رویش کلیک شده است را درون متغیرمان ریخته ایم
  7. برای نمایش کد رنگ ، از دستور جی کوئری ()html کمک گرفته ایم و بعنوان ورودی متنی که می خواهیم درون تگ نمایش یابد را به آن داده ایم که در اینجا همان متغیرمان است.
امیدوارم این بازی رو بسازید و ازش لذت ببرید.
موفق باشید.
سایت نت نیک = آموزش به زبان ساده ساده ساده

نوشته شده در تاریخ سه شنبه 26 فروردین 1393    | توسط: ح.م    | طبقه بندی: آموزش jQuery،     | نظرات()