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

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

Мазмуну

Котормолор
Query Selector
CSS & Style
DOM манипуляциясы
Ajax
Окуялар
Утилиталар
Альтернативалар
Браузерлердин колдоосу

Котормолор

한국어
简体中文
Bahasa Melayu
Bahasa Indonesia
Português(PT-BR)
Tiếng Việt Nam
Español
Русский
Кыргызча
Türkçe
Italiano
Français
日本語
Polski

Query selector

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

document.querySelector биринчи дал келген элементти кайтарат.
document.querySelectorAll баардык дал келген элементтерди түйүндөр коллекциялары(NodeList) сыяктуу кайтарат. Аны [].slice.call(document.querySelectorAll(selector) || []); аркылуу массивге конвертация кылууга болот.
Эгерде эч элементтер дал келбесе, анда DOM API null кайтарганда jQuery [] кайтарат. Null (Null Pointer Exception) чыгаруунун көрсөткүчүнө көнүл бургула. Эгерде дал келүүлөр кездешбесе, анда силер жарыяланбаган маани үчүн || колдонсонор болот document.querySelectorAll(selector) || []

Белгилөө: document.querySelector жана document.querySelectorAll чыныгы ЖАЙ, колдон келишинче кирешелүүлүктү жакшыртуу максатында getElementById, document.getElementsByClassName же document.getElementsByTagName колдонго аракет кылгыла.

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();

// Нативдүү түрү
[].filter.call(el.parentNode.children, function(child) {
  return child !== el;
});

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

// jQuery
$el.prev();

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

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

// jQuery
$el.next();

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

1.6 Жакынкы

Берилген селектор аркылуу биринчи дал келген элементти кайтарат.

// jQuery
$el.closest(selector);

// Нативдүү түрү - Only latest, NO IE
el.closest(selector);

// Нативдүү түрү - IE10+
function closest(el, selector) {
  const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;

  while (el) {
    if (matchesSelector.call(el, selector)) {
      return el;
    } else {
      el = el.parentElement;
    }
  }
  return null;
}

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

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

// Нативдүү түрү
function parentsUntil(el, selector, filter) {
  const result = [];
  const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;

  // Ата-энеден баштап дал келүү
  el = el.parentElement;
  while (el && !matchesSelector.call(el, selector)) {
    if (!filter) {
      result.push(el);
    } else {
      if (matchesSelector.call(el, 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
$(e.currentTarget).index('.radio');

// Нативдүү түрү
[].indexOf.call(document.querySelectorAll('.radio'), 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, DOM'ду өзгөртпөстөн эсте иштей берет
$el.attr('foo', 'bar');

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

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

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

// Нативдүү түрү (`getAttribute`'ду колдонуп)
el.getAttribute('data-foo');
// Нативдүү түрү  ( `dataset`'ти колдонуу, эгерде  IE 11 төмөн колдоо жок болсо)
el.dataset['foo'];

⬆ Башына

CSS & Style

2.1 CSS

Стильди алуу

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

// Нативдүү түрү
// Белгилөө:  Белгилүү ката, эгерде стильдин мааниси 'auto' болсо, анда 'auto' кайтарат
const win = el.ownerDocument.defaultView;
// null псевдостильдерди кайтарбоону белгилейт
win.getComputedStyle(el, null).color;

style менчиктоо

// jQuery
$el.css({ color: "#ff0011" });

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

Стильдерди Алуу/Менчиктоо

Заметьте что если вы хотите присвоить несколько стилей за раз, вы можете сослаться на setStyles метод в oui-dom-utils package.

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

// 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 Туурасы жана узундугу

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

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

// Терезенин узундугу
$(window).height();
// Скролбарсыз jQuery'дей эле сыяктуу болот
window.document.documentElement.clientHeight;
// скролбар менен
window.innerHeight;

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

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

// Нативдүү түрү
document.documentElement.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;

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

Позициясы

Ата-энесин жылуусу боюнча учурдагы координаттарды алуу
```
// jQuery
$el.position();

// Нативдүү түрү
{ left: el.offsetLeft, top: el.offsetTop }
```

Ылдый өтүү

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

// jQuery
$el.offset();

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

  return {
    top: box.top + window.pageYOffset - document.documentElement.clientTop,
    left: box.left + window.pageXOffset - document.documentElement.clientLeft
  }
}

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

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

// Нативдүү түрү
(document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;

⬆ Башына

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

3.1 Remove

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

// jQuery
$el.remove();

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

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
$el.append("<div id='container'>hello</div>");

// Нативдүү түрү
el.insertAdjacentHTML("beforeend","<div id='container'>hello</div>");

3.5 Prepend

// jQuery
$el.prepend("<div id='container'>hello</div>");

// Нативдүү түрү
el.insertAdjacentHTML("afterbegin","<div id='container'>hello</div>");

3.6 insertBefore

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

// jQuery
$newEl.insertBefore(queryString);

// Нативдүү түрү
const target = document.querySelector(queryString);
target.parentNode.insertBefore(newEl, target);

3.7 insertAfter

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

// jQuery
$newEl.insertAfter(queryString);

// Нативдүү түрү
const target = document.querySelector(queryString);
target.parentNode.insertBefore(newEl, target.nextSibling);

3.8 is

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

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

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

⬆ Башына

Ajax

Fetch API - XMLHttpRequest ajax үчүн орун алган жаны стандарт. Chrome жана Firefox үчүн иштейт, бирок силер эски браузерлердин колдоосу үчүн полифилдерди колдонсонор болот.

IE9+ [github/fetch](http://github.com/github/fetch)үчүн  же  [fetch-ie8](https://github.com/camsong/fetch-ie8/)  IE8+ үчүн, [fetch-jsonp](https://github.com/camsong/fetch-jsonp)  JSONP-кайрылуулар үчүн колдонуп көргулө .

⬆ Башына

Окуялар

Аттардын мейкиндигни толук алмаштыруу жана делегирование кылыш үчүн oui-dom-events кайрылуу керек

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

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

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

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

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

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

5.3 Trigger

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

// Нативдүү түрү
if (window.CustomEvent) {
  const event = new CustomEvent('custom-event', {detail: {key1: 'data'}});
} else {
  const event = document.createEvent('CustomEvent');
  event.initCustomEvent('custom-event', true, true, {key1: 'data'});
}

el.dispatchEvent(event);

⬆ Башына

Утилиталар

6.1 isArray

// jQuery
$.isArray(range);

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

6.2 Trim

// jQuery
$.trim(string);

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

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

Кошумча object.assign https://github.com/ljharb/object.assign полифилин колдонгула
```
// jQuery
$.extend({}, defaultOpts, opts);

// Нативдүү түрү
Object.assign({}, defaultOpts, opts);
```

6.4 Contains

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

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

⬆ Башына

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

You Might Not Need jQuery - Бат-бат окуялар, элементтер, ajax ж.б.у.с мисалдардын ванильдуу javascript менен көрсөтүү.
npm-dom и webmodules - Башка DOM бөлүктөрүy NPM'де тапса болот

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


Latest ✔	Latest ✔	10+ ✔	Latest ✔	6.1+ ✔

License

MIT

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

README-kg.md

README-kg.md

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

Мазмуну

Котормолор

Query selector

CSS & Style

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

Ajax

Окуялар

Утилиталар

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

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

License

Files

README-kg.md

Latest commit

History

README-kg.md

File metadata and controls

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

Мазмуну

Котормолор

Query selector

CSS & Style

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

Ajax

Окуялар

Утилиталар

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

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

License