کتابخانه جی‌کوئری سال‌ها به عنوان یک کتابخانه پرکاربرد و پرطرفدار جاوا اسکریپت بین توسعه دهندگان وب مطرح بوده است ولی دوره محبوبیت آن به تدریج رو به پایان است.
محبوبیت جی‌کوئری در سال‌های ابتدایی
یک سال قبل از اینکه گوگل اولین نسخه مرورگر کروم را انتشار کند، وابستگی به جی‌کوئری در اواخر سال 2007 در Github به چشم آمد. در آن زمان:
- یک راه استاندارد برای query المان‌های DOM توسط CSS Selector وجود نداشت.
- یک راه استاندارد برای روح بخشیدن به استایل‌های ویژوال یک المان وجود نداشت.
- رابط XMLHttpRequest اینترنت اکسپلورر، مانند بسیاری از APIهای دیگر، بین مرورگرها ناسازگار بود.
کتابخانه جی‌کوئری تغییرات در DOM را ساده کرده بود، تعریف انیمیشن‌ها و درخواست‌های AJAX. اساسا، توسعه دهندگان وب را برای ایجاد تجربیات مدرن و پویا‌تر که از بقیه متفاوت می‌شوند، را مهیا ساخته بود. در آن زمان پایداری مرورگرها بسیار پایین و تطابق با استانداردهای وب در بین مرورگرهای مختلف نیز بسیار پایین بود. بنابراین علت محبوبیت کتابخانه‌ای که در این شرایط، تجربه‌ی کاری یکدستی را در بین مرورگرهای مختلف ارائه می‌داد، کاملا واضح بود.
استانداردهای وب در سال‌های بعد
در طول سال‌ها، GitHub به یک شرکت با صدها مهندس و یک تیم اختصاص داده شده به تدریج شکل گرفت تا مسئولیت اندازه و کیفیت کد جاوا اسکریپت را که ما در مرورگرهای وب استفاده می‌کنیم، برعهده گیرند.
زمانی که جی‌کوئری را با تکامل سریع مرورگرهای مدرن مقایسه کردیم، متوجه شدیم:
- می‌توانیم به راحتی ;() querySelectorAll را جایگزین (selector)$ کنیم.
- می‌توانیم classnameهای CSS با ;Element.classList انجام دهیم.
- پشتیبانی CSS از visual animation در stylesheetها بجای جاوا اسکریپت.
- درخواست‌های ajax.$ با استفاده از ;Fetch Standard
- پایداری کافی () addEventListener در cross-platform
- به سادگی انکپسوله کردن delegated event listeners با یک کتابخانه سبک وزن.
- برخی از سینتکس‌های جی‌کوئری با به تکامل یافتن جاوا اسکریپت به فراموشی سپرده شدند.
یافتن عناصر توسط جاوا اسکریپت خالص
زمانیکه نیاز به انتخاب عناصری در صفحه باشند، بلافاصله ذهن ما به سمت (‘myElement#’)$ و (‘myElement.’)$ معطوف می‌شود. اما این روزها برای انجام این نوع کارها واقعا نیازی به jQuery نیست!
یافتن عناصر بر اساس ID آن‌ها
<div id=”my-element-id”></div>
اگر بخواهیم این شیء div را بر اساس ID آن در صفحه بیابیم، روش کار آن با jQuery به صورت زیر است:
var result = $(‘#my-element-id’);
در اینجا این ID selector string، یک استاندارد W3C CSS1 است. انجام این کار توسط web API و یا همان جاوا اسکریپت خالص، چنین شکلی را دارد:
var result = document.getElementById(‘my-element-id’);
و جالب است بدانید این روش از زمان IE 5.5 وجود داشته‌است. روش دیگر انجام اینکار با جاوا اسکریپت به صورت زیر است:
var result = document.querySelector(‘#my-element-id’);
این روش و متد querySelector که بسیار شبیه به نمونه‌ی جی‌کوئری ارائه شده است، از زمان IE 8.0 قابل استفاده است. در هر دو حالت، خروجی مقایسه‌ی ذیل، true است:
result.id === ‘my-element-id’; // returns true
یافتن عناصر بر اساس کلاس‌های CSS
<span class=”some-class”></span>
با جی‌کوئری:
var result = $(‘.some-class’);
با جاوا اسکریپت خالص از زمان IE 8.0
var result = document.getElementsByClassName(‘some-class’);
و یا توسط querySelectorAll که شبیه به نمونه‌ی جی‌کوئری است و نیاز به پیشوند . را دارد:
var result = document.querySelectorAll(‘.some-class’);
در هر دو حالت، خروجی بازگشت داده شده، یک آرایه است:
result[0].className === ‘some-class’; // returns true
یافتن عناصر بر اساس تگ‌های عناصر
<code>Console.WriteLine(“Hello world!”);</code>
با جی‌کوئری:
var result = $(‘code’);
با جاوا اسکریپت:
var result = document.getElementsByTagName(‘code’);
و یا
var result = document.querySelectorAll(‘code’);
در تمام این حالات، خروجی ارائه شده یک آرایه است:
result[0].tagName === ‘code’; // returns true
یافتن عناصر بر اساس کلاس نماها (Pseudo-classes)
کلاس نماها از زمان ابتدایی‌ترین پیش‌نویس استاندارد CSS وجود داشته‌اند. برای مثال visited: یک Pseudo-classes است و به لینک‌های بازدید شده‌ی توسط کاربر اشاره می‌کند و یا focus: به المانی اشاره می‌کند که هم اکنون دارای focus است. در این مثال اگر بخواهیم تکست باکسی را بیابیم که دارای focus است، روش جی‌کوئری آن به صورت زیر است:
var focusedInputs = $(‘INPUT:focus’);
و روش جاوا اسکریپتی آن به این صورت:
var companyInput = document.querySelector(‘INPUT:focus’);
کاری که در اینجا انجام شده ترکیب یک tag name و یک pseudo-class modifier است که جزئی از استاندارد CSS می‌باشد. بنابراین روش جی‌کوئری، چیزی بیشتر از انتقال این استاندارد به توابع بومی مرورگر نیست.
یافتن عناصر بر اساس ارتباط والد و فرزندی آن‌ها
<div>
<a href=”https://www.dotnettips.info”>
<span>Go to site</span>
</a>
<p>Some text</p>
Some other text
</div>
یافتن والدها:
روش یافتن والد anchor tag در جی‌کوئری توسط متد parent؛ با فرض اینکه a$ به شیء anchor اشاره می‌کند:
var $result = $a.parent();
و در جاوا اسکریپت توسط خاصیت parentNode:
var result = a.parentNode;
یافتن فرزندان:
در جی‌کوئری:
var result = $(‘#myParent’).children();
و برای یافتن فرزندان یک المان توسط CSS 2 child selectors:
var result = document.querySelectorAll(‘DIV > *’);
خروجی این کوئری، المان‌های a و p هستند و یا اگر فقط بخواهیم pها را انتخاب کنیم:
var result = document.querySelectorAll(‘DIV > P’);
روش دیگر انجام اینکار استفاده از خاصیت childNodes یک المان است:
var result = document.getElementById(‘myParent’).childNodes;
var result = div.childNodes;
البته این خاصیت آرایه‌ای، Text و Comments را هم علاوه بر عناصر بازگشت می‌دهد. البته اگر می‌خواهید آن‌ها را حذف کنید، از خاصیت children استفاده کنید:
var result =document.getElementById(‘myParent’).children;
و یا یافتن تمام المان‌های anchor ذیل المانی با Id مساوی myParent:
var result =document.querySelectorAll(‘#myParent A’);
جستجوی عناصر با صرف نظر کردن از بعضی از آن‌ها
<ul role=”menu”>
<li>choice 1</li>
<li class=”active”>choice 2</li>
<li>choice 3</li>
</ul>
در این مثال گزینه‌ی دوم دارای class مساوی active است. اگر بخواهیم تمام liهایی را که دارای این کلاس نیستند، انتخاب کنیم، در جی‌کوئری خواهیم داشت:
var $result = $(‘UL LI’).not(‘.active’);
و در جاوا اسکریپت:
var result = document.querySelectorAll(‘UL LI:not(.active)’);
نتیجه‌گیری
در مرورگرهای جدید و مدرن DOM APIها بسیار توانمند شده‌اند و در بین انواع و اقسام آن‌ها یکدست عمل می‌کنند. حتی اگر دلیل استفاده از جی‌کوئری ایجاد ساده‌تر حلقه‌ها بر روی اشیاء جاوا اسکریپتی باشد (رفع کمبودهای جاوا اسکریپت)، از زمان IE 9 به بعد، متدهای forEach و Object.keys به صورت توکار در جاوا اسکریپت وجود دارند و یا اگر نیاز به inArray.$ داشته باشید، متد Array.prototype.indexOf مدت‌ها است که جزئی از ES5 است. نه فقط کنار گذاشتن جی‌کوئری یک وابستگی ثالث را از برنامه حذف می‌کند، بلکه کار مستقیم با native API مرورگرها همواره به مراتب سریعتر است از کتابخانه‌هایی که سطح بالایی از abstraction آن‌ها را ارائه می‌دهند.