美文网首页
js代码封装jquery

js代码封装jquery

作者: 夜景阑姗 | 来源:发表于2019-01-05 06:30 被阅读0次

    补全???处代码

    window.jQuery = ???
    window.$ = jQuery
    
    var $div = $('div')
    $div.addClass('red') // 可将所有 div 的 class 添加一个 red
    $div.setText('hi') // 可将所有 div 的 textContent 变为 hi
    

    实现效果

    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]    //循环遍历结果类似1,2,3 像数组 用[]表示
        }
        nodes.length = temp.length  //nodes是伪数组,数组长度不会动态改变,这里手动改变长度
    }else if (nodeOrSelector instanceof Node){
       nodes = {0:nodeOrSelector,length:1} //伪数组
    } 
    
    // 设置所有 div 的 textContent 
    nodes.setText = function(text){
      for(let i = 0;i<nodes.length; i++){
        nodes[i].textContent =  text
      }
    
    // 为所有 div 添加 class
    nodes.addClass = function(text){
       for(let i = 0;i<nodes.length;i++){
        nodes[i].classList.add(text)
      } 
    }
      return nodes
    } 
    
    window.$ = jQuery
    var $div = $('div')
    $div.addClass('red') // 可将所有 div 的 class 添加一个 red
    $div.setText('hi') // 可将所有 div 的 textContent 变为 hi
    
    

    思路:

    1. window.jQuery = ??? ,???是一个函数.
      2.函数有 addClass 方法 和 setText 方法.
      3.函数对象应该返回一个 hash ,声明了一个空对象,对象的下标是死的,要在循环处动态修改。let nodes = {}.
      4.用伪数组放获取的所有 div.

    相关文章

      网友评论

          本文标题:js代码封装jquery

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