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

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

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


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

آموزش جی کوئری درس 8: دستکاری استایل تگ ها

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

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


ملاحضه می نمایید که کار بسیار آسان است؛ کافی است پس از لود شدن کامل صفحه، کلیه تگ های a را انتخاب و رنگ آنها را عوض نماییم.

مقالات آموزشی دانشجویی برنامه نویسی و الکترونیک و شبکه

تغییر چندین استایل در جی کوئری:
تابع css این امکان را دارد که یهو چندین استایل رو یکجا باهاش تغییر بدیم :


موفق باشید.
نت نیک: آموزش به زبان ساده ساده

نوشته شده در تاریخ سه شنبه 1 بهمن 1392    | توسط: ح.م    | طبقه بندی: آموزش 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،     | نظرات()


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

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

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

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

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

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

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

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

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

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


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


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


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

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

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

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


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

آموزش جی کوئری به زبان ساده-درس اول: جی کوئری چیست؟
جی کوئری یکی از کتابخانه های نوشته شده به زبان جاوا اسکریپت می باشد ، بدین معنی که یک سری توابع جاوا اسکریپت آماده است که یک سری از برادران زحمتکش عرصه آی تی زحمت کشیدن و برامون نوشتن که ما نیاز نباشه برای هر کار کوچیکی ، یه عالمه کد بنویسیم!
کافیه که فقط توابع و طرز کار با این توابع رو یاد بگیرید تا خیلی راحت و آسوده بتونین کلی افکت های جذاب ایجاد کنین

بدیهی است که تسلط خوب بر جاوا اسکریپت ، خیلی می تونه اینجا کمکتون کنه.

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

سایت نت نیک|آموزش جی کوئری
کدهای چی کوئری رو کجا بنویسیم ؟ (مواد لازم جهت نوشتن کد جی کوئری!)

برای اینکه بتونین جی کوئری کار کنین ، تقریبا به هیچی نیاز ندارین!

فقط یه نوت پد + داشتن کتابخونه جی کوئری کافیه.

* نوت پد که روی همه ویندوزا هست ولی برای راحتی کار بهتره که یک نرم افزار مخصوص طراحی وب داشته باشین که بنده Microsoft Exression Web نسخه 4 و یا نسخه های بالاترش رو پیشنهاد می کنم.

* فایل کتابخونه جی کوئری رو می تونین از لینک زیر دانلود کنین:
دانلود کتابخانه جی کوئری
البته آخرین نسخه این کتابخونه رو می تونین همیشه از سایت jQuery.Com دانلود کنین.

پس از اینکه فایلا کتابخونه رو دانلود کردین ، (یه فایل با پسوند js است که مشخص می کنه که خود جی کوئری بوسیله جاوا اسکریپت نوشته شده) باید اونو به سند html تون وصل کنین:


همانطور که می بینین من اول فایل جی کوئری رو به صفحه html ام وصل کردم و بعد کد های جی کوئریمو می نویسم.
پس حواستون باشه که ترتیب خیلی مهمه ....

دقت کنین که از اونجایی که کد های جی کوئری هم مشتق شده از جاوا اسکریپته ، می تونین وسط کدهای جی کوئری از کد های جاوا اسکریپت هم استفاده کنین و همچنین عین جاوا اسکریپت می تونین کدهای جی کوئریتونو هم داخل تگ script بنویسین و هم اینکه اونو توی یک فایل جدا بنویسین و با پسوند .js ذخیره اش کنین و بعد تگ script دومی که در کد بالا نوشتم رو عین تگ script اوب می نویسین و در بخش src مسیر فایلی که کدهای جی کوئریتون توشه رو میدین.


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

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


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

چرا کد جی کوئری من کند عمل می کنه ؟
چجوری سرعت اجرای کد جی کوئری من رو بالا ببرم ؟

چجوری بهترین نوع کد نویسی جی کوئری رو استفاده کنم ؟
نکات مهم بهینه سازی کد نویسی با جی کوئری چیست ؟

با سلام
آموزش بهینه کردن کدنویسی با جی کوئری - netnic.ir

شاید براتون جالب باشه که بدونید درست کد زدن در جی کوئری ، خیلی توی سرعت کارکرد کدتون تاثیر داره .

در ادامه به شما یاد خواهیم داد که چگونه با جی کوئری بهینه کد نویسی کنید.

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


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

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

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

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

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

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

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


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

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

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

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

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

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

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