jquery使用原型

最新推荐文章于 2021-05-14 15:48:49 发布

weixin_34117211

最新推荐文章于 2021-05-14 15:48:49 发布

阅读量188

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5afae9b1f265da0b981b9d2a

版权

jquery使用原型 html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p>jQuery test 1</p>
    <p>jQuery test 2</p>
    <p>jQuery test 3</p>

    <div id="div1">
        <p>jQuery test in div</p>
    </div>
    <script type="text/javascript" src="./my-jquery.js"></script>
    <script type="text/javascript">
        var $p = $('p')
        $p.css('font-size','40px')
        alert($p.html())

        var $div1 = $('#div1')
        $div1.css('color','blue')
        alert($div1.html())
    </script>
</body>
</html>
复制代码

my-jquery代码如下：

(function (window) {
    var jQuery= function (selector) {
        return new jQuery.fn.init(selector)
    }
    jQuery.fn = {
        css: function (key, value) {
            alert('css')
        },
        html: function (key, value) {
            return 'html'
        }
    }
    var init = jQuery.fn.init = function (selector) {
        var slice = Array.prototype.slice
        var dom = slice.call(document.querySelectorAll(selector))

        var i, len = dom ? dom.length : 0
        for (i = 0; i< len; i++){
            this[i] = dom[i]
        }
        this.length =len
        this.selector = selector || ''
    }
    init.prototype = jQuery.fn
    window.$ = jQuery
})(window)
复制代码