【前端系列教程之jQuery】04_jQuery队列控制、插件机制、多库共存

╰半橙微兮° 2024-04-28 13:12 137阅读 0赞

一、jQuery对象访问

each(callback)

以每一个匹配的元素作为上下文来执行一个函数。

意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整型）。 返回 ‘false’ 将停止循环 (就像在普通的循环中使用 ‘break’)。返回 ‘true’ 跳至下一个循环(就像在普通的循环中使用’continue’)。

参数：
callback 对于每个匹配的元素所要执行的函数
注：回调函数里面可以传递两个参数，第一个参数是表示从0开始进行迭代的数值；第二个表示的就是this对象；

size()和length

  • size() jQuery 对象中元素的个数。

  • length jQuery 对象中元素的个数。同size()效果一致;

selector

返回传给jQuery()的原始选择器。

换句话说，就是返回你用什么选择器来找到这个元素的。可以与context一起使用，用于精确检测选择器查询情况。这两个属性对插件开发人员很有用。

context

返回传给jQuery()的原始的DOM节点内容，即jQuery()的第二个参数。如果没有指定，那么context指向当前的文档(document)。

可以与selector一起使用，用于精确检测选择器查询情况。这两个属性对插件开发人员很有用。

get([index])

取得其中一个匹配的元素。

这能够让你选择一个实际的DOM 元素并且对他直接操作，而不是通过 jQuery 函数。$(this).get(0)与$(this)[0]等价。

参数：
[index] 取得第 index 个位置上的元素

index([selector|element])

搜索匹配的元素，并返回相应元素的索引值，从0开始计数。

如果不给 .index() 方法传递参数，那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。

如果参数是一组DOM元素或者jQuery对象，那么返回值就是传递的元素相对于原先集合的位置。

如果参数是一个选择器，那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素，则返回-1。

参数:
selector 一个选择器，代表一个jQuery对象，将会从这个对象中查找元素。
element 获得 index 位置的元素。可以是 DOM 元素或 jQuery 选择器。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="js/jquery.min.js"></script>
  9. </head>
  10. <body>
  11.     <div id="div1">
  12.         我是第1个div的内容
  13.         <p>1</p>
  14.         <p>2</p>
  16.     </div>
  17.     <div>我是第2个div的内容</div>
  18.     <div>我是第3个div的内容</div>
  19.     <div>我是第4个div的内容</div>
  20.     <script>
  21.         // callback 回调函数
  22.         /*  
  23.             each(callback)  以每一个匹配的元素作为上下文来执行一个函数。
  25.                 jQuery函数基本上都是通过jQuery对象来调用的; 
  26.                 jQuery对象->通过$(选择器)得到的都叫jQuery对象
  27.                     jQuery对象实际上是一个伪数组
  29.                 每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）
  30.         */  
  31.         $("div").each(function(i){
  32.             console.log(this.innerHTML,$(this).html(),i)
  33.         })
  35.         // size()  jQuery 对象中元素的个数。
  36.         // length   jQuery 对象中元素的个数。
  37.         console.log($("div").size()); // 已移除
  38.         console.log($("div").length);
  40.         // selector 返回传给jQuery()的原始选择器。
  41.         // context  返回传给jQuery()的原始的DOM节点内容，即jQuery()的第二个参数。
  42.         // console.log($("p",document.getElementById("#div1")).selector,$("p","#div1").context);
  43.         console.log($("#div1 > p").selector);
  45.         /*  
  46.             get([index]) 
  47.                 取得其中一个匹配的元素。 num表示取得第几个匹配的元素。
  48.                 没有参数: 取得所有匹配的 DOM 元素集合。
  49.                 参数: 取得第 index 个位置上的元素
  50.         */
  51.         console.log($("div")) // 通过jQuery获取4个div
  52.         console.log($("div").get()) // DOM数组
  53.         console.log($("div").get(1).innerHTML) // DOM元素节点
  54.         console.log($("div")[1].innerHTML) // DOM元素节点
  56.         /*  
  57.             index([selector|element])
  58.                 搜索匹配的元素，并返回相应元素的索引值，从0开始计数。
  59.                 如果不给 .index() 方法传递参数，那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。
  60.         */
  61.         $("div").click(function(){
  62.             console.log($(this).index());
  63.         })
  67.         /*  
  68.             API文档: 
  69.                 size()  不需要传递参数
  70.                 :not(selector)  必须传递参数
  71.                 get([index])    可以传递参数,也可以不传递
  72.                 wrap(html|ele|fn)   可以传递各种情况的参数
  73.         */
  74.     </script>
  75. </body>
  76. </html>

二、数据缓存

data([key],[value])

在元素上存放数据,返回jQuery对象。

如果jQuery集合指向多个元素，那将在所有元素上设置对应数据。

参数：
key 存储的数据名.
key,value：
key:存储的数据名
value:将要存储的任意数据
obj 一个用于设置数据的键/值对

removeData([name|list])

在元素上移除存放的数据

与$(…).data(name, value)函数作用相反

参数:
name: 存储的数据名
list: 移除数组或以空格分开的字符串

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="js/jquery.min.js"></script>
  9. </head>
  10. <body>
  11.     <div id="div1">
  13.     </div>
  14.     <script>
  15.         /*  
  16.             data([key],[value])  data([key],[value]) 
  17.                 key: 存储的数据名.String
  18.                 value: 将要存储的任意数据,Any
  19.         */
  20.         console.log($("#div1").data("userName")); // undefined
  22.         // 设置数据
  23.         $("#div1").data("userName","zhangsan") 
  24.         $("#div1").data("userPwd","123")
  26.         console.log($("#div1").data("userName")); // zhangsan
  28.         // 修改数据
  29.         $("#div1").data("userName","wangwu")
  31.         console.log($("#div1").data("userName")); // wangwu
  33.         $("#div1").data("stuInfo",{
  34.             stuId:10001,
  35.             stuName:"张三",
  36.             stuAge:12
  37.         })
  39.         console.log($("#div1").data("stuInfo"));
  41.         /* $("#div1").removeData("userName");
  42.         $("#div1").removeData("userPwd"); */
  44.         // $("#div1").removeData("userName userPwd");
  45.         $("#div1").removeData(["userName","userPwd"]);
  48.         console.log($("#div1").data("userName")); // undefined
  49.         console.log($("#div1").data("userPwd")); // undefined
  51.     </script>
  52. </body>
  53. </html>

三、队列控制

queue(element,[queueName])

显示或操作在匹配元素上执行的函数队列

element,[queueName] Element,String

element:检查附加列队的DOM元素

queueName:字符串值，包含序列的名称。默认是 fx, 标准的效果序列。

dequeue([queueName])

从队列最前端移除一个队列函数，并执行他。

[queueName] String

队列名，默认为fx

clearQueue([queueName])

清空对象上尚未执行的所有队列

如果不带参数，则默认清空的是动画队列。这跟stop(true)类似，但stop()只能清空动画队列，而这个可以清空所有通过 .queue() 创建的队列。

queueName Boolean

含有队列名的字符串。默认是”Fx”，动画队列。

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <script src="js/jquery.min.js"></script>
  10.     <style>
  11.         div {
  12.             margin: 3px;
  13.             width: 40px;
  14.             height: 40px;
  15.             position: absolute;
  16.             left: 0px;
  17.             top: 30px;
  18.             background: green;
  19.             display: none;
  20.         }
  22.         div.newcolor {
  23.             background: blue;
  24.         }
  26.         span {
  27.             color: red;
  28.         }
  29.     </style>
  31. </head>
  33. <body>
  34.     <!-- <button id="show">Show Length of Queue</button>
  35.     <span></span>
  36.     <div></div> -->
  38.     <button id="start">Start</button>
  39.     <button id="stop">Stop</button>
  40.     <div></div>
  43.     <script>
  44.         /* // 给按钮添加鼠标单击事件
  45.         $("#show").click(function () {
  46.             // 显示在匹配元素上执行的函数队列
  47.             var n = $("div").queue("fx");
  48.             $("span").text("Queue length is: " + n.length);
  49.         });
  51.         function runIt() {
  52.             // 总共给div绑定了8个函数
  53.             // 2s显示div
  54.             $("div").show(2000);
  55.             // 2s从left 0 到 left 200
  56.             $("div").animate({
  57.                 left: '+=200'
  58.             }, 2000);
  59.             // slideToggle 如果是显示的,则隐藏; 如果是隐藏的则显示
  60.             $("div").slideToggle(1000); // 隐藏
  61.             $("div").slideToggle("fast"); // 显示
  62.             // 1.5s从left 200 到 left 0
  63.             $("div").animate({
  64.                 left: '-=200'
  65.             }, 1500);
  66.             // 隐藏
  67.             $("div").hide("slow");
  68.             // 显示
  69.             $("div").show(1200);
  70.             // 隐藏
  71.             $("div").slideUp("normal", runIt);
  72.         }
  73.         runIt(); */
  75.         // 给start按钮添加鼠标单击事件
  76.         $("#start").click(function () {
  77.             // 显示
  78.             $("div").show("slow");
  79.             // 5s从0 到 200
  80.             $("div").animate({
  81.                 left: '+=200'
  82.             }, 5000);
  83.             // 向函数队列插入一个函数
  84.             $("div").queue(function () {
  85.                 $(this).addClass("newcolor"); // 添加了一个类
  86.                 // 从队列最前端移除一个队列函数，并执行他。
  87.                 $(this).dequeue();
  88.             });
  89.             // 从200 到 0
  90.             $("div").animate({
  91.                 left: '-=200'
  92.             }, 1500);
  93.             // 向函数队列插入一个函数
  94.             $("div").queue(function () {
  95.                 $(this).removeClass("newcolor"); // 移除一个类
  96.                 $(this).dequeue();
  97.             });
  98.             $("div").slideUp();
  99.         });
  101.         $("#stop").click(function () {
  102.             /* // 清空队列函数
  103.             $("div").queue("fx", []); // 当前函数会继续执行
  104.             // 停止所有在指定元素上正在运行的动画。
  105.             $("div").stop(); */
  107.             // stop 会把动画队列瞬间完成
  109.             // clearQueue([queueName]) 清空对象上尚未执行的所有队列
  110.             // $("div").clearQueue(); 
  111.             // $("div").stop(); 
  113.             /*  
  114.                 stop() --->onle for animate     
  115.                 clearQueue() --->remove any function attached to a standard jquery queue
  116.                 stop()只用于animate，clearQueue()清空的是列队所有未执行的函数，且当前函数也会按原速度执行完
  117.             */
  119.         });
  120.     </script>
  121. </body>
  123. </html>

四、插件机制

jQuery.fn.extend(object)

扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。

object Object

用来扩充 jQuery 对象。

jQuery.extend(object)

扩展jQuery对象本身。

用来在jQuery命名空间上增加新函数。

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <script src="js/jquery.min.js"></script>
  10. </head>
  12. <body>
  13.     <input type="checkbox" name="hobby" value="足球"> 足球
  14.     <input type="checkbox" name="hobby" value="篮球"> 篮球
  15.     <input type="checkbox" name="hobby" value="羽毛球"> 羽毛球
  16.     <input type="checkbox" name="hobby" value="乒乓球"> 乒乓球
  17.     <button id="checkAll">全选</button>
  18.     <button id="uncheckAll">全不选</button>
  19.     <button id="reverseCheck">反选</button>
  20.     <script>
  21.         // jQuery.fn.extend(object) 扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。
  22.         // 如果是用来操作页面元素的,那么肯定是jQuery.fn.extend(object) 
  23.         jQuery.fn.extend({
  24.             checkAll: function () {
  25.                 // this就是jQuery对象
  26.                 return this.each(function () {
  27.                     // each里面的this是dom对象
  28.                     this.checked = true;
  29.                 })
  30.             },
  31.             uncheckAll: function () {
  32.                 // this就是jQuery对象
  33.                 return this.each(function () {
  34.                     // each里面的this是dom对象
  35.                     this.checked = false;
  36.                 })
  37.             },
  38.             reverseCheck: function () {
  39.                 // this就是jQuery对象
  40.                 return this.each(function () {
  41.                     // each里面的this是dom对象
  42.                     this.checked = !this.checked;
  43.                 })
  44.             },
  45.         })
  47.         // 以上封装好的方法,都可以通过jQuery对象访问
  48.         $("#checkAll").click(function () {
  49.             $("input[type=checkbox]").checkAll();
  50.         })
  52.         $("#uncheckAll").click(function () {
  53.             $("input[type=checkbox]").uncheckAll();
  54.         })
  56.         $("#reverseCheck").click(function () {
  57.             $("input[type=checkbox]").reverseCheck();
  58.         })
  60.         // jQuery.extend(object)扩展jQuery对象本身。
  61.         // 如果和页面元素没有任何关联的,jQuery.extend(object)
  62.         jQuery.extend({
  63.             min: function (a, b) {
  64.                 return a < b ? a : b;
  65.             },
  66.             max: function (a, b) {
  67.                 return a > b ? a : b;
  68.             },
  69.             equals: function(a,b){
  70.                 return a === b;
  71.             }
  72.         });
  74.         console.log($.min(2,5));
  75.         console.log($.max(2,5));
  76.         console.log($.equals(5,"5"));
  77.     </script>
  78. </body>
  80. </html>

五、多库共存

jQuery.noConflict([extreme])

运行这个函数将变量$的控制权让渡给第一个实现它的那个库。

这有助于确保jQuery不会与其他库的$对象发生冲突。 在运行这个函数后，就只能使用jQuery变量访问jQuery对象。例如，在要用到$(“div p”)的地方，就必须换成jQuery(“div p”)。 ‘’’注意:’’’这个函数必须在你导入jQuery文件之后，并且在导入另一个导致冲突的库’’’之前’’’使用。当然也应当在其他冲突的库被使用之前，除非jQuery是最后一个导入的。

extreme Boolean

传入 true 来允许彻底将jQuery变量还原

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <!-- <script src="js/jquery.min.js"></script> -->
  9. </head>
  10. <body>
  11.     <div id="div1">
  12.         我是div1的内容
  13.     </div>
  15.     <script src="js/comm.js"></script>
  16.     <script>
  17.         console.log("没有引入jQuery之前:",$("div1"));
  18.     </script>
  20.     <script src="js/jquery.min.js"></script>
  21.     <script>
  22.         console.log("引入了jQuery之后:",$("div1"));
  23.     </script>
  25.     <script>
  26.         // 运行这个函数将变量$的控制权让渡给第一个实现它的那个库。
  27.         jQuery.noConflict();
  28.         console.log("多库共存之后:",$("div1"));
  30.         // jQuery把$让出去了,只能用jQuery
  31.         console.log(jQuery("#div1"));
  33.         jQuery(function($){
  34.             // // 使用 $ 作为 jQuery 别名的代码
  35.             console.log($("#div1"))
  36.         })
  37.     </script>
  38. </body>
  39. </html>

发表评论

表情：
评论列表 （有 0 条评论，137人围观）

还没有评论，来说两句吧...

相关阅读