模仿jquery做一个js库的封装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js封装</title>
</head>
<body>
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
<span class="ddd">ddd</span>
<span id="eee">eee</span>
<script>
  (function (window) {
    function jQuery (selector) {
      return new jQuery.fn.init(selector)
    }


    jQuery.fn = jQuery.prototype = {
      constructor: jQuery,
      init: function(selector) {
        let elements = document.querySelectorAll(selector)
        for (let i = 0; i<elements.length; i++){
          this[i] = elements[i]
        }
        this.length = elements.length
      }
    }
    jQuery.fn.init.prototype = jQuery.fn

    jQuery.fn.extend = jQuery.extend = function (...args) {
      let target = [], source = [...args]
      if (args.length === 1) {
        target = this
      } else {
        target = args[0]
        source.splice(0,1)
      }
      Object.assign(target, ...source)
      return target
    }

    // 添加工具类方法
    jQuery.extend({
      each () {
        console.log('each方法')
      }
    })

    // 添加DOM类方法
    jQuery.fn.extend({
      css (name,value) {
        for (let i = 0; i < this.length; i++) {
          this[i].style[name] = value
        }
      },
      attr () {
        console.log('attr方法')
      }
    })


    window.$ = window.jQuery = jQuery

  })(window)

 let p = {}
 $.extend(p, {a: 1},{b:2})
 $.fn.extend({
    getDate () {}
 })
 $.each()
  $('div').css('color', 'red')
  $('div').attr()
</script>
</body>
</html>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值