写一个mini的JQuery

(function  () {

var _$ = window.$;
    var _jQuery = window.jQuery;
    
    var jQuery = window.jQuery = window.$ = function(selector){

return new jQuery.fn.init(selector);
    };

jQuery.fn = jQuery.prototype = {
        init:function(selector){
            var elements = document.querySelectorAll(selector);
            Array.prototype.push.apply(this,elements);
            return this;    
        },
        jQuery:"1.0.0",
        length:0,
        size:function(){
            return this.length;
        }

};
    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;
        },
        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;
        },
        hide:function(){//隐藏元素
            this.each(function(index,ele){
                ele.style.display = "none";
            });
        },
        show:function(){//显示元素
            this.each(function(index,ele){
                ele.style.display = "block";
            });
        },
        addClass:function(){ //添加(class)类
            var name = arguments[0];
            this.each(function(index,ele){
                var ele_class = ele.className,
                blank = (ele_class != ‘‘) ? ‘ ‘ : ‘‘;
                added = ele_class + blank + name;
                ele.className = added;
            });
        },
        removeClass:function(){ //删除(class)类
            var name = arguments[0];
            this.each(function(index,ele){
                var obj_class = ‘ ‘+ele.className+‘ ‘;
                obj_class = obj_class.replace(/(\s+)/gi, ‘ ‘),
                removed = obj_class.replace(‘ ‘+name+‘ ‘, ‘ ‘);
                removed = removed.replace(/(^\s+)|(\s+$)/g, ‘‘);
                ele.className = removed;
            });
        },
        remove:function(){ //删除属性
            var name = arguments[0];
            this.each(function(index,ele){
                ele.attributes.removeNamedItem(name);
            });
        },
        width:function(){ //设置宽度
            var name = arguments[0];
            this.each(function(index,ele){
                ele.style.width = name;
            });
        },
        height:function(){ //设置高度
            var name = arguments[0];
            this.each(function(index,ele){
                ele.style.height = name;
            });
        },
        getWidth:function(){ //获取对象宽度
            this.each(function(index,ele){
                var gw = ele.offsetWidth;
                console.log(gw);
            });
        },
        getHeight:function(){ //获取对象高度
            this.each(function(index,ele){
                var gh = ele.offsetHeight;
                console.log(gh);
            });
        },
        on:function(eventName,callback){//on事件
            this.each(function(index,ele){
                ele[eventName] = callback ;
            });
        },
        first:function(){//获取该元素的第一个子元素
            this.each(function(index,ele){
                var ss = ele.children[0];
                console.log(ss);
            });
        },
        allEle:function(){//获取该元素的全部子元素
            this.each(function(index,ele){
                for(var i=0;i<ele.children.length;i++){
                    var ss = ele.children[i];
                    console.log(ss);    
                }
                
            });
        },
        
    });

})();

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

写一个mini的JQuery的相关文章

How to Create a Basic Plugin 如何写一个基础的jQuery插件

How to Create a Basic Plugin Sometimes you want to make a piece of functionality available throughout your code. For example, perhaps you want a single method you can call on a jQuery selection that performs a series of operations on the selection. I

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

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

自己写一个jquery

通过阅读jquery原代码, 我们可以模拟写一个简单的jquery 比如常用的 jQuery("div").css("color","red");jQuery("#span1").css("color","green"); 1. jQuery(), 因为是链式调用, 所以返回是一个对象. jQuery = function(selector){ return new jQuery.pro

自己写一个 jQuery 插件

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

如何写一个Jquery 的Plugin插件

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

第一次来博客园先用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写一个无刷新评论功能

<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

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

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

JavaScript写一个连连看的游戏

天天看到别人玩连连看, 表示没有认真玩过, 不就把两个一样的图片连接在一起么, 我自己写一个都可以呢. 使用Javascript写了一个, 托管到github, 在线DEMO地址查看:打开 最终的效果图: 写连连看之前要先考虑哪些呢? 1:如何判断两个元素可以连接呢, 刚刚开始的时候我也纳闷, 可以参考这里:打开: 2:模板引擎怎么选择呢, 我用了底线库的template,因为语法简单. 本来想用Handlebars,但是这个有点大啊, 而且底线库也提供很多常用工具方法( •? ω •? )y: