jQueryの各種メソッドをes6で再現する

$('~').find('~')

jQuery

console.log($('ul').find('.ss1'));

es6

Object.prototype.elmFind = function elmFind (selector) {
  const target = (/(NodeList|HTMLCollection)/).test(Object.prototype.toString.call(this)) ? this : [this];
  let elmArr = [];
  Array.prototype.forEach.call(
    target,
    (elm) => {
      let sls = elm.querySelectorAll(selector);
      sls = Array.prototype.slice.call(sls);
      elmArr.push(...sls);
    },
  );
  return elmArr;
};

const uls = document.querySelectorAll('ul');
console.log(uls.elmFind('.ss1'));

$('~').each(function(index){~});

jQuery

$('[name=checkbox1]').each(function (index) {
  console.log(this, index);
});

es6

// elmEachを定義
Object.prototype.elmEach = function elmEach (callback) {
  let target = (/(NodeList|HTMLCollection)/).test(Object.prototype.toString.call(this)) ? this : [this];
  Array.prototype.forEach.call(
    target,
    (elm, index) => callback(elm, index),
  );
};

const checkbox1 = document.getElementsByName('checkbox1');
checkbox1.elmEach((element, index) => {
  console.log(element, index);
});

thisの代わりに第１引数で各要素を取得する。

$('~').on(events, function(){~});

jQuery

var $btnElements = $('.btn');

$btnElements.on('mouseenter mouseleave', function (event) {
  var $this = $(this);
  if (event.type === 'mouseenter') {
    $this.addClass('hover');
  } else {
    $this.removeClass('hover');
  }
});

es6

// addEventListenerMulti の定義
Object.prototype.addEventListenerMulti = function addEventListenerMulti (events, callback) {
  let target = (/(NodeList|HTMLCollection)/).test(Object.prototype.toString.call(this)) ? this : [this];
  events.split(' ').forEach(event => {
    Array.prototype.forEach.call(
      target,
      elm => elm.addEventListener(event, event => callback(event)),
    );
  });
};

const btnElements = document.querySelectorAll('.btn');

btnElements.addEventListenerMulti('mouseenter mouseleave', event => {
  const target = event.target;
  if (event.type === 'mouseenter') {
    target.classList.add('hover');
  } else {
    target.classList.remove('hover');
  }
});

onメソッドの代替としてaddEventListenerMultiを定義。
複数のイベント指定に対応し、NodeListやHTMLCollectionが対象でもこれを処理する。
もちろんgetElementById()などの直接指定にも対応する。

nextUntil(), nextAll(), prevUntil(), prevAll()

es6

Object.prototype.nextUntil = function nextUntil(selector = false) {
  let nextElm = this.nextSibling;
  const elms = [];
  while (nextElm) {
    if (nextElm.nodeType === 1) {
      if (!selector && nextElm.matches(selector)) break;
      else elms.push(nextElm);
    }
    nextElm = nextElm.nextSibling;
  }
  return elms.length ? elms : null;
};
Object.prototype.nextAll = function nextAll(selector = '*') {
  let nextElm = this.nextSibling;
  const elms = [];
  while (nextElm) {
    if (nextElm.nodeType === 1 && nextElm.matches(selector)) elms.push(nextElm);
    nextElm = nextElm.nextSibling;
  }
  return elms.length ? elms : null;
};
Object.prototype.prevUntil = function prevUntil(selector = false) {
  let prevElm = this.previousSibling;
  const elms = [];
  while (prevElm) {
    if (prevElm.nodeType === 1) {
      if (!selector && prevElm.matches(selector)) break;
      else elms.push(prevElm);
    }
    prevElm = prevElm.previousSibling;
  }
  return elms.length ? elms : null;
};
Object.prototype.prevAll = function prevAll(selector = '*') {
  let prevElm = this.previousSibling;
  const elms = [];
  while (prevElm) {
    if (prevElm.nodeType === 1 && prevElm.matches(selector)) elms.push(prevElm);
    prevElm = prevElm.previousSibling;
  }
  return elms.length ? elms : null;
};

val()の代替

jQuery

var rdElements = $('[name=sample]');
console.log(rdElements.val());

es6

// checkValを定義
Object.prototype.checkVal = function checkVal() {
  let result = Array.prototype.filter.call(
    this, elm => elm.checked,
  );
  if (this.item(0).type === 'radio') {
    result = result[0].value;
  } else if (this.item(0).type === 'checkbox') {
    result = result.map(elm => elm.value);
  }
  return result;
};

const rdElements = document.getElementsByName('sample');
console.log(rdElements.checkVal());

input[type='radio']の場合チェックされたvalueを、
input[type='checkbox']の場合チェックされたvalueの配列を返す。