آموزش جی کوئری (JQuery)

دسته بندی: آموزش طراحی وب

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

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

معرفی جی کوئری (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>

آیا این نوشته را دوست داشتید؟
teamtreehouse-jquery-basics

آشنایی با مبانی جی کوئری


در این دوره یاد خواهید گرفت که جی کوئری چیست، چرا می خواهید از آن استفاده کنید، و چگونه می توانید آن را در پروژه های خود بگنجانید. در طول دوره، شما از...

1398/10/16 872 بازدید
packtpub-html-css-and-javascript-for-beginners-a-web-design-course

دوره طراحی وب با HTML و CSS و Javascript برای مبتدیان


این دوره تمامی مفاهیم طراحی وب را پوشش می دهد. از سینتکس های پایه گرفته تا تگ های رایج مورد استفاده برای ایجاد محتوای وب و چگونگی نوشتن کدهای HTML. شم...

1398/08/13 22874 بازدید
packtpub-a-quick-start-guide-to-learn-jquery-fundamentals

یک شروع سریع برای یادگیری مبانی جی کوئری


در این دوره ساختار کد جی کوئری را به خوبی یاد می گیرید و نحوه استفاده از کد های جی کوئری برای جلوه دادن به عناصر صفحه ی وب را می آموزید و می توانید ب...

1398/07/05 914 بازدید
packtpub-hands-on-web-application-development-with-jquery

آموزش توسعه اپلیکیشن وب با جی‌کوئری


در این دوره، شما قابلیت های اصلی کتابخانه jQuery را می آموزید که شامل دستکاری DOM، پیاده سازی انیمیشن ها، ایجاد درخواست های JSON و AJAX می شود. شما هم...

1398/05/31 1250 بازدید
packtpub-the-complete-web-developer-course-2-0

دوره کامل طراحی وب - The Complete Web Developer Course 2.0


این دوره شما را به سفری برای یادگیری ساخت وب سایت و اپلیکیشن موبایل با استفاده از (HTML ، CSS ، Javascript ، PHP ، Python و MySQL) می برد. این دوره با...

1398/02/20 78928 بازدید
packtpub-the-complete-web-development-course-build-15-projects-video

دوره کامل طراحی وب همراه با 15 پروژه


دوره کامل طراحی وب همراه با 15 پروژه از مقدماتی تا پیشرفته با PHP و MYSQL به همراه HTML و CSS و Javascript و Jquery و Bootstrap...

1398/01/14 15736 بازدید
packtpub-a-jquery-wack-a-mole-exercise-video

آموزش ساخت بازی Wack a Mole با JQuery 


این دوره یک بازی جی کوئری با نام Wack A Mole را از ابتدا ایجاد می کند. این فیلم ها شامل دستورالعمل های گام به گام در مورد نحوه تنظیم عناصر صفحه خود بر...

1397/08/16 1091 بازدید
packtpub-a-jquery-practice-project-for-beginners-using-a-lock-combo-guesser-video

آموزش ایجاد پروژه جی کوئری برای مبتدیان با Lock Combo Guesser


این دوره به شما چگونگی ایجاد یک اپلیکیشن وب تعاملی را از ابتدا با استفاده از jQuery و جاوا اسکریپت نشان می دهد. شما با ساخت یک بازی مینی تعاملی با کار...

1397/08/16 857 بازدید
packtpub-the-complete-jquery-course-beginner-to-professional-video

دوره کامل جی کوئری - از مبتدی تا پیشرفته


در این دوره با ایجاد بازی حدس زدن رنگ، اپلیکیشن داده YouTube API AJAX، سینتکس jQuery، تعامل با صفحات وب، درک JavaScript Document Object Model و CSS، ا...

1397/08/03 2892 بازدید
packtpub-learn-jquery-ajax-in-1-hour-video

آموزش jQuery AJAX در 1 ساعت


اگر شما در حال جستجو برای یک اپلیکیشن توسعه AJAX هستید و نیاز به اعمال AJAX به اپلیکیشن های وب خود دارید، این دوره برای شما است. AJAX می تواند داده ها...

1397/08/03 1336 بازدید
packtpub-ajax-api-exercise-crypto-currency-data-application-video

آموزش ایجاد اپلیکیشن Cryptocurrenciy با AJAX API


این دوره کامل برای مبتدیان است تا بیشتر با اتصال به endpoints وب، خطاهای CORS، گزینه های مختلف برای درخواست HTTP، مدیریت داده ها و تکرار از طریق آن بر...

1397/07/19 899 بازدید
packtpub-an-infinite-scroll-project-using-ajax-mysql-api-php-and-jquery-video

آموزش استفاده از تکنیک Infinite scrolling در وب سایت ها


تکنیک Infinite scrolling در طراحی وب کاربرد دارد که هم زمان با اسکرول کردن صفحه توسط کاربر محتوا را بارگذاری می کند. این تکنیک محبوب در بسیاری از وب س...

1397/07/19 2223 بازدید
packtpub-a-jquery-api-exercise-with-youtube-data-for-your-website-video

آموزش کار با YouTube API با Jquery و Ajax


در این دوره با jQuery AJAX و JSON، آشنایی با jQuery، معرفی AJAX و نحوه استفاده از آن برای دریافت داده JSON، اتصال به YouTube Developer API و غیره آشنا...

1397/07/19 1231 بازدید
packtpub-javascript-and-jquery-in-7-days-video

آموزش جاوااسکریپت و جی کوئری در 7 روز


جاوا اسکریپت زبان وب است. شما می توانید از آن برای اضافه کردن رفتارهای پویا استفاده کنید، اطلاعات را ذخیره کنید و درخواست ها و پاسخ ها را در یک وب سای...

1397/07/17 1755 بازدید
packtpub-google-sheet-data-with-ajax-featuring-api-and-json-video

آموزش استفاده از Google Sheets data با AJAX


آیا تا به حال خواسته اید داده ها را از Google Spreadsheet خود دریافت کنید و از آن در یک اپلیکیشن وب استفاده کنید؟ در این دوره با انجام GET و POST در ا...

1397/07/10 882 بازدید
packtpub-ajax-using-javascript-libraries-jquery-and-axios-video

آموزش AJAX با کتابخانه های جاوااسکریپتی jQuery و Axios


در این دوره با نحوه اتصال به API های وب و بازیابی اطلاعات برای اپلیکیشن های وب، استفاده از آبجکت JavaScript XHR، به کارگیری AJAX در پروژه، درخواست های...

1397/06/24 1231 بازدید
teamtreehouse-jquery-basics-course

آموزش اصول و مبانی jQuery 


جی کوئری یک کتابخانه جاوااسکریپت بسیار محبوب است که برای اضافه کردن تعامل به صفحات وب استفاده می شود. در این دوره با مدیریت رویداد، دستکاری DOM، مبانی...

1397/05/04 1138 بازدید
teamtreehouse-practice-basic-jquery-methods

تمرین متدهای جی کوئری


در این کارگاه با تمرین بهبود پروژه های کوچک با استفاده از انواع متدهای جی کوئری آشنا می شوید.  ...

1397/05/02 735 بازدید
teamtreehouse-practice-handling-events-in-jquery

تمرین مدیریت رویدادها در jQuery


در این کارگاه با پاسخ به اقدامات کاربر با jQuery آشنا می شوید. jQuery یک کتابخانه جاوا اسکریپت چندسکویی است که برای ساده سازی اسکریپت های سمت چپ HTML ...

1397/04/27 853 بازدید
teamtreehouse-practice-working-with-jquery-collections

آموزش کار با jQuery Collections


در این کارگاه با Collections در jQuery آشنا می شوید. jQuery یک کتابخانه جاوا اسکریپت است که برای ساده سازی اسکریپت های سمت چپ HTML طراحی شده است....

1397/04/26 780 بازدید