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