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

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

• HTML
• CSS
• JavaScript

 

پاسخ : مقدمه و معرفی jQuery

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

1. دانلود فایل کتابخانه jQuery بر روی کامپیوتر و یا سرور سایت خودتان و سپس اتصال آن به صفحه .
2. استفاده از فایل کتابخانه jQuery بر روی سرورهای آنلاین مثل سرور Microsoft یا Google .

در ادامه به معرفی 2 روش فوق می پردازیم .
روش اول : در روش اول شما بایستی جدیدترین فایل کتابخانه jQuery را از سایت www.jQuery.com دانلود کرده و سپس آن را در پوشه اصلی سایت خود قرار دهید . سپس با استفاده از یک تگ < Script > که در قسمت < Head > صفحه قرار می دهید ، فایل کتابخانه را به صفحه متصل کنید . در قسمت زیر این روش را نشان داده ایم :
[TABLE="class: ex"]
[TR]
[TD="class: prname"] Syntax [/TD]
[TD="class: prdes"] < head >
< script type = " text/javascript " src="jquery.js" > < /script >
< /head > [/TD]
[/TR]
[/TABLE]
روش دوم : در روش دوم ، شما لینک دسترستی به فایل کتابخانه jQuery ، که بروی سرور مورد نظرتان است را در یک تگ < Script > و در قسمت < Head > صفحه قرار می دهید . در این حالت صفحه در هنگام لود شدن ، به سرور وصل شده و از کتابخانه آنلاین استفاده می کند . در قسمت زیر هر 2 لینک و طریقه استفاده از آنها را نمایش داده ایم :

[TABLE="class: ex"]
[TR]
[TD="class: prname"] Syntax ( سرور مایکروسافت ) [/TD]
[TD="class: prdes"] < head >
< script type = " text/javascript " src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js " > < /script >
< /head >
[/TD]
[/TR]
[/TABLE]

[TABLE="class: ex"]
[TR]
[TD="class: prname"] Syntax ( سرور گوگل ) [/TD]
[TD="class: prdes"] < head >
< script type = " text/javascript " src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js " > < /script >
< /head > [/TD]
[/TR]
[/TABLE]
پس از اتصال کتابخانه jQuery به صفحه خودتان ، هر زمان که یک متد jQuery را فراخوانی می کنید ، برنامه سورس آن متد را از کتابخانه دریافت کرده و سپس اجرا می نماید . در مثال بخش بعد به روش کلی کار با توابع jQuery و یک نمونه از کاربرد آن اشاره می نماییم .
[HR][/HR] یک مثال از کاربرد jQuery :
jQuery کاربردهای جالب و فراوانی دارد و به طراحان وب توانایی های زیادی را برای خلق جلوه ها و دینامیک کردن صفحات می دهد . در مثال زیر روش کلی استفاده از ساختار jQuery را نشان داده و یکی از کاربردهای مهم آن یعنی پنهان کردن عناصر موجود بر روی صفحه را نمایش می دهیم .
در مثال زیر یک صفحه فرضی با 2 پاراگراف و یک تیتر داریم . می خواهیم تا کاربر بتواند با کلیک بر روی یک دکمه فرمان پارگراف های موجود در صفحه را پنهان کند . روش کار به این شرح است :
در ابتدا به وسیله یکی از لینک های معرفی شده ، صفحه خود را به کتابخانه jQuery متصل کرده ایم . سپس یک دکمه فرمان و یک تیتر و 2 پاراگراف را بروی صفحه ایجاد کرده ایم . با کلیک کاربر بر روی دکمه فرمان ، متد ( ) Hide که یکی از متدهای jQuery است ، اجرا شده و باعث می شود تا تمام پاراگراف های ( تگ های < p > ) موجود بر روی صفحه پنهان شوند . همانطور که در خروجی مشاهده می کنید تابع ایجاد شده فقط بر روی عناصری که تگ آنها از نوع < p > ( پاراگراف ) است ، اثر می گذارد و مثلا با تگ تیتر < h2 > کاری ندارد .
برای مشادهده عملکرد مثال ، بر روی دکمه فرمان خروجی کلیک نمایید .
[TABLE="class: ex"]
[TR]
[TD="class: header, colspan: 2"] Example Example [/TD]
[/TR]
[TR]
[TD="class: body"] < html >
< head >
< script type="text/javascript" src="jquery.js" > < /script >
< script type="text/javascript" >
$ (document). ready ( function( ) {
$ ("button") . click ( function( ){
$ ( " p " ) . hide( );
});
});
</script>
</head>
<body>
<h2> This is a heading</h2>
<p> This is a paragraph . </p>
<p> This is another paragraph. </p>
<button> Click me</button>
</body>
</html> [/TD]
[TD="class: header"] کد [/TD]
[/TR]
[TR]
[TD="class: body"] [h=2]This is a heading[/h] This is a paragraph .
This is another paragraph.
[/TD]
[TD="class: header"] خروجی[/TD]
[/TR]
[/TABLE]