自制jquery-第一篇

1，

  
  
    
    
    
    
  
  

    
div text1this is span1
    
div text2this is sapn2

    
    
  
   

jquery.js脚本文件

window.jquery=function(element){
    var array=[]

    var element=document.querySelectorAll(element)

    for(var i=0;i

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

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

修改上面制作的jquery API方法

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

所以：

图片.png

4，find后完整的代码

  
  
  
  



  

    div text1
    this is span1
    
xxx1
    
xxx1
    
xxx1
  
  

    div text2
    this is sapn2
    
xxx1
    
xxx1
  

  
  

js文件

window.jquery=function(elementorarray){
  var array=[]


  if(typeof(elementorarray)=="string"){
    /*接收的选择器是一个字符串*/
    var element=document.querySelectorAll(elementorarray)
    for(var i=0;i

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

图片.png

图片.png

图片.png

图片.png