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

JS中arguments对象详解

作者 : Windstep 出处: http://www.cnblogs.com/lwbqqyumidi/archive/2012/12/03/2799833.html1、在JavaS...
  • babybk
  • babybk
  • 2016年04月28日 11:28
  • 1762

简析arguments与arguments转化成数组的方法

arguments是什么?arguments 就是函数内一个內建对象,它包含函数接收到的所有变量。...
  • Milk_Brother
  • Milk_Brother
  • 2017年04月04日 13:52
  • 663

Array.prototype.slice.call()详解及转换数组的方法

在翻看以前公司留下的项目时,看到一段代码。 var $show=$imgList.filter(':visible'); var showPics=Array.prototype.slice.ca...
  • bowen11233
  • bowen11233
  • 2016年11月22日 15:41
  • 3180

电力窃漏电用户自动识别

1.挖掘目标 1)归纳出窃漏电用户的关键特征,构建窃漏电用户的识别模型; 2)调用模型进行实时监测 2 分析方法与过程 获取原始数据 数据探索分析 数据预处理 构建专家样本 构建识别模型 调...
  • qq_36890572
  • qq_36890572
  • 2017年12月02日 13:39
  • 154

浅谈arguments与arguments的妙用

1.每个函数都有一个arguments属性,表示函数的实参集合,这里的实参是重点,就是执行函数时实际传入的参数的集合。 2.arguments不是数组而是一个对象,但它和数组很相似,所以通常称为...
  • guofang9410
  • guofang9410
  • 2017年04月08日 18:10
  • 82

js中arguments的用法

1、在JavaScript中,arguments对象是比较特别的一个对象,实际上是当前函数的一个内置属性。arguments非常类似Array,但实际上又不是一个Array实例。可以通过如下代码得以证...
  • chenpeng19910926
  • chenpeng19910926
  • 2016年03月10日 15:40
  • 2681

jQuery源码学习(版本1.11)-事件处理-工具函数jQuery.event

概述 本文详细分析jquery-1.11.1.js源码文件行数:4269~4906; 代码简介:定义了jQuery.event命名空间,存放了事件处理底层的工具函数add-增加事件监听,remov...
  • wfbob
  • wfbob
  • 2015年05月24日 01:00
  • 818

shell脚本if判断语句报错[: too many arguments的两种原因

shell脚本,if判断语句报错[: too many arguments 我遇到过两种情况: 1、第一中情况就是网上大家说的,字符串变量中可能存在空格,shell解析时将其认为是多个参数,再进行判断...
  • huangjin0507
  • huangjin0507
  • 2015年04月15日 15:47
  • 6491

<<Python基础教程>>学习笔记 | 第04章 | 字典

第04章:字典 当索引不好用时 Python唯一的内建的映射类型,无序,但都存储在一个特定的键中,键可以使字符,数字,或者是元祖. ------ 字典使用: 表征游戏棋盘的状态,每个键都是由坐标值组成...
  • Jerry_1126
  • Jerry_1126
  • 2014年09月17日 22:00
  • 1153

js的arguments到底是什么?

类数组对象:arguments
  • qq_16339527
  • qq_16339527
  • 2016年11月19日 16:38
  • 7150
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:仿写jquery
举报原因:
原因补充:

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