jquery等价dom操作

Mike617 发布于2019-08-21 10:51 / 1548人阅读

摘要：介绍等价于原生操作。这里的可以使用的函数来做查找某个节点的所有兄弟节点，并返回数组列表前面的兄弟节点后面的兄弟节点查询子节点中的某个标签

介绍 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 可以使用 react 的 render 函数来做

render(
    Hello wolrd,
    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 = "";
    })
} )

GPU云服务器云服务器 jquery_dom jQuery遍历DOM Dom操作 dom对象操作

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

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

jQuery入门笔记之（一）选择器引擎

摘要：选择器，若未作特别说明，获取的都是元素集合。过滤器名语法说明选取所有不可见元素选取所有可见元素注意过滤器一般是包含的内容为样式为表单类型为和的元素。四子元素过滤器子元素过滤器的过滤规则是通过父元素和子元素的关系来获取相应的元素。转自个人博客本来是单独整理了一个CSS选择器的，但是在jQuery中基本都有对应的，所以就不发了。 jQuery选择器，若未作特别说明，获取的都是元素集合。...

charles_paul 2019-08-19 17:17 评论0 收藏0
jQuery（一）-- 初步了解

摘要：一初步了解介绍由创建于年一月的开源项目，凭借着跨平台的兼容性，简洁的语法，极大的简化了人员遍历文档，操作，处理事件，执行动画，和开发的操作。只建立一个名为的对象。对发生在同一个对象上的一组动作，可以直接连写无需重复获取对象。 jQuery（一）-- 初步了解 jQuery介绍由John Resig创建于2006年一月的开源项目，jQuery凭借着跨平台的兼容性，简洁的语法，极大的简...

quietin 2019-08-26 10:43 评论0 收藏0
前端培训-中级阶段（5）- jQuery的概念与基本使用（2019-07-11期）

摘要：前端最基础的就是。前面我们已经基本掌握常规的语法语义，以及基本的使用方法。等价于当载入就绪执行一个函数回调。返回一组匹配的元素。据提供的原始标记字符串，动态创建由对象包装的元素。同时设置一系列的属性事件等。前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提...

church 2019-08-02 15:23 评论0 收藏0
前端培训-中级阶段（5）- jQuery的概念与基本使用（2019-07-11期）

摘要：前端最基础的就是。前面我们已经基本掌握常规的语法语义，以及基本的使用方法。等价于当载入就绪执行一个函数回调。返回一组匹配的元素。据提供的原始标记字符串，动态创建由对象包装的元素。同时设置一系列的属性事件等。前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提...

HmyBmny 2019-08-23 18:20 评论0 收藏0