自己写一个jquery

通过阅读jquery原代码, 我们可以模拟写一个简单的jquery

比如常用的

jQuery("div").css("color","red");
jQuery("#span1").css("color","green");

1. jQuery(), 因为是链式调用, 所以返回是一个对象。

        jQuery = function(selector){
            return new jQuery.prototype.init(selector);
        }
        jQuery.prototype = {
            constructor:jQuery,
            init:function(selector){
                this.elements = document.querySelectorAll(selector);
            },
            css:function(key, value){
            ......
            }
        }

此时,this.elements为所有合条件的html elements

2. css(), 对所有合适条件的element设置样式。

            css:function(key, value){
                this.elements.forEach(element => {
                    element.style[key] = value;
                });
            }

3. 此时,css是访问不了this.elements的。 因为this.elements是在init定义,并且init是构造函数。所以this.elements是init实例里面的属性。

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

这样 css()就能访问this.elements.

完整代码

        jQuery = function(selector){
            return new jQuery.prototype.init(selector);
        }
        jQuery.prototype = {
            constructor:jQuery,
            init:function(selector){
                this.elements = document.querySelectorAll(selector);
            },
            css:function(key, value){
                this.elements.forEach(element => {
                    element.style[key] = value;
                });
            }
        }

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

最后起个别名

jQuery.fn=jQuery.prototype

        jQuery = function(selector){
            return new jQuery.fn.init(selector);
        }
        jQuery.fn = jQuery.prototype = {
            constructor:jQuery,
            init:function(selector){
                this.elements = document.querySelectorAll(selector);
            },
            css:function(key, value){
                this.elements.forEach(element => {
                    element.style[key] = value;
                });
            }
        }

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

测试一下。

<html lang="en">
<head>
    <title>My jquery</title>
</head>
<body>
    <div>
        div 1
    </div>
    <div>
        div 2
    </div>

    <span id="span1">
        span 1
    </span>
</body>
   <script type="text/javascript">
        jQuery = function(selector){
            return new jQuery.fn.init(selector);
        }
        jQuery.fn = jQuery.prototype = {
            constructor:jQuery,
            init:function(selector){
                this.elements = document.querySelectorAll(selector);
            },
            css:function(key, value){
                this.elements.forEach(element => {
                    element.style[key] = value;
                });
            }
        }

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

        jQuery("div").css("color","red");
        jQuery("#span1").css("color","green");
   </script>
</html>

原文地址:https://www.cnblogs.com/Ivan83/p/9136390.html

时间: 2024-10-10 00:22:45

自己写一个jquery的相关文章

如何写一个Jquery 的Plugin插件

博客分类: Javascript /Jquery / Bootstrap / Web jQuery配置管理脚本FirebugJavaScript JQuery Plugin插件,如果大家不明白什么是JQuery插件或都不清楚如何编写可以查看其官方的网站:jQuery Authoring Guidelines 好了,下面有一些我觉得想做一个好的插件必须应有的要求: 1.在JQuery命名空间下声明只声明一个单独的名称 2.接受options参数,以便控制插件的行为 3.暴露插件的默认设置 ,以便外

自己写一个 jQuery 插件

我知道这一天终将会到来,现在,它来了. 需求 开发 SharePoint 的 CSOM 应用时,经常需要在网页上输出一些信息. 这种需求和 alert 的弹窗.F12 的断点查看信息的场景是不一样的:在这种场景下,你就是端着杯咖啡靠在那里坐着,看着关于应用程序运行的信息不断的在网页上输出,不用去关闭弹窗.也不用去设置断点. 详细的功能需求如下: 输出的信息中自动包含时间 输出的信息按照类型显示不同的样式 输出的信息类型包括:普通信息.调试信息.警告.错误 可选按照时间升序输出信息(稍作修改可以时

自己写一个jQuery垂直滚动条插件(panel)

html中原生的滚动条比较难看,所以有些网站,会自己实现滚动条,导航网站hao123在一个侧栏中,就自定义了垂直滚动条,效果比较好看,截图如下: 这个滚动条,只有在鼠标悬停在这个区域内时才显示,半透明效果,很节省空间的说~~,说实话,这个效果我非常喜欢. 垂直滚动条的原理,简单来说: 先起个名字,外层的叫wrapper,内层的叫content,wrapper需要有非static的定位,content需要绝对定位,这样就可以通过调节top值来模拟内容滚动. 具体说一下: 1.wrapper的ove

自己在项目中写的一个Jquery插件和Jquery tab 功能

后台查询结果 PDFSearchResult实体类: [DataContract(Name = "PDFSearchResult")] public class PDFSearchResult { public PDFSearchResult(string title, string fileUrl) { Title = title; FileUrl = fileUrl; } [DataMember(Name = "title")] public string Ti

第一次来博客园先用jquery写一个简单菜单收缩效果

<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>    <meta charset="utf-8" />    <title></title>    <script src="jquery-1.7.2.min.js"></script&g

写一个限制上传文件大小和格式的jQuery插件

在客户端上传文件,通常需要限制文件的尺寸和格式,最常用的做法是使用某款插件,一些成熟的插件的确界面好看,且功能强大,但美中不足的是:有时候会碰到浏览器兼容问题.本篇就来写一个"原生态"的jQuery插件,使之能限制上传文件的大小和格式. 首先,写一个名称为checkFileTypeAndSize.js的插件.通过判断当前文件的后缀名是否被包含在预先设置所允许的后缀名数组中,来限制文件格式:通过判断当前文件在IE以及其它浏览器下的尺寸是否大于预先设置所允许的最大文件尺寸,来限制文件大小:

用jquery写一个无刷新评论功能

<1> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="Jquery/jquery-1.10.2.js" type="text/javascript"></script> <script type="text/javascript&quo

从零开始,DIY一个jQuery(2)

在上篇文章我们简单实现了一个 jQuery 的基础结构,不过为了顺应潮流,这次咱把它改为模块化的写法,此举得以有效提升项目的可维护性,因此在后续也将以模块化形式进行持续开发. 模块化开发和编译需要用上 ES6 和 rollup,具体原因和使用方法请参照我之前的<冗余代码都走开——前端模块打包利器 Rollup.js 入门>一文. 本期代码均挂在我的github上,有需要的童鞋自行下载. 1. 基本配置 为了让 rollup 得以静态解析模块,从而减少可能存在的冗余代码,我们得用上 ES6 的解

基于zabbix用Python写一个运维流量气象图

前言:同事问我,你写运维平台最先写哪一部分?好吧,还真把我问倒了,因为这是在问最应该放在放在第一位的东西~作为一个工作不足两年,运维不足一年的新手来说,还真不敢妄下评论,其实按照我的思路,觉得最重要的部分肯定是故障处理,报警,但是这一块怎么写?怎么说?肯定不能重复造轮子了,不过我最想写的是报表系统,思路是有的,但是一直耽搁了,详情参考http://youerning.blog.51cto.com/10513771/1708925. 好吧,在回到那个问题,应该先写哪个部分.我没回答,反问他了. 他