jQuery源码分析---仿栈与队列的操作

    xiaoxiao2022-06-29  59

    转载自:http://www.imooc.com/code/3414

    仿栈与队列的操作

    jQuery既然是模仿的数组结构,那么肯定会实现一套类数组的处理方法,比如常见的栈与队列操作push、pop、shift、unshift、求和、遍历循环each、排序及筛选等一系的扩展方法。

    jQuery对象栈是一个便于Dom的查找,提供的一系列方法,jQuery可以是集合元素,那么我们怎么快速的找到集合中对应的目标元素呢?

    jQuery提供了.get()、:index()、 :lt()、:gt()、:even()及 :odd()这类索引值相关的选择器,他们的作用可以过滤他们前面的匹配表达式的集合元素,筛选的依据就是这个元素在原先匹配集合中的顺序。

    我们来分别看一下这几个选择器的实现原理:

    get方法--是通过检索匹配jQuery对象得到对应的DOM元素,如下代码实现:

    get: function(num) {     return num != null ?     // Return just the one element from the set     (num < 0 ? this[num + this.length] : this[num]) :     // Return all the elements in a clean array     slice.call(this); }

    原理很简单,因为jQuery查询出来的是一个数组的DOM集合,所以就可以按照数组的方法通过下标的索引取值,当然如果num的值超出范围,比如小于元素数量的负数或等于或大于元素的数量的数,那么它将返回undefined。 假设我们页面上有一个简单的无序列表,如下代码:

    <ul>   <li id="foo">foo</li>   <li id="bar">bar</li> </ul>

    如果指定了index参数,.get()则会获取单个元素,如下代码:

    console.log( $( "li" ).get( 0 ) );

    由于索引 index 是以 0 开始计数的,所以上面代码返回了第一个列表项<li id="foo">foo</li>。

    然而,这种语法缺少某些 .get() 所具有的附加功能,比如可以指定索引值为负值:

    console.log( $( "li" ).get(-1) );

    负的索引值表示从匹配的集合中从末尾开始倒数,所以上面这个例子将会返回列表中最后一项:<li id="bar">bar</li>。

    由于是数组的关系,所以我们有几个快速方法,比如头跟尾的取值:

    first: function() {     return this.eq( 0 ); }, last: function() {     return this.eq(-1); }, 心得:slice.call(this)这句代码的作用是:this是Array,相当于array.slice(),返回的结果是该数组的copy
    转载请注明原文地址: https://ju.6miu.com/read-1124941.html

    最新回复(0)