试试造个API,初次接触jQuery

任务:造出一个叫addClass的API:

  • window.jQuery = ???
    window.$ = jQuery
    var $div = $('div')
    $div.addClass('red')
  • 作用: 可将所有 div 的 class 添加一个 red

一,让jQuery获取节点:

  • 任务中想通过'div'这个字符串获取节点,所以先声明一个数组,利用.querySelectorAll()这个API来获得。
    这种方法可以同时操作多个节点。
  • window.jQuery = function(node){
    let nodes = {}
    let temp = document.querySelectorAll(node) //这是伪数组
    for(let i=0;i nodes.length = temp.length

如果不是通过字符串而是选择器来获取节点呢?
那就要加入判断。

  • window.jQuery = function(nodeOrSelector){
    let nodes = {}
    if(typeof nodeOrSelector === 'string'){
    let temp = document.querySelectorAll(nodeOrSelector)
    for(let i=0;i nodes.length = temp.length
    }else if(nodeOrSelector instanceof Node){
    nodes = {0:nodeOrSelector, length:1}
    }

二,造API:

  • 任务中要求把输入的字符串添加至类名,所以直接用
    nodes.addClass = function(c){
    for(let i=0;i } 即可

如果想要实现一次输入多个类名且可以控制每个类名是否被加上,可以这样:

  • nodes.addClass = function(classes){
    for(let key in classes){
    var value = classes[key]
    var methodName = value?'add':'remove'
    for(let i=0;i }

三,返回节点

这是最重要也最容易忘记的部分,整个函数都是在对指定的节点进行操作,最后一定要:

  • return nodes
    }

你可能感兴趣的:(试试造个API,初次接触jQuery)