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

你可能感兴趣的:(jQuery入门(addClass()及text()方法实现))