js 简易封装jquery

最新推荐文章于 2024-05-16 11:49:53 发布

啵雨的博客

最新推荐文章于 2024-05-16 11:49:53 发布

阅读量385

点赞数

分类专栏： # js简易封装jquery库

本文链接：https://blog.csdn.net/qq_25503949/article/details/106147799

版权

js简易封装jquery库专栏收录该内容

1 篇文章 0 订阅

订阅专栏

js 简易封装jquery

（一）.引入‘$’符号
HTML:

<body>
    <script src="myjq.js"></script>
</body>

JS：

;//防止受到别的js文件影响
(function() {


    var jQuery = function() {

        return 111;
    };

    window.jQuery = jQuery;

    window.$ = window.jQuery;

    console.log($());
})();

（二）.dom节点的选取

比如我们要完成 $(x x x) . c s s (), 这个 j q 语句，我们可以当作对象 . 方法但是要完成$ (xxx).css().background(),对象.方法.方法是不可以的，会报错。
我们需要obj.a()=====>返回对象 .b（）必须这样做，我们首先要有这种思想

<script>
console.log($('li'));
</script>

;(function(){

    var jQuery = function(selected) {

        return new jQuery.prototype.init(selected); //返回一个对象
    };

    var markArray = function(arr,that){

        var brr = that;
        for(var i=0;i<arr.length;i++){

            brr[i]=arr[i]

        }
        brr.length=arr.length;
        return brr;
    };

    jQuery.prototype = {

        init:function(selected){
        //这是一个方法===》选择元素的

            var dom = document.querySelectorAll(selected);

            return markArray(dom,this); //返回一个对象,this为init

        },
        a:function(){

            alert("aaaaa");
            return this;
        },
        b:function(){
            alert("bbbbb");
            return this;
        },
        c:function(){
            alert("ccccc")
        }


    };

   jQuery.prototype.init.prototype= jQuery.prototype;

    window.jQuery = window.$ = jQuery;


})();

在这里插入图片描述
（三）.dom添加方法：
JS：

;
(function() {

    var jQuery = function(selected) {

        return new jQuery.prototype.init(selected); //返回一个对象
    };

    var markArray = function(arr, that) {

        var brr = that;
        for (var i = 0; i < arr.length; i++) {

            brr[i] = arr[i]

        }
        brr.length = arr.length;
        return brr;
    };

    jQuery.prototype = {

        init: function(selected) {
            //这是一个方法===》选择元素的

            var dom = null;

            if (typeof selected != "string") {

                dom = [selected];

            } else {
                dom = document.querySelectorAll(selected);
            }

            return markArray(dom, this); //返回一个对象

        },
        hover: function(over, out) {

            this[0].onmouseover = over;
            this[0].onmouseout = out;
            return this;

        },
        css: function(attr, val) {
            for (var i = 0; i < this.length; i++) {
                this[i].style[attr] = val;
            }
            return this;
        },
        html: function(val) {
            for (var i = 0; i < this.length; i++) {
                this[i].innerHTML = val;
            }
            return this;
        },
        first: function() {

            return $(this[0]);
        },
        last: function() {

            return $(this[this.length - 1]);
        },
        eq: function(num) {

            return $(this[num]);

        }

    };

    jQuery.prototype.init.prototype = jQuery.prototype;

    window.jQuery = window.$ = jQuery;


})();

HTML：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #box {
        width: 100px;
        height: 100px;
    }
</style>

<body>

    <div id="box">111111111</div>

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>


    <script src="myjq.js"></script>
    <script>
        $("#box").hover(function() {

            alert('鼠标移入');

        }, function() {

            alert("鼠标移出");

        })

        $("#box").css("background", "red");


        $("ul li").first().css("background", "red");
        $("ul li").last().css("background", "red");
        $("ul li").eq(2).css("background", "blue");
    </script>

</body>

</html>

在这里插入图片描述

啵雨的博客

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js 简易封装jquery

js 简易封装jquery（一）.引入‘$’符号HTML:<body> <script src="myjq.js"></script></body>JS：;//防止受到别的js文件影响(function() { var jQuery = function() { return 111; }; window.jQuery = jQuery; window.$ = window.jQ
复制链接

扫一扫

专栏目录