美文网首页
jQuery入门(addClass()及text()方法实现)

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

作者: 陈夏天0527 | 来源:发表于2019-05-12 23:37 被阅读0次

    假设我们要获取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

    相关文章

      网友评论

          本文标题:jQuery入门(addClass()及text()方法实现)

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