children

原生JavaScript中,如果希望找到某个元素的子元素,只能通过Node类型上的children方法一步一步获取。如

let li = document.querySelector('ul').children[0].
let anchor = li.children[0]
...

这种方法很不好,因为js和html并未解耦,当html结构发生改变时,js也需要发生相应的变化。

jQuery有一个children方法,可以传入一个参数,此时会返回需要查找到的那个元素。具体用法children用法

下面是我实现的类children的方法,实现原理是:递归回调children函数,当两个DOM节点相等时,就返回该节点。否则返回null,表示找不到。

childrens (ele, selector) {
let [target, child, isChild, isChildList, i] = []
target = ele instanceof Object ? ele : document.querySelector(ele)
child = target.querySelector(selector)
isChildList = target.children
for (i = 0; i < isChildList.length; i++) {
isChild = isChildList[i]
if (isChild === child) {
return isChild
}
if (isChild.children.length >= 1) {
// 递归回调children函数,递归的原因是某个子节点可能还存在一个或多个子节点。
isChild = this.childrens(isChild, selector)
return isChild
}
}
return null
}

$.extend()实现深浅复制

function copyObject () {
let i = 1,
target = arguments[0] || {},
deep = false,
length = arguments.length,
name, options, src, copy,
copyIsArray, clone; // 如果第一个参数的数据类型是Boolean类型
// target往后取第二个参数
if (typeof target === 'boolean') {
deep = target;
// 使用||运算符,排除隐式强制类型转换为false的数据类型
// 如'', 0, undefined, null, false等
// 如果target为以上的值,则设置target = {}
target = arguments[1] || {};
i++;
} // 如果target不是一个对象或数组或函数
if (typeof target !== 'object' && !(typeof target === 'function')) {
target = {};
} // 如果arguments.length === 1 或
// typeof arguments[0] === 'boolean',
// 且存在arguments[1],则直接返回target对象
if (i === length) {
return target;
} // 循环每个源对象
for (; i < length; i++) {
// 如果传入的源对象是null或undefined
// 则循环下一个源对象
if (typeof (options = arguments[i]) != null) {
// 遍历所有[[emuerable]] === true的源对象
// 包括Object, Array, String
// 如果遇到源对象的数据类型为Boolean, Number
// for in循环会被跳过,不执行for in循环
for (name in options) {
// src用于判断target对象是否存在name属性
src = target[name];
// copy用于复制
copy = options[name];
// 判断copy是否是数组
copyIsArray = Array.isArray(copy);
if (deep && copy && (typeof copy === 'object' || copyIsArray)) {
if (copyIsArray) {
copyIsArray = false;
// 如果目标对象存在name属性且是一个数组
// 则使用目标对象的name属性,否则重新创建一个数组,用于复制
clone = src && Array.isArray(src) ? src : [];
} else {
// 如果目标对象存在name属性且是一个对象
// 则使用目标对象的name属性,否则重新创建一个对象,用于复制
clone = src && typeof src === 'object' ? src : {};
}
// 深复制,所以递归调用copyObject函数
// 返回值为target对象,即clone对象
// copy是一个源对象
target[name] = copyObject(deep, clone, copy);
} else if (copy !== undefined){
// 浅复制,直接复制到target对象上
target[name] = copy;
}
}
}
}
// 返回目标对象
return target;
}

期待噢:)

持续更新中...

jQuery方法实现的更多相关文章

  1. 1.4 jQuery方法,JSON介绍

    jQuery方法: jQuery添加元素: append()方法: $("元素").append("追加内容"); prepend()方法: $("元 ...

  2. SpringMVC框架下实现JSON(类方法中回传数据到jsp页面,使用jQuery方法回传)

    JSON的实现,即将需要的数据回传到jsp页面: 1>.加入实现Json的三个架包到lib中:2>.目标方法上边加入注解,需要返回的值3>.在jsp页面中书写jQuery方法: ec ...

  3. 形行色色的下拉菜单(HTML/CSS JS方法 jQuery方法实现)

    HTML/CSS方法实现下拉菜单来源:慕课网<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  4. JQuery 方法简写

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  5. Jquery方法load之后导致js失效解决方法

    Jquery方法load之后导致js失效解决方法 >>>>>>>>>>>>>>>>>>> ...

  6. Javascript或jQuery方法产生任意随机整数

    方法1:javascritp方法 1 2 3 4 5 6 //随机数    function diu_Randomize(b,e){        if(!b && b!=0 || ! ...

  7. jquery方法详解

    jquery方法详解 http://www.365mini.com/doc

  8. jQuery方法区别:click() bind() live() delegate()区别

    今天看到一篇jquery 事件的文章,自己写了个小例子,虽然2种方式都可以实现,但是不太明白,找了点资料 $("#box1").delegate("p",&qu ...

  9. jQuery()方法的第二个参数

    关于jQuery()方法的第二个参数,有下面这几种用法: 1.jQuery(selector, [context]) 这种用法,相当于 $(context).find(selector) 或者 con ...

  10. 原生JS取代一些JQuery方法的简单实现

    原生JS取代一些JQuery方法的简单实现 下面小编就为大家带来一篇原生JS取代一些JQuery方法的简单实现.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧   1.选 ...

随机推荐

  1. P3089 [USACO13NOV]POGO的牛Pogo-Cow

    P3089 [USACO13NOV]POGO的牛Pogo-Cow FJ给奶牛贝西的脚安装上了弹簧,使它可以在农场里快速地跳跃,但是它还没有学会如何降低速度. FJ觉得让贝西在一条直线的一维线路上进行练 ...

  2. Mask-RCNN数据集制作

    转自https://blog.csdn.net/pingushen2100/article/details/80513043 一.Mask-RCNN数据集 1.1 训练Mask-RCNN用的到的文件有 ...

  3. RESTful记录-RESTful介绍

    RESTful Web服务是基于REST架构的Web服务.在REST架构一切都是一种资源. RESTful Web服务是轻量级的,高度可扩展性和可维护性,并且非常常用于创建基于API的Web应用程序. ...

  4. Shell中的case命令

    case语句和判断语句[if...elif...else]功能类似;当在逻辑判断比较简单的情况下,比后者的代码量要少许多.case用法,用变量来匹配某值,如果匹配成功则执行它下面的命令,直到 ::为止 ...

  5. css 基础2

    1.内部样式表: 2.行内样式表:在标签内写style,适合style 比较少的情况 3.外部样式表(外联式): 4.html标签可以分为:块级标签,h1~h6,div ,p,ul,ol,li,div ...

  6. 第12月第2天 uiscrollview _adjustContentOffsetIfNecessary 圆角

    1. uiscrollview在调用setFrame,setBounds等方法的时候会默认调用稀有api: _adjustContentOffsetIfNecessary 这个方法会改变当前的cont ...

  7. MySQL5.6主从复制最佳实践

    MySQL5.6     主从复制的配置  环境 操作系统:CentOS-6.6-x86_64 MySQL 版本:mysql-5.6.26.tar.gz 主节点 IP:192.168.31.57    ...

  8. jdk1.8源码Synchronized及其实现原理

    一.Synchronized的基本使用 关于Synchronized在JVM的原理(偏向锁,轻量级锁,重量级锁)可以参考 :  http://www.cnblogs.com/dennyzhangdd/ ...

  9. kali的中文输入法-安装后无中文选项的解决办法

    我在我实体电脑上安装了kali 本想安装个中文输入法但是有时候输入发中根本没有选择输入法的这一项.所以导致很别扭,之前在虚机上安装过没有问题但是挪到实体机上就是没有用的也是fcitx,这一度让我这个小 ...

  10. Linux常见问题总结【转】

    作为一名合格的 Linux 运维工程师,一定要有一套清晰.明确的解决故障思路,当问题出现时,才能迅速定位.解决问题,这里给出一个处理问题的一般思路: 重视报错提示信息:每个错误的出现,都是给出错误提示 ...