及时4只章程吃前3独道很常用我们都表现了,然而slice方法也许会师看是数组方法,其实slice也是jQuery的一个原型方法,只但是是根方法是吧此外艺术服务的(更具体点是为eq方法服务之),首先依然看下就几个章程前台是怎动的;

eq 概述  获取第N个元素

参数

一个平头,指示元素的职位,从集合中的最终一个要素最先最后多少个。(1竟从)

示例

参数index描述:

//获取匹配的第二个元素

//HTML 代码:

<p> This is just a test.</p> <p> So is this</p>
//jQuery 代码:

$("p").eq(1)
//结果:

[ <p> So is this</p> ]

参数-index描述:

//获取匹配的第二个元素

//HTML 代码:

<p> This is just a test.</p> <p> So is this</p>
//jQuery 代码:

$("p").eq(-2)
//结果:

[ <p> This is just a test.</p> ]

first()   获取第一单要素

示例

描述:

收获匹配的首先独因素

//HTML 代码:

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
//jQuery 代码:

$('li').first()
//结果:

[ <li>list item 1</li> ]

last()  获取最终只元素

示例

描述:

抱匹配的最后只要素

//HTML 代码:

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
//jQuery 代码:

$('li').last()
//结果:

[ <li>list item 5</li> ]

 

脚来拘禁1.7.1着的源码:

eq: function( i ) {
        i = +i;
        return i === -1 ?
            this.slice( i ) :
            this.slice( i, i + 1 );
    },

    first: function() {
        return this.eq( 0 );
    },

    last: function() {
        return this.eq( -1 );
    },

    slice: function() {
        return this.pushStack( slice.apply( this, arguments ),
            "slice", slice.call(arguments).join(",") );
    },

物其实不多以都是相引用,首先我们得以略的分下他们之涉嫌
 first,last>eq>slice>pushStack;

所以最好红结果的出口倚重pushStack方法,此道介绍于上同一首小说中http://www.cnblogs.com/yy-hh/p/4636106.html感谢兴趣的能够精通下或参考源码;所以直接打slice方法开端;

当源码中好观察是直接ruturn
pushStack处理后的结果,而当pushStack方法中需要3单参数,第一单凡是亟需处理元素数组,第二只是调用的法,第三独是传播的selector,其中确实意图的凡率先单参数剩下的星星只参数是犯调试使用的,他最后会回一个初的jQuery对象,并且会在是目的吃上加一个prevObject属性执行原的要给执行这模式时之jQuery对象,具体的伸手参见介绍pushStack的小说。上边要来拘禁下参数的拍卖:

slice.apply( this, arguments )

夫是一个数组的截取,其实是一个类数组或者新鲜数组转换为纯数组的措施,前边大家介绍的toArray方法也是如此

toArray: function() {
        return slice.call( this, 0 );
    },

立马然而大凡此处并无是索要有的元素而是唯有保留数字下标的dom元素,为了还方便的知晓我们于前台调用下这么些方法然后阅览源码中之结果生成:

    <script>
        $('div').slice();
    </script>

slice: function() {
        console.log(this);
        console.log(this.toArray());
        console.log(slice.apply( this, arguments));
        return this.pushStack( slice.apply( this, arguments ),
            "slice", slice.call(arguments).join(",") );
    },
//Object { 0: <div>, 1: <div>, length: 2, prevObject: Object, context: HTMLDocument → test.html, selector: "div" } 
//Array [ <div>, <div> ] 
//Array [ <div>, <div> ]

结果是休是极度引人注目也?在非处理以前是一个jQuery对象,拥有广大属性与方在动用toArray方法及slice.apply(
this,
arguments)结果是同一的无非保留的凡片只dom元素,不是颇具的非数组都是得如此转车的必然要从0先河下标而且暴发length属性的才得以要又简约点得利用for循环的。不过既然可以拔取toArray方法直接不就是尽了干嘛还要当描写一个之所以对象冒充一糟也,其实toArray方法就是arguments为0的相当规情况,toArray方法呢是描摹得稀亮,假设自身调用此道加上参数就无一样了如:

 $('div').slice(0,1);

Object { 0: <div>, 1: <div>, length: 2, prevObject: Object, context: HTMLDocument → test.html, selector: "div" } 
Array [ <div>, <div> ] 
Array [ <div> ]

亚个参数“slice”就是打这些艺术入栈的当调剂用,第七只参数是一个字符串arguments是类数组所以要对象冒充掉join方法
在上头例子的调用下虽是”0,1″ 最后来瞧下slice方法最终回的结果

 console.log($('div').slice(0,1));

Object { 0: <div>, length: 1, prevObject: Object, context: HTMLDocument → test.html, selector: "div.slice(0,1)" }

如果不充足清楚可以看下目录

console.dir($('div').slice(0,1));

图片 1

prevObject属性指向未调用slice(也就是是pushStack)方法时之靶子
 selector属性告诉大家是什么因素调用了哟法入栈的同参数是啊

接头了slice方法eq方法就是特别清楚了:

eq: function( i ) {
        i = +i;
        return i === -1 ?
            this.slice( i ) :
            this.slice( i, i + 1 );
    },

回去slice的结果,其实自己下面局的例证完全可以是eq方法调用转换而来,因为相似情状下咱们是不会师独自调用slice方法的例如:

$('div').eq(0);

尽完毕其实即使是return
this.slice(0,1);

first方法依旧eq方法的例外情况当值为0要1底当儿,所以呢未指出我们以那么些艺术,不佳听点叫破裤子放屁多夫一举啊,好听点就是搭调用开销啊。

剖析了:假诺你耐心的羁押罢了此篇仍旧不知所云可能发以下几单原因:

1.js基础免充足扎实比如slice,apply等措施的应用

2.没了然pushStack方法,这多少个点子是诸多jQuery方法的底部扶助方肯定假使先行出手精晓

 

 

相关文章

网站地图xml地图