移除 jQuery 并提升 JavaScript 技能

我开始慢慢移除 JQuery 了，它很香，特别香，特别方便，太 NB 了。

然而我在写 chrome 插件，它会对一些加载或者魔改和 $ 有关的代码产生冲突。痛定思痛，再加上为了提升我的 JS 基础，我还是打算移除 JQuery 了。

参考资料

You might not need jQuery

替换 JQuery 的美元符号

这大概是我最后的挣扎吧，虽然理论上可以成功，但是还是别偷懒的好

var myJqueryAlias = jQuery.noConflict();
myJqueryAlias(document).ready(function () {
  myJqueryAlias('#insideTable > tbody > tr:odd').addClass('odd');
  myJqueryAlias('#insideTable > tbody > tr:not(.odd)').hide();
  myJqueryAlias('#insideTable > tbody > tr:odd').show();
  myJqueryAlias('#insideTable > tbody > tr.odd').click(function () {
    myJqueryAlias(this).next().toggle();
    myJqueryAlias(this).find('.arrow').toggleClass('up');
  });
});

方法替换

创建元素

JQuery

$('<div></div>');

JavaScript

document.body.onload = addElement;

function addElement() {
  // 创建一个新的 div 元素
  let newDiv = document.createElement('div');
  // 给它一些内容
  let newContent = document.createTextNode('Hi there and greetings!');
  // 添加文本节点 到这个新的 div 元素
  newDiv.appendChild(newContent);

  // 将这个新的元素和它的文本添加到 DOM 中
  let currentDiv = document.getElementById('div1');
  document.body.insertBefore(newDiv, currentDiv);
}

设置元素属性

JQuery

$(el).attr('tabindex', 3);

JavaScript

el.setAttribute('tabindex', 3);

添加 classNmae

JQuery

$(el).addClass(className);

JavaScript

注意，该方法好像只在 IE10 支持

el.classList.add(className);

如果要兼容到 IE9 以下的浏览器，是这样

var d = document.getElementById('div1');
d.className += ' otherclass';

添加元素

JQuery

$(parent).append(el);

JavaScript

parent.appendChild(el);

点击事件 onclick

JQuery

$(aiAppElement).click(() => {
  that.closeMiniCard();
});

JavaScript

aiAppElement.onclick = () => {
  that.closeMiniCard();
};

获取 body 元素

JQuery

$('body');

JavaScript

document.body;

获取 children 元素

JQuery

document.body.children();

JavaScript

document.body.children;

获取 text 文本

JQuery

$(el).text();

JavaScript

el.textContent;

IE8 的话是

var text = e.item.textContent || e.item.innerText;
alert(text);