jQuery 第五章 实例方法 详解内置队列queue() dequeue() 方法

  .queue()  .dequeue()  .clearQueue()

--------------------------------------------------------------------------

   .queue()

往队列 里面放东西

参数: .queue([queueName], fuc(next))

queueName: 队列名,字符串形式, 默认是 fx 

fuc(next) : 可传函数, 等一系列 值。 他会把你的值, 放到 数组里面。 (next) 如果你函数传了 形参 next ,你可以拿next()在函数里执行,使用方法, 看下面例子  

.queue(queueName):  只传queueName  相当于读取 队列名为queueName  的数组

  .dequeue()

执行队列。

参数: queueName  找到 队列名为 queueName 的数组, 一次一次执行他们  

.dequeue(queueName)

你会发现, 每次都是一个一个拿,好麻烦。 可以利用next 帮你执行下个函数

  .clearQueue()

清空队列

参数, 传入你要清空的 队列名

下面来看下  queue()  和 dequeue 的原理   请看 98 行的 myqueue方法  和 111行的 mydequeue方法

  1 (function(){
  2     function jQuery(selector){
  3        return new jQuery.prototype.init(selector);
  4     }
  5     jQuery.prototype.init = function (selector) {
  6         this.length = 0;
  7         if (selector == null) {
  8             return this;
  9         }
 10         if(typeof selector == ‘string‘ && selector.indexOf(‘.‘) != -1 ){
 11             var dom = document.getElementsByClassName(selector.slice(1));
 12         }else if(typeof selector == ‘string‘ &&  selector.indexOf(‘#‘) != -1 ){
 13             var dom = document.getElementById( selector.slice(1) );
 14         }else if(typeof selector == ‘string‘){
 15             var dom = document.getElementsByTagName(selector);
 16         }
 17
 18
 19         if(selector instanceof Element || dom.length == undefined ){
 20             this[0] = dom || selector;
 21             this.length ++;
 22         }else{
 23             for( var i = 0; i < dom.length; i++ ){
 24                 this[i] = dom[i];
 25             }
 26             this.length = dom.length;
 27         }
 28     }
 29     jQuery.prototype.pushStack = function (dom) {
 30         if (dom.constructor != jQuery) {
 31             dom = jQuery(dom);
 32         }
 33         dom.prevObj = this;
 34         return dom;
 35     }
 36     jQuery.prototype.css = function(config){
 37         for(var i = 0; i < this.length; i++){
 38             for(var prop in config){
 39                 this[i].style[prop] = config[prop];
 40             }
 41         }
 42         return this;
 43     }
 44
 45     jQuery.prototype.get = function(num) {
 46         return num == null ? [].slice.call(this, 0) : (num < 0 ? this[num + this.length] : this[num]);
 47     }
 48
 49     jQuery.prototype.eq = function (num) {
 50        var dom =  num == null ? null : (num < 0 ? this[num + this.length] : this[num]);
 51        return this.pushStack(dom);
 52     }
 53
 54     jQuery.prototype.add = function (selector) {
 55         var baseObj  = this;
 56         var curObj  = jQuery(selector);
 57         var newObj = jQuery();
 58
 59         for (var i = 0; i < baseObj.length; i++) {
 60             newObj[newObj.length++] = baseObj[i];
 61         }
 62         for (var i = 0; i < curObj.length; i++) {
 63             newObj[newObj.length++] = curObj[i];
 64         }
 65
 66         return this.pushStack(newObj);
 67     }
 68
 69     jQuery.prototype.end = function () {
 70         return this.prevObj;
 71     }
 72
 73     jQuery.prototype.myOn = function(type, func){
 74         for(var i = 0; i < this.length; i ++){
 75             if(!this[i].cacheEvent){
 76                 this[i].cacheEvent = {}
 77             }
 78             if(!this[i].cacheEvent[type]){
 79                 this[i].cacheEvent[type] = [func];
 80             }else{
 81                 this[i].cacheEvent[type].push(func);
 82             }
 83         }
 84     }
 85
 86     jQuery.prototype.myTrigger = function(type){
 87        var params =  arguments.length > 1 ? [].slice.call(arguments, 1) : [];
 88        var self = this;
 89        for(var i = 0; i < this.length; i ++){
 90            if(this[i].cacheEvent[type]){
 91                this[i].cacheEvent[type].forEach(function(ele, index){
 92                    ele.apply(self, params);
 93                })
 94            }
 95        }
 96     }
 97
 98     jQuery.prototype.myqueue = function(){
 99         var myqueueName = arguments[0] || ‘fx‘; //看他 有没有传参数,有的话用, 没有的话用 fx fx是animate的
100         var myqueueFun = arguments[1] || null;
101
102         if(arguments.length == 1){ //如果传了一个参数, 说明你要的是 读取
103             return this[0][myqueueName];
104         }
105                                     //如果过了上面那个if 说明你有两个参数,要添加 ↓  添加 队列 , 添加到dom 身上
106         this[0][myqueueName] == undefined ? this[0][myqueueName] = myqueueFun : this[0][myqueueName].push(myqueueFun);
107
108         return this;
109     }
110
111     jQuery.prototype.mydequeue = function(type){
112         var self = this; // 这里的this  是为了给next 使用, 因为 next 是在外部执行, this 指向的是window
113         var mydequeueName = type || ‘fx‘;
114         var myqueueArr = this.myqueue(mydequeueName); //使用myqueue 方法,读取 数组,
115         var currFun = myqueueArr.shift(); // 把数组的 第一个 剪切 出来
116
117         if(currFun == undefined){ // 递归的出口
118             return;
119         }
120         var next = function(){
121            self.mydequeue(mydequeueName); //如果函数形参有传 next  那么就递归。
122         }
123         currFun(next);
124
125         return this;
126     }
127
128     jQuery.prototype.init.prototype = jQuery.prototype;
129
130     window.$ = window.jQuery = jQuery;
131 })()

原文地址:https://www.cnblogs.com/yanggeng/p/10921807.html

时间: 2024-10-11 03:48:08

jQuery 第五章 实例方法 详解内置队列queue() dequeue() 方法的相关文章

jQuery 第五章 实例方法 详解动画之animate()方法

.animate()   .stop()   .finish() ------------------------------------------------------------------------------ .animate() 参数:(target, duration, easing, callback) target:  到达的目标点, 例如{ width : '+=100', height: '+=100'}  选择器选中的元素的宽和高,加上100.值 可以写 数字  10

第二十五章 面向对象------封装、内置函数、反射、动态导入

1.封装 什么是封装? 1.对外部隐藏内部的属性,以及实现细节,给外部提供使用的接口 注意:封装有隐藏的意思,但不是单纯的隐藏 学习封装的目的:就是为了能够限制外界对内部数据的访问 python中属性的权限分为两种: 1.公开的 没有任何限制,谁都可以访问 2.私有的 只有当前类本身能狗访问 默认为公共的 为什么要封装? 1.提高安全性 封装属性 2.隔离复杂度 封装方法 一个类中分为两种数据:属性和方法 封装属性 class Student: def __init__(self,name,ag

搜索引擎算法研究专题五:TF-IDF详解

搜索引擎算法研究专题五:TF-IDF详解 2017年12月19日 ? 搜索技术 ? 共 1396字 ? 字号 小 中 大 ? 评论关闭 TF-IDF(term frequency–inverse document frequency)是一种用于资讯检索与资讯探勘的常用加权技术.TF-IDF是一种统计方法,用以评估一字词对于一个文件集或一个语料库中的其中一份文件的重要程度.字词的重要性随著它在文件中出现的次数成正比增加,但同时会随著它在语料库中出现的频率成反比下降.TF-IDF加权的各种形式常被搜

网络互联技术(四)-LSA的第四和第五种类型详解

LSA的第四和第五种类型详解 一.External LSA:第五种LSA 我们前面已经详细介绍了前面三种LSA,今天就接着介绍第四种和第五种LSA.因为理解ASBR Summary LSA--第四种LSA需要涉及External LSA的一些知识,所以我们先介绍第五种LSA,然后再回过头来看第四种LSA. External LSA由ASBR(Autonomous System Border Router,自治系统边界路由器,我们前面说过了OSPF网络就是一个自治系统)产生.它是用来通告OSPF网

jQuery Mobile的默认配置项详解,jQuery Mobile的中文配置api,jQuery Mobile的配置说明,配置大全

学习jQuery Mobile也有一段时间了,越来越上手了,也越来越喜欢他了.我根本就没有理由拒绝他的好.这里我有分享一下我对它的配置项的使用说明一下. 看代码解释: $(document).live("pageinit",function(event){ $.mobile.loadingMessage = "正在加载数据,请稍候......"; $.mobile.pageLoadErrorMessage="很抱歉,系统好像再打小瞌睡......"

jquery.dataTables插件使用例子详解

DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格 效果图 代码 <!doctype html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>jquery.dataTables插件</title>     <link rel

jQuery版推箱子游戏详解和源码

前言 偶然间看到很多用js写游戏的感觉很炫酷的样子,所以就想试试,就看了一些资料和某前端站点的视屏.于是乎就自己动手实践了一下,上推箱子截图 感觉很丑陋,但是功能是实现了.再说貌似大多都是这样的吧,这一关其实还是有点难度的,我做完之后想检测一下下一关正确么,居然还玩了以后才通关. 如果你看到这张图让你想起了你童年的回忆,说明你老了,这里可以试玩一下(很遗憾没有链接地址,最后又源码可以下载). css布局 主要考虑的是地图是怎么动态生成的,地图中有灰色的,还有墙,箱子,蓝色,红色背景,人物.先看c

jQuery Validate插件 reomte用法详解

在用户注册时经常要通过ajax请求判断用户账号是否已注册,最方便的方法便是用jQuery Validate插件 reomte方法 Jquery Validate插件, 调用远程方法验证参数, remote的用法: 在validate的方法上加入remote:"校验方法",例如:remote: "/test/checkAccount.jsp", 这时传进checkAccount.jsp的参数就是account=$("#account").val()

五度圈详解

(一) 五度圈几乎是每一本教乐理的书里都会提到的的图表.你背过,你也忘记过:你再度又背过,可是你终究还是忘了它!Why?因为你觉得它并不重要?因为你不了解它的涵义?因为你就是记不住?因为背过以后就是没使用过?No!答 案是因为它不用背所以你背不住,酷吧?!究竟五度圈这个图表到底有什么意义?为什么非学它不可呢? 顾名思义,五度圈基本定义是一个以C为起始点(十二点方向),以完全五度音程(Perfect 5th Intervals)为间距,顺时 钟方向所围成的一个圆圈.现在就让我们实际来推演一次: C