使用 javascript 替换 jQuery

zhangyucha0 发布于2019-08-23 12:12 / 1944人阅读

摘要：使用替换曾风靡一个时代，大大降低了前端开发的门槛，丰富的插件也是前端开发者得心应手的武器库，但是，这个时代终于要落幕了。选取元素选择器查询常用的属性选择器都可以使用或替代。返回第一个匹配的返回所有匹配的组成的。最后使用方法触发对象。

使用 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	选择所有元素
element,element	div,p	选择所有元素和元素
element element	div p	选择元素内的所有元素
element>element	div>p	选择所有父级是元素的元素
element+element	div+p	选择所有紧接着元素之后的元素
[attribute=value]	a[target=_blank]	选择所有使用target="_blank"的元素
[attribute^=value]	a[src^="http"]	选择每一个src属性的值以"http"开头的元素
[attribute$=value]	a[src$=".jpg"]	选择每一个src属性的值以".jpg"结尾的元素
:first-child	ul li:first-child	选择元素下的首个元素
:nth-child(n)	ul li:nth-child(3)	选择元素下的第三个元素
:last-child	ul li:last-child	选择元素下的最后一个元素

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(" html ")	ele.innerHTML = " html "	设置所选元素的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) => {})	将数组转化为处理后的新数组

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98094.html

抛弃jQuery，拥抱原生JavaScript

摘要：数据来源百度统计下面是国际上占有率，已经跌出前，比较多，还好支持他们并不难。前端发展很快，现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行，直接操作 DOM 不再是好的模式，jQuery 使用场景大大减少。因此我们项目组在双十一后抽了一周时间，把所有代码中...

testbird 2019-08-19 17:07 评论0 收藏0
jQuery初体验

摘要：就像一个大的功能库，给我们返回一个有很多方法属性的对象，然后我们调用它的方法属性就行了。和一样，使用链式代码。一旦找到新的元素，之后的链就操作在新元素上，而不是一开始的元素。一般的变量无法使用方法，使用封装，使其可以使用方法。 jQuery jQuery就像一个大的功能库，给我们返回一个有很多方法、属性的对象，然后我们调用它的方法、属性就行了。和Javascript一样，使用链式代码...

Towers 2019-08-22 17:28 评论0 收藏0
原生js替换jQuery各种方法-中文版

摘要：本项目总结了大部分替代的方法，暂时只支持以上浏览器。返回指定元素及其后代的文本内容。从服务器读取数据并替换匹配元素的内容。用它自己的方式处理，原生遵循标准实现了最小来处理。当全部被解决时返回，当任一被拒绝时拒绝。是创建的一种方式。原文https://github.com/nefe/You-D... You Dont Need jQuery showImg(https://segmen...

lylwyy2016 2019-08-23 12:14 评论0 收藏0
JavaScript专题之jQuery通用遍历方法each的实现

摘要：语法为回调函数拥有两个参数第一个为对象的成员或数组的索引，第二个为对应变量或内容。但是对于的函数，如果需要退出循环可使回调函数返回，其它返回值将被忽略。 JavaScript 专题系列第十一篇，讲解 jQuery 通用遍历方法 each 的实现 each介绍 jQuery 的 each 方法，作为一个通用遍历方法，可用于遍历对象和数组。语法为： jQuery.each(object,...

blankyao 2019-08-20 18:30 评论0 收藏0
jQuery DOM节点的复制、替换

摘要：拷贝克隆节点是的常见操作，提供一个方法，专门用于处理的克隆方法深度复制所有匹配的元素集合，包括所有匹配元素匹配元素的下级元素文字节点。拷贝clone() 克隆节点是DOM的常见操作，jQuery提供一个clone方法，专门用于处理dom的克隆 .clone()方法深度复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。 clone方法比较简单就是克隆节点，但是需...

jindong 2019-08-21 11:54 评论0 收藏0