JQuery Logo

جی‌کوئری لازم نیست !

نیازی نیست برای سایتت JQuery لود کنی (:

<!DOCTYPE html>
<html lang="fa">
    <head>
        <meta charset="UTF-8">
        <title>پروژه باحال من</title>
    </head>

    <body>
        <script src="JQuery.js"></script>
    </body>
</html>

...

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

...

یکی از دلایل محبوبیت JQuery ، ساده‌سازی انتخاب‌گر های خود Javascript برای انتخاب عناصر موجود در DOM می‌باشد، برای ایجاد همین قابلیت شیرین انتخاب با $ به‌جای نوشتن دستورات طولانی برای کار با انواع Selector ها می‌تونیم تابع زیر رو یک‌بار تعریف کنیم و بعدش از $ به‌عنوان انتخاب‌گر استفاده کنیم :

VanillaJS
function $(query) {
  return document.querySelectorAll(query);
}
// بعد از تعریف، می‌تونیم استفاده کنیم
$('Selector');
JQuery
$('Selector');

ایجکس (AJAX)

...

ایجکس (JSON)

...

قابلیت گرفتن اطلاعات به‌صورت AJAX با ساختار JSON به‌صورت یک آبجکت قابل دسترس در لایه کدنویسی، از دیگر قابلیت های پرکاربرد جی‌کوئری می‌باشد

VanillaJS
var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);

request.onload = function() {
  if (this.status >= 200 && this.status < 400) {
    // درخواست موفق و نتیجه صحیح
    var data = JSON.parse(this.response);
  } else {
    // اتصال موفق ولی نتیجه با خطا
  }
};

request.onerror = function() {
  // مشکل اتصال به سرور
};

request.send();
JQuery
$.getJSON('/my/url', function(data) {

});
...

ایجکس (GET)

...

قابلیت ارسال درخواست GET به‌شکل AJAX در کتابخانه جی‌کوئری نیز از طریق کد های زیر میسر می‌باشد

VanillaJS
var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);

request.onload = function() {
  if (this.status >= 200 && this.status < 400) {
    // درخواست موفق و نتیجه صحیح
    var resp = this.response;
  } else {
    // اتصال موفق ولی نتیجه با خطا

  }
};

request.onerror = function() {
  // مشکل اتصال به سرور
};

request.send();
JQuery
$.ajax({
  type: 'GET',
  url: '/my/url',
  success: function(resp) {

  },
  error: function() {

  }
});
...

ایجکس (POST)

...

قابلیت ارسال درخواست POST به‌شکل AJAX در کتابخانه جی‌کوئری نیز از طریق کد های زیر میسر می‌باشد

VanillaJS
var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);
JQuery
$.ajax({
  type: 'POST',
  url: '/my/url',
  data: data
});

افکت‌ها

...

محو شدن به داخل (Fade In)

...

افکت محو شدن به سمت داخل نیز یکی از قابلیت های پرکاربرد جی‌کوئری می‌باشد که به‌راحتی می‌توان با دو خط اسکریپت و چند خط استایل پیاده کرد

VanillaJS
el.classList.add('show');
el.classList.remove('hide');
VanillaCSS
.show {
  transition: opacity 400ms;
}
.hide {
  opacity: 0;
}
JQuery
$(el).fadeIn();
...

محو شدن به بیرون (Fade Out)

...

افکت محو شدن به سمت بیرون نیز یکی از قابلیت های پرکاربرد جی‌کوئری می‌باشد که به‌راحتی می‌توان با دو خط اسکریپت و چند خط استایل پیاده کرد

VanillaJS
el.classList.add('hide');
el.classList.remove('show');
VanillaCSS
.show {
  opacity: 1;
}
.hide {
  opacity: 0;
  transition: opacity 400ms;
}
JQuery
$(el).fadeOut();
...

پنهان شدن

...

افکت پنهان کردن عناصر توسط جی‌کوئری را نیز می‌توان با استفاده از یک خط اسکریپت با تغییر استایل، پیاده کرد

VanillaJS
el.style.display = 'none';
JQuery
$(el).hide();
...

ظاهر شدن

...

افکت ظاهر شدن عناصر توسط جی‌کوئری را نیز می‌توان با استفاده از یک خط اسکریپت با تغییر استایل، پیاده کرد

VanillaJS
el.style.display = '';
JQuery
$(el).show();

عناصر

...

افزودن کلاس

...

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

VanillaJS
el.classList.add(className);
JQuery
$(el).addClass(className);
...

حذف کلاس

...

برای حذف یک کلاس یا همان Class از یک عنصر می‌توان از متد زیر استفاده نمود

VanillaJS
el.classList.remove(className);
JQuery
$(el).removeClass(className);
...

داشتن کلاس مشخص (Has Class)

...

برای اطلاع از مشمولیت یک عنصر از یک کلاس مشخص می‌توان از متد زیر استفاده نمود

VanillaJS
el.classList.contains(className);
JQuery
$(el).hasClass(className);
...

افزودن/حذف کلاس (Toggle)

...

برای افزودن در صورت عدم وجود، یا حذف درصورت وجود یک کلاس در یک‌ عنصر، یا همان Toggle کردن یک کلاس می‌توان از متد زیر استفاده نمود

VanillaJS
el.classList.toggle(className);
JQuery
$(el).toggleClass(className);
...

قبل (Before)

...

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

VanillaJS
target.insertAdjacentElement('beforebegin', element);
JQuery
$(target).before(element);
...

بَعد (After)

...

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

VanillaJS
target.insertAdjacentElement('afterend', element);
JQuery
$(target).after(element);
...

ضمیمه در ابتدا (Prepend)

...

با استفاده از متد Prepend می‌توان یک عنصری را به ابتدای یک عنصر دیگر اضافه نمود و معادل آن در جاوا اسکریپت خام به شکل زیر می‌باشد

VanillaJS
parent.insertBefore(el, parent.firstChild);
JQuery
$(parent).prepend(el);
...

ضمیمه در انتها (Append)

...

با استفاده از متد Append می‌توان یک عنصری را به انتهای یک عنصر دیگر اضافه نمود و معادل آن در جاوا اسکریپت خام به شکل زیر می‌باشد

VanillaJS
parent.appendChild(el);
JQuery
$(parent).append(el);
...

والد (Parent)

...

برای دسترسی به والد یا همان Parent یک عنصر می‌توان از متد زیر استفاده نمود

VanillaJS
el.parentNode
JQuery
$(el).parent();
...

فرزندان (Children)

...

از متد Children برای دسترسی به فرزندان یک عنصر استفاده می‌شود که می‌توان به راحتی با جاوا اسکریپت ساده به‌آن دسترسی پیدا کرد

VanillaJS
el.children
JQuery
$(el).children();
...

جفت‌سازی (Clone)

...

برای جفت‌سازی (کپی/تکثیر) یک عنصر از متد Clone استفاده می‌شود که می‌توان طبق نمونه زیر به‌کار برد

VanillaJS
el.cloneNode(true);
JQuery
$(el).clone();
...

حذف (Remove)

...

برای حذف یک عنصر از DOM و از بین بردن کامل آن می‌توان از متد زیر استفاده نمود

VanillaJS
el.parentNode.removeChild(el);
JQuery
$(el).remove();
...

خالی کردن (Empty)

...

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

VanillaJS
while(el.firstChild)
  el.removeChild(el.firstChild);
JQuery
$(el).empty();
...

به ازای هرکدام (Each)

...

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

VanillaJS
var elements = document.querySelectorAll(selector);
Array.prototype.forEach.call(elements, function(el, i){

});
JQuery
$(selector).each(function(i, el){

});
...

فیلتر کردن (Filter)

...

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

VanillaJS
Array.prototype.filter.call(document.querySelectorAll(selector), filterFn);
JQuery
$(selector).filter(filterFn);
...

یافتن فرزندان (Find Children)

...

برای دسترسی به فرزندان یک عنصر از طریق انتخاب‌گر، می‌توان از تکه کد زیر به‌عنوان معادل جی‌کوئری آن استفاده نمود

VanillaJS
el.querySelectorAll(selector);
JQuery
$(el).find(selector);
...

یافتن عناصر (Find Elements)

...

برای دسترسی مستقیم به یک عنصر به‌جای استفاده از انتخاب‌گر $ می‌توان از تکه کد زیر به‌صورت مستقیم استفاده نمود

VanillaJS
document.querySelectorAll('.my #awesome selector');
JQuery
$('.my #awesome selector');
...

گرفتن خصوصیات (Attributes)

...

برای دسترسی به خصوصیات یا همان Attribute های یک عنصر می‌توان از معادل زیر استفاده نمود

VanillaJS
el.getAttribute('tabindex');
JQuery
$(el).attr('tabindex');
...

تنظیم خاصیت (Attributes)

...

برای تنظیم خصوصیات یا همان Attribute های یک عنصر می‌توان از متد زیر استفاده نمود

VanillaJS
el.setAttribute('tabindex', 3);
JQuery
$(el).attr('tabindex', 3);
...

حذف خاصیت (Attribute)

...

برای حذف یکی از خاصیت‌ها یا همان Attribute های یک عنصر می‌توان از متد زیر استفاده نمود

VanillaJS
el.removeAttribute('tabindex');
JQuery
$(el).removeAttr('tabindex');
...

گرفتن محتوای داخلی (Inner HTML)

...

برای دسترسی به محتوای داخلی یا همان Inner HTML یک عنصر می‌توان از متد زیر استفاده نمود

VanillaJS
el.innerHTML
JQuery
$(el).html();
...

تنظیم محتوای داخلی (Inner HTML)

...

برای تنظیم محتوای HTML داخل یک عنصر می‌توان از متد زیر استفاده نمود

VanillaJS
el.innerHTML = string;
JQuery
$(el).html(string);
...

گرفتن محتوای خارجی (Outer HTML)

...

برای دسترسی به محتوای خارجی یا همان Outer HTML یک عنصر می‌توان از متد زیر استفاده نمود

VanillaJS
el.outerHTML
JQuery
$(el).prop('outerHTML');
...

تنظیم محتوای خارجی (Outer HTML)

...

برای جایگزین کردن یک عنصر با یک رشته دیگر شامل تگ های HTML می‌توان از متد زیر استفاده نمود

VanillaJS
el.outerHTML = string;
JQuery
$(el).replaceWith(string);
...

گرفتن استایل (Style)

...

برای دسترسی به مشخصه هایی از استایل های بصری یک عنصر می‌توان از متد زیر استفاده نمود

VanillaJS
getComputedStyle(el)[ruleName];
JQuery
$(el).css(ruleName);
...

تنظیم استایل (Style)

...

برای تنظیم استایل یا همان مشخصه های CSS یک عنصر می‌توان از متد زیر استفاده نمود

VanillaJS
el.style.borderWidth = '20px';
JQuery
$(el).css('border-width', '20px');
...

گرفتن متن (Text Content)

...

برای دسترسی به محتوای متنی یا همان Text Content یک عنصر می‌توان از متد زیر استفاده نمود

VanillaJS
el.textContent
JQuery
$(el).text();
...

تنظیم متن (Text Content)

...

برای تنظیم محتوای متنی یا همان Text Content یک عنصر می‌توان از متد زیر استفاده نمود

VanillaJS
el.textContent = string;
JQuery
$(el).text(string);
...

گرفتن عرض (Width)

...

برای دسترسی به عرض یا همان مشخصه Width یک عنصر می‌توان از متد زیر استفاده نمود

VanillaJS
parseFloat(getComputedStyle(el, null).width.replace("px", ""))
JQuery
$(el).width();
...

تنظیم عرض (Width)

...

برای تنظیم عرض یا همان Width یک عنصر می‌توان از متد زیر استفاده نمود

VanillaJS
function setHeight(el, val) {
    if (typeof val === "function") val = val();
    if (typeof val === "string") el.style.height = val;
    else el.style.height = val + "px";
}

setHeight(el, val);
JQuery
$(el).height(val);
...

گرفتن ارتفاع (Height)

...

برای دسترسی به ارتفاع یا همان مشخصه Height یک عنصر می‌توان از متد زیر استفاده نمود

VanillaJS
parseFloat(getComputedStyle(el, null).height.replace("px", ""));
JQuery
$(el).height();
...

تنظیم ارتفاع (Height)

...

برای تنظیم ارتفاع یا همان Height یک عنصر می‌توان از متد زیر استفاده نمود

VanillaJS
function setHeight(el, val) {
    if (typeof val === "function") val = val();
    if (typeof val === "string") el.style.height = val;
    else el.style.height = val + "px";
}

setHeight(el, val);
JQuery
$(el).height(val);
...

مشمولیت (Contains)

...

برای اطلاع از مشمولیت یک عنصر در یک عنصر دیگر، از متد Contains استفاده می‌شود که طبق نمونه زیر می‌توان استفاده نمود

VanillaJS
el !== child && el.contains(child);
JQuery
$.contains(el, child);
...

مشمولیت انتخاب‌گر (Contains Selector)

...

برای اطلاع از مشمولیت یک عنصر در یک انتخاب‌گر خاص از متد زیر می‌توان به‌عنوان نمونه جاوا اسکریپتی خام استفاده نمود

VanillaJS
!!el.querySelector(selector);
JQuery
$(el).find(selector).length;
...

هم‌خوانی انتخاب‌گر (Matches Selector)

...

برای بررسی و اطلاع از هم‌خوانی انتخاب‌گر توسط یک عنصر می‌توان از تابع زیر استفاده نمود

VanillaJS
var matches = function(el, selector) {
  return (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector).call(el, selector);
};

matches(el, '.my-class');
JQuery
$(el).is('.my-class');
...

شاخص ! (Index)

...

برای دسترسی به شاخص یا همان Index یک عنصر می‌توان از متد زیر استفاده نمود

VanillaJS
function index(el) {
  if (!el) return -1;
  var i = 0;
  do {
    i++;
  } while (el = el.previousElementSibling);
  return i;
}
JQuery
$(el).index();
...

وجود شاخص (Index Of)

...

برای بررسی وجود یک شاخص یا همان متد Index Of می‌توان از متد زیر استفاده نمود

VanillaJS
array.indexOf(item);
JQuery
$.inArray(item, array);
...

یکسان بودن

...

برای مقایسه و بررسی یکسان بودن یا نبودن دو عنصر می‌توان از متد زیر استفاده نمود

VanillaJS
el === otherEl
JQuery
$(el).is($(otherEl));
...

عنصر قبلی (Previous)

...

برای دسترسی به عنصر قبلی هم‌والد با عنصر فعلی می‌توان از متد زیر استفاده نمود

VanillaJS
el.previousElementSibling
JQuery
$(el).prev();
...

عنصر بعدی (Next)

...

برای دسترسی به عنصر بعدی هم‌والد با عنصر فعلی می‌توان از متد زیر استفاده نمود

VanillaJS
el.nextElementSibling
JQuery
$(el).next();
...

موقعیت (Offset)

...

برای دسترسی به موقعیت عنصر، از جمله مشخصه های Top و Left و سایر مشخصه‌ها می‌توان از متد زیر استفاده نمود

VanillaJS
var rect = el.getBoundingClientRect();

{
  top: rect.top + document.body.scrollTop,
  left: rect.left + document.body.scrollLeft
}
JQuery
$(el).offset();
...

موقعیت والد

...

برای دسترسی به موقعیت والد یا همان Parent یک عنصر می‌توان از متد زیر استفاده نمود

VanillaJS
el.offsetParent || el
JQuery
$(el).offsetParent();
...

عرض بیرونی

...

برای دسترسی به عرض بیرونی یا همان Outer Width یک عنصر می‌توان از متد زیر استفاده نمود

VanillaJS
el.offsetWidth
JQuery
$(el).outerWidth();
...

ارتفاع بیرونی

...

برای دسترسی به ارتفاع بیرونی یا همان Outer Height یک عنصر می‌توان از متد زیر استفاده نمود

VanillaJS
el.offsetHeight
JQuery
$(el).outerHeight();
...

عرض بیرونی با حاشیه

...

برای دسترسی به عرض بیرونی یک عنصر به‌همراه حاشیه‌ها یا همان Margin های آن عنصر می‌توان از متد زیر استفاده نمود

VanillaJS
function outerWidth(el) {
  var width = el.offsetWidth;
  var style = getComputedStyle(el);

  width += parseInt(style.marginLeft) + parseInt(style.marginRight);
  return width;
}

outerWidth(el);
JQuery
$(el).outerWidth(true);
...

ارتفاع بیرونی با حاشیه

...

برای دسترسی به ارتفاع بیرونی یک عنصر به‌همراه حاشیه‌ها یا همان Margin های آن عنصر می‌توان از متد زیر استفاده نمود

VanillaJS
function outerHeight(el) {
  var height = el.offsetHeight;
  var style = getComputedStyle(el);

  height += parseInt(style.marginTop) + parseInt(style.marginBottom);
  return height;
}

outerHeight(el);
JQuery
$(el).outerHeight(true);
...

موقعیت (Position)

...

برای دسترسی به مختصات یا همان Position یک عنصر، از جمله مشخصه های Top و Left می‌توان از متد زیر استفاده نمود

VanillaJS
{left: el.offsetLeft, top: el.offsetTop}
JQuery
$(el).position();
...

موقعیت نسبت به Viewport

...

برای دسترسی به موقعیت و مختصات عنصر نسبت به محل نمایش یا همان Viewport می‌توان از متد زیر استفاده نمود

VanillaJS
el.getBoundingClientRect()
JQuery
var offset = el.offset();

{
  top: offset.top - document.body.scrollTop,
  left: offset.left - document.body.scrollLeft
}
...

هم‌والد‌ها (Siblings)

...

برای دسترسی به دوستان هم‌والد یا همان Sibling های یک عنصر می‌توان از متد زیر استفاده نمود

VanillaJS
Array.prototype.filter.call(el.parentNode.children, function(child){
  return child !== el;
});
JQuery
$(el).siblings();

رویداد‌ها

...

آمادگی (Ready)

...

برای تعریف رویداد جهت اجرا پس از آماده شدن سند یا همان Document Ready می‌توان از تابع زیر استفاده نمود

VanillaJS
function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}
JQuery
$(document).ready(function(){

});
...

افزودن رویداد

...

برای افزودن یک رویداد یا همان Event می‌توان از متد زیر استفاده نمود

VanillaJS
el.addEventListener(eventName, eventHandler);
JQuery
$(el).on(eventName, eventHandler);
...

حذف رویداد

...

برای حذف یک رویداد یا همان Event می‌توان از متد زیر استفاده نمود

VanillaJS
el.removeEventListener(eventName, eventHandler);
JQuery
$(el).off(eventName, eventHandler);
...

افزودن نمایندگی رویداد (Delegate)

...

برای نمایندگی یک رویداد یا به اصطلاح Delegate کردن یک رویداد می‌توان از متد زیر استفاده نمود

VanillaJS
document.addEventListener(eventName, function(e) {
    for (var target = e.target; target && target != this; target = target.parentNode) {
        if (target.matches(elementSelector)) {
            handler.call(target, e);
            break;
        }
    }
}, false);
JQuery
$(document).on(eventName, elementSelector, handler);
...

راه‌اندازی شخصی (Custom Trigger)

...

برای راه‌اندازی شخصی یک رویداد یا همان Custom Trigger کردن رویداد می‌توان از متد زیر استفاده نمود

VanillaJS
if (window.CustomEvent && typeof window.CustomEvent === 'function') {
  var event = new CustomEvent('my-event', {detail: {some: 'data'}});
} else {
  var event = document.createEvent('CustomEvent');
  event.initCustomEvent('my-event', true, true, {some: 'data'});
}

el.dispatchEvent(event);
JQuery
$(el).trigger('my-event', {some: 'data'});
...

راه‌اندازی محلی (Native Trigger)

...

برای راه‌اندازی محلی یک رویداد یا همان Native Trigger کردن رویداد می‌توان از متد زیر استفاده نمود

VanillaJS
var event = document.createEvent('HTMLEvents');
event.initEvent('change', true, false);
el.dispatchEvent(event);
JQuery
$(el).trigger('change');

متفرقه

...

به ازای هر (For Each)

...

برای ایجاد تابعی برای اجرا در حلقه به ازای هر یا همان For Each اعضای یک آرایه می‌توان از متد زیر استفاده نمود

VanillaJS
array.forEach(function(item, i){

});
JQuery
$.each(array, function(i, item){

});
...

ترکیب (Bind)

...

برای استفاده از متد Proxy در جی‌کوئری که برای Bind توابع به‌کار می‌رود، می‌توان از متد زیر استفاده نمود

VanillaJS
fn.bind(context);
JQuery
$.proxy(fn, context);
...

گسترش (Extend)

...

برای استفاده از متد گسترش یا همان Extend در جی‌کوئری می‌توان از متد زیر استفاده نمود

VanillaJS
var extend = function(out) {
  out = out || {};

  for (var i = 1; i < arguments.length; i++) {
    if (!arguments[i])
      continue;

    for (var key in arguments[i]) {
      if (arguments[i].hasOwnProperty(key))
        out[key] = arguments[i][key];
    }
  }

  return out;
};

extend({}, objA, objB);
JQuery
$.extend({}, objA, objB);
...

گسترش عمیق (Deep Extend)

...

برای استفاده از متد گسترش عمیق یا همان Deep Extend در جی‌کوئری می‌توان از متد زیر استفاده نمود

VanillaJS
var deepExtend = function(out) {
  out = out || {};

  for (var i = 1; i < arguments.length; i++) {
    var obj = arguments[i];

    if (!obj)
      continue;

    for (var key in obj) {
      if (obj.hasOwnProperty(key)) {
        if (typeof obj[key] === 'object'){
          if(obj[key] instanceof Array == true)
            out[key] = obj[key].slice(0);
          else
            out[key] = deepExtend(out[key], obj[key]);
        }
        else
          out[key] = obj[key];
      }
    }
  }

  return out;
};

deepExtend({}, objA, objB);
JQuery
$.extend(true, {}, objA, objB);
...

آرایه بودن/نبودن

...

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

VanillaJS
Array.isArray(arr);
JQuery
$.isArray(arr);
...

نقشه (Map)

...

برای کار با Map در جاوا اسکریپت می‌توان از معادل جی‌کوئری زیر استفاده نمود

VanillaJS
array.map(function(value, index){

});
JQuery
$.map(array, function(value, index){

});
...

زمان حال (Now)

...

برای دسترسی به زمان حال یا همان Now می‌توان از متد زیر استفاده نمود

VanillaJS
Date.now();
JQuery
$.now();
...

تجزیه HTML

...

برای تجزیه یا همان Parse کردن یک رشته از نوع HTML می‌توان از تابع زیر استفاده نمود

VanillaJS
var parseHTML = function(str) {
  var tmp = document.implementation.createHTMLDocument();
  tmp.body.innerHTML = str;
  return tmp.body.children;
};

parseHTML(htmlString);
JQuery
$.parseHTML(htmlString);
...

تجزیه JSON

...

برای تجزیه یا همان Parse کردن یک رشته از نوع JSON می‌توان از تابع زیر استفاده نمود

VanillaJS
JSON.parse(string);
JQuery
$.parseJSON(string);
...

تکه کردن (Slice)

...

برای تکه‌تکه کردن عناصر و دسترسی به آنها از طریق متد Slice می‌توان از متد زیر استفاده نمود

VanillaJS
els.slice(begin, end);
JQuery
$(els).slice(begin, end);
...

برش (Trim)

...

برای برش یا همان Trim کردن یک رشته می‌توان از متد زیر استفاده نمود

VanillaJS
string.trim();
JQuery
$.trim(string);
...

نوع (Type)

...

برای اطلاع از نوع یا همان Type یک شی می‌توان از متد زیر استفاده نمود

VanillaJS
Object.prototype.toString.call(obj).replace(/^\[object (.+)\]$/, '$1').toLowerCase();
JQuery
$.type(obj);

در نهایت، برای سلب مسئولیت باید خدمتتون عرض کنم که ما نمیگیم که نباید از JQuery یا بقیه دوستانش استفاده کرد، بلکه صحبت ما سر این هست که تنبلی رو کنار بزاریم و چون بلد نیستیم یا حوصله نداریم یاد بگیریم، نیایم و چندین مگابایت فریمورک و کتابخونه لود کنیم توی پروژه، چون پرفرمنس واقعا مهم هست و در اشاره به اون عده از دوستانی که با حالت متفکرانه‌ای می‌گویند : "چرخ را نباید مجددا اختراع کرد" باید عرض کنم که این صفحه خوشگل و پر محتوا، به‌همراه سه نوع فونت‌فیس لود شده و کل محتویات، حدود 300 کیلوبایت هست، اونوقت یه صفحه گل‌منگلی که توش JQuery و Bootstrap و بقیه دوستانش رو لود می‌کنید، چندین مگابایت حجمش میشه و سریع توی بیوگرافی می‌نویسید "آیم وب دولوپر"، راستش ایران‌خودرو هم ماشین تولید می‌کنه، تسلا هم ماشین تولید می‌کنه و خوشبختانه جفتشون هم کار می‌کنند