تبلیغات
مقالات آموزشی برنامه نویسی و شبکه - مطالب ابر اموزش jquery

آموزش جی کوئری به زبان ساده_درس نهم

آموزش جی کوئری درس 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،     | نظرات()


آموزش جی کوئری به زبان ساده_درس هفتم

آموزش جی کوئری درس 7: حرکت عناصر صفحه با جی کوئری


تابع animate یکی از جذاب ترین توابع جی کوئری است.

کار این تابع اینه که 3 تا ورودی می گیره که اولی یکی از خصوصیات css تگ مورد نظرتونه و دومی مقدار نهایی خصوصیت css است و در نهایت سرعت رسیدن به مقدار نهایی رو مشخص می کنین.

مثلا:
با فرض اینکه ارتفاع تگ من 200 پیکسل باشه :

در کد بالا من مشخص کرده ام که ارتفاع تگ مورد نظرمو کم کم به مقدار 0 برسونه ، بدین صورت کد من مثل تابع slideUp عمل می کنه


حال اگر کدمو به شکل زیر تغییر بدم :


دستور بالا عملکردی متفاوت خواهد داشت ، یعنی کم کم ارتفاع تگ منو از مقدار اصلیش (که مثلا اینجا 200 پیکسله) به مقدار 300 پیکسل می رسونه.

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

نوشته شده در تاریخ جمعه 14 تیر 1392    | توسط: ح.م    | طبقه بندی: آموزش jQuery،     | نظرات()


آموزش جی کوئری به زبان ساده_درس ششم

آموزش جی کوئری درس 6 : جمع و باز کردن یک عنصر (تگ) با جی کوئری:

* برای این کار از توابع slideUp و slideDown استفاده میشه

** نکته خیلی مهم : دقت کنید که جی کوئری به حروف بزرگ و کوچک حساسه ، پس توابع رو دقیقا بصورتی که بنده می نویسم باید بنویسید (به بزرگی و کوچکی حروف استفاده شده در اسامی توابع دقت کنید)



این دستور تگ مورد نظر رو جمع می کنه (ارتفاعش هی کم و کمتر میشه) تا جایی که کاملا تگ غیب بشه. (ارتفاعش 0 میشه)



این دستور تگی که غیب هست (باید یک استایل display:none بهش بدین که در حالت عادی که صفحه لود میشه غیب باشه) رو کم کم باز می کنه (ارتفاعش از 0 هی زیاد میشه) تا جایی که تگ کامل باز میشه (ارتفاعش به ارتفاع خود تگ برسه، یعنی چیزی که توی استایل تگ ست کردین)

عددی که در ورودی  به این توابع میدم (مقدار 2000) زمان به میلی ثانیه است ، بدین معنی که کل عملیات باز شدن باید 2000 میلی ثانیه طول بکشه، یعنی در اینجا کلا 2 ثانیه طول می کشه که کل تگم باز بشه.
به جای دادن عدد می تونین از عبارت هایی مثل fast و slow و normal هم استفاده کنین.

سایت آموزشی نت نیک

نت نیک : آموزش انواع تکنولوژی ها به زبانی کاملا ساده

نوشته شده در تاریخ جمعه 14 تیر 1392    | توسط: ح.م    | طبقه بندی: آموزش jQuery،     | نظرات()


آموزش جی کوئری به زبان ساده_درس پنجم

آموزش جی کوئری درس 5: محو کردن عناصر با جی کوئری!

* محو کردن عناصر با توابع fadeOut و آشکار کردنش با تابع fadeIn :

برای اینکه تگتون کم کم کمرنگ بشه و به قول خودمونی ترش محو بشه :



=>> برای اینکه بهتر کدهای منو درک کنین ، کد کل صفحه تستم رو اینجا میزارم:


دقت کنین که من در اینجا کد استایل display:none رو به تگم اضافه کرد هام که در حالت عادی که صفحه لود میشه ، تگ من مخفی باشه .

توابع fadeIn و fadeOut ورودی هایی مانند slow و fast هم می تونن بگیرن. (تقریبا اکثر توابع جی کوئری مقادیر fast و slow و مقدار عددی به ثانیه می تونن بگیرن)

سایت نت نیک

* اجرای یک دستور پس از اتمام عملیات دستورات fadeIn و fadeOut :

این دستورات این امکان رو دارند که پس از اینکه کارشون تموم شد ، یک تابعی رو اجرا کنن.


نوشته شده در تاریخ جمعه 14 تیر 1392    | توسط: ح.م    | طبقه بندی: آموزش jQuery،     | نظرات()


آموزش جی کوئری به زبان ساده_درس سوم

آموزش جی کوئری درس 3 : ارور ! تگ مورد نظر پیدا نشد!

همانطور که می دانید ، صفحات وب از بالا به پایین لود می شوند و از اونجایی که ما همیشه طبق استاندارد w3 (سازمان استاندارد سازی وب) کد های جاوا اسکریپت (دستورات جی کوئری از جاو ااسکریپت مشتق می شوند) رو داخل تگ head می نویسیم ، کدهای جاوا اسکریپت ما قبل از لود شدن تگ های html صفحه اجرا میشن.

بنابراین اگر شما کدی نوشته باشین که یه بلایی سر یه تگ html بیاره ، با اروری مواجه خواهید شد که معنیش اینه که تگ مورد نظر رو پیدا نکرده!

خوب بنده خدا راست هم میگه ، چون رمانی که کد جی کوئری شما داره اجرا میشه ، تگ html ای در کار نیست که بخواد یه بلایی سرش بیاره!
سایت نت نیک
در جاوا اسکریپت هم همین مشکل رو داریم که در اونجا این کارو می کردیم:


در جی کوئری ما این کارو می کنیم :


نوشته شده در تاریخ جمعه 14 تیر 1392    | توسط: ح.م    | طبقه بندی: آموزش jQuery،     | نظرات()


آموزش جی کوئری به زبان ساده_درس دوم

آموزش جی کوئری - درس دوم: سلکتورها در جی کوئری (بخش اول: سلکتور های اصلی)

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

برای اینکه بتونین یه بلایی سر یک تگ بیارین ، باید اول بتونین اون تگ رو انتخاب کنین.

بعد که به یک تگ توی صفحه دسترسی پیدا کردین ، می تونین هر بلایی که دوست دارین ، سرش بیارین.

حتی می تونین یدفعه چندین تگ رو انتخاب کنین و یه جا یک بلایی سر همشون در بیارین

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

برای انتخاب یک تگ همیشه از علامت دالر ($) استفاده میشه و بعد از اون یک پرانتز میزاریم و سپس داخل پرانتز باید عبارت انتخابگر رو بنویسیم

به چندین روش میشه به یک تگ دسترسی پیدا کرد :

  • با استفاده از نام (اسم) تگ


  • با استفاده از آی دی


  • با استقاده از کلاس تگ (کلاس سی اس اس)


  • با استفاده از صفات تگ

اگر کمی به CSS آشنا باشید ، حتما متوجه شده اید که سکتورهای جی کوئری دقیقا مشابه سکتورهای CSS است.
در درس بعدی با مهمترین ارورهای جی کوئری و روش های برطرف نمودن این ارورها آشنا خواهیم شد.

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

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


آموزش ساخت منوی کشویی با جی کوئری

سلام
سایت نت نیک
چند وقت پیش توی سایت یکی از دوستانم یک منوی کشویی دیدم که خیلی نظرم رو جلب کرد

یک منوی افقی که بخش های منو روی هم قرار گرفته بودند و با کلیک روی هر بخش ، منوها کنار می رفتند و بخش مورد نظر نمایان میشد

خلاصه خیلی نظرم رو جلب کرد
همش توی ذهنم از خودم می پرسیدم که چجوری میشه همچین افکتی رو ساخت ؟!

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

امروز یهو به این فکر افتادم که بشینم و صفحه اصلی یک سایت رو کامل طراحی کنم و برای منوهای بالاش از این افکت استفاده کنم.

کلی با توابع ور رفتم تا بالاخره تونستم این منوی فوق العاده زیبا رو خلق کنم


در ادامه خواهید آموخت که چگونه بوسیله  جی کوئری می تونیم این منو رو بسازیم

پیش نیاز : تسلط خوب بر HTML و CSS و آشنایی با جی کوئری

برای تسلط و یادگیری خوب CSS  بنده این مقاله رو پیشنهاد می کنم :

بهترین کتاب فارسی : آموزش CSS _(بسیار کامل-بسیار روان)

برای یادگیری html هم می تونید به اینجا مراجعه کنید.

دوستانی که با جی کوئری آشنایی ندارند ، می تونن فیلم آموزشی جی کوئری رو از آدرس زیر تهیه نمایند:

نوشته شده در تاریخ جمعه 15 اردیبهشت 1391    | توسط: ح.م    | طبقه بندی: پروژه های کلاینت ساید، آموزش jQuery، پروژه ها و ساخته های خودم،     | نظرات()


فیلم آموزش جی کوئری

با سلام

فیلم آموزش جی کوئری بصورت کاملا تضمینی آماده گردید.

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

فیلم ها با کیفیت بسیار عالی هستند و برای از سطح مبتدی تا پیشرفته هستند

بصورتی که اگر تا حالا اسم جی کوئری رو هم نشنیده باشید و هیچ اطلاعاتی ازش نداشته باشید ، به راحتی توسط این فیلم می توانید بر جی کوئری مسلط بشید.

فیلم آموزش جی کوئری


قیمت قبلی کالا : ۸۹,۰۰۰ ریال
قیمت کالا : ۵۹,۰۰۰ ریال


جهت مشاهده دیگر محصولات ،به 
فروشگاه سایت
مراجعه نمایید

http://LearnCD.ir

یا حق

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