共计 5404 个字符，预计需要花费 14 分钟才能阅读完成。
使用 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 对象。
详见：JavaScript 事件——“模拟事件”的注意要点
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) => {})
将数组转化为处理后的新数组
