2018-09-22理解jQuery。

window.jQuery = ???
window.$ = jQuery

var div =('div')
div.addClass('red') // 可将所有 div 的 class 添加一个 reddiv.setText('hi') // 可将所有 div 的 textContent 变为 hi。
???是什么呢。
答案:

function(nodeOrSelector){
    var nodes ={}
    if(nodeOrSelector === 'string'){
        var temp =document.querySelectorAll(nodeOrSelector)
        for(let i = 0; i<temp.length; i++){
            nodes[i] = temp[i]
        }e
        node.length = temp.length
    }else if(nodeOrSelector instanceof Node){
        nodes ={
            0:nodeOrSelector
            length:1
        }
    }
    nodes.addClass = function(classes){
        classes.forEach((value) =>{
            for(let i = 0 ; i<nodes.length; i++){
                nodes[i] .classList.add(value)
            }
        })
    }
    nodes.setText = function(text){
       for(let i = 0; i<nodes.length; i++){
           nodes[i].textContent =text
       }
    }
}

实现的过程。
声明一个jQuery函数,函数里面我们首先声明了一个空的nodes对象。先判断传进来的参数是节点还是选择器。如果为选择器则使用dom对象的方法获取所有。遍历这个对象,把值赋给nodes。如果传进来的是节点,我们就直接使吧节点装进nodes这个对象中。然后我们在给nodes这个对象加我们需要的属性。

其实jQuery就一个函数,里面封装很多方法,我们通过这些方法来获取节点(元素),并对我们获取的节点进行各种操作。就是图一个简洁方便。其内涵还是原生的js。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,337评论 1 45
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 5,276评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 4,929评论 0 1
  • 前端开发面试题 <a name='preface'>前言</a> 只看问题点这里 看全部问题和答案点这里 本文由我...
    自you是敏感词阅读 4,266评论 0 3
  • 花花草草闹新春,一年一度的花市开市。南方人的春节无花不欢,每家都有逛花市买花过春节的习俗。 花痴如我,岂能错过。 ...
    荷塘花开阅读 3,097评论 18 18

友情链接更多精彩内容