欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jQuary

程序员文章站 2022-07-03 15:22:12
...

课堂上的代码:

http://js.jirengu.com/binuwigera/1/edit?html,js,output
http://js.jirengu.com/govatixevu/1/edit?js,output
http://js.jirengu.com/menosegapu/1/edit?js,output

封装一个函数

function getSiblings(node){}

再封装一个

function addClass(node, classes){}

命名空间

var dom = {}
dom.getSiblings(node)
dom.addClass(node, {a: true, b: false})

能不能把 node 放在前面

node.getSiblings()
node.addClass()

  1. 方法一:扩展 Node 接口
    直接在 Node.prototype 上加函数

  2. 方法二:新的接口 BetterNode

     function Node2(node){
         return {
             element: node,
             getSiblings: function(){
    
             },
             addClass: function(){
    
             }
         }
     }
     let node =document.getElementById('x')
     let node2 = Node2(node)
     node2.getSiblings()
     node2.addClass()
    
    

第二种叫做「无侵入」。

把 Node2 改个名字吧

function jQuery(node){
    return {
        element: node,
        getSiblings: function(){

        },
        addClass: function(){

        }
    }
}
let node =document.getElementById('x')
let node2 =jQuery(node)
node2.getSiblings()
node2.addClass()

再给个缩写吧 alias

window.$ = jQuery

改进一:改掉 document.getElementById

改进二:接受多个 node

改进三:添加 .html() .text() .css() 等

jQuery 不过如此?

  1. jQuery 在兼容性方面做得很好,1.7 版本兼容到 IE 6
  2. jQuery 还有动画、AJAX 等模块,不止 DOM 操作
  3. jQuery 的功能更丰富
  4. jQuery 使用了 prototype,我们没有使用,等讲了 new 之后再用

不过你已经了解 jQuery 了