使用 javascript 替换 jQuery
jQuery 曾风靡一个时代，大大降低了前端开发的门槛，丰富的插件也是前端开发者得心应手的武器库，但是，这个时代终于要落幕了。随着 JS 标准和浏览器的进步，jQuery 的很多精华被原生 JS 吸收，我们直接使用原生 API 就可以用类似手法来处理以前需要 jQuery 的问题。在新的 Web 项目中，如果不需要支持过于陈旧的浏览器版本，那么的确没有必要使用 jQuery。
下面就探讨如何用JavaScript（ES6）标准语法，取代jQuery的一些主要功能。
选取元素
选择器查询
常用的 class、id、属性 选择器都可以使用 document.querySelector 或 document.querySelectorAll 替代。
- document.querySelector 返回第一个匹配的 Element
- document.querySelectorAll 返回所有匹配的 Element 组成的 NodeList。
jQuery：
var $ele = $("selector");
Native:
let ele = document.querySelectorAll("selector");
选择器模式
| 选择器 | 示例 | 示例说明 |
|---|---|---|
| .class | .intro | 选择所有class="intro"的元素 |
| #id | #firstname | 选择所有id="firstname"的元素 |
| * | * | 选择所有元素 |
| element | p | 选择所有<p>元素 |
| element,element | div,p | 选择所有<div>元素和<p>元素 |
| element element | div p | 选择<div>元素内的所有<p>元素 |
| element>element | div>p | 选择所有父级是<div>元素的 <p>元素 |
| element+element | div+p | 选择所有紧接着<div>元素之后的<p>元素 |
| [attribute=value] | a[target=_blank] | 选择所有使用target="_blank"的<a>元素 |
| [attribute^=value] | a[src^="http"] | 选择每一个src属性的值以"http"开头的<a>元素 |
| [attribute$=value] | a[src$=".jpg"] | 选择每一个src属性的值以".jpg"结尾的<a>元素 |
| :first-child | ul li:first-child | 选择<ul>元素下的首个<li>元素 |
| :nth-child(n) | ul li:nth-child(3) | 选择<ul>元素下的第三个<li>元素 |
| :last-child | ul li:last-child | 选择<ul>元素下的最后一个<li>元素 |
DOM 树查询
| jQuery | Native | 方法说明 |
|---|---|---|
$ele.parent() |
ele.parentNode |
元素的直接父元素 |
$ele.children() |
ele.childNodes |
元素的所有直接子元素 |
$ele.find("a") |
ele.querySelectorAll("a") |
元素的后代元素 |
$ele.prev() |
ele.previousElementSibling |
元素的上一个同胞元素 |
$ele.next() |
ele.nextElementSibling |
元素的下一个同胞元素 |
DOM 操作
DOM本身就具有很丰富的操作方法，可以取代jQuery提供的操作方法。
内容和属性
| jQuery | Native | 方法说明 |
|---|---|---|
var text = $ele.text() |
let text = ele.innerText |
获取所选元素的文本内容 |
$ele.text("text") |
ele.innerText = "text" |
设置所选元素的文本内容 |
var html = $ele.html() |
let html = ele.innerHTML |
获取所选元素的HTML内容 |
$ele.html("<div>html</div>") |
ele.innerHTML = "<div>html</div>" |
设置所选元素的HTML内容 |
var input = $ele.val() |
let input = ele.value |
获取表单字段的值 |
$ele.val("input") |
ele.value = "input" |
设置表单字段的值 |
var href = $ele.attr("href") |
let href = ele.getAttribute("href") |
获取元素的属性值 |
$ele.attr("href", "/") |
ele.setAttribute("href", "/") |
设置元素的属性值 |
修改 DOM 树
| jQuery | Native | 方法说明 |
|---|---|---|
$parent.append($ele) |
parent.appendChild(ele) |
在被选元素的结尾插入内容 |
$parent.prepend($ele) |
parent.insertBefore(ele, parent.firstChild) |
在被选元素的开头插入内容 |
$ele.after(html) |
ele.insertAdjacentHTML("afterend", html) |
在被选元素之后插入内容 |
$ele.before(html) |
ele.insertAdjacentHTML("beforebegin", html) |
在被选元素之前插入内容 |
$ele.remove() |
ele.parentNode.removeChild(ele) |
删除被选元素及其子元素 |
$ele.empty() |
ele.innerHTML = null |
从被选元素中删除子元素 |
$ele.clone() |
ele.cloneNode(true) |
拷贝被选元素 |
$ele.replaceWith(html) |
ele.outerHTML = html |
指定HTML替换被选元素 |
CSS 样式
设置 Style
HTML DOM 允许 JavaScript 改变 HTML 元素的样式，Native API 提供了如下几种方式：
- ele.setAttribute 直接修改 DOM style 属性改变样式
- ele.style.cssText 通过 cssText 修改 Style 属性
- ele.style.property 通过 style 对象读写行内 CSS 样式
jQuery：
var size = $ele.css("font-size"); // 返回第一个匹配元素的 CSS 属性值
$ele.css("font-size", "2rem"); // 为所有元素设置指定的 CSS 属性值
Native:
let size = getComputedStyle(ele)["font-size"]; // 获取当前元素计算后的 CSS 属性值
ele.style.setProperty("font-size", "2rem"); // 设置当前元素的某个内联样式
ele.style.removeProperty("font-size"); // 移除当前元素的某个内联样式
设置 Class
| jQuery | Native | 方法说明 |
|---|---|---|
$ele.hasClass(className) |
ele.classList.contains(className) |
检查元素是否包含指定的类名 |
$ele.addClass(className) |
ele.classList.add(className) |
向元素增加一个或多个类名 |
$ele.removeClass(className) |
ele.classList.remove(className) |
从元素中移除一个或多个类 |
$ele.toggleClass(className) |
ele.classList.toggle(className) |
对元素的一个或多个类进行切换 |
事件方法
绑定事件
jQuery：
$ele.on("click", function (evt) {
console.log(evt.target);
});
Native:
ele.addEventListener("click", evt => {
console.log(evt.target);
});
解除绑定
jQuery：
$ele.off("click");
Native:
ele.removeEventListener("click", func);
如果要移除事件，addEventListener 必须使用外部函数，绑定匿名函数的事件是无法移除的。
模拟触发
jQuery：
$ele.trigger("click");
Native:
let event = document.createEvent("MouseEvents");
event.initMouseEvent("click");
ele.dispatchEvent(event);
模拟事件：
- 首先通过 document.createEvent 方法创建 Event 对象。
- 然后利用 Event 对象的 init 方法对其进行初始化。
- 最后使用 dispatchEvent 方法触发 Event 对象。
Ajax
jQuery
$.ajax({
url: "http://apis.juhe.cn/ip/ip2addr",
type: "GET",
data: {
"key": "80701ec21437ca36ca466af27bb8e8d3",
"ip": "220.181.57.216"
},
dataType: "json",
success: function (data) {
console.log(data);
}
});
XHR 封装
window.ajax = async function (params, callback) {
let url = params.url;
let method = params.method;
let data = params.data;
let body = new FormData();
for (let key in data) {
if (data.hasOwnProperty(key)) {
body.append(key, data[key]);
}
}
let xhr = new XMLHttpRequest();
xhr.timeout = 3000;
xhr.open(method, url, true);
xhr.addEventListener("readystatechange", evt => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
callback(xhr.response);
} else {
throw xhr.statusText;
}
}
});
xhr.send(body);
};
ajax({
url: "http://apis.juhe.cn/ip/ip2addr",
method: "GET",
data: {
"key": "80701ec21437ca36ca466af27bb8e8d3",
"ip": "220.181.57.216"
}
},function (resp) {
var json = JSON.parse(resp);
console.log(json);
}
)
Fetch API
XMLHttpRequest 并不是专为 Ajax 而设计的. 虽然各种框架对 XHR 的封装已经足够好用, 但更好用的 API 是 fetch 。
/* 构造请求对象 */
let request = new Request(
"http://apis.juhe.cn/ip/ip2addr",
{
method: "GET",
body: {
"key": "80701ec21437ca36ca466af27bb8e8d3",
"ip": "220.181.57.216"
},
headers: new Headers()
}
);
/* 处理响应对象 */
fetch(request)
.then(response => response.json())
.then(function (data) {
console.log(data);
})
.catch(function (error) {
console.log(error);
});
详见：fetch用法说明
工具
Array
| jQuery | Native | 方法说明 |
|---|---|---|
$.isArray(array) |
Array.isArray(array) |
判断参数是否为一个数组 |
$.inArray(item, array) |
array.includes(item) |
判断值是否在指定数组中 |
$.makeArray(objlist) |
Array.from(objlist) |
将类数组对象转换为数组 |
$.merge(array1, array2) |
array1.concat(array2) |
合并两个数组（有区别） |
$.each(array, function (i, item) {} |
array.forEach((item, i) => {}) |
遍历指定的对象和数组 |
合并数组时，merge 会改变原数组的内容，而 concat 不会修改原数组，只会返回合并后的数组
Method
| jQuery | Native | 方法说明 |
|---|---|---|
$.now() |
Date.now() |
返回当前时间戳 |
$.trim(context) |
context.trim() |
移除字符串头尾空白 |
$.type(parameter) |
typeof parameter |
检测参数的内部类型 |
$.parseJSON(jsonstr) |
JSON.parse(jsonstr) |
将JSON转换为JS对象 |
$ele.data("key", "value") |
ele.dataset.key = "value" |
在指定的元素上存储数据 |
$.map(array, function (item, i) {}) |
array.map((item, i) => {}) |
将数组转化为处理后的新数组 |