آموزش جی کوئری

آنچه در این صفحه می خوانید:

معرفی جی کوئری (JQuery)

jQuery یک کتابخانه جاوا اسکریپت است که به منظور ساده سازی گذرا و پیمایش درخت HTML DOM و همچنین رسیدگی به رویداد، انیمیشن CSS و ای جکس (Ajax) طراحی شده است. جی کوئری در دسته نرم افزار رایگان و اوپن سورس و با استفاده از مجوز MIT مجاز قرار گرفته است. از ماه مه سال 2019، 73٪ از 10 میلیون وب سایت محبوب از jQuery استفاده می شود. تجزیه و تحلیل وب نشان می دهد که گسترده ترین کتابخانه جاوااسکریپت مورد استفاده است و 3 تا 4 برابر بیشتر از سایر کتابخانه های جاوا اسکریپت استفاده شده است.

سینتکس jQuery به گونه ای طراحی شده است که حرکت در یک سند را آسان تر، انتخاب عناصر DOM، ایجاد انیمیشن، انجام رویدادها و توسعه برنامه های آژاکس انجام دهد. jQuery همچنین امکاناتی را برای توسعه دهندگان فراهم می کند تا افزونه هایی را در بالای کتابخانه جاوا اسکریپت ایجاد کنند. این برنامه نویسان را قادر می سازد تا برای تعامل و انیمیشن سطح پایین، جلوه های پیشرفته و ابزارهای با مضمون سطح بالا، انتزاعی ایجاد کنند. رویکرد مدولار در کتابخانه jQuery امکان ایجاد صفحات وب قدرتمند و برنامه های کاربردی وب را فراهم می آورد.

مجموعه ویژگی های اصلی jQuery sel انتخاب عناصر DOM، انتخاب مسیر و دستکاری توسط موتور انتخاب کننده آن، یک "سبک برنامه نویسی" جدید ایجاد کرده و الگوریتم ها و ساختارهای داده DOM را به هم می زند. این سبک بر معماری سایر فریمورک های JavaScript مانند YUI v3 و Dojo تأثیر گذاشت و بعداً ایجاد API انتخابگر استاندارد را استارت زد. بعداً، این سبک با ادغام داده های الگوریتم عمیق تر در وارثت جی کوئری، فریمورک D3.js، بهبود یافته است.

مایکروسافت و نوکیا جی کوئری را در سیستم عامل های خود قرار داده اند. مایکروسافت آن را با ویژوال استودیو برای استفاده در فریمورک های ASP.NET AJAX و ASP.NET MVC مایکروسافت در حالی که نوکیا آن را در پلتفرم توسعه ابزارک Web Run-Time ادغام کرده است، در اختیار شما قرار می دهد.

تاریخچه جی کوئری (JQuery)

jQuery در ابتدا در ژانویه 2006 در BarCamp NYC توسط John Resig، تحت تأثیر کتابخانه cssQuery قبلی دین ادواردز، ساخته شد. در حال حاضر توسط تیمی از توسعه دهندگان به سرپرستی تیمی ویلیسون نگهداری می شود. در ابتدا jQuery تحت مجوز CC BY-SA 2.5 مجوز گرفت و در سال 2006 به مجوز MIT واگذار شد. در پایان 2006، تحت مجوزهای GPL و MIT مجوز دوگانه گرفت. از آنجا که این امر به برخی سردرگمی ها منجر شد، در سال 2012 به GPL کاهش یافت و اکنون فقط تحت مجوز MIT مجاز است.

ویژگی های جی کوئری (JQuery)

jQuery شامل ویژگی های زیر است:

  • انتخاب عناصر DOM با استفاده از موتور مولتی مرورگر Sizzle، بخشی از پروژه jQuery
  • دستکاری DOM بر اساس انتخابگرهای CSS که از نام ها و خصوصیات عناصر مانند شناسه و کلاس استفاده می کنند، به عنوان معیار انتخاب گره ها در DOM
  • رویداد ها
  • جلوه ها و انیمیشن ها
  • Ajax
  • اشیاء معوق و قول داده برای کنترل پردازش ناهمزمان
  • تجزیه جی سان (JSON)
  • قابلیت توسعه از طریق افزونه ها
  • برنامه های کاربردی مانند شناسایی ویژگی ها
  • روش های سازگاری که بصورت محلی در مرورگرهای مدرن وجود دارد، اما برای مرورگرهای قدیمی از قبیل ()jQuery.inArray و ()jQuery.each به مرورگرهای قدیمی نیاز دارد.
  • پشتیبانی از مرورگر

پشتیبانی از مرورگر

jQuery 3.0 و نسخه های جدیدتر از "current−1 versions" (به معنی نسخه پایدار فعلی مرورگر و نسخه ای که قبلاً از آن استفاده کرده است) از Firefox (و ESR)، Chrome، Safari و Edge و همچنین Internet Explorer 9 و جدیدتر پشتیبانی می کند. در تلفن همراه، از iOS 7 و اندروید 4.0 و جدید تر پشتیبانی می کند.

توزیع جی کوئری (JQuery)

کتابخانه jQuery به طور معمول به عنوان یک فایل جاوا اسکریپت توزیع می شود که تمام رابط های آن از جمله توابع DOM، Events و Ajax را تعریف می کند. می توان آن را با پیوند دادن به یک کپی محلی، یا با پیوند دادن به یکی از بسیاری از نسخه های موجود از سرورهای عمومی، در یک صفحه وب قرار داد. jQuery دارای شبکه تحویل محتوا (CDN) است که توسط MaxCDN میزبان است. گوگل در سرویس میزبان کتابخانه ها و مایکروسافت نیز میزبان این کتابخانه است.

مثال اتصال یک نسخه از کتابخانه به صورت محلی (از همان سرور میزبان صفحه وب):

<script src="jquery.js"></script>

نمونه پیوند یک نسخه از کتابخانه از CDN عمومی jQuery:

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

پلاگین جی کوئری (JQuery)

معماری jQuery به توسعه دهندگان اجازه می دهد تا پلاگین کد را برای گسترش قابلیت های آن ایجاد کنند. هزاران پلاگین jQuery در وب وجود دارد که طیف وسیعی از کارکردها را شامل می شود، از جمله Ajax helpers، وب سرویس ها، شبکه داده ها، لیست های پویا، ابزارهای XML و XSLT، درگ و دراپ، رویدادها، کار با کوکی.

منبع مهمی از افزونه های jQuery، زیر دامنه پلاگین های وب سایت پروژه jQuery است. پلاگین های این زیر دامنه اما در تلاش برای رهایی سایت اسپم به طور تصادفی در دسامبر 2011 حذف شدند. سایت جدید یک مخزن میزبان GitHub است که به توسعه دهندگان نیاز دارد تا دوباره پلاگین های خود را ارسال کرده و مطابق با شرایط ارسال جدید باشند. jQuery یک "مرکز یادگیری" را فراهم می کند که می تواند به کاربران در درک جاوا اسکریپت کمک کند و شروع به توسعه پلاگین های jQuery کند.

پیش نیاز های جی کوئری (JQuery)

سی اس اس (CSS)

واژه CSS از عبارت Cascading Style Sheets گرفته شده که در فارسی شیوه نامه های آبشاری نامیده می شود و با استفاده از آن می توان نوع متن، رنگ و نحوه چینش نوشته ها و نیز سایر اجزاء صفحه مانند جداول، تصاویر و ... را کنترل کرد. به بیان بهتر می توان گفت HTML مسئول تعیین محتوای صفحه و CSS مسئول تعیین چگونگی نمایش این محتواست. حقیقت این است که HTML و CSS هیچکدام به تنهایی هیچ مزیت خاصی ندارد. با HTML به تنهایی نمی توانید صفحات وب حرفه‌ای و چشم نواز طراحی کنید. CSS هم به تنهایی کاربردی نمی تواند داشته باشد. HTML و CSS در کنار یکدیگر هستند که می توانند قدرت فوق العاده‌ای پیدا کنند و صفحات وب چشم نواز و زیبایی را طراحی کنند.

CSS همچنین شما را قادر می سازد تا نمایش صفحه مورد نظر خود را در چندین حالت مختلف مانند حالت نمایش بر روی مانیتور، حالت نمایش در زمان چاپ و همچنین برای نمایش در صفحات مرورگر موبایل را به درستی تنظیم نمایید. با استفاده از این ابزار همچنین می توان تنظیماتی را اعمال نمود که نمایش صفحه وب مورد نظر بسته به اندازه صفحه نمایش کاربر متغیر (Responsive) باشد.

اچ تی ام ال (HTML)

Hypertext Markup Language یا به اختصار HTML، زبان نشانه گذاری استاندارد برای اسنادی است که برای نمایش در مرورگر وب طراحی شده است. از فناوری هایی نظیر CSS و زبان های اسکریپت مانند جاوااسکریپت می توان در آن بهره برد. مرورگرهای وب اسناد HTML را از وب سرور یا از فضای ذخیره محلی دریافت می کنند و اسناد را به صفحات وب چندرسانه ای ارائه می دهند. HTML ساختار صفحه وب را از نظر معنایی توصیف می کند و در اصل نشانه هایی را برای ظاهر شدن درج می کند. HTML زبان طراحی صفحات وب است و تمام کدهای صفحه، چه سمت سرور و چه سمت کلاینت در نهايت به کدهای HTML تبديل شده و توسط مرورگر به نمایش در می آیند. به این توجه داشته باشید که HTML زبان برنامه نویسی به حساب نمی آید.

جاوااسکریپت (Javascript)

جاوااسکریپت زبان برنامه‌نویسی سطح بالا، پویا، مبتنی بر شی، چند رویه و تفسیری است. این زبان اغلب به عنوان بخشی از صفحات وب استفاده می شود که پیاده سازی آن ها به اسکریپت سمت کلاینت اجازه می دهد تا با کاربر ارتباط برقرار کرده و صفحات دینامیکی ایجاد کند. جاوا اسکریپت زبان برنامه نویسی تفسیر شده با قابلیت های شی گرا است. جاوا اسکریپت برای اولین بار به عنوان LiveScript شناخته شد، اما Netscape نام آن را احتمالا به دلیل هیجاناتی که توسط جاوا ایجاد شد به JavaScript تغییر داد. جاوا اسکریپت اولین بار در Netscape 2.0 در سال 1995 با نام LiveScript ساخته شد. هسته همه منظوره این زبان در Netscape، اینترنت اکسپلورر و سایر مرورگرهای وب جاسازی شده است. ECMA-262 Specification نسخه استاندارد از هسته زبان جاوا اسکریپت را تعریف می کند. JavaScript 2.0 مطابق با نسخه 5 استاندارد ECMAScript است و تفاوت بین این دو بسیار جزئی است. امروزه، جاوا اسکریپت Netscape و JScript مایکروسافت با استاندارد ECMAScript مطابقت دارند، هرچند هر دو زبان هنوز از ویژگی هایی که جزء استاندارد نیستند پشتیبانی می کنند.

Javascript زبان برنامه نویسی داینامیک است که در کنار HTML و CSS یکی از مهم ترین عنصر فناوری های وب استاندارد به شمار می رود. جاوا اسکریپت صفحات وب تعاملی را فعال می کند و جزئی اساسی در برنامه های وب است. اکثریت قریب به اتفاق وب سایت ها از آن استفاده می کنند و مرورگرهای اصلی وب برای اجرای آن از موتور جاوا اسکریپت اختصاصی استفاده می کنند. این زبان هم به صورت ساخت یافته و هم به صورت شی گرا مورد استفاده برنامه نویسان قرار می گیرد. در حقیقت Javascript به صفحات وب زندگی می بخشد. این برنامه امکان اجرای چیزهای پیچیده را برای شما فراهم می کند. هر بار که صفحه وب، اطلاعات استاتیک، به روزرسانی های محتوا، نقشه های تعاملی، گرافیک های دو بعدی یا سه بعدی، اسکرول کردن jukebox های ویدئویی و غیره را به شما نمایش می دهد، می توانید از دخیل بودن Javascript در آن اطمینان حاصل کنید.

مثال جی کوئری (JQuery)

نمایش مثال ساده "Hello World" با استفاده از جی کوئری:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery Document Ready Demo</title>
    <link rel="stylesheet" type="text/css" href="/examples/css/style.css">
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
        $(document).ready(function(){
            $("p").text("Hello World!");
        });
    </script>
</head>
<body>
    <p>Not loaded yet.</p>
</body>
</html>
نظرتون درباره این نوشته چیه؟ عالیه بد نیست خوب نبود