专栏首页小康的自留地jQuery原理(DOM操作相关方法)

jQuery原理(DOM操作相关方法)

empty方法

清空指定元素中的所有内容。也就是遍历内容,然后将其innerHTML清空。

kjQuery.prototype.extend({
    empty: function () {
        // 遍历所有找到的元素
        this.each(function (k, v) {
            v.innerHTML = '';
        });
        // 返回this对象为了方便链式编程
        return this;
    },
})

remove方法

删除所有的元素或指定元素。判断是否传入参数,如果传入参数,则删除指定元素,否则删除全部。

JavaScript元素不能自己删除自己,只能通过上级元素删除。

remove: function (sele) {
    if (arguments.length === 0) {
        // 遍历指定的元素
        this.each(function (k, v) {
            // 根据遍历到的元素找到父元素
            var parent = v.parentNode;
            // 通过父元素删除指定元素
            parent.removeChild(v);
        });
    } else {
        var $this = this;
        // 根据传入的选择器 找到对应的元素
        $(sele).each(function (key, value) {
            var type = value.tagName;
            $this.each(function (k, v) {
                var t = v.tagName;
                if (t === type) {
                    // 根据遍历到的元素找到父元素
                    var parent = value.parentNode;
                    // 通过父元素删除指定元素
                    parent.removeChild(value);
                }
            });
        });
    }

    return this;
},

html方法

设置所有元素的内容,获取第一个元素的内容

html: function (content) {
    if (arguments.length === 0) {
        return this[0].innerHTML;
    } else {
        this.each(function (k, v) {
            v.innerHTML = content;
        });
    }
},

text方法

设置所有元素的文本内容,获取所有元素的文本

text: function (content) {
    if (arguments.length === 0) {
        var res = "";
        this.each(function (k, v) {
            res += v.innerText;
        });
        return res;
    } else {
        this.each(function (k, v) {
            v.innerText = content;
        });
    }
},

appendTo方法

将元素添加到指定元素内部的最后

  1. 如果指定元素有多个,会将元素拷贝多份添加到指定元素中
  2. 给appendTo方法传递字符串, 会根据字符串找到所有对应元素后再添加
  3. 给appendTo方法传递jQuery对象,会将元素添加到jQuery对象保存的所有指定元素中
  4. 给appendTo方法传递DOM元素, 会将元素添加到所有指定DOM元素中
appendTo: function (sele) {
    // 1. 统一的将传入的数据传递给核心函数
    var $target = $(sele);
    var $this = this;
    var res = [];
    // 2. 遍历取出所有指定元素
    $.each($target, function (key, value) {
        // 遍历取出所有的元素
        $this.each(function (k, v) {
            if (key == 0) {
                // 直接添加
                value.appendChild(v);
                res.push(v);
            } else {
                var temp = v.cloneNode(true);
                value.appendChild(temp);
                res.push(v);
            }
        });
    });
    return $(res);
},

prependTo方法

将元素添加到指定元素内部的最前面。

与appendTo方法一模一样,只不过将添加方法换成了insertBefore

prependTo: function (sele) {
    // 1. 统一的将传入的数据传递给核心函数
    var $target = $(sele);
    var $this = this;
    var res = [];
    // 2. 遍历取出所有指定元素
    $.each($target, function (key, value) {
        // 遍历取出所有的元素
        $this.each(function (k, v) {
            if (key == 0) {
                // 直接添加
                value.insertBefore(v, value.firstChild);
                res.push(v);
            } else {
                var temp = v.cloneNode(true);
                value.insertBefore(temp, value.firstChild);
                res.push(v);
            }
        });
    });
    return $(res);
},

append

将元素添加到指定元素内部的最后

append: function (sele) {
    // 判断传入的参数是否是字符串
    if (kjQuery.isString(sele)) {
        this[0].innerHTML += sele;
    } else {
        $(sele).appendTo(this);
    }
    return this;
},

prepend方法

将元素添加到指定元素内部的最后面

prepend: function (sele) {
    // 判断传入的参数是否是字符串
    if (kjQuery.isString(sele)) {
        this[0].innerHTML = sele + this[0].innerHTML;
    } else {
        $(sele).prependTo(this);
    }
    return this;
},

insertBefore方法

将元素添加到指定元素外部的前面

insertBefore: function (sele) {
    // 1.统一的将传入的数据转换为jQuery对象
    var $target = $(sele);
    var $this = this;
    var res = [];
    // 2.遍历取出所有指定的元素
    $.each($target, function (key, value) {
        var parent = value.parentNode;
        // 2.遍历取出所有的元素
        $this.each(function (k, v) {
            // 3.判断当前是否是第0个指定的元素
            if (key === 0) {
                // 直接添加
                parent.insertBefore(v, value);
                res.push(v);
            } else {
                // 先拷贝再添加
                var temp = v.cloneNode(true);
                parent.insertBefore(temp, value);
                res.push(temp);
            }
        });
    });
    // 3.返回所有添加的元素
    return $(res);
},

insertAfter方法

将元素添加到指定元素外部的后面

insertAfter: function (sele) {
    // 1.统一的将传入的数据转换为jQuery对象
    var $target = $(sele);
    var $this = this;
    var res = [];
    // 2.遍历取出所有指定的元素
    $.each($target, function (key, value) {
        var parent = value.parentNode;
        var nextNode = $.get_nextsibling(value);
        // 2.遍历取出所有的元素
        $this.each(function (k, v) {
            // 3.判断当前是否是第0个指定的元素
            if (key === 0) {
                // 直接添加
                parent.insertBefore(v, nextNode);
                res.push(v);
            } else {
                // 先拷贝再添加
                var temp = v.cloneNode(true);
                parent.insertBefore(temp, nextNode);
                res.push(temp);
            }
        });
    });
    // 3.返回所有添加的元素
    return $(res);
},

before

before: function (sele) {
    // 1.统一的将传入的数据转换为jQuery对象
    var $target = $(sele);
    var $this = this;
    $this.each(function (k, v) {
        var parent = v.parentNode
        if (k == 0) {
            parent.insertBefore($target.get(0), v)
        } else {
            var temp = $target.get(0).cloneNode(true)
            parent.insertBefore(temp, v)
        }
    })
    // 3.返回所有添加的元素
    return $this
},

after

after: function (sele) {
    // 1.统一的将传入的数据转换为jQuery对象
    var $target = $(sele);
    var $this = this;
    $this.each(function (k, v) {
        var nextNode = $.get_nextsibling(v)
        var parent = v.parentNode
        if (k == 0) {
            parent.insertBefore($target.get(0), nextNode)
        } else {
            var temp = $target.get(0).cloneNode(true)
            parent.insertBefore(temp, nextNode)
        }
    })
    // 3.返回所有添加的元素
    return $this
},

replaceAll

替换所有指定元素

  1. 将元素插入到指定元素的前面
  2. 将指定元素删除
replaceAll: function (sele) {
    // 1.统一的将传入的数据转换为jQuery对象
    var $target = $(sele);
    var $this = this;
    var res = [];
    // 2.遍历取出所有指定的元素
    $.each($target, function (key, value) {
        var parent = value.parentNode;
        // 2.遍历取出所有的元素
        $this.each(function (k, v) {
            // 3.判断当前是否是第0个指定的元素
            if (key === 0) {
                // 直接添加
                $(v).insertBefore(value)
                //将元素删除
                $(value).remove()
                res.push(v)
            } else {
                // 先拷贝再添加
                var temp = v.cloneNode(true);
                $(temp).insertBefore(value);
                $(value).remove()
                res.push(temp);
            }
        });
    });
    // 3.返回所有添加的元素
    return $(res);
}

next方法与prev方法

kjQuery.prototype.extend({
    next: function (sele) {
        var res = [];
        if(arguments.length === 0){
            // 返回所有找到的
            this.each(function (key, value) {
                var temp = kjQuery.get_nextsibling(value);
                if(temp != null){
                    res.push(temp);
                }
            });
        }else{
            // 返回指定找到的
            this.each(function (key, value) {
                var temp = kjQuery.get_nextsibling(value)
                $(sele).each(function (k, v) {
                    if(v == null || v !== temp) return true;
                    res.push(v);
                });
            });
        }
        return $(res);
    },
    prev: function (sele) {
        var res = [];
        if(arguments.length === 0){
            this.each(function (key, value) {
                var temp = njQuery.get_previoussibling(value);
                if(temp == null) return true;
                res.push(temp);
            });
        }else{
            this.each(function (key, value) {
                var temp = njQuery.get_previoussibling(value);
                $(sele).each(function (k, v) {
                    if(v == null || temp !== v) return true;
                    res.push(v);
                })
            });
        }
        return $(res);
    }
});
kjQuery.prototype = {
    get_nextsibling: function (n) {
        var x = n.nextSibling;
        while (x != null && x.nodeType != 1) {
            x = x.nextSibling;
        }
        return x;
    },
    get_previoussibling: function (n) {
        var x = n.previousSibling;
        while (x != null && x.nodeType != 1) {
            x = x.previousSibling;
        }
        return x;
    },
};

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 06JavaScript作用域与对象

    即使我们在定义这个函数之前调用它,函数仍然可以工作。这是因为在 JavaScript 中执行上下文的工作方式造成的。

    Dreamy.TZK
  • 18Function类型

    函数是这样的一段 Javascript代码,它只定义一次,但可能被执行或调用多次。

    Dreamy.TZK
  • jQuery原理(属性操作相关方法)

    Dreamy.TZK
  • 防止因事务未提交导致的死锁

    码农二狗
  • JQuery实现双击编辑异步更新

    <script type="text/javascript"> $(function(){ $("tbody>tr>td").dblclick(funct...

    苦咖啡
  • 2019前端面试基础题集合!赶紧上车!快!快!快!

    在 ES5.1 里面函数是这样执行的(不讨论use strict和一些特殊情况,JS好复杂的),按如下顺序执行:

    用户1272076
  • 受控组件表单&不受控组件

    表单里面的数据 根据State确定 在 HTML 中,表单元素如 <input>,<textarea> 和 <select>表单元素通常保持自己的状态,并根据...

    河湾欢儿
  • [第 3 期]JavaScript数据结构之数组栈队列

    桃翁
  • js this问题和es6箭头函数this问题

    4.apply 调用 ,apply方法作用是改变函数的调用对象,此方法的第一个参数为改变后调用这个函数的对象,this指代第一个参数

    yaphetsfang
  • 长期维护更新,前端面试题

    HTML,即超文本标记语言,几乎是所有网站的支柱。HTML 为网页带来标题、子标题、列表和其它一些文档结构的格式。在最近更新的 HTML5 中,甚至可以创建图表...

    FinGet

扫码关注云+社区

领取腾讯云代金券