请选择 进入手机版 | 继续访问电脑版

10模板

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1748|回复: 4

仿栈与队列的操作

[复制链接]

1288

主题

1801

帖子

4609

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
4609
发表于 2017-3-2 11:27:24 | 显示全部楼层 |阅读模式
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);
},
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <script src="http://img.mukewang.com/down/540812440001e40e00000000.js" type="text/javascript"></script>
  6. <title></title>
  7. </head>
  8. <body>
  9.    


  10. <ul>
  11.   <li id="a">aoo</li>
  12.   <li id="b">bar</li>
  13.   <li id="c">car</li>
  14. </ul>

  15. 打印出$("li").get(1)
  16. <div id="aaron"></div>

  17. <script type="text/javascript">


  18. var $ = ajQuery = function(selector) {
  19.     return new ajQuery.fn.init(selector);
  20. }

  21. ajQuery.fn = ajQuery.prototype = {
  22.     init: function(selector) {
  23.                 this.selector = selector;
  24.                 //模拟出数组格式
  25.                 var results = document.querySelectorAll(selector);
  26.                 for (var i = 0; i < results.length; i++) {
  27.                         this[i] = results[i];
  28.                 }
  29.                 return this;
  30.         },
  31.         constructor: ajQuery
  32. }

  33. ajQuery.fn.init.prototype = ajQuery.fn

  34. ajQuery.extend = ajQuery.fn.extend = function() {
  35.         var options, src, copy,
  36.                 target = arguments[0] || {},
  37.                 i = 1,
  38.                 length = arguments.length;

  39.         //只有一个参数,就是对jQuery自身的扩展处理
  40.         //extend,fn.extend
  41.         if (i === length) {
  42.                 target = this; //调用的上下文对象jQuery/或者实例
  43.                 i--;
  44.         }
  45.         for (; i < length; i++) {
  46.                 //从i开始取参数,不为空开始遍历
  47.                 if ((options = arguments[i]) != null) {
  48.                         for (name in options) {
  49.                                 copy = options[name];
  50.                                 //覆盖拷贝
  51.                                 target[name] = copy;
  52.                         }
  53.                 }
  54.         }
  55.         return target;
  56. }

  57. ajQuery.fn.extend({
  58.         get: function(num) {
  59.                 if (num != null) {
  60.                         return (num < 0 ? this[num + this.length] : this[num])
  61.                 } else {
  62.                         return [].slice.call(this);
  63.                 }
  64.         },
  65.         setName: function(myName) {
  66.                 this.myName = myName
  67.                 return this;
  68.         },
  69.         getName: function() {
  70.                 $("#aaron").html(this.myName)
  71.                 return this;
  72.         }
  73. })

  74. $("#aaron").html(  $("li").get(1)  )

  75. </script>
  76. </body>
  77. </html>
复制代码


asdsadsa
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|10模板  

GMT+8, 2018-4-20 18:38 , Processed in 0.272959 second(s), 25 queries .

快速回复 返回顶部 返回列表