jQuery与原生JS相互转化

2020-07-13 21:52 2023-12-14 17:09 标签：jquery,javascript

前端发展很快，现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行，直接操作 DOM 不再是好的模式，jQuery 使用场景大大减少。总结了大部分 jQuery API 替代的方法，暂时只支持 IE10 以上浏览器。

Query Selector
常用的 class、id、属性选择器都可以使用 document.querySelector 或 document.querySelectorAll 替代。区别是
document.querySelector 返回第一个匹配的 Element
document.querySelectorAll 返回所有匹配的 Element 组成的 NodeList。它可以通过 [].slice.call() 把它转成 Array
如果匹配不到任何 Element，jQuery 返回空数组 []，但 document.querySelector 返回 null，注意空指针异常。当找不到时，也可以使用 || 设置默认的值，如 document.querySelectorAll(selector) || []
注意：document.querySelector 和 document.querySelectorAll 性能很差。如果想提高性能，尽量使用 document.getElementById、document.getElementsByClassName 或 document.getElementsByTagName。

选择器查询

// jQuery
$('selector');
 
// Native
document.querySelectorAll('selector');

class 查询

// jQuery
$('.class');
 
// Native
document.querySelectorAll('.class');
 
// or
document.getElementsByClassName('class');

id 查询

// jQuery
$('#id');
 
// Native
document.querySelector('#id');
 
// or
document.getElementById('id');

属性查询

// jQuery
$('a[target=_blank]');
 
// Native
document.querySelectorAll('a[target=_blank]');

后代查询

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

兄弟及上下元素

兄弟元素

// jQuery
$el.siblings();
 
// Native - latest, Edge13+
[...el.parentNode.children].filter((child) =>
  child !== el
);
// Native (alternative) - latest, Edge13+
Array.from(el.parentNode.children).filter((child) =>
  child !== el
);
// Native - IE10+
Array.prototype.filter.call(el.parentNode.children, (child) =>
  child !== el
);

上一个元素

// jQuery
$el.prev();
 
// Native
el.previousElementSibling;

下一个元素

// next
$el.next();
 
// Native
el.nextElementSibling;