<!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>
        <div id="ids" >
            <span>12</span>
            <div class="a">11</div>
            <div class="a">12</div>
            <div class="a">13</div>
        </div>
        
        <div>12</div>
        <p class="a">3</p>
        <p class="a">3</p>
        <p>3</p>
        <script>
            var Base=function(){
                this.elements=[];
            }
            var myquery=function(){
                return new Base();
            }

//id
            Base.prototype.getid=function(id){
                var thisid=document.getElementById(id);
                this.elements.push(thisid)
                return this;
            };
            //tag
            Base.prototype.gettags=function(tags){
                var tag=document.getElementsByTagName(tags);
                for(var i=0;i<tag.length;i++)
                {
                    this.elements.push(tag[i])
                }
                return this;
            }
            //css
            Base.prototype.css=function(attr,value)
            {
                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(str){
                for(var i=0;i<this.elements.length;i++)
                {
                    if(arguments.length==0)
                    {
                        return this.elements[i].innerHTML;
                    }
                    else
                    {
                        this.elements[i].innerHTML=str;
                    }
                    
                }
                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

console.log(myquery().getclass("a","#ids").addclass("b").removeclass("b"))
            //console.log(Sizzle("#ids .a")[2].innerHTML)
        </script>
    </body>
</html>

js库开发的更多相关文章

  1. js库开发--参数传递及方法修改

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

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

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

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

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

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

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

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

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

  6. JS模块化开发：使用SeaJs高效构建页面

    一.扯淡部分 很久很久以前,也就是刚开始接触前端的那会儿,脑袋里压根没有什么架构.重构.性能这些概念,天真地以为前端===好看的页面,甚至把js都划分到除了用来写一些美美的特效别无它用的阴暗角落里,就 ...

  7. 【转载】写一个js库需要怎样的知识储备和技术程度？

    作者:小爝链接:https://www.zhihu.com/question/30274750/answer/118846177来源:知乎著作权归作者所有,转载请联系作者获得授权. 1,如何编写健壮的 ...

  8. js模块开发（一）

    现在嵌入页面里面的javascript代码越来越复杂,于是可能依赖也越来越严重,使用别人开发的js也越来越多,于是在理想情况下,我们只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块. 于是j ...

  9. jQuery与其他JS库冲突解决

    实际开发中遇到JQuery与其他js库起冲突 究其原因,是它们的全局对象定义冲突了,特别是变量”$”, 可重载$函数.使用jQuery.noConflict()就可以通过重载$函数 例:项目中应用的 ...

随机推荐

  1. SQL:define和verify命令及替换变量&

    =================替换变量&===============使用一个&符号来指定一个变量值,执行SQL语句时,会提示用户输入一个数值. SQL> select sa ...

  2. node 安装express

    环境:win7 64位旗舰版 1 安装nodejs 2 安装npm 3 安装express 重点介绍安装express,前提是你已经安装nodejs和npm了. 1 安装express npm ins ...

  3. （原）Ubuntu14中安装GraphicsMagick

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5661439.html 参考网址: http://comments.gmane.org/gmane.co ...

  4. jquery file upload 后台收到的文件名中文乱码， filename中文乱码

    在jQuery File Upload.js文件里,在以下这个js中有个成员叫做 _initXHRData, 是一个function, 在这个function的最后部分有一个if-else分支,如下:

  5. JQuery阻止表单提交的方法总结 - 使用onsubmit()验证表单并阻止非法提交

    方法1:<form onsubmit="javascript:confirm()"> 方法内返回false阻止表单提交 示例:代码检测textarea内填写的长度,未填 ...

  6. html5本地存储web storage的简单使用

    html5的一个非常cool的功能,就是web storage,类似于之前的cookie,不过与之不同的是,web storage 拥有本地5兆的容量可以存储,而cookie却只有4K,这是完全不能比 ...

  7. 凸包(hd1392)

    Surround the Trees Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  8. 十一、外观(Facade)模式--结构模式(Structural Pattern)

    外部与一个子系统的通信必须通过一个统一的门面(Facade)对象进行,这就是门面模式.门面模式要求一个子系统的外部与其内部的通信必须通过一个统一的门面(Facade)对象进行. 门面模式提供一个高层次 ...

  9. Ubuntu14.0.4 64位安装Chrome浏览器

    下载链接:translate.google.com.hk/translate?hl=zh-CN&sl=en&u=http://95.31.35.30/chrome/pool/main/ ...

  10. Qt之HTTP上传/下载（继承QNetworkAccessManager，包括使用了authenticationRequired认证信号）

    效果 QNetworkAccessManager DownloadNetworkManager::DownloadNetworkManager(QObject *parent) : QNetworkA ...