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)