js库开发

<!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>

时间: 2024-10-28 19:34:08

js库开发的相关文章

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

在编写一个js库之前需要准备许多基础知识. 本人在编写之前主要参考了visjs和百度的echarts这两个库的部分内容,这之中提取出几个要点如下: 1.如何整理代码结构,使模块与模块分开又不至于出现调用困难的现象? 首先讲一下上面两个参考的库使用的方法,visjs是一个相对较小的开源库,目前已经更新了很多个版本,但是最具参考意义的应该是0.0.9版,因为之后的版本增删改太多,命名方式也改的很奇葩,基本看不懂,读者可以从github上下载历史版本.他的代码整理工具用的是nodejs,通过一个生成方

JQuery之JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案

JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案 JQuery的版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的版本</title> <

Numeral.js 是一个用于格式化和数字四则运算的js 库

1.Numeral.js 是一个用于格式化和数字四则运算的js 库. 2.支持多种语言,包含中文在内的17种语言. 在浏览器中引用js文件: <script src="numeral.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/1.4.5/numeral.min.js"></script> 在nodejs开发引用开

专注于幻灯片/轮换图制作的JS库

myFocus简介 myFocus是一个专注于幻灯片/轮换图制作的JS库,它小巧而且是完全独立的JS库,用它可以轻松的制作出网上绝大部分常见的幻灯片(甚至包括flash幻灯片),而且制作出的幻灯片体积也非常的小(1KB左右),功能也十分的完备,因为是轻量级,其运行效率也比常见的幻灯片要高. 最重要的一点是,用myFocus制作出的幻灯片使用十分的简单方便,而且每个幻灯片的接口/结构都是通用的,这样,只用1~2秒时间就给网站换不同风格的幻灯片成为了可能. myFocus的设计理念就是简单易用,无论

js模块开发(一)

现在嵌入页面里面的javascript代码越来越复杂,于是可能依赖也越来越严重,使用别人开发的js也越来越多,于是在理想情况下,我们只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块. 于是js模块化开发就显的越来越重要了,但是,Javascript不是一种模块化编程语言,它不支持"类"(class),更遑论"模块"(module)了.(正在制定中的ECMAScript标准第六版,将正式支持"类"和"模块",但还需要很

impress.js 一个创建在线幻灯的js库

真的好奇怪,我居然会写前端技术的博客.没有办法的,最近实习,看的大多是前端.所以今天就用这个来练练手了. Impress.js 是一个非常棒的用来创建在线演示的Javascript库.它基于CSS3转 换和过渡.工作于现代浏览器(Google Chrome.Safari.Firefox 10 或 IE10).并受prezi.com的理念启发的演示工具.如果你已经厌烦了使用PowerPoint制作PPT,那么impress.js是一个非常 好的选择,用它做的PPT更加直观,效果也非常不错.在线De

Electron + React + Node.js + ES6 开发本地 App

Electron + React + Node.js + ES6 开发本地 App 1.概述 近来工作上需要做一款 PC 上的软件,这款软件大体来讲是类似 PPT 的一款课件制作软件.由于我最近几年专注于移动 App 的开发,对 PC 端开发的了解有些滞后.所以我首先需要看看,在 PC 上采用什么框架能够顺利完成我的工作. 我的目标是,在完成这款软件的同时能够顺便学习一下比较流行的技术.在经过前期技术调研后,我明确了实现这款软件所需要的技术条件: 不采用 C++ 方面的类库,比如 MFC.Qt.

zepto 的 touch.js库(修复BUG,让滑动更灵活)

最近在做一个手机版的项目,而做手机网页,那么就会考虑到用轻量级库,用jquery的话,会比较庞大,而我们就选用 zepto.js 来做开发,可是在开发的时候要用到手势事件(比如左右滑动,上下滑动),于是就在网上查了一下 zepto.js 的官网,发现有 touch 事件来模拟手势事件,这个开发就会带来便利,而不用去写JS底层代码:在网上搜罗了一下 zepto.js touch 库,找到了不多 touch.js 的相关信息,真的感觉很少(不知道是不是zepto.js不成熟的表现),终于在网上搜罗到

主流JS库一览

主流JS库一览 标签: prototypedojomootoolsprototypejsjqueryjavascript 2009-10-14 22:52 19936人阅读 评论(2) 收藏 举报  分类: JavaScript(13)  目前来看,JS框架以及一些开发包和库类有如下几个,Dojo .Scriptaculous .Prototype .yui-ext .Jquery.Mochikit.mootools .moo.fxDojo (JS library and UI componen