<!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. linq和lamda表达式中添加时间判断时解决方案

    在工作中遇到个问题,在使用lamda查询数据的时候,需要添加一个时间判断, DateTime.AddDays(3) > e.ExpirationDate 例如:list = Context.Vo ...

  2. 如何禁用Visual Studio 2013的Browser Link功能

    VS2013新增的Browser Link功能虽然“强大”,但我并不需要. 但默认是开启的,会在页面中自动添加如下的代码,真是烦人! <!-- Visual Studio Browser Lin ...

  3. Asp.net数据库缓存依赖

    Asp.net数据库缓存依赖 更多的时候,我们的服务器性能损耗还是在查询数据库的时候,所以对数据库的缓存还是显得特别重要,上面几种方式都可以实现部分数据缓存功能.但问题是我们的数据有时候是在变化的,这 ...

  4. 在VS中如何用C++连接Mysql

    在如鹏网上看到的如何用C连接Mysql,解决了大二时的一直困惑,大喜! 第一步下载 安装的数据库是如鹏网的Mysql :http://pan.baidu.com/s/1c0m3xIw 提取码:m9sn ...

  5. 8051、ARM、AVR

    arm精简指令集.可以安装嵌入式操作系统 8051复杂指令集 avr没落了

  6. Qt Library 链接库

    官方教程:http://wiki.qt.io/How_to_create_a_library_with_Qt_and_use_it_in_an_application http://qimo601.i ...

  7. javascript在不同的浏览器处理事件

    实现javascript事件处理兼容问题,例子如下,可以实现大部分浏览器处理事件的问题 var btn = document.getElementById("btn"); if(b ...

  8. Python爬虫学习：四、headers和data的获取

    之前在学习爬虫时,偶尔会遇到一些问题是有些网站需要登录后才能爬取内容,有的网站会识别是否是由浏览器发出的请求. 一.headers的获取 就以博客园的首页为例:http://www.cnblogs.c ...

  9. Find them, Catch them(POJ 1703 关系并查集)

    Find them, Catch them Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 38668   Accepted: ...

  10. Cleaning Shifts（POJ 2376 贪心）

    Cleaning Shifts Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 15143   Accepted: 3875 ...