试试造个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<temp.length;i++){nodes[i] = temp[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<temp.length;i++){nodes[i] = temp[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.length;i++){nodes[i].classList.add(c)}
    } 即可

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

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

三,返回节点

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

  • return nodes
    }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 2,062评论 0 2
  • 阮一峰jQuery 不要学jquery mobile 获取某个节点的所有兄弟姐妹 ul>li[id=item$]{...
    tsl1127阅读 380评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,211评论 0 1
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,406评论 0 2
  • 前端开发面试题 <a name='preface'>前言</a> 只看问题点这里 看全部问题和答案点这里 本文由我...
    自you是敏感词阅读 806评论 0 3