美文网首页
实现一个简单的jquery 的api

实现一个简单的jquery 的api

作者: 饕餮潴 | 来源:发表于2018-11-04 01:25 被阅读5次

    根据之前介绍的DOM的api实在太难记忆和使用繁杂 所以为了更好的调用John Resig 大神造了jquery的轮子
    jquery的核心The Write Less,Do More,简洁的API、优雅的链式、强大的查询与便捷的操作。

    做一个简单的jquery的功能
    var $div = $('div')    //输入div
    $div.addClass('red')  // 可将所有 div 的 class 添加一个 red
    $div.setText('hi')  // 可将所有 div 的 textContent 变为 hi
    

    1.参数传递

    var div =('div')
    要实现上面这个功能,我的理解是首先设置window对象jQuery为函数返回的结果,然后把参数'div'传递到函数内的DOM,作为变量进行下一步的操作。

    window.jQuery=function(selector){  
    let alldiv=document.querySelectorAll(selector)  
    }
    
    window.$ = jQuery
    

    2.返回对象

    div.addClass('red') // 可将所有 div 的 class 添加一个 reddiv.setText('hi') // 可将所有 div 的 textContent 变为 hi
    可以观察得到$div是一个对象,它的key有addClass和setText。

    那我也返回一个含有addClass和setClass的对象。

    window.jQuery=function (selector){
    let alldiv=document.querySelectorAll(selector)  
      return{
           addClass:function (){},
           setClass:function(){}
      }
    }
    window.$ = jQuery
    

    3.补全对象

    我们得到了alldiv,它是一个伪数组。如果每个div都要添加class的话,需要一个for循环,然后每一次用DOM的方法里的classList.add功能对div添加class。
    addClass: function(){
    for(var i=0;i<alldiv.length;i++){
    alldiv[i].classList.add("red")
    }
    setText: function(){
    for(var i=0;i<alldiv.length;i++){
    alldiv[i].textContent = "hi"
    }
    把addClass和setText的内容结合到函数内,得到:

    window.jQuery=function (selector){
      let alldiv=document.querySelectorAll(selector)
      return{
           addClass: function(){
                   for(var i=0;i<alldiv.length;i++){
                       alldiv[i].classList.add("red")
                   }
           },
           setText: function(){
                   for(var i=0;i<alldiv.length;i++){
                      alldiv[i].textContent = "hi"
                  }
          }
       }
    }
    window.$ = jQuery
    

    相关文章

      网友评论

          本文标题:实现一个简单的jquery 的api

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