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); },
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="http://img1.sycdn.imooc.com//down/540812440001e40e00000000.js" type="text/javascript"></script> <title></title> </head> <body> <ul> <li id="a">aoo</li> <li id="b">bar</li> <li id="c">car</li> </ul> 打印出$$("li").get(1) <div id="aaron"></div> <script type="text/javascript"> var $$ = ajQuery = function(selector) { return new ajQuery.fn.init(selector); } ajQuery.fn = ajQuery.prototype = { init: function(selector) { this.selector = selector; //模拟出数组格式 var results = document.querySelectorAll(selector); for (var i = 0; i < results.length; i++) { this[i] = results[i]; } return this; }, constructor: ajQuery } ajQuery.fn.init.prototype = ajQuery.fn ajQuery.extend = ajQuery.fn.extend = function() { var options, src, copy, target = arguments[0] || {}, i = 1, length = arguments.length; //只有一个参数,就是对jQuery自身的扩展处理 //extend,fn.extend if (i === length) { target = this; //调用的上下文对象jQuery/或者实例 i--; } for (; i < length; i++) { //从i开始取参数,不为空开始遍历 if ((options = arguments[i]) != null) { for (name in options) { copy = options[name]; //覆盖拷贝 target[name] = copy; } } } return target; } ajQuery.fn.extend({ get: function(num) { if (num != null) { return (num < 0 ? this[num + this.length] : this[num]) } else { return [].slice.call(this); } }, setName: function(myName) { this.myName = myName return this; }, getName: function() { $("#aaron").html(this.myName) return this; } }) $("#aaron").html( $$("li").get(1) ) </script> </body> </html>