کتاب فارسی آموزش سریع و آسان jquery

این کتاب به آموزش یکی از کتابخانه ی جاوا اسکریپت به نام jquery می پردازد.jquery یکی از کتابخانه های جاوا اسکریپت است که کار را برای ما خیلی ساده کرده به طوری که برای نوشتن یک برنامه با خود جاوا اسکریپت امکان داره که ما مجبور بشیم زیاد کدنویسی کنیم ولی جی کوئری کار ما را راحت تر می کند.

آموزش مقدماتی jQuery ( جی کوئری )

با سلام و خسته نباشید

 

پیش نیاز های یادگیری :

  • Html
  • Css

 

jQuery ( جی کوئری ) چیست ؟

  • jQuery (جی کوئری) یکی از کتابخانه های محبوب JavaScript است.
  • jQuery (جی کوئری) به حق، برنامه نویسی JavaScript را آسان کرده است.
  • یادگیری jQuery (جی کوئری)، آسان است و از آموزش آن لذت خواهید برد.

نحوه استفاده از jQuery ( جی کوئری ) در پروژه :

  1. در مرحله اول برای اجرای دستورات jQuery ( جی کوئری ) باید آخرین نسخه jQuery ( جی کوئری ) دانلود کرده و به پروژه اضافه کنید .

توجه:  خصوصیت src باید با آدرس فایل دانلود شده تنظیم شود، در مثال بالا، فایل jQuery دقیقاً در همان مسیر صفحه جاری قرار دارد. اگر فایل jQuery در آدرسی غیر از آدرس صفحه جاری وجود دارد باید آنرا در نظر بگیرید.

برای دانلود آخرین نسخه jQuery ( جی کوئری ) به لینک زیر مراجعه کنید :

http://jquery.com/download/

  1. دستورات را بین تگ <script></script> می نویسیم .
  2. برای نوشتن دستورات jQuery (جی کوئری) باید به اول آنها علامت $ یا jquery بنویسیم  و برای دسترسی به عناصر HTML در jQuery استفاده می شوند .
$(selector).action()       

 

  • (selector) : نام کلاس، شناسه، نام تگ، نوع، نام خصوصیت و یا مقدار خصوصیت عنصر HTML است .
  • ()action: عملی است که روی عنصر HTML انجام می شود .

 

مثال :

 

 

    شاید بپرسید که چرا در تگ <script> خصوصیت type را با مقدار "text/javascript" تنظیم نکرده اید؟

    در HTML5 نیازی به این کار نیست. در HTML5 و مرورگرهای امروزی JavaScript زبان اسکریبت نویسی پیشفرض است.

توضیحات :

$('span').hide();

وقتی صفحه لود شود تگ span را مخفی میکند و نمایش نمی دهد .

$('#hide').click(function()
{
$('table').hide(1000,function(){$('span').show(1000)});       
});

وقتی روی شئ که id آن hide است کلیک شود تگ table را در عرض یک ثانیه می بندد و تگ span را در عرض یک ثانیه نمایش می دهد .

$('#show').click(function()
{
            $('table').show(1000,function(){$('span').hide(1000)});
});

این کد برعکس بالا عمل می کند وقتی روی شئ که id آن show است کلیک شود تگ table را در عرض یک ثانیه نمایش می دهد و تگ span را در عرض یک ثانیه می بندد .

 

رویداد ready

همانطور که تا به حال در مثال ها مشاهده کرده اید، تمام متدهای jQuery داخل رویداد ready آورده شده اند:

$(document).ready(function(){

   // jQuery methods go here...

});

این امر باعت می شود تا کدهای jQuery بعد ازبارگذاری کامل صفحه، اجرا شوند. همچنین با این تکنیک، قادر خواهید بود کدهای JavaScript را در قسمت <head> صفحه قرار دهید.

 

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

  • تلاش برای پنهان کردن عنصری که هنوز ایجاد نشده است.
  • تلاش برای گرفتن عرض و ارتفاع عکسی که هنوز بارگذاری نشده است.

 نکته: تیم jQuery یک متد کوتاه تر برای رویداد ready ایجاد کرده است:

$(function(){

   // jQuery methods go here...

});

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

 

منبع : http://www.w3schools.com

 

دانلود نمونه کد های جی کوئری

 

  نویسنده : مهرداد خدائی ( طراح صفحات وب و تکنسین شبکه )

تماس با پروسس

جهت دریافت اطلاعات و سفارش برنامه با ما در ارتباط باشید

این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید

 4167 330 0413

 0639 223 0936

فعالیت های پروسس

اهداف تیم پروسس

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

گروه برنامه نویسی پروسس

Scroll to Top