README-kg

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

Build Status

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

Мазмуну

1. Котормолор

2. Query Selector

3. CSS & Style

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

5. Ajax

6. Окуялар

7. Утилиталар

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

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

Котормолор

• 한국어

• 简体中文

• 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үчүн же fetch-ie8 IE8+ үчүн, 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