jQuery'ге муктаждыгынар жок

Биздин убакта фронт-энд чөйрөсү абдан ылдам өнүгүп жатат, ошонун менен бирге заманбап браузерлер көптөгөн DOM/BOM API жагын ишке ашырды. Бул абдан жакшы көрүнүш. Анткени, силер DOM'ду манипуляциялоо же окуялардын объектерин иштешиш үчүн jQuery'ни башынан үйрөнүнөрдүн кажети калбайт.Ошонун менен бирге, алдыда келе жаткан React, Angular жана Vue фронт-энд библиотекалардын жардамы менен, DOM'ду түздөн-түз манипуляциялоо өзүнчө бир антипаттернге айланды.Бул проект jQuery методдорунун ордуна колдонсо боло турган нативдүү JavaScript альтернативаларынын көбүн өзүнө камтыйт.

Мисалдар азыркы, дайыма жаңыланып турган браузерлерге (Chrome, Edge, Firefox, Safari) арналган. Microsoft Internet Explorer'ди мындан ары колдобойт, ошондуктан IE үчүн жазылган кошумча чечимдер алынып салынды. Эгерде алар дагы эле керек болсо, IE менен иштеген акыркы версияны карагыла.

Котормолор

Query selector

Көп колдонулган class, id же болбосо attribute сыяктуу селекторлор үчүн биз document.querySelector же document.querySelectorAll колдонсок болот. Айырмасы төмөнкүдөй:

document.querySelector биринчи дал келген элементти кайтарат.
document.querySelectorAll баардык дал келген элементтерди статикалык түйүндөр коллекциясы (NodeList) катары кайтарат. Ал forEach методун колдойт, аны Array.from(document.querySelectorAll(selector)) аркылуу массивге конвертация кылууга болот.
Эгерде эч элементтер дал келбесе, jQuery бош jQuery объектин, document.querySelectorAll бош NodeList'ти кайтарат, ал эми document.querySelector null кайтарат.

Белгилөө: document.getElementById, document.getElementsByClassName жана document.getElementsByTagName методдору querySelector* методдоруна караганда бир аз ылдамыраак, бирок getElementsBy* жандуу (live) HTMLCollection кайтарат, ал DOM өзгөргөн сайын өзү да өзгөрөт. Ылдамдыкты өлчөп, чыныгы көйгөй таппасаңар, querySelector* колдонгула.

1.0 Селектор аркылуу издөө

// jQuery
$('selector');

// Нативдүү түрү
document.querySelectorAll('selector');

1.1 Класс боюнча кайрылуу

// jQuery
$('.class');

// Нативдүү түрү
document.querySelectorAll('.class');

// же
document.getElementsByClassName('class');

1.2 ID боюнча кайрылуу

// jQuery
$('#id');

// Нативдүү түрү
document.querySelector('#id');

// же
document.getElementById('id');

1.3 Атрибут боюнча кайрылуу

// jQuery
$('a[target=_blank]');

// Нативдүү түрү
document.querySelectorAll('a[target=_blank]');

1.4 Тукумдардын арасында издөө

// jQuery
$el.find('li');

// Нативдүү түрү
el.querySelectorAll('li');

1.5 Бекем байланышкан/Мурунку/Кийинки элементтер

Бекем байланышкан элементтер

// jQuery
$el.siblings();

// Нативдүү түрү
[...el.parentNode.children].filter((child) =>
  child !== el
);

Мурунку элементтер

// jQuery
$el.prev();

// Нативдүү түрү
el.previousElementSibling;

Кийинки элементтер

// jQuery
$el.next();

// Нативдүү түрү
el.nextElementSibling;

1.6 Жакынкы

Берилген селектор аркылуу биринчи дал келген элементти кайтарат.
```
// jQuery
$el.closest(selector);

// Нативдүү түрү
el.closest(selector);
```

1.7 Ата-энеге чейин Бир бирине жана селекторго дал келген, DOM'дун узели жана jquery'нин объектинен тышкары элементтерлин сетинде жайгашкан ар-бир элементтин ата-энесин кайтарат.

// jQuery
$el.parentsUntil(selector, filter);

// Нативдүү түрү
function parentsUntil(el, selector, filter) {
  const result = [];

  // Ата-энеден баштап дал келүү
  el = el.parentElement;
  while (el && !el.matches(selector)) {
    if (!filter || el.matches(filter)) {
      result.push(el);
    }
    el = el.parentElement;
  }
  return result;
}

1.8 От

Input/Textarea

// jQuery
$('#my-input').val();

// Нативдүү түрү
document.querySelector('#my-input').value;

e.currentTarget жана .radio индексин алуу

// jQuery
$('.radio').index(e.currentTarget);

// Нативдүү түрү
[...document.querySelectorAll('.radio')].indexOf(e.currentTarget);

1.9 Iframe Контенти

$('iframe').contents() 'дин contentDocument'н кайтарат.

Iframe'дин контенти

// jQuery
$iframe.contents();

// Нативдүү түрү
iframe.contentDocument;

Iframe Кайрылуу

// jQuery
$iframe.contents().find('.css');

// Нативдүү түрү
iframe.contentDocument.querySelectorAll('.css');

1.10 body'ни табуу

// jQuery
$('body');

// Нативдүү түрү
document.body;

1.11 Атрибутту алуу жана аны өзгөртүү

Атрибутту табуу

// jQuery
$el.attr('foo');

// Нативдүү түрү
el.getAttribute('foo');

Атрибутту кошуу

// jQuery
$el.attr('foo', 'bar');

// Нативдүү түрү
el.setAttribute('foo', 'bar');

data- атрибутту табуу

// jQuery
$el.data('foo');

// Нативдүү түрү
el.dataset.foo;

// же
el.getAttribute('data-foo');

⬆ Башына

CSS & Style

2.1 CSS

Стильди алуу

// jQuery
$el.css('color');

// Нативдүү түрү
// Белгилөө: браузер эсептеген акыркы маанини кайтарат, мисалы, '#f01' ордуна 'rgb(255, 0, 17)'
getComputedStyle(el).color;

style менчиктоо

// jQuery
$el.css({ color: '#f01' });

// Нативдүү түрү
el.style.color = '#f01';

Бир нече стилди орнотуу

// jQuery
$el.css({ color: '#f01', 'border-color': '#f02' });

// Нативдүү түрү
Object.assign(el.style, { color: '#f01', borderColor: '#f02' });

Классты кошуу

// jQuery
$el.addClass(className);

// Нативдүү түрү
el.classList.add(className);

Классты жок кылуу

// jQuery
$el.removeClass(className);

// Нативдүү түрү
el.classList.remove(className);

Классты камтыйт

// jQuery
$el.hasClass(className);

// Нативдүү түрү
el.classList.contains(className);

Классты которуу

// jQuery
$el.toggleClass(className);

// Нативдүү түрү
el.classList.toggle(className);

2.2 Туурасы жана узундугу

Турасы жана узундугу теорикалык турдо бири-бирине окшош, узундугун мисалга алсак:

Терезенин узундугу

// jQuery
$(window).height();

// Скролбарсыз jQuery'дей эле сыяктуу болот
window.document.documentElement.clientHeight;

// скролбар менен
window.innerHeight;

Документтин узундугу

// jQuery
$(document).height();

// Нативдүү түрү
const body = document.body;
const html = document.documentElement;
const height = Math.max(
  body.offsetHeight,
  body.scrollHeight,
  html.clientHeight,
  html.offsetHeight,
  html.scrollHeight
);

Элементтин узундугу

// jQuery
$el.height();

// Нативдүү түрү
function getHeight(el) {
  const styles = window.getComputedStyle(el);
  const height = el.offsetHeight;
  const borderTopWidth = parseFloat(styles.borderTopWidth);
  const borderBottomWidth = parseFloat(styles.borderBottomWidth);
  const paddingTop = parseFloat(styles.paddingTop);
  const paddingBottom = parseFloat(styles.paddingBottom);
  return height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom;
}

// Так сандарга чейин (`border-box` болгондо, анда `height - border`; `content-box` болгондо, анда `height + padding`)
el.clientHeight;

// Ондон бирине чейин (`border-box` болгондо, анда `height`; `content-box` болгондо, анда `height + padding + border`)
el.getBoundingClientRect().height;

Элементтин тышкы узундугу

padding жана border менен кошо узундук, кааласаңыз margin да кошулат.

// jQuery
$el.outerHeight();

// Нативдүү түрү (бүтүн санга тегеректелет, CSS transform эсепке алынбайт)
el.offsetHeight;

// jQuery
$el.outerHeight(true);

// Нативдүү түрү
function getOuterHeight(el) {
  const styles = window.getComputedStyle(el);
  return el.offsetHeight + parseFloat(styles.marginTop) + parseFloat(styles.marginBottom);
}

2.3 Позиция жана өтүү

Позициясы

Ата-энесин жылуусу боюнча учурдагы координаттарды алуу

// jQuery
$el.position();

// Нативдүү түрү
const position = { left: el.offsetLeft, top: el.offsetTop };

Ылдый өтүү

Учурдагы элементтин координаттарын кайтарып алуу

// jQuery
$el.offset();

// Нативдүү түрү
function getOffset (el) {
  const box = el.getBoundingClientRect();

  return {
    top: box.top + window.scrollY,
    left: box.left + window.scrollX
  };
}

2.4 Жогоруга жылдыруу

// jQuery
$(window).scrollTop();

// Нативдүү түрү
window.scrollY;

⬆ Башына

DOM манипуляциясы

3.1 Remove

DOM'дон элементти өчүрүү .

// jQuery
$el.remove();

// Нативдүү түрү
el.remove();

3.2 Текст
- Текстти кайтарып алуу
Элементтин тексттик түрүн кайтарып алуу
```
// jQuery
$el.text();

// Нативдүү түрү
el.textContent;
```
- Текстти менчиктөө
```
// jQuery
$el.text(string);

// Нативдүү түрү
el.textContent = string;
```

3.3 HTML

HTML кайтарып алуу

// jQuery
$el.html();

// Нативдүү түрү
el.innerHTML;

HTML'ны менчиктөө

// jQuery
$el.html(htmlString);

// Нативдүү түрү
el.innerHTML = htmlString;

3.4 Append

Акыркы ата-эненин баласындан кийин жаны элементти кошуу

// jQuery: DOMString жана Node объекттери үчүн бирдей синтаксис
$parent.append(newEl | '<div id="container">Hello World</div>');

// Нативдүү түрү (Element же текст): саптар HTML катары талдалбайт, жөнөкөй текст катары кошулат
parent.append(newEl | 'Hello World');

// Нативдүү түрү (HTML сабы)
parent.insertAdjacentHTML('beforeend', '<div id="container">Hello World</div>');

3.5 Prepend

// jQuery: DOMString жана Node объекттери үчүн бирдей синтаксис
$parent.prepend(newEl | '<div id="container">Hello World</div>');

// Нативдүү түрү (Element же текст): саптар HTML катары талдалбайт, жөнөкөй текст катары кошулат
parent.prepend(newEl | 'Hello World');

// Нативдүү түрү (HTML сабы)
parent.insertAdjacentHTML('afterbegin', '<div id="container">Hello World</div>');

3.6 insertBefore

Тандалган элементтин астына жаны элементти кошуу

// jQuery
$newEl.insertBefore(selector);

const el = document.querySelector(selector);

// Нативдүү түрү (Element)
el.before(newEl);

// Нативдүү түрү (HTML сабы)
el.insertAdjacentHTML('beforebegin', '<div id="container">Hello World</div>');

3.7 insertAfter

Тандалган элементтен кийин жаны элементти кошуу

// jQuery
$newEl.insertAfter(selector);

const el = document.querySelector(selector);

// Нативдүү түрү (Element)
el.after(newEl);

// Нативдүү түрү (HTML сабы)
el.insertAdjacentHTML('afterend', '<div id="container">Hello World</div>');

3.8 is

Эгерде селектордун кайрылуусуна дал келсе, анда true кайтарат.

// jQuery - байсанар,   `is` `function` же  `elements` менен да иштейт.
$el.is(selector);

// Нативдүү түрү
el.matches(selector);

⬆ Башына

Ajax

Fetch API - XMLHttpRequest'тин ордун баскан стандарт, ал бардык заманбап браузерлерде иштейт. $.ajax'тан айырмаланып, fetch 404 же 500 сыяктуу HTTP ката статусу келгенде ката бербейт (reject кылбайт), ошондуктан response.ok маанисин өзүңөр текшергиле. JSONP-кайрылуулар үчүн fetch-jsonp колдонуп көргүлө.

4.0 JSON алуу

// jQuery
$.getJSON(url).done(handleData).fail(handleError);

// Нативдүү түрү
fetch(url)
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`);
    }
    return response.json();
  })
  .then(handleData)
  .catch(handleError);

4.0.1 JSON жөнөтүү

// jQuery
$.ajax({
  url,
  method: 'POST',
  contentType: 'application/json',
  data: JSON.stringify(data),
});

// Нативдүү түрү
fetch(url, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(data),
});

4.0.2 Токтотуу жана убакыт чеги

// jQuery
const jqXHR = $.ajax({ url, timeout: 5000 });
jqXHR.abort();

// Нативдүү түрү
const controller = new AbortController();
fetch(url, { signal: controller.signal });
controller.abort();

// Нативдүү түрү (убакыт чеги)
fetch(url, { signal: AbortSignal.timeout(5000) });

4.1 Серверден маалымат жүктөп, кайтарылган HTML кодун дал келген элементке коюу.

// jQuery
$(selector).load(url, completeCallback)

// Нативдүү түрү
fetch(url)
  .then((response) => response.text())
  .then((html) => {
    document.querySelector(selector).innerHTML = html;
  })
  .then(completeCallback);

⬆ Башына

Окуялар

5.1 Окуяларды onn аркылуу байланыштыруу

// jQuery
$el.on(eventName, eventHandler);

// Нативдүү түрү
el.addEventListener(eventName, eventHandler);

5.1.1 Окуяны one аркылуу бир жолу гана байланыштыруу

// jQuery
$el.one(eventName, eventHandler);

// Нативдүү түрү
el.addEventListener(eventName, eventHandler, { once: true });

5.1.2 Окуяларды делегациялоо

// jQuery
$el.on(eventName, selector, eventHandler);

// Нативдүү түрү
el.addEventListener(eventName, (event) => {
  const target = event.target.closest(selector);
  if (target && el.contains(target)) {
    eventHandler.call(target, event);
  }
});

5.2 Окуяларды off аркылуу жоюу

// jQuery
$el.off(eventName, eventHandler);

// Нативдүү түрү
el.removeEventListener(eventName, eventHandler);

// Нативдүү түрү: jQuery'деги аттар мейкиндиги (namespace) сыяктуу, бир нече угуучуну (listener) бир эле учурда алып салуу
const controller = new AbortController();
el.addEventListener('click', onClick, { signal: controller.signal });
el.addEventListener('keydown', onKeydown, { signal: controller.signal });
controller.abort();

5.3 Trigger

// jQuery
$(el).trigger('custom-event', {key1: 'data'});

// Нативдүү түрү. jQuery окуялары ата-эне элементтерге чейин көтөрүлөт (bubble), ал эми нативдүү окуялар `bubbles: true` болбосо көтөрүлбөйт.
// Маалыматты окуяны иштеткен функциянын ичинде `event.detail` аркылуу алгыла.
const event = new CustomEvent('custom-event', {
  bubbles: true,
  cancelable: true,
  detail: { key1: 'data' },
});

el.dispatchEvent(event);

⬆ Башына

Утилиталар

6.1 isArray

// jQuery
$.isArray(array);

// Нативдүү түрү
Array.isArray(array);

6.2 Trim

// jQuery
$.trim(string);

// Нативдүү түрү
string.trim();

6.3 Объектин дайындоосу

deep параметри жок $.extend сыяктуу эле, Object.assign жана spread да объекттин жогорку деңгээлин гана көчүрөт (shallow copy).

// jQuery
$.extend({}, object1, object2);

// Нативдүү түрү
Object.assign({}, object1, object2);

// Нативдүү түрү (spread)
({ ...object1, ...object2 });

Бир объектти терең көчүрүү (deep copy):

// jQuery
$.extend(true, {}, object);

// Нативдүү түрү. Функцияларды жана DOM түйүндөрүн көчүрүүгө болбойт
structuredClone(object);

6.4 Contains

// jQuery
$.contains(el, child);

// Нативдүү түрү
el !== child && el.contains(child);

⬆ Башына

Альтернативалар

You Might Not Need jQuery - Бат-бат окуялар, элементтер, ajax ж.б.у.с мисалдардын ванильдуу javascript менен көрсөтүү.
MDN Web Docs - Бул жерде колдонулган ар бир DOM API боюнча маалымдама.
Baseline - Веб-платформанын кайсы мүмкүнчүлүктөрүн бардык браузерлерде коопсуз колдонууга болорун текшерүү.

Браузерлердин колдоосу


Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔

Кээ бир мисалдар жаңыраак API'лерди колдонот: Promise.withResolvers() (2024), el.replaceChildren() (2020) жана AbortSignal.timeout() (2022). Эгерде эски браузерлерди колдоо керек болсо, Baseline аркылуу текшергиле.

License

MIT

Navigation Menu

Repository navigation

README-kg.md

README-kg.md

jQuery'ге муктаждыгынар жок

Мазмуну

Котормолор

Query selector

CSS & Style

DOM манипуляциясы

Ajax

Окуялар

Утилиталар

Альтернативалар

Браузерлердин колдоосу

License

FilesExpand file tree

README-kg.md

Latest commit

History

README-kg.md

File metadata and controls

jQuery'ге муктаждыгынар жок

Мазмуну

Котормолор

Query selector

CSS & Style

DOM манипуляциясы

Ajax

Окуялар

Утилиталар

Альтернативалар

Браузерлердин колдоосу

License