仿写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" 
        })
    })  
版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

仿写第三篇之仿写scrollview

前言 读完自定义viewgroup实践之仿写LinearLayout和自定义虚线两篇文章,相信你对自定义view和自定义viewgroup有一定的了解了。今天带大家实现垂直滚动的viewgroup。 ...

jquery 模仿 select

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

精选:深入理解 Docker 内部原理及网络配置

网络绝对是任何系统的核心,对于容器而言也是如此。Docker 作为目前最火的轻量级容器技术,有很多令人称道的功能,如 Docker 的镜像管理。然而,Docker的网络一直以来都比较薄弱,所以我们有必要深入了解Docker的网络知识,以满足更高的网络需求。

『HTML5制作仿JQuery效果』减速&加速滑动的实现

开言 本篇文章通过开源html5引擎lufylegend实现JQuery滑动效果。能使一个矩形来回减速加速滑行。由于用到了html5里的canvas,所以如果大家要测试程序,请用支持html5的浏览...

Android简单封装类似JQuery异步请求

在android开发中经常会使用异步请求数据,通常会使用handler或者AsyncTask去做,handler 配合message 使用起来比较麻烦,AsyncTask 线程池只允许128个线程工作...

仿写 Lite Struts

//使用dom4j.jar 0. 读取配置文件struts.xml1. 根据actionName找到相对应的class , 例如LoginAction, 通过反射实例化(创建对象) 据parame...

ActionSheetDialog仿写

工具类: public class ActionSheetDialog { private Context context; private Dialog dialog; pr...

jquery easyui 仿ext ItemSelector

Easyui表格就自己写吧,实现都比较笨,直接写拓展感觉挺麻烦 全右移 右移 左移 全左移 上移 下移 确定 ...

简单仿jQuery Ajax

var SX = {         keyword : ["url", "type", "timeout", "asyn", "beforeSen...

C++11—迭代器类实现

//迭代器类 namespace detail_range { template class iterator { public: using value_type = T; usi...

编写自己的JQUERY插件

如何编写自己的jquery插件 Jquery的插件主要分为三类: 1、封装对象方法的插件:大部分插件都是封装对象的插件 2、封装全局函数的插件:将独立的函数添加到jquery的命名空间之下。Jquer...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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