آموزش JQuery

مروری بر jQuery – آموزش jQuery

  • چهارشنبه ۱۷ مرداد ۱۳۹۷
  • بازدید ۵۲۱ نفر

jquery overview 2682 تصویر

مروری بر jQuery

jQuery چیست؟

jQuery یک کتابخانه جاوا اسکریپت سریع و سبک می باشد که در سال ۲۰۰۶ توسط John Resig با شعار “نوشتن کمتر، انجام بیشتر” ساخته شده است. jQuery کار پردازش رویداد، انیمشین سازی و تعاملات Ajax را برای توسعه سریع وب، ساده می کند. در زیر ویژگی های مهم و اصلی که توسط jQuery پشتیبانی می شوند را مشاهده می کنید:

  • امکان دستکاری DOM: در واقع با jQuery به راحتی می توانید عناصر DOM را انتخاب کنید، با آن ها ارتباط برقرار کرده و محتوای آنها را با استفاده از موتور جستجوگر متن باز به نام Sizzle تغییر دهد.
  • مدیریت رویدادها: jQuery به ما اجازه می دهد تا رویداد های بسیاری از رویدادهای که ممکن است در صفحه اتفاق بیافتد را به راحتی مدیریت کنیم.
  • پشتیبانی از AJAX: با استفاده از تکنولوژی AJAX می توانید یک سایت واکنش گرا با ویژگی های بسیار ایجاد کنید.
  • انیمیشن ها: jQuery متدهای درون ساخت زیادی برای ایجاد و مدیریت انیمیشن ها دارد.
  • سبک وزن بودن: jQuery کتابخانه بسیار سبک وزن است – حدود ۱۹kb در اندازه (Minified و gzip).
  • پشتیبانی از انواع مرورگرها: jQuery به خوبی در انواع مرورگرها مانند ، FF 2.0+، Safari 3.0+، Chrome و Opera 9.0+ کار می کند.
  • آخرین تکنولوژی: jQuery از انتخابگرهای CSS3 و قواعد نحوی XPath پشتیبانی می کند.

نحوه استفاده از jQuery؟

در این جا دو راه برای استفاده از کتابخانه jQuery وجود دارد که عبارت اند از:

  • نصب محلی (Local Installation): شما می توانید کتابخانه jQuery را دانلود و درون سند HTML خود قرار دهید.
  • استفاده از نسخه مبتنی بر CDN (CDN Based Version): همچنین می توانید آن را مستقیما از CDN به سند HTML خود اضافه کنید.

نصب jQuery به صورت محلی

  • به آدرس https://jquery.com/download رفته و آخرین نسخه آن را دانلود کنید.
  • سپس فایل دانلود شده jquery-2.1.3.min.js را در داخل یکی از پوشه های وب سایت خود قرار دهید.

مثال

نتیجه اجرای کد بالا

نصب از روی CDN

شما می توانید آخرین نسخه کتابخانه jQuery را از CDN (شبکه تحویل محتوا) به سند خود اضافه کنید. در این آموزش ما از نسخه موجود در CDN گوگل استفاده خواهیم کرد.

مثال

امتحان کنید

نتیجه اجرای کد بالا

نحوه فراخوانی توابع کتابخانه ای jQuery

اگر می خواهید یک رویداد برای کار بر روی صفحه خود ایجاد کنید، باید آن را در داخل تابع $(document).ready() فراخوانی کنید. هر چیزی که در داخل این تابع قرار داشته باشد، به محض لود شدن DOM اجرا می شود.

برای انجام این کار، یک رویداد آماده برای سند را به صورت زیر ثبت می کنیم:

برای فراخوانی هر تابع کتابخانه ای jQuery، می توانید از تگ های اسکریپت HTML استفاده کنید که در زیر نشان داده شده است:

امتحان کنید

نتیجه اجرای کد بالا

نحوه استفاده از اسکریپت های سفارشی

بهتر است اسکریپت های سفارشی خود را در داخل فایلی به نام custom.js بنویسید. مانند مثال زیر:

حال شما می توانید فایل custom.js را به سند HTML خود اضافه کنید. مانند مثال زیر:

نتیجه اجرای کد بالا

استفاده از کتابخانه های چندگانه

شما می توانید از چندین کتابخانه بدون مخلوط شدن آن ها با یک دیگر استفاده کنید. به عنوان مثال، می توانید از کتابخانه jQuery و MooTool استفاده کنید. جزئیات بیشتر در بخش بعدی توضیح داده شده است.

ثبت نظر
ریفریش کنید!
نظرات کاربران (۰ مورد)

هیچ نظری ثبت نشده است