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

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

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


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

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

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

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



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


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

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

سایت نت نیک

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

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


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


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

آموزش جی کوئری درس 4: غیب کردن عناصر با جی کوئری

توی جی کوئری خیلی تغییرات توی تگ های صفحه میشه داد که برای هر کدوم جی کوئری یه تابع در اختیارتون میزاره که کار شما فقط فراخونی تابع است و تمام! >> بقیه کارا اتوماتیک توسط جی کوئری عزیز انجام میشه ...

تاز ه از اینجا به بعدشه که شعبده بازی رو یادتون میدم

* غیب کردن یک تگ با استفاده از تابع hide و آشکار کردنش با تابع show انجام میشه


فرض کنین که من یک تگ div رو می خوام غیب کنم.
در این حالت باید کدی بنویسم که وقتی صفحه کامل لود شد ، تگ مورد نظر رو بگیره (با سلکتور) و بعد غیبش کنه (با یکی از توابع جی کوئری)



خوب به همین راحتی توی 3 خط من این کارو انجام دادم!

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

نوشته شده در تاریخ جمعه 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، پروژه ها و ساخته های خودم،     | نظرات()