<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="base.css"/>
        <script src="sizzle.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <input type="button" id="btn" value="click" />
        <div id="ids" >
            <span>12</span>
            <div class="a">11</div>
            <div class="a">12</div>
            <div class="a">13</div>
        </div>
        
        <div><p class="a">3</p></div>
        
        
        <p>3</p>
        <script>
            var Base=function(args){
                this.elements=[];
                if(typeof args=="string")//string证明附带参数进来
                {
                    for(var i=0;i<Sizzle(args).length;i++)
                    {        
                        this.elements.push(Sizzle(args)[i]);
                    }
                }
                else if(typeof args=="object")
                {
                    if(args!=undefined)
                    {
                        this.elements[0]=args;
                    }
                }
            }
            var myquery=function(args){
                return new Base(args);
            }

//            //id弃用，使用sizzle来获取
//            Base.prototype.getid=function(args){
//                var thisid=document.getElementById(args);
//                return this.elements.push(thisid)
////                return this;
//            };
            //tag
//            Base.prototype.gettags=function(args){
//                var tag=document.getElementsByTagName(args);
//                for(var i=0;i<tag.length;i++)
//                {
//                    this.elements.push(tag[i])
//                }
//                return this;
//            }
            //css
            Base.prototype.css=function(attr,value)
            {
                //console.log(arguments.length)
                if(typeof arguments[0]=="object"&&arguments.length==1)//传递的对象
                {
                    for(var i=0;i<this.elements.length;i++)
                    {
                        //alert(this.elements)
                        for(var key in arguments[0]){  
                            this.elements[i].style[key]=arguments[0][key];
                        }
                    }
                }
                else
                {
                    console.log("b")
                    for(var i=0;i<this.elements.length;i++)
                    {
                        if(arguments.length==1)
                        {
                            if(typeof window.getComputedStyle!=undefined)
                            {
                                //复合属性值无从获取在ie和火狐里面
                                return document.defaultView.getComputedStyle(this.elements[i],null)[attr];
                            }
                            else if(typeof this.elements[i].currentStyle!=undefined)
                            {
                                //console.log(this.elements[i].currentStyle[attr])
                                return this.elements[i].currentStyle[attr];
                            }
                        }
                        else
                        {
                            this.elements[i].style[attr]=value;
                        }
                        
                    }
                }
                
                return this;
            }
            //html
            Base.prototype.html=function(args){
                console.log(this.elements.length)
                for(var i=0;i<this.elements.length;i++)
                {
                    if(arguments.length==0)
                    {
                        return this.elements[i].innerHTML;
                    }
                    else
                    {
                        this.elements[i].innerHTML=args;
                    }
                    
                }
                return this;
            }
            //class
//            Base.prototype.getclass=function(attr,area){
//                //Sizzle(".a")[1]
//                var param=null;
//                if(arguments.length==2)
//                {
//                    for(var i=0;i<Sizzle(area+" ."+attr).length;i++)
//                    {        
//                        this.elements.push(Sizzle(area+" ."+attr)[i]);
//                    }
//                }
//                else
//                {
//                    var classes=document.getElementsByTagName("*");
//                    for(var i=0;i<classes.length;i++)
//                    {
//                        if(classes[i].className==attr)
//                        {
//                            //console.log(classes[i])
//                            this.elements.push(classes[i]);
//                        }
//                    }
//                }
//                return this;
//            }
            //eq方法
            Base.prototype.eq=function(num){
                var tempelement=this.elements[num];
                this.elements=[];
                this.elements[0]=tempelement;
                return this;
            }
            //addclass
            Base.prototype.addclass=function(classname){
                for(var i=0;i<this.elements.length;i++)
                {
                    //去重
                    if(!this.elements[i].className.match(new RegExp('(\\s|^)'+classname+'($|\\s)')))
                    {
                        this.elements[i].className+=" "+classname
                    }
                    
                }
                return this;
            }
            //removeclass
            Base.prototype.removeclass=function(classname){
                for(var i=0;i<this.elements.length;i++)
                {
                    //去重
                    if(this.elements[i].className.match(new RegExp('(\\s|^)'+classname+'($|\\s)')));
                    {
                        this.elements[i].className=this.elements[i].className.replace(new RegExp('(\\s|^)'+classname+'($|\\s)')," ");
                    }
                    
                }
                return this;
            }
//            //addcss
//            Base.prototype.addcss=function(num,selectortxt,csses,ind){
//                var sheet=document.styleSheets[num];
//                if(typeof sheet.insertRule!=undefined)
//                {
//                    sheet.insertRule(selectortxt+"{"+csses+"}",ind)
//                }
//                else if(sheet.addRule!=undefined)
//                {
//                    sheet.addRule(selectortxt,csses,ind)
//                }
//                return this;
//            }
//            //removecss
//            Base.prototype.removecss=function(num,ind){
//                var sheet=document.styleSheets[num];
//                if(typeof sheet.deleteRule!=undefined)
//                {
//                    sheet.deleteRule(ind)
//                }
//                else if(sheet.removeRule!=undefined)
//                {
//                    sheet.removeRule(ind)
//                }
//                return this;
//            }
            //插件扩展
            Base.prototype.extend=function(name,fn){
                Base.prototype[name]=fn;
            }
//            myquery().extend('bbb',function(){
//                alert("a")
//            })
//            myquery().bbb();
            //现代事件绑定
            
            Base.prototype.addevent=function(obj,type,fn){
                if(typeof obj.addEventListener!='undefined')
                {
                    obj.addEventListener(type,fn,false);
                }
                else
                {
                    if(!obj.events)
                    {
                        obj.events={};
                    }
                    if(!obj.events[type])
                    {
                        obj.events[type]=[];
                        if(obj.events["on"+type])//如果没有ontype点击事件，那么我们把fn存放到第一个type的位置
                        {
                            obj.events[type][0]=fn;
                        }
                    }
                    else
                    {
                        if(Base.prototype.addevent.compare(obj.events[type],fn))
                        return false;
                    }
                    obj.events[type][Base.prototype.addevent.countnum++]=fn;
                    obj["on"+type]=Base.prototype.addevent.exec;
                }
            }
            Base.prototype.addevent.countnum=1;//ie8一下事件计数器
            Base.prototype.addevent.exec=function(e){
                var e=event||window.event;
                for(var i in this.events[e.type])
                {
                    this.events[e.type][i].call(this,e);
                }
            }
            Base.prototype.addevent.compare=function(type,fn){
                
                for(var i in type)
                {
                    if(type[i]==fn)
                    {
                        return true;
                    }
                }
                return false;
            }
            //现代事件删除
            Base.prototype.removevent=function(obj,type,fn){
                if(typeof obj.removeEventListener!='undefined')
                {
                    obj.removeEventListener(type,fn,false);
                }
                else
                {
                    for(var i in obj.events[type])
                    {
                        if(obj.events[type][i]==fn)
                        {
                            delete obj.events[type][i];
                        }
                    }
                }
            }
console.log(myquery("div p").eq(0).css({"color":"red","background":"red"}))
//var objs=document.getElementById("btn");
//            myquery().addevent(objs,"click",fn1)
//            myquery().addevent(objs,"click",fn1)
//            myquery().addevent(objs,"click",fn1)
//            myquery().removevent(objs,"click",fn1)
//            
//            function fn1(){
//                alert("a1"+this.value)
//            }
//            function fn2(){
//                alert("a2"+this.value)
//            }
//            function fn3(){
//                alert("a3"+this.value)
//            }
            //console.log(Sizzle("#ids .a")[2].innerHTML)
        </script>
        
    </body>
</html>

js库开发--参数传递及方法修改的更多相关文章

  1. ArcServer JS API开发离线部署方法

      1. 下载ArcGIS API for JavaScript 3.6 Library. (地址:http://support.esrichina.com.cn/uploadfile/Javascr ...

  2. js库开发

    <!DOCTYPE html><html>    <head>        <meta charset="UTF-8">      ...

  3. js库编写的环境和准备工作

    在编写一个js库之前需要准备许多基础知识. 本人在编写之前主要参考了visjs和百度的echarts这两个库的部分内容,这之中提取出几个要点如下: 1.如何整理代码结构,使模块与模块分开又不至于出现调 ...

  4. 动态嵌套form，使用Stimulus Js库（前后端不分离）

    我的git代码:https://github.com/chentianwei411/nested_form-Stimulus- Stimulus:     https://www.cnblogs.co ...

  5. 解决同一页面jQuery多个版本或和其他js库冲突方法

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  6. ios实例开发精品文章推荐（8.12）11个处理触摸事件和多点触摸的JS库

    11个处理触摸事件和多点触摸的JS库 触摸屏是现在所有智能手机的标配,还包括各种平板设备,而且很多桌面也慢慢在开始支持触摸操作.要开发支持触摸屏设备的Web应用,我们需要借助浏览器的触摸事件来实现. ...

  7. 使用模块化工具打包自己开发的JS库(webpack/rollup)对比总结

    打包JS库demo项目地址:https://github.com/BothEyes1993/bes-jstools 背景 最近有个需求,需要为小程序写一个SDK,监控小程序的后台接口调用和页面报错(类 ...

  8. 解决jQuery多个版本，与其他js库冲突方法

    jQuery多个版本或和其他js库冲突主要是常用的$符号的问题,这个问题 jquery早早就有给我们预留处理方法了,下面一起来看看解决办法. 1.同一页面jQuery多个版本或冲突解决方法. < ...

  9. <WEB>平板_手机开发_13 个处理触摸事件和多点触摸的JS 库

    触摸屏是现在所有智能手机的标配,还包括各种平板设备,而且很多桌面也慢慢在开始支持触摸操作.要开发支持触摸屏设备的 Web 应用,我们需要借助浏览器的触摸事件来实线. 下图是各种触摸事件说明: 本文我们 ...

随机推荐

  1. 函数内部用setTimeout()调用自身函数相当于setInterval()

    本来setTimeout(function(){},time)只执行了一次function,但是当 function demo() { alert(1); setTimeout('demo()' ,5 ...

  2. 高逼格的实现WiFi共享，不安装第三方ｗｉｆｉ共享软件，两种方式实现开启ｗｉｆｉ的功能

    作为一枚程序员,不会点高逼格的doc命令,那么都有点感觉对不起自己的行业了,好了废话就到这里了   第一种方式: 首先使用cmd命令:window键+R 然后输入cmd回车 第一种方式: 第一步: 设 ...

  3. div没有设置高度时背景颜色不显示(浮动)

    在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度,在IE浏览器下显示正常.但是使用Firefox/opera浏览时却出现最外层Div的背景颜色和边框不起作用的问题. ...

  4. spring cuowu

    spring常见错误总结 在学习spring过程中遇见了种种不同的异常错误,这里做了一下总结,希望遇见类似错误的同学们共勉一下. 1. 错误一 Error creating bean with nam ...

  5. 6、Khala的登录生命周期管理

    khala能够对设备进行生命周期管理,并提供了与生命周期相关的接口,用户只需在具体的设备类型实现类中重写这些生命周期接口,即可享受khala对于生命周期管理的同时定制与业务相关的操作.具体接口解释如下 ...

  6. EasyUI TextBox的keypress

    关于EasyUI TextBox的事件好像不多,像keypress,keydown在textbox的事件里都没有,所以要用这些事件要采取一些特殊的方法,今天用到了这些就记录一下,有两种方法, 第一种: ...

  7. PHP使用curl伪造IP地址和header信息

    curl虽然功能强大,但是只能伪造$_SERVER["HTTP_X_FORWARDED_FOR"],对于大多数IP地址检测程序来说,$_SERVER["REMOTE_AD ...

  8. Python之路第十一天，高级(3)-线程池

    线程池 简单的线程池的实现: import queue import threading import time class ThreadPool(object): def __init__(self ...

  9. ubuntu下安装fiddler

    因为工作中需要用到fiddler工具  现在工作环境迁移到ubuntu14 下  发现fiddler只支持windows网上也有很多推荐 号称可以代替fiddler   但因为功能使用上比较习惯  并 ...

  10. MVC中一般为什么用IQueryable而不是用IList？用IQueryable比IList好在哪？

    IList(IList<T>)会立即在内存里创建持久数据,这就没有实现"延期执行(deferred execution)",如果被加载的实体有关联实体(associat ...