jQueryツール機能学習教材_jquery

• URL
• 字符串操作
• 数组和对象操作
• 测试操作
• 浏览器

1：URL操作：

$.param(obj)

返回 ：string；

说明：将jquery对象按照name/value 或者key/value序列化为URL参数，用&连接。

示例：

var obj ={name:zh,age:20};
alert(jQuery.param(obj));
//alert "name=zh&age=20";

 

2:字符串操作：

jQuery.trim(str)

返回：string；

说明：去掉字符串首尾空格。

示例：

alert($.trim(" 123 "));
//alert "123";

3:数组和对象操作：

(1) :

&.each(obj,callback)

说明：

通用例遍方法，可用于例遍对象和数组。

不同于例遍 jQuery 对象的 $().each() 方法，此方法可用于例遍任何对象。

回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。

如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。

示例：

var a =[0,1,2,3,4,5];
$.each(a,function(i,n){document.write(""+i+" and " +n +"
");});

//result:

/*0 and 0
1 and 1
2 and 2
3 and 3
4 and 4
5 and 5I*/

 

(2):

$.extend(obj,default,option)

说明：

在开发插件的时候最常用此函数函数来处理options.

下面是fancybox插件获取options的代码:

settings = $.extend({}, $.fn.fancybox.defaults, settings);

上面的代码target是一个空对象, 将默认设置defaults作为第一个对象,  将用户传入的设置setting合并到default上,  setting上有的属性以setting为准. setting没有传入的属性则使用default的默认值. 然后将合并的结果复制给target并作为函数返回值返回.

看一个完整的示例:

var empty = {} 
var defaults = { validate: false, limit: 5, name: "foo" }; 
var options = { validate: true, name: "bar" }; 
var settings = jQuery.extend(empty, defaults, options);

/*result：

settings == { validate: true, limit: 5, name: "bar" } 
empty == { validate: true, limit: 5, name: "bar" }*/

//target参数要传递一个空对象是因为target的值最后将被改变.比如:

var defaults = { validate: false, limit: 5, name: "foo" }; 
var options = { validate: true, name: "bar" }; 
var settings = jQuery.extend(defaults, options);

上面的代码将defaults作为target参数,  虽然最后settings的结果一样, 但是defaults的值被改变了! 而插件中的默认值应该都是固定! 所以使用时请注意target参数的用法.

(3):筛选

jQuery.grep( array, callback, [invert] )

返回值: Array

说明:

使用过滤函数过滤数组元素。

此函数至少传递两个参数：待过滤数组和过滤函数。过滤函数必须返回 true 以保留元素或 false 以删除元素。

讲解:

默认invert为false, 即过滤函数返回true为保留元素. 如果设置invert为true, 则过滤函数返回true为删除元素.

下面的示例演示如何过滤数组中索引小于 0 的元素:

$.grep( [0,1,2], function(n,i){ 
return n > 0; 
});

//results:[1,2]

 

(4).转换

jQuery.map( array, callback )

返回值:Array

说明:

将一个数组中的元素转换到另一个数组中。

作为参数的转换函数会为每个数组元素调用，而且会给这个转换函数传递一个表示被转换的元素作为参数。

转换函数可以返回转换后的值、null（删除数组中的项目）或一个包含值的数组，并扩展至原始数组中。

示例：

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; });

alert(arr.join(", "));

//alert  A0A0, B1B1, C2C2, D3D3, E4E4

(5)

jQuery.makeArray( obj ) , jQuery.inArray( value, array ) ,jQuery.merge( first, second ) ,

jQuery.unique( array ) 就不再一一介绍了，

还有JavaScript的join（）和split（）方法也很重要。

4：测试操作:

(1):

$.isFunction(fn)

返回：Boolean；

说明：测试是否为函数；

示例：

var fn =function（）{}；

alert($.isFunction(fn));

//alert true;

(2):

$.isArray(obj);

返回：Boolean；

说明：测试是否为数组：

示例：略；

（3）：

JavaScript只带的 isNan（）和isFinite（）：非数字和无穷大；

 

5：浏览器对象：

 

jQuery的优秀就在于其跨浏览器的特性, 通常我们不用再针对不同浏览器书写不同的代码.  但是如果是jQuery开发人员或者插件开发人员就要自行处理浏览器差异, 以便为用户提供跨浏览器的特性.

jQuery提供了下列属性用于获取浏览器特性:

jQuery.support	1.3后版本新增
jQuery.browser	已废除
jQuery.browser.version	已废除
jQuery.boxModel	已废除

$.support:

jQuery 1.3 の新機能。さまざまなブラウザの機能とバグを表示するために使用されるプロパティのセット。

jQuery は一連の属性を提供しており、独自の属性を自由に追加することもできます。これらのプロパティの多くは非常に低レベルであるため、時間が経っても効果が持続するかどうかを言うのは困難ですが、これらは主にプラグインおよびカーネル開発者を対象としています。

これらのサポートされている属性値はすべて、ブラウザー検出ではなく、機能検出によって実装されます。これらの機能検出がどのように機能するかを説明する優れたリソースをいくつか紹介します:

• http://peter.michaux.ca/articles/feature-detection-state-of-the-art-browser-scripting
• http://yura.thinkweb2.com/cft/
• http://www.jibbering.com/faq/faq_notes/not_browser_detect.html

jQuery.support には主に次のテストが含まれています:

boxModel: このページとブラウザーが W3C CSS ボックス モデルを使用してレンダリングされる場合は true と等しくなります。通常、IE 6 および IE 7 の Quirk モードでは、この値は false です。ドキュメントの準備ができるまで、この値は null です。

cssFloat: cssFloat を使用して CSS float 値にアクセスする場合は true を返します。現在、IE では false が返され、代わりに styleFloat が使用されます。

hrefNormalized: ブラウザーが getAttribute("href") からそのままの結果を返す場合は true を返します。 IE では、URL が正規化されているため、false が返されます。

htmlSerialize: innerHTML を介してリンク要素を挿入するときにブラウザーがこれらのリンクをシリアル化する場合、現在、IE は false を返します。

leadingWhitespace: innerHTML を使用するときにブラウザーが先頭の空白文字を保持する場合は true を返します。現在、IE 6 ～ 8 では false を返します。

noCloneEvent: 要素の複製時にブラウザーがイベント ハンドラーをコピーしない場合は true を返します。現在、IE では false を返します。

objectAll: 要素オブジェクトに対して getElementsByTagName("*") を実行すると、すべての子孫要素が返される場合は true、IE 7 では現在 false です。

opacity: ブラウザーが透明度スタイル属性を適切に解釈できる場合は true を返します。現在、IE では代わりにアルファ フィルターが使用されるため、false を返します。

scriptEval: appendChild/createTextNode メソッドを使用してスクリプト コードを挿入する場合、ブラウザーがスクリプトを実行するかどうかに関係なく、IE では現在 false を返し、IE は .text メソッドを使用して実行用のスクリプト コードを挿入します。

style: getAttribute("style") が要素のインライン スタイルを返す場合は true。現在、IE では代わりに cssText が使用されるため、これは false です。

tbody: ブラウザがテーブル要素に tbody 要素を含めないことを許可している場合は true を返します。現在、IE では false が返され、不足している tbody が自動的に挿入されます。