معرفی کتابخانه جی کوئری – JQuery

معرفی کتابخانه جی کوئری – JQuery

کتابخانه جی کوئری ( JQuery ) یک کتابخانه جاوا اسکریپت میان پلتفرمی است که برای ساده کردن اسکریپت نویسی HTML  در سمت مشتری طراحی شده است. کتابخانه JQuery در حال حاضر محبوب ترین کتابخانه جاوا اسکریپت است و از بین 10 میلیون پربازدیدترین سایت های موجود در وب، روی 65 درصد آنها نصب شده است. JQuery یک نرم افزار آزاد و کد باز است و تحت تایید مجوز MIT قرار دارد.

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

مجموعه ویژگی های مرکزی JQuery (انتخاب، پیمایش و دستکاری عناصر DOM) که توسط موتورِ Selector (به نام Sizzle) فراهم شده است، با ترکیب کردن الگوریتم ها و ساختارهای داده DOM، یک “سبک برنامه نویسی” جدید ایجاد کرد. این سبک روی ساختار دیگر فریم ورک های جاوا اسکریپت مانند YUI v3 و Dojo هم تاثیر گذاشت و بعدها باعث ساخت Selector API استاندارد شد.

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

بررسی اجمالی کتابخانه جی کوئری

JQuery یک کتابخانه دستکاری DOM (Document Object Model) است. DOM یک نماینده با ساختار درختی از تمام عناصر یک صفحه وب است و JQuery قاعده آن را برای جستجو، انتخاب و دستکاری این عناصر DOM  ساده می کند. برای مثال از JQuery می توان برای یافتن یک عنصر در سند با مشخصه ای خاص (به عنوان مثال، تمام عناصری که تگ h1 دارند)، تغییر دادن یک یا چند تا از خصیصه های آن (مثلا رنگ، وضوح) یا واکنش نشان دادن به یک رویداد (مثلا کلیک موس) استفاده کرد.

JQuery  همچنین یک الگو برای Event Handling ارائه می کند که از انتخاب و دستکاری پایه ای DOM فراتر می رود. تخصیص رویداد و تعریف تابع فراخوانی رویداد در یک مرحله و در یک مکان در کد انجام می شوند. جی کوئری همچنین در هدف دارد که از دیگر قابلیت های جاوا اسکریپت نیر استفاده کند (مانند Fade in و Fade out در هنگام مخفی کردن عناصر، انیمیشن سازی با دستکاری مشخصه های CSS).

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

– تشویق به جداسازی جاوا اسکریپت از HTML: کتابخانه JQuery به جای اضافه کردن خصیصه های event در HTML برای فراخوانی توابع جاوا اسکریپت، قاعده ساده ای برای اضافه کردن Event Handler ها به DOM با استفاده از جاوا اسکریپت فراهم می کند. بنابراین توسعه دهندگان به ترغیب می کند تا کد جاوا اسکریپت را کاملا از نشانه گذاری HTML جدا کنند.

– اختصار و وضوح: JQuery با ویژگی هایی نظیر توابع قابل زنجیر شدن و اسامی کوتاه برای توابع، اختصار و وضوح را ترویج می کند.

– حذف ناسازگاری های میان مرورگرها: موتورهای جاوا اسکریپت مرورگرهای مختلف کمی با یکدیگر تفاوت دارند، بنابراین جاوا اسکریپتی که برای یک مرورگر کار می کند ممکن است برای یک مرورگر دیگر کار نکند. جی کوئری هم مانند دیگر جعبه ابزارهای جاوا اسکریپت، تمام بی ثباتی های میان مرورگرها را رفع می کند و یک محیط ثابت ارائه می دهد که در مرورگرهای مختلف کار می کند.

– توسعه پذیر:  رویدادها، عناصر و متدهای جدید را می توان به راحتی اضافه کرد و به عنوان پلاگین دوباره از آنها استفاده کرد.

ویژگی های کتابخانه جی کوئری

JQuery شامل ویژگی های زیر می باشد:

– انتخاب های عنصر DOM  با استفاده از موتور Selector کد باز چند مرورگری Sizzle که یک محصول جانبی از پروژه جی کوئری است.
– دستکاری DOM براساس Selector های CSS که از اسامی و خصیصه های عناصر مانند id و class به عنوان معیاری برای انتخاب Node ها در DOM  استفاده می کنند.
– رویدادها
– افکت ها و انیمیشن ها
– Ajax
– اشیای معوق و ئعده داده شده برای کنترل پردازش ناهمگام
– تجزیه JSON
– توسعه پذیری از طریق پلاگین ها
– خدماتی مانند شناسایی ویژگی
– روش های سازگاری که در مرورگرهای مدرن بطور پیش فرض وجود دارند، اما برای مرورگرهای قدیمی نیاز به عناصری مانند inArray() و each() دارند
– پشتیبانی از چندین مرورگر (با میان مرورگری اشتباه گرفته نشود)

پشتیبانی کتابخانه JQuery از مرورگرها

هر دو ورژن 1.x و 2.x از جی کوئری از ورژن های کنونی و قبلی Firefox، Chrome، Safari و Opera  پشتیبانی می کنند. ورژن 1.x  همچنین از Internet Explorer 6 و بالاتر پشتیبانی می کند. البته جی کوئری ورژن 2.x  دیگر از Internet Explorer 6  و 8 پشتیبانی نمی کند و تنها از IE 9 ورژن های بعدی آن پشتیبانی می کند.

کاربرد کتابخانه جی کوئری

شامل کردن کتابخانه JQuery

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

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

همچنین می توان جی کوئری را مستقیما از داخل CDN قرار داد:

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>

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

کتابخانه JQuery دو سبک استفاده دارد:

– از طریق تابع $ که یک متد Factory برای شیء جی کوئری است. این توابع که معمولا Command یا دستورات خوانده می شوند قابل زنجیر شدن هستند، زیرا همه آنها اشیای جی کوئری ارائه می کنند.

– از طریق تابع با پیشوند $.. اینها توابع مطلوبیت هستند که مستقیما براساس شیء جی کوئری عمل نمی کنند.
دسترسی و دستکاری چندین گره DOM در جی کوئری معمولا با فراخوانی تابع $  با یک رشته CSS Selector آغاز می شود. نتیجه این یک شیء جی کوئری است که به تمام عناصر سازگار در صفحه HTML  ارجاع می کند. برای مثال، $(“div.test”) یک شیء جی کوئری با تمام عناصر div از کلاس test را ارائه می کند. این مجموعه گره ها را می توان با فراخوانی متدها روی شیء جی کوئری بدست آمده یا روی خود گره ها، دستگاری کرد.

حالت بدون تضاد

جی کوئری همچنین شامل حالت .noConflict() است که از کنترل $  چشم پوشی می کند. اگر جی کوئری به همراه دیگر کتابخانه هایی استفاده شود که از $  به عنوان یک شناسه استفاده می کنند، این می تواند مفید واقع شود. در حالت بدون تضاد، توسعه دهندگان می توانند از JQuery به عنوان جانشینی برای $ بدون از دست دادن کارایی استفاده کنند.

نقطه آغاز معمول کتابخانه JQuery

معمولا برای استفاده از کتابخانه JQuery، کد آغاز و توابع event handling را در $(handler) قرار می دهند. این زمانی فعال می شود که مرورگر DOM را ایجاد کند و یک رویداد Load را ارسال کند.

$(function () { // jQuery code, event handling callbacks here });

از نظر تاریخی، $(document).ready(callback) یک امضای استاندارد برای اجرای کد در هنگام آماده بودن DOM  است. البته از زمان JQuery 3.0، توسعه دهندگان ترغیب شده اند که از امضای کوتاه تر $(handler) استفاده کنند.

توابع فراخوانی برای event handling روی عناصری که هنوز لود نشده اند را می توان در داخل .ready() به عنوان توابع ناشناس ثبت کرد. این event handler ها تنها زمانی فراخوانی می شوند که رویداد فعال شده است. برای مثال، کد زیر یک event handler برای کلیک موس روی عنصر تصویری img اضافه می کند.

$(function () { $(‘img’).on(‘click’, function () { // handle the click event on any img element in the page }); });

این قواعد زیر یکسان هستند، اما تنها از $(handler) باید استفاده شود:

– $(handler) – $().ready(handler) – $(document).ready(handler) – $(“selector”).ready(handler)

زنجیر کردن

دستورات کتابخانه JQuery معمولا یک شیء جی کوئری ایجاد می کنند، بنابراین دستورات را می توان به هم زنجیر کرد:

$(‘div.test’).add(‘p.quote’).addClass(‘blue’).slideDown(‘slow’);

این کد، اتحاد تمام تگ های div را با خصیصه test و تمام تگ های p را با خصیصه quote پیدا می کند، خصیصه کلاس blue به هر عنصر همسان اضافه می کند و سپس ارتفاع آنها را با یک انیمیشن افزایش می دهد. توابع $ و add روی مجموعه همسان تاثیر می گذارند، درحالیکه addClass و slideDown روی گره های ارجاع شده تاثیر می گذارند.

توابع خاصی از jQuery، مقادیر خاصی را ارائه می کنند (مانند $(‘#input-user-email’).val()) در این موارد زنجیر کردن فایده ندارد، زیرا مقدار، به شیء جی کوئری ارجاع نمی کند.

ساخت عناصر DOM جدید در کتابخانه JQuery

به غیر از دسترسی به گره های DOM از طریق سلسله مراتب اشیای جی کوئری، همچنین اگر رشته ای که به عنوان آرگومان در $() وارد شده است شبیه HTML باشد، می توان عناصر DOM  جدیدی ایجاد کرد. برای مثال کد زیر یک عنصر select از HTML با آی دی carmakes را پیدا می کند و یک عنصر option با مقدار “VAG” و متن “Volkswagen” اضافه می کند:

$(‘select#carmakes’).append($(‘<option/>’).attr({value:”VAG”}).append(“Volkswagen”));

توابع مطلوبیت کتابخانه جی کوئری

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

each در جی کوئری استفاده می شود:

$.each([1,2,3], function() {
console.log(this + 1);
});

این کد، اعداد 2، 3 و 4 را در کنسول می نویسد.

Ajax

با استفاده از $.ajax می توان درخواست های Ajax میان مرورگری را انجام داد. متدهای مربوط به آن را می توان برای لود کردن و دستکاری داده ها از راه دور استفاده کرد.

$.ajax({ type: ‘POST’, url: ‘/process/submit.php’, data: { name : ‘John’, location : ‘Boston’, }, }).done(function(msg) { alert(‘Data Saved: ‘ + msg); }).fail(function(xmlHttpRequest, statusText, errorThrown) { alert( ‘Your form submission failed.\n\n’ + ‘XML Http Request: ‘ + JSON.stringify(xmlHttpRequest) + ‘,\nStatus Text: ‘ + statusText + ‘,\nError Thrown: ‘ + errorThrown); });

این مثال، داده name=John و location=Boston را در /process/submit.php در سرور پست می کند. وقتی این درخواست پایان می یابد، تابع موفقیت فراخوانی می شود تا به کاربر هشدار بدهد. اگر درخواست با شکست مواجه شود، کاربر را از شکست، وضعیت درخواست و ارور دقیق باخبر می کند.

ناهمگام

توجه کنید که مثال بالا از ماهیت تعویقی $.ajax() استفاده می کند تا با ماهیت ناهمگام آن کار کند:  .done() و .fail() فراخوانی هایی ایجاد می کنند که تنها وقتی اجرا می شوند که فرایند ناهمگام پایان یافته است.

پلاگین های جی کوئری

ساختار کتابخانه JQuery به توسعه دهندگان اجازه می دهد تا کد پلاگین برای گسترش کارایی آن ایجاد کنند. هزاران پلاگین برای جی کوئری در وب موجود است که دامنه ای از توابع مانند کمک کننده های Ajax، خدمات وب، شبکه های داده، فهرست های پویا، ابزارهای XML و XSLT، درگ و دراپ، رویدادها، کار با کوکی ها و پنجره های modal را در می گیرند.

یک منبع مهم از پلاگین های جی کوئری، زیردامنه Plugins از وبسایت پروژه جی کوئری است. هرچند پلاگین های موجود در این زیر دامنه در دسامبر سال 2011 در هنگام حذف کردن اسپم های سایت، به طور اشتباهی پاک شدند. سایت جدید شامل یک منبع با میزبانی GitHub خواهد بود که نیاز است توسعه دهندگان پلاگین های خود را دوباره ثبت کنند و با شرایط ثبت جدید موافقت کنند. موتورهای جستجوی پلاگین دیگری هم مانند jquer.in وجود دارند که رویکردهای تخصصی تری دارند، مانند تنها فهرست کردن پلاگین هایی که با معیارهای خاصی مطابقت دارند (مثلا آنهایی که منابع کد عمومی دارند). جی کوئری یک “مرکز آموش” ارائه می دهد که می تواند به کاربران کمک کند تا با جاوا اسکریپت آشنا شوند و توسعه پلاگین های جی کوئری را آغاز کنند.

تاریخچه کتابخانه جی کوئری

کتابخانه جی کوئری در ابتدا ژانوایه سال 2006 در کنفرانس BarCamp نیویورک توسط John Resig عرضه شد و از کتابخانه cssQuery دین ادواردز الهام گرفته شده بود. در حال حاضر توسط تیمی از توسعه دهندگان با رهبری Timmy Willison اداره می شود (و موتور Seledctor جی کوئری یعنی Sizzle  توسط Richard Gibson اداره می شود).

جی کوئری همچنین یک تاریخچه مجوز نرم افزار جالب دارد. در ابتدا تحت مجوز CC BY-SA 2.5 بود، اما در سال 2006 تحت مجوز MIT license درآمد. در پایان سال 2006 تحت مجوزهای دوگانه GPL و MIT درآمد. به علت اینکه این موضوع باعث سردرگمی میشد، در سال 2012 مجوز GPL حذف شد و اکنون تنها تحت مجوز MIT  می باشد.

در سال 2015، جی کوئری پراستفاده ترین کتابخانه جاوا اسکریپت در وب می باشد.

تاریخچه عرضه کتابخانه جی کوئری

تست کردن فریم ورک

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

از سال 2011، تیم آزمایش جی کوئری از QUnit به همراه TestSwarm استفاده می کند تا هر نسخه مبتنی بر کد جی کوئری را تست کنند.

منابع: ویکی پدیا انگلیسی ، وبسایت JQuery ، آریا گستر و …

توجه : مطالب و مقالات وبسایت آریاگستر تماما توسط تیم تالیف و ترجمه سایت و با زحمت فراوان فراهم شده است . لذا تنها با ذکر منبع آریا گستر و لینک به همین صفحه انتشار این مطالب بلامانع است !

دوره های آموزشی مرتبط