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>

转载于:https://www.cnblogs.com/xiaodonger/p/5351876.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
自己写的一个网页开发常用效果与框架,可以自定义导出自己想要的部分。 1.通过帮助文档help.html查看所有效果与使用方法。 2.通过config.html配置符合你需要并导出js; 内容包含如下: A:效果类; 1.事件-同时兼容手机与pc的3种事件(start、move、end); 2.tab选项卡-各种切换6种; 3.电商产品主图-横向与纵向2种; 4.放大镜-电商主图放大镜、图鼠标悬停旁边出现放大版图效果各一个; 5.跑马灯-文字或图片不断档可支持鼠标悬停时停止; 6.仿alert弹窗-可以自定义样式,手机版pc版个一种; 7.列表下拉加载更多-伪数据加载与ajax异步加载个一种; 8.折叠菜单一个; 9.banner图效果-7种包含手机上支持手指滑动的; 10.时间轴-控制1种; 11.自定义滚动条-横向、纵向各一种; 12.临时禁用滚动条-禁用与启用方法各一个,也能禁用手机滚动条,同时解决px滚动条占用宽度问题。 13.图表等比例-使图片始终保持设定比例缩放等供3种不同形式; 14.回到顶部-点击回到浏览器顶部; 15.漂浮窗-小漂浮窗广告; 16.图集展示-偶尔能用到; 17.滚屏效果-手指上下滑动或鼠标滚轮滚动切换页面,可自己配一些动效!!!!!!; 18.常用表单验证; 19.左滑删除; 20.复选框全选与取消选中; 21.内容拖动!!!!!!; 22.dom输入; 23.单例定时器; 24.ios软键盘弹出fixed定位问题处理!!!!!!; B:架构类; 1.流程控制-主要解决多个ajax调用依赖问题; 2.面向对象的class方法-方便定义类与集成类; 3.require-实现模块化开发,简单实用; 提示:用!!!!!!标注结尾的在某些场景下可能出现bug;

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值