脚本宝典收集整理的这篇文章主要介绍了

jquery等价dom操作

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

介绍 jquery 等价于 dom 原生操作。

empty()

$("#id").empty()

var el = document.getElementById("app");
var child, nextChild;
for(child = el.firstChild; child; ) {
    nextChild = child.nextSibling;
    el.removeChild(child);
    child = nextChild;
}

append()

$("#id").append()

这里的 append 可以使用 reactrender 函数来做

render(
    <div>Hello wolrd</div>,
    document.getElementById("app")
)

css()

$(".tdxmask").css({ display: "none" });

var els = document.getElementsByClassName("tdxmask");
els.forEach(function(el) {
    el.style.display = "none";
})

extend()

$.extend({}, item.hot.style, {"background-image": "none" })

style = Object.assign({}, item.hot.style, {"background-image": "none" });

sibings(), find(), removeClass()

$el.siblings().find("span").removeClass("sortup").removeClass("sortdown")

// 查找某个节点的所有兄弟节点,并返回数组列表
function siblings(el) {
    var s = [];
    var preEl, nextEl;
    preEl = el.previousSibling;
    nextEl = el.nextSibling;

    // 前面的兄弟节点
    while (preEl) {
        s.push(preEl);
        preEl = preEl.previousSibling;
    }

    // 后面的兄弟节点
    while (nextEl) {
        s.push(nextEl);
        nextEl = nextEl.nextSibling;
    }

    return s;
}

// 查询子节点中的某个标签
function findChildNodesByTagName(el, tagName) {
    var s = [];
    var childNodeList = el.childNodes;

    for(var i = 0; i < childNodeList.length; i++) {
        var cnode = childNodeList[i];
        if(cnode.nodeName.toUpperCase() == tagName.toUpperCase()) {
            s.push(cnode);
        }
    }

    return s;
}

let sibs = siblings(el);
sibs.map( sib => {
    findChildNodesByTagName(sib, "span").map( node => {
        // debugger;
        node.className = "";
    })
} )

总结

以上是脚本宝典为你收集整理的

jquery等价dom操作

全部内容,希望文章能够帮你解决

jquery等价dom操作

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过