<!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. sqlserver2012一直显示正在还原（Restoring）和从单用户转换成多用户模式（单用户连接中）

    如果不需要还原,则使用: restore database test with recovery如果只需要还原,则使用: restore database test with norecovery U ...

  2. Ngui _CD技能特效

    using UnityEngine;using System.Collections; public class Skill : MonoBehaviour { public float coldTi ...

  3. 添加jar

    file->project structure->'+'添加jar 在.gradle中配置

  4. jq插件处女座 图片轮播

    好久没写博客了,变得好懒呀,无地自容.最近一直在学sass和jq插件的写法,照猫画虎的谢了一个jq的插件,也算是第一次真正称得上插件的插件 ,废话不多说 上代码 (function($) { $.fn ...

  5. JS控制文本框中的密码显示/隐藏功能

    <html> <head> <title>[荐]JS控制文本框中的密码显示/隐藏功能_网页代码站(www.6a8a.com)</title> <s ...

  6. java.lang.ClassNotFoundException: org.apache.struts.action.ActionServlet

  7. 伪静态规则写法RewriteRule-htaccess详细语法使用

    一.正则表达式教程伪静态规则写法RewriteRule-htaccess详细语法使用教程分享简单说下:伪静态实际上是利用PHP把当前地址解析成另外一种方法进行访问网站!要学伪静态规则的写法,你必须得懂 ...

  8. python运维开发(二十四)----crm权限管理系统

    内容目录: 数据库设计 easyUI的使用 数据库设计 权限表Perssion 角色表Role 权限和角色关系表RoleToPermission 用户表UserInfo 用户和角色关系表UserInf ...

  9. python之3内置容器

    所谓内置容器,就是不需要第三方模块,就可以使用的. 1.list容器,一个有序序列,类似于数组,但比数组强大很多 1.1.如何初始化list,直接一个[]即可,这是一个空的list >>& ...

  10. 连接oracle数据库出现：ORA-12505,TNS:listener does not currently know of SID given in connect descriptor

    Java使用 jdbc:oracle:thin:@11.1.0.14:1521:orcl 连接oracle数据库出现: ORA-12505,TNS:listener does not currentl ...