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 روش می توانید استفاده کنید :

  1. دانلود فایل کتابخانه jQuery بر روی کامپیوتر و یا سرور سایت خودتان و سپس اتصال آن به صفحه .
  2. استفاده از فایل کتابخانه 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 > کاری ندارد .
برای مشاهده عملکرد مثال ، بر روی دکمه فرمان خروجی کلیک نمایید .

Example
< 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>		 کد

 

تعداد امتیازدهندگان: 4902
مسیر کوتاه: rangine.ir/node/93