美文网首页
饥人谷模拟jq过程感想

饥人谷模拟jq过程感想

作者: xiaoznz | 来源:发表于2018-07-22 22:49 被阅读0次

今天我学了老方的jq的构成过程,并且后来自己也看了原码,也自己尝试的写了一下,应该说还是得到了不少的收获。这里就简单阐述一下我写的两个jq方法时的想法。

首先上代码:

老方的要求是:

因为第三句是(var $div = $('div'))因此对前两句,明显是叫我构建一个方法,这个方法需要我传一个参数,得到这个参数所对应的dom节点的对象。但是如果我此时对这个对象加上addClass()和setText(),那么可能会覆盖原有的dom节点所对应的方法,于是我重新定义了一个空数组,然后将它当做返回值并在这个数组上添加addClass()和setText()。于是我就用了querySelectAll方法来找到,但有时我会遇到直接给我一个dom对象,所以我做了一个条件判断,如果是字符串,就遍历querySelectAll方法找到的对象,加入空对象,如果不是,那么将参数节点加入,然后进行遍历

第一个要求我们把所有的div的class添加一个red。那就遍历对象然后在每个对象的dom属性classList上运用add()方法,让他传一个参数,这个参数就添加在class上即可。

第二个要求我们让所有div的textContent变为hi,方法与第一个类似,这次我们换成了用textContent属性赋值来做,也成功了

我这两个方法,都用到了闭包思想,即在函数内部没有这个变量的情况下,用到函数外部变量,比如jq.length,jq[i]

然后用到了一些es6的新语法

大致思路就是这样了。

相关文章

  • 饥人谷模拟jq过程感想

    今天我学了老方的jq的构成过程,并且后来自己也看了原码,也自己尝试的写了一下,应该说还是得到了不少的收获。这里就简...

  • JS-学习资源

    饥人谷知乎前端学习指南132GitHub笔试面试题集锦饥人谷课件课堂内外一些前端小项目饥人谷 api饥人谷作品库G...

  • jQuery DOM操作

    jQuery DOM操作 来源饥人谷课件,转载请注明来源 创建元素 只需要把DOM字符串传入$方法即可返回一个jQ...

  • 饥人谷进阶/json

    json是一门新的语言,不是对象~~,道格拉斯创造滴~~交换语言@@json是抄袭JavaScript的,而且还出...

  • 饥人谷-任务十七

    一、函数声明和函数表达式有什么区别 (*) 主要区别函数声明会有声明提升,而函数表达式的规则跟变量一样。例:源码:...

  • 饥人谷-任务十六

    一、CSS和JS在网页中的放置顺序是怎样的? 首先页面对于CSS的依赖很大,要是先加载HTML的话,页面没有CSS...

  • 饥人谷-任务十三

    一、如何调试 IE 浏览器 IE7以上可以用控制台来调试,按F12即可 没有控制台的,通过设置border: 1p...

  • 饥人谷-任务8

    一、CSS选择器常见的有几种? 标签选择器 属性选择器 class选择器 id选择器 伪类选择器 后代选择器&直接...

  • 饥人谷-任务7

    一、有序列表、无序列表、自定义列表如何使用?写个简单的例子。三者在语义上有什么区别?在哪些情况下使用哪种(重要)?...

  • 饥人谷-任务十一

    一、 在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例 场景 必须是处...

网友评论

      本文标题:饥人谷模拟jq过程感想

      本文链接:https://www.haomeiwen.com/subject/pybrmftx.html