`

jquery utilities

阅读更多
utilities有些特别, 并不是jquery对象的方法, 需要用jQuery.的方式调用,有些像静态方法。因此很容易想到那些xxUtil的静态方法工具类。

jQuery.each( object, callback )
首先这种方式跟$().each() 不同, $().each()只能对jquery对象进行迭代,而jQuery.each()可以对anything
object指定迭代的对象, callback指定handler;如果callback中返回false,将打断循环。
看一个例子:
    var arr = [ "one", "two", "three", "four", "five" ];
    var obj = { one:1, two:2, three:3, four:4, five:5 };

    jQuery.each(arr, function(i, val) {
      alert(i); //it's the index
      alert(this); alert(val);
      return (this != "four"); // will stop running to skip "five"
    });

    jQuery.each(obj, function(i, val) {
       alert("key is "+i);
       alert("val is "+val);
    });

通过例子,可以看出callback可以有两个参数: index, val
对于数组的遍历很容易理解, 如果是一个hash对象,那么index代表key。
而且这两个参数是可以不写的, this等价于val, 没有写val参数的时候,可以用this获取它的值。

jQuery.extend( target, object1, objectN )
用object1...objectN对target对象进行扩展, 相同属性将被覆盖。
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);

settings将会变成{validate:true, limit:5, name:"bar"}

jQuery.grep( array, callback, invert )
可以用来塞选一组对象, callback决定是否保留对象
function callback(elementOfArray, indexInArray) {
  var shouldKeepIt;

  this; // unmapped

  return shouldKeepIt;
}

可以看出, index的位置跟each不同, 跑到了第二个参数的位置。
默认情况下, 当callback 返回true则保留对象,否则去掉
invert=false, 跟默认情况一致,callback返回true则保留
invert=true,则跟默认相反,callback返回true则去掉

jQuery.makeArray( obj )
将dom的element数组转成jquery的数组,例如:
    var arr = jQuery.makeArray(document.getElementsByTagName("div"));
    arr.reverse(); // use an Array method on list of dom elements
    $(arr).appendTo(document.body);  	

以上实现了div数组倒置,通过makeArray之后得到jquery数组对象,通过jquery对象的方法,很方便进行倒置,轻松添加到body。

jQuery.map( array, callback ) Returns: Array
不是将数组转换map,而是将数组转换成另外一种形式, callback指定了转换方式,例如:
var arr = [ "a", "b", "c", "d", "e" ]
    $("div").text(arr.join(", "));

    arr = jQuery.map(arr, function(n, i){
      return (n.toUpperCase() + i);
    });
    $("p").text(arr.join(", "));

    arr = jQuery.map(arr, function (a) { return a + a; });
    $("span").text(arr.join(", "));

以上两次map,arr得到如下数组
A0, B1, C2, D3, E4
A0A0, B1B1, C2C2, D3D3, E4E4
两次map,callback的写法有不同
1)两个参数,分别是数组中一个元素的值和index
2)一个参数, 数组中一个元素的值。

jQuery.inArray( value, array ) Returns: Number
返回value在array中的index,如果不存在则返回-1

jQuery.unique( array ) Returns: Array
去掉array重复元素, 并返回去掉重复元素之后的array

jQuery.isFunction( obj )
检查obj是否是一个function,例如:
    function stub() {
    }
    var objs = [
          function () {},
          { x:15, y:20 },
          null,
          stub,
          "function"
        ];

    jQuery.each(objs, function (i) {
      var isFunc = jQuery.isFunction(objs[i]);
      $("span:eq( " + i + ")").text(isFunc);
    });


jQuery.trim( str )
去掉string首尾的空格
分享到:
评论

相关推荐

    jQuery Utilities 分类下的函数(或属性)的实现方式分析

    本文将深入探讨jQuery Utilities分类下的函数(或属性)的实现方式,帮助你更好地理解和利用这些功能,提高你的前端开发效率。 首先,jQuery Utilities包含了各种实用的函数,它们是jQuery库中的基础组成部分,用于...

    jquery插件jquery-ui-1.8.2.custom.min.js

    在1.8.2这个版本中,jQuery UI包含了多个模块,如Widgets(组件)、Effects(特效)、Position(定位)和Utilities(工具函数)。Widgets是jQuery UI的核心,包括Accordion(手风琴效果)、Autocomplete(自动补全)...

    jQuery1.11.0_20140330_jquery_

    jQuery是一个JavaScript函数库。jQuery是一个轻量级的"...jQuery库包含以下功能: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities

    jQuery中文API

    9. **实用工具(Utilities)**:jQuery还包含了一些实用工具函数,如`.each()`用于循环迭代,`.data()`用于存储和检索元素关联的数据,`.is()`用于判断元素是否匹配某个选择器。 10. **版本更新与兼容性(Version ...

    jQuery的帮助文档

    jQuery中的Utilities包括了一组有用的函数和工具,用于简化常见任务,比如文档处理、数组操作、对象扩展等。这些工具方法为开发者提供了方便,可以减少编码工作量。 通过以上知识点的介绍,我们可以看到jQuery不仅...

    jquery-ui-1.10.2.custom

    6. **Utilities**:包括一些辅助函数,如事件处理、动画控制、尺寸计算等,这些在开发过程中非常实用。 值得注意的是,`jquery-ui-1.10.2.custom` 版本特别强调了与 jQuery 1.9.1 的兼容性。jQuery 1.9.1 是一个...

    jQuery-1.8.1.js jQuery-1.8.0 API

    8. **Utilities(实用工具)**:包括字符串处理、数组操作、函数控制等辅助函数。 **关于下载问题** 对于提供的 jQuery-1.8.0js&API 文件,如果是 .chm 格式,可能会遇到因安全设置而无法打开的情况。解决方法是...

    jquery.validate Validation .js验证框架 帮助 手册 文档 chm

    四、实用工具(Utilities) 8 (五)验证器 (jQuery validation) 8 (六)内置验证方法 (jQuery validation) 10 (七)注意事项 (jQuery validation) 16 (八)应用实例 (jQuery validation) 17 出处地址:...

    jQuery UI Cookbook (pdf + ePub)

    Built-in event-handling utilities for inter-widget communication Extend widgets to provide the missing behavior your application needs Extend and improve the design of each widget using the theme ...

    jQuery 1.5 API 中文版

    Utilities Browser and Feature Detection objjQuery.support objjQuery.browserdeprecated strjQuery.browser.versiondeprecated booljQuery.boxModeldeprecated Basic operations objjQuery.each( obj, fn( index,...

    JQuery AND JQuery UI API

    6. **Utilities(工具函数)**: 包含`$.widget()`、`$.extend()`、`$.unique()`等实用函数,增强了JavaScript的基础功能。 学习jQuery和jQuery UI,不仅可以提升网页开发效率,还能创建更具有吸引力和用户体验的Web...

    jquery自定义插件命名空间问题

    // Utilities 插件集合 (MyNamespace.jQueryPlugins.utils = function($) { $.fn.extend({ myUtility1: function() { // 代码实现 }, myUtility2: function() { // 代码实现 } }); })(jQuery); // Effects ...

    jquery-ui-1.8.16

    5. **Utilities**:此外,还有诸如 position、mouse、widget 等实用工具函数,这些函数为开发者提供了处理元素位置、鼠标事件和创建自定义组件的基础。 压缩包中的文件列表: - **index.html**:这通常是示例或演示...

    jquery-ui-1.12.1.custom.zip

    4. **Utilities**:包括Position(定位)、Widget Factory(组件工厂)等工具函数,方便开发者在实现自定义功能时调用。 5. **Examples**:这是最核心的部分,包含了各种组件的使用示例代码。通过这些代码,开发者...

    jQuery API 官方文档 最新版下载

    - **Utilities(工具方法)**:提供了一些通用的辅助函数,如`.trim()`、`.type()`等。 **jQuery API文档的使用** jQuery API文档通常包含以下部分: 1. **概述(Overview)**:介绍jQuery的基本概念和设计理念。 ...

    Jquery UI

    6. **Utilities**: 除了部件和交互,jQuery UI 还提供了一些实用工具函数,如`$.ui.sortable`、`$.ui.droppable`等,方便开发者在处理DOM元素时使用。 关于《jQuery非常详细的使用教程.doc》文档,这应该是一个详细...

    jquery-api-1.8.chm

    11. **实用工具(Utilities)**:`$.each()`用于遍历数组或对象,`$.extend()`用于合并对象,`$.trim()`用于去除字符串两端的空白字符等。 这份《jQuery API 1.8中文版.chm》文档不仅包含以上这些基本知识点,还...

    jQuery-1.6 API 中文版

    11. **实用工具(Utilities)**:`$.trim(str)`用于去除字符串两端的空白,`$.isFunction(fn)`检测是否为函数,`$.inArray(value, array)`检查元素是否在数组中。 这个jQuery-1.6 API中文版是开发者学习和查阅...

    JQuery UI工具

    4. **实用函数(Utilities)**:除了组件之外,jQuery UI还包含了一些实用的函数,如位置(Position)、尺寸(Size)处理,以及事件处理等,方便开发者在不使用完整组件的情况下也能实现特定的功能。 **二、jQuery ...

Global site tag (gtag.js) - Google Analytics