jQuery入门(addClass()及text()方法实现)

假设我们要获取item3的所有兄弟节点,我们就要找到item3的父节点之后再找到他的儿子节点并且遍历他们(如图一)


图一

但是输入的节点不能写死,因此我们将上年的for循环和声明封装成一个函数,这样我们输入哪个节点就都能获取到他的兄弟节点了(图二)

图二

接下来假设我们需要同时在一个节点上面添加多个class的话,我们可以使用forEach方法遍历所有class并且把他们一个个都添加到节点上(图三)

图三


为以上两个方法函数统一添加到一个地方即命名空间(图四)

图四,命名空间

但是实际上使用的话我们的第一直觉是喜欢写item3.getSiblings/item3.addClass 而不是sdom.getSiblings(item3)/sdom.addClass(item3)

方法一:改原型链。直接在 Node.prototype 上加函数(图五)


图五

但是这种方法若每个人都改原型链那原型链就都乱了,因此还有以下方法:

方法二:增加新的接口(图六)

框架如下:新增一个接口叫Node2.Node2是一个对象,里面有两个key分别叫getSiblings和addClass。然后我们声明node2去存这个对象的地址(回忆一下之前学习原型链)

图六

把上面两个方法函数添加到框架里面,得到:

图七

我们把Node2换一个名字叫jQuery。jQuery比较强大,除了可以输入节点之外还可以输入选择器(图八):

图八

把getSiblings方法换成text方法(图九):

图九

如果我们想在所有的节点上都添加一样的class,只需改一下代码即可(图十):


http://js.jirengu.com/jomuragule/1/edit?js,output

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

相关阅读更多精彩内容

  • jQuery 是什么? jQuery实质上是一个构造函数,接受一个参数,这个参数可能是节点,然后返回一个方法对象去...
    夜未央_M阅读 3,851评论 0 0
  • 首先要理解,JavaScript的语法是需要引擎来实现的.引擎是用其他语言写的(一般是c或者java).因为Jav...
    joker731阅读 1,495评论 0 1
  • 最近开始学习 jQuery,jQuery 是 JavaScript最受欢迎的一个库,它让原本极不方便的JS DOM...
    不讨喜的大雄阅读 3,759评论 0 1
  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 10,715评论 0 21
  • 本文记录手写实现jQuery的两个API-getSiblings及addClass的思路及过程 1. 使用原生JS...
    WWWKY阅读 3,177评论 0 0

友情链接更多精彩内容