jQuery中的函数汇总1

欢迎访问我的github:huanshen,有我的源码解析

1、each

跟for循环很像,但是更有用,如果你理解了就知道了。

// 遍历一个数组或者对象
    // obj 是需要遍历的数组或者对象
    // callback 是处理数组/对象的每个元素的回调函数,它的返回值实际会中断循环的过程
    // args 是额外的参数数组
    each: function( obj, callback, args ) {
        var value,
            i = 0,
            length = obj.length,
            isArray = isArraylike( obj );

        //如果args存在的话,callback中传入的参数是grgs,each循环次数确是由obj来确定的

        if ( args ) {
            if ( isArray ) {
                for ( ; i < length; i++ ) {
                    value = callback.apply( obj[ i ], args );

                    if ( value === false ) {
                        break;
                    }
                }
            } else {
                for ( i in obj ) {
                    value = callback.apply( obj[ i ], args );

                    if ( value === false ) {
                        break;
                    }
                }
            }

        // A special, fast, case for the most common use of each
        //注意下面用的是call,上面是apply
        //apply 的第二个参数以数组的形式传入,但是真正运行的时候,
        //传入的数组参数会变成一个个的形式,而不是一个数组参数
        } else {
            if ( isArray ) {
                for ( ; i < length; i++ ) {
                    value = callback.call( obj[ i ], i, obj[ i ] );

                    if ( value === false ) {
                        break;
                    }
                }
            } else {
                for ( i in obj ) {
                    value = callback.call( obj[ i ], i, obj[ i ] );

                    if ( value === false ) {
                        break;
                    }
                }
            }
        }

        return obj;
    },

2.makeArray

将类数组对象转化为数组。中间用到了merge函数,具体可见第三个函数,有说明。

// 将类数组对象转换为数组对象
    // 此方法为内部方法
    makeArray: function( arr, results ) {
        var ret = results || [];

        if ( arr != null ) {
            // 如果 arr 是一个类数组对象,调用 merge 合到返回值
            //还是不是很理解isArraylike和merge
            if ( isArraylike( Object(arr) ) ) {
                jQuery.merge( ret,
                    typeof arr === "string" ?
                    [ arr ] : arr
                );
            } else {
            // 如果不是数组,则将其放到返回数组末尾
            // 等同于 ret.push(arr);
                core_push.call( ret, arr );
            }
        }

        return ret;
    },

关于中间的Object()可以看看下面的结果(暂时不是很清楚具体的作用):

var str="tttt",
        arr1=[1,2,3],
        obj={1:0},
        str2=Object(str);
    console.log( Object(str))//{0: "t", 1: "t", 2: "t", 3: "t", length: 4, [[PrimitiveValue]]: "tttt"}
    console.log(str2.length)//4
    console.log(Object(arr1))//[1, 2, 3]
    console.log(Object(obj))//{1: 0}

3、merge 

可以合并两个数组或者类数组对象

//把second中的属性添加到first中
    //second可以是数组或者类数组对象,又或者包含0,1属性的东西
    merge: function( first, second ) {
        var l = second.length,
            i = first.length,
            j = 0;

        if ( typeof l === "number" ) {
            for ( ; j < l; j++ ) {
                first[ i++ ] = second[ j ];
            }
        } else {
            while ( second[j] !== undefined ) {
                first[ i++ ] = second[ j++ ];
            }
        }

        first.length = i;

        return first;
    },

4、map

功能跟each差不多,但是也有不一样的地方,主要是在处理第三个参数方面。

map: function( elems, callback, arg ) {
        var value,
            i = 0,
            length = elems.length,
            isArray = isArraylike( elems ),
            ret = [];

        // Go through the array, translating each of the items to their
        //如果是数组,isArray=true;
        //与each传入参数顺序是一致的
        if ( isArray ) {
            for ( ; i < length; i++ ) {
                value = callback( elems[ i ], i, arg );

                if ( value != null ) {
                    ret[ ret.length ] = value;
                }
            }

        // Go through every key on the object,
        //如果是对象
        } else {
            for ( i in elems ) {
                value = callback( elems[ i ], i, arg );

                if ( value != null ) {
                    ret[ ret.length ] = value;
                }
            }
        }

        // Flatten any nested arrays
        return core_concat.apply( [], ret );
    },

5、proxy

proxy(),接受一个函数,然后返回一个新函数,并且这个新函数始终保持了特定的上下文(context )语境。

proxy: function( fn, context ) {
        var tmp, args, proxy;

        if ( typeof context === "string" ) {
            tmp = fn[ context ];
            context = fn;
            fn = tmp;
        }

        // Quick check to determine if target is callable, in the spec
        // this throws a TypeError, but we will just return undefined.
        if ( !jQuery.isFunction( fn ) ) {
            return undefined;
        }

        // Simulated bind
        //如果传入的参数多余2个,把多余的参数转变为数组。
        args = core_slice.call( arguments, 2 );
        proxy = function() {
            //这里用到了柯里化
            return fn.apply( context || this, args.concat( core_slice.call( arguments ) ) );
        };

        // Set the guid of unique handler to the same of original handler, so it can be removed
        proxy.guid = fn.guid = fn.guid || jQuery.guid++;

        return proxy;
    },

柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术。具体可以看下面这个示例:可以看到前面两个参数并没有输出,最后一个参数和新的参数组成数组输出。在上面就是作为参数传入proxy中

function t (l,t,y){
        var args = [].slice.call( arguments, 2 );
        console.log(args)
        function t(){
            console.log(args.concat([].slice.call( arguments )));
        }
        return t;
    }
    var tt=t(1,2,3);
    tt("t");//[3,"t"]
时间: 2024-10-18 14:26:09

jQuery中的函数汇总1的相关文章

JQuery中trim函数的具体实现代码

由于Javascript 1.8.1 之前的版本,没有内置 trim 函数,所以 JQuery 对它有自己的实现.不同的JQuery版本,trim函数的实现也不尽相同. 阅读本文需要掌握正则表达式用法,如果不是很了解,建议阅读这个.鉴于正则表达式的强大用途(在各种语言如JS,Python,Ruby,Java中都会用到),建议重点学习并掌握. JQuery 1.7.2版本 // 截取的部分源码,不是完整语句,旨在说明实现过程 trimLeft = /^\s+/, trimRight = /\s+$

通过在jquery中添加函数发送ajax请求来加载数据库数据,以json的格式发送到页面

通过在jquery中添加函数发送ajax请求来加载数据库数据,以json的格式发送到页面 从数据库中查询仓库信息,显示在下拉菜单中: 首先,引入js插件,这里使用jquery-1.8.3.js <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script> 当页面加载完成后,就应该发送ajax请求到数据库,

jquery中map函数与each函数的区别

?jquery中的each函数和map函数的用法看起来差不多,但其实还是有一点区别的. ?其中一个重要的区别是,each返回的是原来的数组,并不会新创建一个数组.而map方法会返回一个新的数组.如果在没有必要的情况下使用map,则有可能造成内存浪费. ?例如: var items = [1,2,3,4]; ? $.each(items, function() { alert('this is ' + this); }); var newItems = $.map(items, function(

jquery中ready函数,$(function(){})与自执行函数的区别

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="js/jquery-1.12.1.js"></script> <script type=&q

javascript中常用函数汇总

js中函数很多,在实际项目开发中,函数的应用可以很大程度上简化我们的代码,所以在此记下开发中js中常用的函数,增强记忆. 1.isNaN(X):函数用于检查其参数是否是非数字值. 如果 x 是特殊的非数字值 NaN(或者能被转换为这样的值),返回的值就是 true.如果 x 是其他值,则返回 false.(是非数字值则为true,是数字则返回false) isNaN() 函数通常用于检测 parseFloat() 和 parseInt() 的结果,以判断它们表示的是否是合法的数字.当然也可以用

关于jQuery中toggle()函数的使用

今天遇到一个有趣的例子,将它记录下来. 一个一级菜单,里边有一个二级菜单,二级菜单是通过锚点来链接页面元素的.想要实现的效果是当点击锚点时,页面链接到相应锚点,同时二级菜单隐藏,再点击一级菜单时,继续执行.. 其中试了很多种方法都不行,最后通过读jquery的toggle函数实现了. //这样写可以 $(".nav").toggle(function(){ $(".content").slideToggle(); }); //这样写不可以 $(".nav&

jquery中data函数的用法示例

jquery中data() 方法向被选元素附加数据,或者从被选元素获取数据.这使我们通过HTML自定义属性,操作数据,显得非常方便.通常我们也会通过给html自定义属性这样的做法,来存储和操作数据.在jquery中也给我们 提供了data(name,value)这样的方法,来非常方便的实现.有了data()这个方法,你就可以很方便的在一个html标签中添加data-*这样的自定义属性.接下来,就data()方法简单的做下了解. 以下是摘自w3school中对data用法的说明: data方法从元

jQuery中bind函数绑定多个事件

名人名言:道德是真理之花.——雨果 在jQuery中绑定多个事件名称是,使用空格隔开,举例如下: $("#foo").bind("mouseenter mouseleave", function() { $(this).toggleClass("entered"); }); 在1.4版本以后,也可以如下绑定 $("#foo").bind({ click: function() { // do something on clic

js和jquery中判断函数是否存在

今天碰到一个比较尴尬的问题:在一个js文件中使用了一个jquery的方法,但是这个方法我又不知道在jquery的那个版本有,代码如下: function xxx(){ var $target = jQuery("#"+targetId); $target.fixed(true); } 调用xxx的时候报:Uncaught TypeError: undefined is not a function javascript中解决办法: if(window.myfunction){ } jq