仿写jquery

原创 2016年08月28日 19:20:11

1、html部分

<div id ="div1">
    <div class="aa">
        <div class="sdd"></div>
        <div class="ddd"></div>
    </div>
<div>           

2、script 部分

// 1.类(class)选择器的辅助函数;
    function findClass(obj,className){
        if(obj.getElementsByClassName(className)){
            return obj.getElementsByClassName(className);
        }else{
            var name = obj.getElementsByTagName("*");
            var reg = new RegExp("\\b"+className+"\\b");
            var classArr = [];
            for(var i=0; i<name.length; i++){
                if(reg.test(name[i].className)){
                    classArr.push(name[i]);
                }
            }
            return classArr;
        }
    }
//2.选择器函数;
    function selectEls(arg){
        var reg = /^\s+|\s+$/g/    //去掉前后之间的空格;
        arg = arg.replace(reg,"");
        var reg = /\s+/g;
        arg = arg.replace(reg,"");
        var stArr = arg.split(" ");
        var childs = [];
        var parents = [document];
        for(var i=0; i<stArr.length; i++){
            childs= [];
            for(var j=0; j<parents.length; j++){
                if(/^#/.test(stArr[i])){  // id选择器;
                    var idName = stArr[i].substring(1);
                    var els = document.getElementById(idName);
                    if(els!=null){
                        if(childs.indexof(els)==-1){
                            childs.push(els);   
                        }   
                    }   
                }else if(/^\./.test(stArr[i])){ // 类选择器(class
                    var className = stArr[i].substring(1);
                    var classArr = findClass(parents[j],className);
                    for(var k=0; k<classArr.length; k++){
                        childs.push(classArr[k]); 
                    }            
                }else{  // 标签选择器;
                    var tagName = parents[j].getElementsByTagName(stArr[i]);
                    for(var k=0; k<tagName.length; k++){
                        childs.push(tagName[k]);    
                    }
                }
            }
            parents = childs;
        }
        return parents;
    }
//3、 jquery 中的写入的东西有三种; 有这三种创建一个函数;
    // 3.1:  $("div");  3.2: $(function(){}); 3.3: $(document.body)

    // 当传入的是方法时的 辅助函数;
    function ready(arg){
        if(window.addEventListener){  // 非 IE 浏览器;
            doucment.addEventListener("DOMContentLoad",arg,false);
        }else{  // IE
            var oS = doucment.createElement("script");
            oS.defer = true;
            oS.onreadystatechange = function(){
                if(oS.readyState == "complete"){
                    arg();
                } 
            }
            var oH = document.getElementsByTagName("head")[0];
            oH.appendChild(oS);
        }
    }

    function Jq(arg){
        this.elements = [];
        if(typeof arg ==  "function"){  // 方法
            ready(arg);
        }else if(typeof arg =="string"){  // 选择器
            this.elements = selectEls(arg); 
        }else{     // 其他
            this.elements.push(arg);
        }
    }
// 4、添加 eq 方法;
    Jq.prototype.eq = function (index){
        return new Jq(this.elements[index]);
    }


    // 5.1 添加事件的辅助函数;
        function addEvent(eventName,obj,fn){
            function CallFn(e){
                var ev = e||window.event;
                fn.call(obj,ev);
            }
            if(obj.addEventListener){ // 非 IE 浏览器;
                 obj.addEventListener(eventName,CallFn,false);
            }else{  // IE 浏览器
                 obj.attachEvent("on"+eventName,CallFn);
            }
        }

// 5、添加 click 事件
    Jq.prototype.click = function(fn){
        for(var i=0; i<this.elements.length; i++){
            addEvent("click",this.elements[i],fn);  
        }
    }
// 6、添加 on 事件;
    Jq.prototype.onn = function(eventName,fn){
         var eventArr = eventName.split(" ");
         for(var i=0; i<this.elments.length; i++){
             for(var j=0; j<eventArr.length; j++){
                addEvent(eventArr[j],this.elements[i],fn);
            } 
         }
    }

    // 7.1 辅助css arguments=1;样式的函数,即获取属性;
            function getStyle(obj,styleName){
                ifwindow.getComputedStyle){  // 非 IE 浏览器;
                    return getComputedStyle(obj,null)[styleName];
                }else{  // IE 浏览器
                    return obj.currentStyle(styleName)
                }
            }

   // 7.2  设置 css 属性;
           function setStyle(obj,styleName,styleValue){
                var pxArr = ["width","height","left","top"];
                var values = styleValue;
                for(var i =0; i<pxArr.lenght; i++){
                    if(pxArr[i]==styleName){
                        if(typeof styleValue == "number"){
                            values = styleValue+"px";
                        }else{
                            values = styleValue
                        }
                    }
                }
                obj.style[styleName] = values;
            }

// 7、添加 css 样式;
    Jq.prototype.css = function(){
        if(arguments.length ==1){
            if(typeof arguments[0]=="string"){
                return getStyle(this.elements[0],arguments[0]); 
            }else{
                for(var i =0; i<this.elements.length; i++){
                    for(var keys in arguments[0]){
                        setStyle(this.elements[i],keys,arguments[0][keys]) ;
                    }
                }
            }
        }else if(arguments.length ==2){
            for(var i=0; i<this.elements.length; i++){
                setStyle(this.elements[i],arguments[0],arguments[1]);
            }
        }
    }
// 8、以 $ 开头的引用;
    function $(arg){
        return new Jq(arg);
    }

// 检验:
      var str = " .aa  div " ;
    $(function(){
        $(sty).eq(1).css({
            width:"400px",
            height:"400px",
            background:"green" 
        })
    })  

相关文章推荐

jQuery 写的仿新浪微博 向下滚动效果

无标题文档 $(function(){ var scrtime;   $("#con").hover(function(){ clearInterval(scrtime); },fu...

利用jquery写的无限弹出移动窗口,仿桌面窗口移动,原理很简单

无限弹出移动窗口,仿桌面窗口移动,主要应用了下列属性: event.pageX:鼠标的x坐标;event.pageY:鼠标的y坐标 $('div.moveBar').offset().left:c...

【jQuery】仿淘宝五星评价打分的实现

我的上一篇博文写到了评价分数的五星显示,这篇博文将介绍如何实现打分的效果。 首先,我们还是先分析我们想要的效果。 1.当鼠标移到星星上面的时候,当前星星以及前面的星星要亮起来,然后星星的右侧出现提示语...
  • LZGS_4
  • LZGS_4
  • 2015年08月23日 23:05
  • 4500

jquery仿携程网城市选择插件

效果-------                            HTML: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition...

仿QQ商城点击左右滚动jquery焦点图特效

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> bod...

jQuery仿京东左侧物品导航栏

1、HTML和样式部分 style type="text/css"> html{color:#666;background:#FFF;} body,div,dl,dt,dd,ul...

jquery仿IOS弹出框插件

这款弹出框插件是本人自己模仿IOS原生弹出框写的一个自定义插件,包括Alert弹出框和Confirm确认框,支持标题,内容,按钮文字以及按钮回调函数自定义,使用非常简单,可以进行扩展,下面是插件使用方...

仿麦包包首页table轮换图jQuery

仿麦包包首页table轮换图jQuery 前几天,天外飞仙闲着无意打开麦包包,看到简洁的焦点图,觉得有意思,试试自己练手下。 刚开始,做的有些问题,里面有个样式,我是直接.bks的,不管如何都无法...

仿百度搜索框,文本框输入值后提示框显示数据(JQuery+Struts2)

Auto Prompt var timeoutObj; var index = -1; //记录按上下键后得到的行数 $(function() { var ...

用jquery仿做发微博功能

源代码: 发布框 $(function(){ $("#content").focus(function(){ if ($(this).val()==this.defaultV...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:仿写jquery
举报原因:
原因补充:

(最多只允许输入30个字)