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 ) {
             ( isArray ) {
                for ( ; i < length; i++ ) {
                    value = callback.apply( obj[ i ],args );

                    if ( value === false ) {
                        break;
                    }
                }
            } else {
                for ( i in obj ) {
                    value =;
                    }
                }
            }

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

                    ;
                    }
                }
            }
        }

        return obj;
    },

 2.makeArray

将类数组对象转化为数组。中间用到了merge函数,具体可见第三个函数,有说明。类数组对象(isArraylike)形如{0:"tt",2:"ccc",length:2};就是属性是数字形式,同时有length属性。

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

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

         ret;
    },

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

var str="tttt"],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,3]
    console.log(Object(obj)){1: 0}

3、merge 

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

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

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

        first.length = i;

         first;
    },

 4、map

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

map: ( elems,arg ) {
         elems.length,1)"> isArraylike( elems ),ret = Go through the array,translating each of the items to their
        如果是数组,isArray=true;
        与each传入参数顺序是一致的
         ( isArray ) {
             ) {
                value = callback( elems[ i ],arg );

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

         Go through every key on the object,
        如果是对象
        }  elems ) {
                value = value;
                }
            }
        }

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

5、proxy

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

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

        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 ) ) {
             undefined;
        }

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

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

 t (l,t,y){
        var args = [].slice.call( arguments,1)"> );
        console.log(args)
         t(){
            console.log(args.concat([].slice.call( arguments )));
        }
         t;
    }
    var tt=t(1,1)">);
    tt("t");[3,"t"]

 

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


1.第一步 设置响应头 header(&#39;Access-Control-Allow-Origin:*&#39;); //支持全域名访问,不安全,部署后需要固定限制为客户端网址 header(&#39;Access-Control-Allow-Methods:POST,GET,OPTIONS,D
$.inArray()方法介绍 $.inArray()函数用于在数组中搜索指定的值,并返回其索引值。如果数组中不存在该值,则返回-1; $.inArray(value,array) --value是要查找的值,array是被查找的数组。 有如下实例: &lt;!DOCTYPE html&gt; &l
jquery.serializejson.min.js的妙用 关于这个jquery.serializejson.min.js插件来看,他是转json的一个非常简单好用的插件。 前端在处理含有大量数据提交的表单时,除了使用Form直接提交刷新页面之外,经常碰到的需求是收集表单信息成数据对象,Ajax提
JS 将form表单数据快速转化为object对象(json对象) jaymou 于 2020-03-03 11:11:05 发布 3534 收藏 3 分类专栏: 前端 文章标签: javascript jquery 版权 前端 专栏收录该内容 5 篇文章0 订阅 订阅专栏 直接上代码 /** *
jQuery的区别:$().click()和$(document).on(&#39;click&#39;,&#39;要选择的元素&#39;,function(){})的不同 文章地址:https://www.cnblogs.com/sqh17/p/7746418.html 解决:动态创建的元素的事件
jQuery插件之jquery.spinner数字智能增减插件 参考地址:http://www.helloweba.com/view-blog-282.html 左右加减数字 像京东提交订单时目前使用的是左右加减数字的效果,这个效果直接明了,操作简单。我们使用jquery.spinner.js插件实
layui标签或一般标签均可&lt;div class=&quot;layui-form-item&quot;&gt; &lt;label class=&quot;layui-form-label&quot;&gt;异地仓名称&lt;/label&gt; &lt;div class=&quot;la
网上对于select option 动态添加修改如下, $(&quot;#selectId&quot;).append(&quot;&lt;option value=&#39;&quot;+value+&quot;&#39;&gt;&quot;+text+&quot;&lt;/option&gt;&
jQuery中的 $.extend() 和 $.fn.extend() ANGWH 于 2020-05-24 06:39:59 发布 注意:$.extend是为jQuery类添加添加类方法,用$.调用(类似$.ajax),$.fn.extend则是为jQuery对象添加方法(实例方法),用DOM元素
jquery 循环数组输出显示在html页面 jquery 没有双向数据绑定,但是很多需求确实需要我们从后台接收到数组或者对象循环显示在前台页面上,这时我们可以用字符串拼接,元素添加的方法去实现 js部分如下: 复制代码 $(function(){ var a=[&quot;1aa&quot;,&q
javascript事件委托理解,jQuery .on()方法一步到位实现事件委托 Javascript-概念原理 专栏收录该内容 10 篇文章0 订阅 订阅专栏 本篇文章借鉴自:博客园文章,只为自己巩固下事件委托方面的知识 概述: 什么叫事件委托?他还有一个名字叫做事件代理,(时间代理 事件委托,
JQuery-$.when().done().fail()的使用 原文引用于&#160;Echoo华地于&#160;2022-01-06 14:07:10 发布 jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本。 每个版本都会引入一些新功能。今天我想介绍的,就是从jQuery 1
jQuery tableExport导出 excel 上篇写的是jQuery&#160;导出word,就试试导出excel。看见网上写的很乱,我这就把我写的整理下来,有部分来自网上capy 1. js文件的引用 &lt;script type=&quot;text/javascript&quot;
jQuery的遍历-prev()和next()方法 &lt;div class=&quot;box&quot; id=&quot;box&quot;&gt; &lt;a href=&#39;#&#39; class=&quot;a&quot;&gt; &lt;input type=&quot;tex
attr()和addClass()的区别 方法 addClass() attr()用途&#x9;追加样式&#x9;设置样式对同一个网页元素操作&#x9;&lt;p&gt;test&lt;/p&gt;第1次使用方法&#x9;$(&quot;p&quot;).addClass(&quot;high&quot;);&#x9;$(&quot;p&
前端——函数(匿名函数、自执行函数) FreshLemon_ 于 2019-06-11 17:11:49 发布 函数声明:function box(){} 函数表达式:var box = function(){}; 匿名函数:function(){} (属于函数表达式) 1声明了一个函数: var
js: 获取标签元素data-*属性值的方法 彭世瑜 于 2022-05-23 09:59:50 发布 2165 收藏 1 文章标签: javascript 前端 jquery 版权 标签上有两个属性data-id 和 data-user-name, 需要通过js去获取 &lt;style&gt;
JavaScript函数详解:匿名函数、具名函数、函数传参、不定参、返回值、JS预解析机制 1.具名函数 定义: 调用: 方式1:方法名(); 可以多次调用 方式2:在事件中调用,直接写函数名,不需用括号 2.匿名函数 没有名字的函数 匿名函数在使用时只有两种情况: 1.匿名函数自执行:声明后不需要
如何等待ajax完成再执行相应操作 ajax广泛应用于异步请求,对于大多数业务来说,这是十分方便的,但对于一些特殊的业务,ajax的异步性会起到相反的作用。 例如在ajax请求成功后,后续的操作需要依赖ajax执行成功后的相应操作。 // 声明一个表示状态的全局变量 status var statu
一步一步教你写一个jQuery的插件教程(Plugin) 更新时间:2009年09月03日 02:10:54 作者: 我将会在下面的例子中一个一个的说明上面这几个条件,做完这些事情后我们就会创建一个高亮显示text的简单插件。 jQuery 的plugin开发需要注意的事情, 1. 明确jQuery