前端开发 大前端 W3Cbest

一个专注 WEB 开发的技术博客

0%

如何用JavaScript（ES6）标准语法，取代jQuery的一些主要功能

发表于 分类于 ，

常用的 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。

探讨一下如果不需要支持过于陈旧的浏览器版本，如何用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("<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 对象。

        工具

        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(string)

        string.trim();

        移除字符串头尾空白

        $.type(obj);

        Object.prototype.toString.call(obj).replace(/^\[object (.+)\]$/, '$1').toLowerCase();

        检测参数的内部类型

        $.parseJSON(string)

        JSON.parse(string)

        将JSON转换为JS对象

        $ele.data("key", "value")

        ele.dataset.key = "value"

        在指定的元素上存储数据

        $.map(array, function(value, index){ });

        array.map(function(value, index){ });

        将数组转化为处理后的新数组

        参考：https://github.com/nefe/You-Dont-Need-jQuery

坚持技术创作分享，您的支持将鼓励我继续创作！