jQuery实战读书笔记（第六章 jQuery实用函数）

1. 使用jQuery标志

$.fx.off - 启用或禁用特效

$.support - 所支持特征的详细信息

$.browser - 公开浏览器的细节（官方废弃）

1.1 禁用动画

$.fx.off = true;

1.2 检测用户代理支持

浏览器检测：不精确、不可扩展、不准确。

标志属性          

boxModel

cssFloat

hrefNormalized

htmlSerialize

leadingWhitespace

noCloneEvent

objectAll

opacity

scriptEval

style

tbody

1.3 浏览器检测标志

msie

mozilla

safari

opera

version

2. 与其他库并存

$.noConflict(jqueryToo)

定义别名：var $j = jQuery

扩展jQuery：(function($){/* */})(jQuery);

声明就绪处理函数：jQuery(function($){ alert("I'm ready!");});

示例：

var $ = "Hi!";

jQuery(function(){

    alert('$ = ' + $");

});

修改后：

var $ = 'Hi!';

jQuery(function($){

  alert('$ = ' + $);

});

3. 操作 JavaScript 对象和集合

3.1 修剪字符串

$.trim(value)

示例：$('#someField').val($.trim($('#someField').val()));

3.2 遍历属性和集合

$.each(container, callback)

示例：

var anArray = ['one', 'two', 'three'];

$.each(anArray, function(n,value) {

  // do something else

});

var anObject = {one: 1, two: 2, three: 3};

$.each(anObject, function(name, value) {

  // do something else

}

函数中 return false; 可跳出循环。

3.3 筛选数组

$.grep(array, callback, invert)

示例：

筛选数组中所有大于 100 的值：

var bigNumbers = $.grep(originalArray, function(value) {

                   return value > 100;

                 });

过滤不匹配美国邮政编码（ZIP编码）：

var badZips = $.grep(originalArray,

                     function(value){

                       return value.match(/^\d{5}(-\d{4})?$/) != null;

                     },

                     true);

3.4 转换数组

$.map(array, callback)

示例：

var onBased = $.map([0,1,2,3,4], function(value){return value+1;});

去除数组中非数字成员：

var strings = ['1', '2', '3', '4', 'S', '6'];

var values = $.map(strings, function(value){

  var result = new Number(value);

  return isNaN(result) ? null : result;

});

说明：当回调函数返回 null 或 undefined 时，结果不会被收集。

3.5 其他数组操作函数

$.inArray(value, array)

返回下标或-1。

示例：

var index = $.inArray(2, [1,2,3,4,5]);

$.makeArray(object) 将传入的类似数组（即有length可使用下标的非数组对象，如 NodeList）对象转换为 JavaScript 数组。

$.unique(array) 传入DOM元素数组，返回由不重复元素组成的数组。

$.merge(array1, array2) 合并数组

示例：

var a1 = [1, 2, 3, 4, 5];

var a2 = [5, 6, 7, 8, 9];

$.merge(a1, a2);

合并后 a2 不变，a1 变成合并后的数组。

3.6 扩展对象

$.extend(deep, target, source1, source2, ..., sourceN)

说明：使用其余传入的对象的属性来扩展 target 对象。

示例：

var target = { a:1, b: 2, c: 3 };

var source1 = { c: 4, d: 5, e: 6};

var source2 = { e: 7, f: 8, g: 9 };

$.extend(target, source1, source2);

3.7 序列化参数值

$.param(params, traditional)

示例：

$.param({

  'a thing': 'it&s=value',

  'another thing': 'another value',

  'weird characters': '!@#$%^&*()_+='

});

返回：a+thing=it%26s%3Dvalue&another+thing=another+value

               &weird+characters=!%40%23%24%25%5E%26*()_%2B%3D

序列化嵌套参数

受到处理HTTP和HTML表单控件局限性的影响，Web开发人员习惯性认为序列化参数（也称为查询字符串）是一个名称/值对的单层列表。

firstName=Yogi&lastName=Bear&streetAddress=123+Anywhere+Lane&city=Austin&state=TX&postalCode=78701

对应：

{
  firstName: 'Yogi',
  lastName: 'Bear',
  streetAddress: '123 Anywhere Lane',
  city: 'Austin',
  state: 'TX',
  postalCode : '78701'
}

但数据可能是这样：

{
  name: {
    first: 'Yogi',
    last: 'Bear'
  },
  address: {
    street: '123 Anywhere Lane',
    city: 'Austin',
    state: 'TX',
    postalCode : '78701'
  }
}

这个嵌套版本，可以用如下形式表示：

name[first]=Yogi&name[last]=Bear&address[street]=123+Anywhere+Lane&address[city]=Austin&address[state]=TX&address[postalCode]=78701

使用 1.4 的新算法，可以实现，tradional 要设置为 false，或者不填（默认即false）。

3.8 测试对象

$.isArray(o)

$.isEmptyObject(o)

$.isFunction(o)

$.isPlainObject(o)

$.isXMLDoc(node)

4 其他实用函数

4.1 什么都不做

$.noop()

4.2 测试包含关系

$.contains(container, containee)

测试一个元素是否在另一个元素内部。

4.3 附加数据到元素上

$.data(element, name, value)

$.removeData(element, name)

4.4 预绑定函数上下文

函数上下文即 this 指向的对象，取决于函数是如何被调用的。当调用特定函数时想显式地指定函数的上下文时，可以用 Function.call() 方法来调用这个函数。如果不是函数的调用者，比如回调函数，怎么办？用 $.proxy()。

$.proxy(function, proxy)

$.proxy(proxy, property)

示例：

$(function() {

  $('[name="bindType"]').change(function(){

    $('#testButton,#buttonContainer').unbind('click');

    if ($('[name="bindType"]:checked').val() == 'normal') {

      $('#testButton,#buttonContainer').click(

        function(){ say(this.id); }

      );

    }

    else {

      $('#testButton,#buttonContainer').click(

        $.proxy(function(){ say(this.id); }, $('#controlPanel')[0])

      );

    }

  })

    .change();

});

$.proxy() 的一个最觉的用作是将对象的方法绑定为处理器，并且将拥有方法的对象作为处理器的函数上下文，就如同直接调用该方法一样。例如：

var o = {

    id: 'o',

    hello: function(){alert("Hi there! I'm " + this.id);}

};

$(whatever).click(o.hello); // 函数上下文是当前冒泡的元素，而不是 o

改为：$(whatever).click($.proxy(o.hello, o));

或：$(whatever).click($.proxy(o, 'hello'));

都可以。

4.5 解析 JSON

$.parseJSON(json)

JSON字符串必须是完全良好格式的，例如所有的属性名称必须由双引号字符来分隔，而且必须是双引号字符！

4.6 表达式求值

$.globalEval(code)

4.7 动态加载脚本

$.getScript(url, callback)