美文网首页
自制jquery-第一篇

自制jquery-第一篇

作者: 从前慢pearl | 来源:发表于2017-07-12 12:01 被阅读0次

    1,

    <!DOCTYPE html>
      <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>JS Bin</title>
        <style>
        .xxx{
            border: 1px solid black;
            height: 50px;background: red
        }
        .active{
            background: yellow;
        }
        </style>
      </head>
      <body>
    
        <div class="xxx">div text1<span>this is span1</span></div>
        <div class="xxx">div text2<span>this is sapn2</span></div>
    
        <script src="./jquery.js"></script>
        <script>
         var $xxx=$(".xxx")
    
         var div1=$xxx[0],
             div2=$xxx[1]
    
         $xxx.addClass("active").html("<p>自制jquery添加的p标签段落</p>").on("click",function(){
            $xxx.removeClass("active")
         })
        </script>
      </body>
      </html> 
    

    jquery.js脚本文件

    window.jquery=function(element){
        var array=[]
    
        var element=document.querySelectorAll(element)
    
        for(var i=0;i<element.length;i++){
           array.push(element[i])
        }
    
    
        array.on=function(eventType,fn){
              for(var i=0;i<array.length;i++){
                array[i].addEventListener("click",fn)
              }
              return array
            }
        array.addClass=function(classname){
             for(var i=0;i<array.length;i++){
              array[i].classList.add(classname)
              }
              return array
        }
        array.removeClass=function(classname){
            for(var i=0;i<array.length;i++){
              array[i].classList.remove(classname)
              }
              return array
        }
        array.toggleClass=function(classname){
            for(var i=0;i<array.length;i++){
              array[i].classList.toggle(classname)
              }
              return array
        }
        array.text=function(value){
        if (value==undefined) {
            for(var i=0;i<array.length;i++){
              var textarray=[] 
              textarray.push(array[i].textContent)
            }
            return textarray
        }else{
            for(var i=0;i<array.length;i++){
              array[i].textContent=value
            }
              return array
        }
        }
        array.html=function(htmlstring){
            if (htmlstring==undefined) {
            for(var i=0;i<array.length;i++){
              var textarray=[] 
              textarray.push(array[i].innerHTML)
            }
            return textarray
        }else{
            for(var i=0;i<array.length;i++){
              array[i].innerHTML=htmlstring
            }
              return array
        }
        }
    
        return array
      }
      window.$=window.jquery
    

    2,实现链式调用的原理

    非链式调用:
    $xxx.addClass("active")
    $xxx.html("")
    $xxx.on("click",fn)

    链式调用:
    $xxx.addClass("active").html("").on("click",fn)

    把非链式调用转换成链式调用
    例子:
    把$xxx.addClass("active") 转换成 $xxx
    在上面的自制jquery脚本文件里面 获取的$xxx是一个数组 那么只需要在每个方法里面返回数组

    图片.png

    3,实现 jquery里面的find API

      array.find=function(selector){
          var array1=[]
          for(var i=0;i<array.length;i++){  //循环每个父元素
             var elements=[]
             elements=array[i].querySelectorAll(selector)  //得到每个父元素下的所有选择器为selector的元素数组
             for(var j=0;j<elements.length;j++){  //遍历得到的元素数组
                array1.push(elements[j])   //把元素放到array1里面
             }
          }
          
          /*返回的是一个数组*/
          return array1
      }
    

    注:实现了jquery的find方法 但是得到的元素标签没有 我们自己制作的其他API方法 怎么办?

    修改上面制作的jquery API方法

    两个现象:
    1,选择器来的是一个字符串
    2,find得到的元素是一个 数组

    所以:

    图片.png

    4,find后完整的代码

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
      <style>
      .xxx{
        border: 1px solid black;
        height: 200px;background: red
      }
      .active{
        background: yellow;
      }
      </style>
    </head>
    <body>
    
      <div class="xxx">
        div text1
        <span>this is span1</span>
        <p>xxx1</p>
        <p>xxx1</p>
        <p>xxx1</p>
      </div>
      <div class="xxx">
        div text2
        <span>this is sapn2</span>
        <p>xxx1</p>
        <p>xxx1</p>
      </div>
    
      <script src="./jquery.js"></script>
      <script>
       var $xxx=$(".xxx")
    
       var div1=$xxx[0],
           div2=$xxx[1]
    
    
       $xxx.find("p").on("click",function(){
        console.log("click")
       })
      </script>
    </body>
    </html>
    

    js文件

    window.jquery=function(elementorarray){
      var array=[]
    
    
      if(typeof(elementorarray)=="string"){
        /*接收的选择器是一个字符串*/
        var element=document.querySelectorAll(elementorarray)
        for(var i=0;i<element.length;i++){
            array.push(element[i])
        }
      }else if (elementorarray instanceof Array) {
         for(var i=0;i<elementorarray.length;i++){
            array.push(elementorarray[i])
         }
      }
    
      array.on=function(eventType,fn){
        for(var i=0;i<array.length;i++){
              array[i].addEventListener("click",fn)
        }
        return array
      }
    
      array.addClass=function(classname){
          for(var i=0;i<array.length;i++){
            array[i].classList.add(classname)
        }
        return array
      }
    
      array.removeClass=function(classname){
        for(var i=0;i<array.length;i++){
              array[i].classList.remove(classname)
        }
        return array
      }
    
      array.toggleClass=function(classname){
        for(var i=0;i<array.length;i++){
              array[i].classList.toggle(classname)
        }
        return array
      }
    
      array.text=function(value){
        if (value==undefined) {
            for(var i=0;i<array.length;i++){
              var textarray=[] 
              textarray.push(array[i].textContent)
          }
          return textarray
        }else{
            for(var i=0;i<array.length;i++){
              array[i].textContent=value
          }
          return array
        }
      }
    
      array.html=function(htmlstring){
        if (htmlstring==undefined) {
            for(var i=0;i<array.length;i++){
              var textarray=[] 
              textarray.push(array[i].innerHTML)
            }
            return textarray
          }else{
             for(var i=0;i<array.length;i++){
                array[i].innerHTML=htmlstring
           }
             return array
         }
      }
    
      array.find=function(selector){
          var array1=[]
          for(var i=0;i<array.length;i++){
             var elements=[]
             elements=array[i].querySelectorAll(selector)
             for(var j=0;j<elements.length;j++){
                array1.push(elements[j])
             }
          }
    
          /*返回的是一个数组*/
          return  jquery(array1)
      }
    
      return array
    }
    window.$=window.jquery
    

    5,在find()方法上面获取 到子元素后 通过end()获取子元素的父元素

    图片.png 图片.png 图片.png 图片.png

    相关文章

      网友评论

          本文标题:自制jquery-第一篇

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