简易的jQuery

素颜马尾好姑娘i 2021-09-16 08:40 292阅读 0赞

看了一个面向对象的视频,试着写了个

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>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            height:400px;
            width:400px;
            background: blue;
        }
    </style>
    <body>
        <div id="idiv"></div>
        
    </body>
    <script src="minQuery.js"></script>
    <script>
        var elem1=document.getElementById('idiv');
        style = window.getComputedStyle(elem1, null);//外联样式用到这getComputedStyle计算属性
        console.log(style.width)
    </script>
    
    </html>

js

(function () {
    
        var _$ = window.$,
            _jQuery = jQuery;
        //暴露外部使用的一个接口
        var jQuery = window.jQuery = window.$ = function (selector) {
            return new jQuery.fn.init(selector)
        }
    
        //处理原型对象
        jQuery.fn = jQuery.prototype = {
            init: function (selector) {
                var elements = document.getElementsByTagName(selector);
                Array.prototype.push.apply(this, elements)
                return this;
            },
            jQuery: "3.0.0",
            length: 0
        };
        jQuery.fn.init.prototype = jQuery.fn;
        //实现继承
        jQuery.extend = jQuery.fn.extend = function () {
            var o = arguments[0];
            for (var p in o) {
                this[p] = o[p];
            }
        };
    
        //添加静态方法
        jQuery.extend({
            trim: function (text) {
                return (text || "").replace(/^\s+|\s+$/g, "")
            },
            noConflict: function () {
                window.$ = _$;
                window.jQuery = _jQuery;
                return jQuery;
            }
        });
    
        //添加实例方法
        jQuery.fn.extend({
            get: function (num) {
                return this[num];
            },
            each: function (fn) {
                for (var i = 0; i < this.length; i++) {
                    fn(i,this[i])
                }
                return this;//支持链式操作,每个支持链式操作的方法最后加return this
            },
            css:function(){
                var l = arguments.length;
                if(l == 1){
                    return this[0].style[arguments[0]];
                }else{
                    var name = arguments[0];
                    var value = arguments[1];
                    this.each(function(index,ele){
                        ele.style[name] = value;
                    })
                }
                return this;//支持链式操作
            }
        })
    })()

发表评论取消回复

表情：

评论列表（有 0 条评论，292人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery基础练习 —— 简易版2048

效果图 ![在这里插入图片描述][20190930211208133.gif] 写在前面遇到的问题 ① 当布局完成后，给某一个模块添加了文字后，布局发生改

ゝ一纸荒年。/ 2023年08月17日 17:16/ 0 赞/ 68 阅读

相关 jquery实现简易按钮轮播效果

直接上代码，实现简单的按钮轮播，主要思路是：点击按钮时变颜色，图片也展示；没点击到的按钮没有变颜色，图片隐藏 <!DOCTYPE html> <html la

港控/mmm°/ 2023年02月26日 12:22/ 0 赞/ 14 阅读

相关 html + scss + jquery实现的简易轮播图

html + scss + jquery实现的简易轮播图 1. 思路：首先通过定位将所有的色块都层叠起来（不层叠也行，其实就是将所有的内容都隐藏掉，先显示一张就好了），

痛定思痛。/ 2022年11月25日 13:12/ 0 赞/ 117 阅读

相关 jquery 简易分页

实现效果 ![这里写图片描述][SouthEast] 需要引入的文件 <link rel="stylesheet" type="text/css" hre

傷城~/ 2022年06月17日 07:28/ 0 赞/ 227 阅读

相关 jQuery实现简易购物车

上上篇用JS写了个简单的购物车，学习了jQuery之后想要看看JavaScript和jQuery的区别到底有多大，于是又在原来的模板上用JQuery将购物车再次实现了一下。

忘是亡心i/ 2022年05月17日 11:47/ 0 赞/ 239 阅读

相关 Jquery的简易版ajax $.post()

语法 jQuery.post(url,data,success(data, textStatus, jqXHR),dataType) <table> <tbod

╰半夏微凉°/ 2022年04月18日 00:25/ 0 赞/ 247 阅读

相关 JS基础之手动实现简易jQuery api

今天主要实现以下两个api： 1. addClass：给指定标签增加class 2. setText:给指定标签设置文本内容(textContent) 第一版第

喜欢ヅ旅行/ 2022年01月21日 08:23/ 0 赞/ 225 阅读

相关如何实现简易版jQuery

window.jQuery=x=>{ //声明一个空对象 let jQuery = {};

妖狐艹你老母/ 2021年10月19日 00:44/ 0 赞/ 383 阅读

相关自己封装的简易版jQuery

学过jQuery快一年了，学jQuery时曾尝试封装过一个简易的jQuery，也是为了考察自己对原生js的掌握程度。实现了jQuery的部分功能。如选择元素、add、trigg

素颜马尾好姑娘i/ 2021年09月20日 05:42/ 0 赞/ 384 阅读

相关简易的jQuery

看了一个面向对象的视频,试着写了个 html <!DOCTYPE html> <html lang="en"> <head>

素颜马尾好姑娘i/ 2021年09月16日 08:40/ 0 赞/ 293 阅读