zoukankan      html  css  js  c++  java
  • jQuery是如何实现?

    jQuery是什么?

    jQuery就是一个javascript的类库,函数库。

    jQuery是如何实现的?

    • jQuery采用的是构造函数模式进行开发的,jQuery是一个类
    • 常用的方法(CSS、属性、筛选、事件、动画、文档处理)都是定义在jQuery.prototype上的 ,只有jQuery的实例才能使用这些方法

    我们可否实现一个jQuery的API?

    可以!
    首先我们应该知道jQuery是一个函数对象,我们把需要的函数(一段可多次使用的代码块)放在里面,把它当做一个类库,函数库。其实jQuery不仅仅是一个类(在它的原型上定义了很多的方法,每一个jQuery的实例都可以使用这些方法),它还是一个普通的对象,在jQuery本身的属性中还增加了一系列的方法。
    但是我们可以用封装一个函数的方式并且声明命名空间来建立一个jQuery对象,

    建立jQuery函数库

    • 首先在 window 对象中定义一个 jQuery 方法,该方法接收一个参数 nodeOrSelector。
    • 在方法 jQuery 中,调用 document.querySelectorAll,将传入的字符串参数 nodeOrSelector把获取到的字符- 串通过该 API 获取成一个对象(伪数组),存入变量 nodes中。
    • 给 nodes设置两个方法: nodes.addClass 以及 nodes.text 。
    • 两个方法都会将 nodes对象进行遍历,然后通过参数 classes或 text对 nodes里的节点进行操作。
    • 返回该对象。
    • 将 jQuery 的内存地址赋值给 window.$ 。
    • 此时,将需要设置的元素 ('nodes') (括号里应为字符串)赋值给变量nodes,即可通过 $nodes调用 addClass 或 text方法。
    window.jQuery = function(nodeOrSelector){
        let nodes={}
            nodes = document.querySelectorAll(nodeOrSelector)
            nodes.addClass = function(classes){
                classes.forEach((value) => {
                    for(let i=0;i<nodes.lenght;i++){
                        nodes[i].classList.add(value)
                    }
                })
                
            }
            nodes.text = function(text){
                if(text===undefined){
                    var texts=[]
                    for(let i=0;i<nodes.lenght;i++){
                        texts.push(nodes[i].textContent)
                    }
                    return texts
                }else{
                    for(let i=0;i<nodes.lenght;i++){
                        nodes.textContent = text
                    }
                    
                }
            }
            return nodes
    
    }
    window.$ = jQuery
    
    
    var $div = $('div')
    $div.addClass('red') // 可将所有 div 的 class 添加一个 red
    $div.setText('hi') // 可将所有 div 的 textContent 变为 hi

     

    我们获取的是jQuery对象(他是jQuery的实例)不是我们的原生js对象

    jQuery:$("#div1")
    JS:document.getElementById("div1") 原生JS的对象不能直接的使用jQuery的方法,同理,jQuery的对象也不能使用原生js的方法
    $("#div1").className = "box"; no
    document.getElementById("div1").addClass();

    调用jQuery

    • $是一个别名jQuery,jQuery是函数,
    • $div是返回值
    • jquery基本语法:例:$('选择器').方法()

    为什么要学jQuery?

    • 各个浏览器之间的兼容性
    • jQuery 功能丰富,还有动画、AJAX 等模块,不止 DOM 操作
    • jQuery:写的更少,做的更多

     

    如何使用css的语法来选择元素?

    jquery基本语法:$('选择器').css('属性','值')

    jquery 的编程思想:

    查询+操作,内置循环,迭代

    jquery基本语法:

    例:$('选择器').方法()

    jQuery对象与DOM对象之间的转换方法

    jQuery对象转成DOM对象:

    (1)jQuery对象实际上是一个数据对象,可以通过[index]方法获得相应的DOM对象。

          var $v=$("#v"); //得到jQuery对象
          var v=$("v")[0];//转换成DOM对象

     

    (2)jQuery本身可以通过.get(index)方法得到相应的DOM对象。

           var $v=$("#v"); //得到jQuery对象
           var v=$v.get(0);

     

    DOM对象转成jQuery对象:

    对于已经是一个DOM对象,只需要用$()将DOM对象包装起来,就能获得jQuery对象。

         var v=document.getElementById("v"); //得到DOM对象
         var $v=$(v); //转成jQuery对象

    转换后可以任意使用jQuery的方法了


     

    jquery固有的方法:

    jquery固有的方法
  • 相关阅读:
    Sigma Function (LightOJ
    Least Common Multiple (HDU
    七夕节 (HDU
    Goldbach`s Conjecture(LightOJ
    tarjan图论算法
    数论基础(更新中)
    You Are Given a Decimal String... CodeForces
    【UOJ#22】【UR#1】外星人
    【UOJ#21】【UR#1】缩进优化
    【BZOJ3242】【UOJ#126】【NOI2013】快餐店
  • 原文地址:https://www.cnblogs.com/gitnull/p/9493056.html
Copyright © 2011-2022 走看看