模仿jquery做一个js库的封装

最新推荐文章于 2022-06-23 11:14:00 发布

bboyjoe

最新推荐文章于 2022-06-23 11:14:00 发布

阅读量922

点赞数

分类专栏： javascript jQuery

本文链接：https://blog.csdn.net/bboyjoe/article/details/87116745

版权

javascript 同时被 2 个专栏收录

54 篇文章 2 订阅

订阅专栏

jQuery

23 篇文章 0 订阅

订阅专栏

<!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>