饥人谷模拟jq过程感想

今天我学了老方的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的新语法

大致思路就是这样了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一:认识jquery jquery是javascript的类库,具有轻量级,完善的文档,丰富的插件支持,完善的Aj...
    xuguibin阅读 5,639评论 1 7
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 8,863评论 0 44
  • 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。 jQuer...
    枇杷树8824阅读 3,897评论 0 3
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,331评论 1 45
  • 第一章 jQuery简介 1-1 jQuery简介 1.简介 2.优势 3.特性与工具方法 1-2 环境搭建 进入...
    mo默22阅读 5,625评论 0 11

友情链接更多精彩内容