logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

揭露jQuery的隐藏功能NETTUTS

 苏小棉 2013-02-13

jQuery是不是因为它总是会出现。有很多很酷的东西的表面下，有很多方法，只是在等待被发现，许多潜在的用途，jQuery的API，你可能没有考虑过。在这篇文章中，我将带你通过一些不那么明显的事情，我已经发现了关于jQuery。

1。了解jQuery的！

当你调用jQuery的发生了什么？

jQuery函数本身是非常简单的：

查看平原复制到剪贴板打印？
  1. jQuery的  功能 （选择，上下文）{  
  2.     / / jQuery对象实际上只是初始化构造函数的增强  
  3.     返回 新 jQuery.fn.init（选择，上下文）;  
  4. };  

在它的皮肤，jQuery函数（通常被称为“包装”功能）只是简单地返回一个实例jQuery对象-即实例的jQuery.fn.init“的构造函数。

这是非常有用的知道这个信息，我们知道，我们每次调用jQuery的，我们实际上是建立一个完全独特的对象的一组属性。jQuery是聪明的，因为它为您提供了一个对象，它可以被视为数组。您的每一个元素（所有在一起，俗称为“收集”）是根据数字索引，就像在一个阵列内的对象引用。和jQuery也给这个对象的一个“长度”属性，就像你期望从一个数组。这开辟了一个世界的可能性。其一，它意味着我们可以借用一些功能从“Array.prototype”的。jQuery的“切片”方法是一个很好的例子-从源头上修改：

查看平原复制到剪贴板打印？
  1. / * ... jQuery.fn.extend（{... * /  
  2. 切片：  （）{  
  3.     返回 。pushStack（  
  4.         Array.prototype.slice.apply（  参数），  
  5.         “切片” ，  
  6.         Array.prototype.slice.call（<WBR>参数）。加入（“，” ）  
  7.     ）;  
  8. }  
  9. / * ... * /  

本机的“片”的方法并不关心，“这是不是一个真正的数组，它会被罚款的东西，有一个“长度”属性，[0] ，[1] ，[2]等

还有其他一些有趣的特性在这个jQuery对象- “ 选择”和“上下文”，大部分时间，反映的参数传递到“jQuery的（...）” 。

查看平原复制到剪贴板打印？
  1.  jqObject = jQuery的（'A' ）;  
  2. jqObject.selector;  / / =>“A”  

重要的是要注意的一件事是，jQuery有时会给你新的jQuery对象的工作。如果您运行的方法，以某种方式改变的集合，如“父母（）” ，然后jQuery将不会修改当前的对象，它可以简单的通过一个全新的：

查看平原复制到剪贴板打印？
  1.  originalObject = jQuery的（'A' ）;  
  2. 变种 anotherObject = originalObject.parents（）;  
  3. originalObject === anotherObject;  / / =>假  

以某种方式出现变异的集合的所有方法返回一个品牌新的jQuery对象-你仍然可以访问旧的对象，但通过。结束（）'，或更冗长的，通过'。prevObject的“。

2。面包和奶油元素的创建

jQuery的DOM能力的核心，是其元素的创建语法。1.4带来了一种全新的方式，快速和简洁的元素。例如：

查看平原复制到剪贴板打印？
  1. VAR  myDiv = jQuery的（<div/>'的，{  
  2.     ID： “ 我的新元素” ，  
  3.     类： 
  4.     CSS：  
  5.         颜色：  “红色” ，  
  6.         backgrondColor：  ＃FFF' ，  
  7.         边框：  “PX固体＃CCC'  
  8.     }  
  9.     点击：  函数（）{  
  10.         警报（“点击” ）;  
  11.     }  
  12.     HTML：jQuery的（“<A/> ，  
  13.         HREF：  '＃' ，  
  14.         点击：  函数（）{  
  15.             / /做一些事情  
  16.             返回 假;  
  17.         }  
  18.     }）  
  19. }）;  

1.4，您可以通过jQuery函数的第二个参数，当你创建一个元素-对象通过将最，行为，如果你把它传递给“的attr（...）” 。然而，jQuery的映射的一些属性，以自己的方式，例如，的'点击'属性映射到jQuery的“点击”的方法（它绑定一个事件处理程序的'点击'事件）和“CSS”地图jQuery的CSS的方法等

要检查出什么属性映射到jQuery的方法，打开您的控制台和类型为“jQuery.attrFn的。

3。你输入序列化为

jQuery提供了一个方法，你可以用它来序列化一个或多个表格内的所有输入。在提交数据时通过XHR（“Ajax”的），这是非常有用的。它已经在jQuery的很长一段时间，但，不是经常谈到，所以许多开发人员没有意识到它的存在。通过Ajax提交整个表单，使用jQuery，不能是简单的：

查看平原复制到剪贴板打印？
  1.  MyForm的= $（'＃我的形式“ ）;  
  2. jQuery.post（submit.php“ ，myForm.serialize（），  （）{ 
  3.     警报（“数据已发送！' ）;  
  4. }）;  

jQuery还提供了“serializeArray”的方法，这是设计用于多种形式，和'参数'辅助函数（jQuery命名空间下），它接受一个常规对象，并返回一个查询字符串，例如：

查看平原复制到剪贴板打印？
  1. VAR  = {  
  2.     名称：  “乔，  
  3.     年龄：44，  
  4.     专业：  “Web开发  
  5. };  
  6. jQuery.param（数据）;  / / =>“名称=乔-年龄= 44＆行业<WBR>网络+开发”  

（4）动画任何

jQuery的动画的方法可能是最灵活的jQuery的方法。它可用于几乎任何东西，而不仅仅是CSS属性，而不是只是DOM元素的动画。这是你通常会使用“动画”：

查看平原复制到剪贴板打印？
  1. jQuery的（'＃箱），动画（{  
  2.     左侧：300，  
  3.     顶：300  
  4. }）;  

当您指定属性的动画（例如'顶'）jQuery的检查，看看你的动画样式属性（“element.style）的东西，它会检查，如果指定的属性（“顶”）下的定义“风格” -如果它不是那么jQuery简单地更新“顶”本身的元素。下面是一个例子：

查看平原复制到剪贴板打印？
  1. jQuery的（'＃箱），动画（{  
  2.     顶：123  
  3.     富：456  
  4. }）;  

'顶'是一个有效的CSS属性，所以jQuery将更新“element.style.top的，但'富'是不是一个有效的CSS属性，所以jQuery将只更新'element.foo“ 。

我们可以利用我们的优势。比方说，例如，你想一个正方形画布上的动画。首先，让我们定义一个简单的构造和“抽奖”的动画的每一步，都会被调用的方法：

查看平原复制到剪贴板打印？
  1. 功能 广场（CNVs现象，宽度，高度，颜色）{  
  2.     这x = 0处;  
  3.     这为y = 0;  
  4.     宽度=宽度;  
  5.     高度=高度;  
  6.     颜色=颜色;  
  7.     这：。cHeight cnvs.height;  
  8.     这：。cWidth cnvs.width;  
  9.     此。cntxt = cnvs.getContext（'2 D“ ）;  
  10. }  
  11. Square.prototype.draw =  函数（）{  
  12.     此。cntxt.clearRect（0，0，  此。cWidth  。cHeight）;  
  13.     这cntxt.fillStyle =  。色;  
  14.     。cntxt.fillRect（，X  ，Y，  宽度，  高度）;  
  15. };  

我们已经创建了我们的“广场”的构造，它的一个方法。创建一个画布，然后动画，它可以是简单的：

查看平原复制到剪贴板打印？
  1. / /创建一个<canvas/>的元素  
  2.  帆布= $（“<canvas/> ）。appendTo（ “ 身体” <WBR>）[0];  
  3. canvas.height = 400;  
  4. canvas.width = 600;  
  5. / /实例广场  
  6. VAR  广场  新 广场（帆布，70，70，  RGB（255,0,0）“ ）;  
  7. jQuery的（方形）。动画（{  
  8.     ×：300，  
  9.     Y：200  
  10. }，{  
  11.     / /应该被称为'绘制'的每一步  
  12.     / /的动画：  
  13.     的步骤：jQuery.proxy（方，  “抽奖” ），  
  14.     时间：1000  
  15. }）;  

这是一个非常简单的效果，但它也清楚地表明的可能性。你可以看到它在这里的行动：http:///ocida（这将仅适用于浏览器支持HTML5的Canvas）

5。， jQuery.ajax返回XHR对象

jQuery的AJAX效用函数（jQuery.ajax' ，'jQuery.get' ，'jQuery.post' ）返回的XMLHttpRequest对象，你可以用它来 ??进行后续操作的任何要求。例如：

查看平原复制到剪贴板打印？
  1. VAR  curRequest;  
  2. jQuery的（“button.makeRequest” ）。<WBR> 点击（函数（）{  
  3.     curRequest jQuery.get（“foo.php' ，  函数（响应）  
  4.         警报（“数据：”  + response.responseText）;  
  5.     }）;  
  6. }）;  
  7. jQuery的（“button.cancelRequest ）<WBR>点击（函数（）{  
  8.      （curRequest）  
  9.         curRequest.abort（）;  / / abort（）函数是一个XMLHttpRequest的方法  
  10.     }  
  11. }）;  

在这里，我们提出请求时的“makeRequest”按钮被点击-我们取消活动请求，如果用户点击“cancelRequest”按钮。

另一个潜在的用途是用于同步请求：

查看平原复制到剪贴板打印？
  1. 和无功 myRequest = jQuery.ajax（{  
  2. “foo.txt的” ，       网址： 
  3.     异步：  假  
  4. }）;  
  5. 的console.log（myRequest. <WBR> responseText的）;  

阅读更多有关的“XMLHttpRequest的”对象和也一定要看看jQuery的AJAX。

6，自定义队列

jQuery有一个内置的排队机制，用于其所有的动画方法（使用动画（）'真的）。队列可以轻松地与说明一个简单的动画：

查看平原复制到剪贴板打印？
  1. jQuery的（“A” ）。悬停（函数（）{  
  2.     jQuery的（）。动画（{<WBR> paddingLeft：'+ = 15px的' }）;  
  3. ，  函数（）{  
  4.     jQuery的（）。动画（{<WBR> paddingLeft：' - = 15px的“ }）;  
  5. }）;  

快速上空盘旋了一堆锚，然后将鼠标悬停在他们再次将导致动画排队，并在同一时间出现一次-我敢肯定，你们中许多人目睹了这一队列前生效。如果没有，看看这里：http:///aqaku

著名的“每个”方法，这就是所谓的“排队”的方法是类似的。您传递函数，这将最终的每个集合中的元素被称为：

查看平原复制到剪贴板打印？
  1. jQuery的（“A” ）。队列（函数（）{  
  2.     jQuery的（）。addClass（ “ 全<WBR>完成” ）。出队（）;  
  3. }）;  

只是一个函数传递将导致该功能被添加到默认的“FX”队列“排队”，即完成所有的动画jQuery的使用的队列。因此，此函数将不被调用，直到集合中的每个元素上发生的所有当前的动画（在这种情况下，所有的锚）已完成。

请注意，我们增加了上述功能中的“全部完成”一类。如上文所述，这个类会加入目前所有的动画是完整的。我们也呼吁“出队”的方法，这是非常重要的，因为它可以让jQuery来继续与队列（也就是说，它可以让jQuery的知道，不管你做什么你就完蛋了）。jQuery 1.4中提供了另一种方式继续队列，而不是调用“出队”，只需调用传递给函数的第一个参数：

查看平原复制到剪贴板打印？
  1. jQuery的（“A” ）。队列（功能（<WBR> nextItemInQueue）  
  2.     / /继续队列：  
  3.     nextItemInQueue（）;  
  4. }）;  

这不完全一样的，虽然它是稍微有用，因为它可以调用你的函数内的任何地方，即使是在一个混乱的闭包（通常会破坏'这个'关键字）。当然，前jQuery的1.4，你可以只保存一个'这个'，但会变得有点讨厌的。

要添加到自定义队列的功能，只需通过您的自定义队列的名称作为第一个参数和函数作为第二个参数：

查看平原复制到剪贴板打印？
  1. jQuery的（“A” ）。队列（“<WBR> customQueueName 功能（）{  
  2.     / /做的东西  
  3.     jQuery的（）。出队（'<WBR> customQueueName' ）;  
  4. }）;  

请注意，因为我们不使用默认的“FX”队列，我们也必须要经过我们的队列的名称的“出列”的方法，为了让jQuery来继续我们的自定义队列。

了解更多关于“排队”，“出队”和“jQuery.queue” 。

7。事件命名空间

jQuery的创作时的插件和第三方组件的方式为您提供了一个命名空间的事件，这是非常有用的。如果需要的话，你的插件的用户可以有效地解除绑定所有的事件处理程序，它的注册禁用的插件。

注册一个事件处理程序，只需事件名称后缀一段时间，然后你唯一的命名空间（例如“ 。fooPlugin “）时，要添加一个命名空间：

查看平原复制到剪贴板打印？
  1. jQuery.fn.foo =  函数（）{  
  2.     此绑定（“click.fooPlugin ，  函数（）{  
  3.         / /做的东西  
  4.     }）;  
  5.     此绑定（鼠标悬停。<WBR> fooPlugin' ，  函数（）{  
  6.         / /做的东西  
  7.     }）;  
  8.     返回 此;  
  9. };  
  10. / /使用的插件：  
  11. jQuery的（“A” ）。的foo（）;  
  12. / /销毁它的事件处理程序：  
  13. 解除绑定的jQuery（“A” ）。（'。<WBR>的fooPlugin' ）;  

只是通过命名空间“解除绑定”，将解除与该命名空间中的所有事件处理程序。

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 苏小棉 > 《jQuery》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多