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

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

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


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

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

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

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


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


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

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

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