实现一个简单jQuery的API

2018-05-31  本文已影响0人  遠_

jQuery的基本设计思想和主要用法,就是"选择某个网页元素,然后对其进行某种操作"。
使用jQuery的第一步,往往就是将一个选择表达式,放进构造函数jQuery()(简写为$),然后得到被选中的元素。


下面就讲述了如何实现一个jQuery的API。
通过这个问题来讲述:

window.jQuery = ???
window.$ = jQuery

var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi

先说答案吧!!!
上面???的内容为:

function(node) {
   var findNode = document.querySelectorAll(node)
        return {         
            addClass: function (addClassName) {               
                for (let i = 0; i < findNode.length; i++) {
                    findNode[i].classList.add(addClassName)
                }
            },
            setText: function (text) {        
                for (let i = 0; i < findNode.length; i++) {
                    findNode[i].textContent = text
                }
            }
        }
    }

思路如下

我们的需求是通过构造一个新的函数,这个函数返回一个对象,该对象包括两种属性方法,即addClass和setText,便可以使用jQuery构造一个新的node(即$div),随后便可以使用$div调用addClass和setText两个属性。

首先我们在这个函数体的内部声明一个变量findNode,随后可以在下面两种属性方法中调用。


addClass()实现思路

setText()实现思路

更具体的代码:http://js.jirengu.com/moqur/3/edit?html,css,js,output

上一篇 下一篇

猜你喜欢

热点阅读