مقدمه و معرفی jQuery

مقدمه و معرفی 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.