مقدمه معرفی jQuery

آموزش jquery

آموزش jquery

jQuery چیست ؟

jQuery کتابخانه استاندارد و آماده حاوی تعدادی متد و توابع نوشته شده به زبان JavaScript است . از توابع متدهای این کتابخانه جهت کار با عناصر و تگ های موجود در صفحات HTML , ASP.Net یا PHP مصرف می شود . به طور کلی با استفاده از این متدهای از پیش تعریف شده می توانید تغییراتی را در عناصر و تگ های HTML ایجاد کرده یا نحوه نمایش آنها را تغییر دهید . جهت مثال می توانید عنصر HTML را با کلیک بر روی یک دکمه فرمان پنهان کرده و یا در صورت مخفی بودن آن را نمایش دهید .
زبان jQuery دارای یک شعار مشهور است . این شعار می گوید کمتر بنویسید ، بیشتر انجام دهید ( write less , do more ) . به طور کلی کتابخانه jQuery حاوی موارد زیر است :
در مصرف از jQuery شما نیاز ندارید جهت انجام کارهای مورد نظرتان تابع نو بنویسید . تنها کافی است عنصر مورد نظر خود را گزینش کرده پس متد مورد نظر را فراخوانی کرده تا آن عنصر را تغییر دهد .
قبل از تحقیق و مصرف از بخش jQuery شما بایستی با مطالب زیر آشنایی کامل داشته باشید :

HTML
CSS
JavaScript
شیوه مصرف از کتابخانه jQuery :

همان گونه که گفتیم jQuery دارای کتابخانه استاندارد و آماده است . شما باید جهت مصرف از jQuery ، فایل این کتابخانه را به صفحه متصل بکنید . کتابخانه jQuery در یک فایل مجزا که از نوع فایـل های JavaScript و با نام jQuery.js است مراقبت می شود . شما جهت اتصال فایل این کتابخانه به صفحه مورد نظرتان از 2آموزش می توانید مصرف بکنید :

دانـلود فایـل کتابخانه jQuery بر روی رایانه یا سرور سایت خودتان پس اتصال آن به صفحه .
مصرف از فایل کتابخانه jQuery بر روی سرورهای آنلاین مثل سرور Microsoft یا Google .
در ادامه به معرفی 2راهنمای فوق می پردازیم .
روش اول : درآموزش اول شما می بایست ترین فایـل کتابخانه jQuery را از سایت www.jQuery.com دانلود کرده و پس آن را در پوشه اصلی سایت قرار دهید . پس با مصرف از تگ < Script > که در سری < Head > صفحه قرار می دهید فایل کتابخانه را به صفحه متصل بکنید . در بخش زیر اینروش را نشان داده ایم :

Syntax < head >
< script type = " text/javascript " src="jquery.js" > < /script >
< /head >
روش دوم : در نحوه دوم شما لینک دسترستی به فایل کتابخانه jQuery ، که بروی سرور مورد نظرتان است را در تگ < Script > و در پارت < Head > صفحه قرار می دهید . در این حالت صفحه در زمان لود شدن به سرور وصل شده از کتابخانه آنلاین استفاده می نماید . در سری زیر هر 2 لینک طریقه مصرف از آنها را نمایش داده ایم :

Syntax ( سرور مایکروسافت ) < head >
< script type = " text/javascript " src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js " > < /script >
< /head >


Syntax ( سرور گوگل ) < head >
< script type = " text/javascript " src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js " > < /script >
< /head >
بعد از اتصال کتابخانه jQuery به صفحه خودتان هر که متد jQuery را فراخوانی می بکنید ، برنامـه سورس آن متد را از کتابخانه دریافت کرده و پس اجرا می نماید . در مثال بخش بعد به نحوه کلی کار با توابع jQuery و یک نمونه از فرد د آن اشاره می نماییم .

یک مثال از کاربر د jQuery :

jQuery فرد دهای جالب زیادی دارد به طراحان وب توانایی های بسیار زیاد ی را جهت خلق جلوه ها و دینامیک کردن صفحات می دهد . در مثال زیرروش کلی استفاده از ساختار jQuery را نشان داده یکی از فرد دهای با اهمیت زیاد آن یعنی پنهان کردن عناصر موجود بر روی صفحه را نمایش می دهیم .

در مثال زیر یک صفحه فرضی با 2 پاراگراف و یک تیتر داریم . می خواهیم تا فرد بتواند با کلیک بر روی دکمه فرمان پارگراف های موجود در صفحه را پنهان نماید .روش کار به این شرح است :
در ابتدا به وسیله یکی از لینک های معرفی شده ، صفحه را به کتابخانه jQuery متصل کرده ایم . سپس دکمه فرمان یک تیتر و 2 پاراگراف را بروی صفحه ایجاد کرده ایم . با کلیک کاربر بر روی دکمه فرمان ، متد ( ) Hide که یکی از متدهای jQuery است ، اجرا شده و باعث می شود تا تمام پاراگراف های ( تگ های < p > ) موجود بر روی صفحه پنهان شوند . همان گونه که در خروجی مشاهده می بکنید تابع ایجاد شده فقط بر روی عناصری که تگ آنها از نوع < p > ( پاراگراف ) است تاثیر می گذارد و جهت مثال با تگ تیتر < h2 > کاری ندارد .
جهت مشاهده عملکرد مثال بر روی دکمه فرمان خروجی کلیک نمایید .





This is a heading




This is a paragraph .




This is another paragraph.


Click me



Example
< html >
< head >
< script type="text/javascript" src="jquery.js" > < /script >
< script type="text/javascript" >
$ (document). ready ( function( )
$ ("button") . click ( function( )
$ ( " p " ) . hide( );
);
);

کد
This is a heading

This is a paragraph .

This is another paragraph.