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	已废除

$.지원:

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의 특수 모드에서는 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입니다.

불투명도: 브라우저가 투명도 스타일 속성을 올바르게 해석할 수 있으면 true를 반환하지만 현재 IE에서는 대신 알파 필터를 사용하기 때문에 false를 반환합니다.

scriptEval:appendChild/createTextNode 메소드를 사용하여 스크립트 코드를 삽입할 때 브라우저가 스크립트를 실행하는지 여부는 현재 IE에서 false를 반환하며 IE는 .text 메소드를 사용하여 실행할 스크립트 코드를 삽입합니다.

style: getAttribute("style")이 요소의 인라인 스타일을 반환하는 경우 true입니다. 현재 IE에서는 cssText를 대신 사용하기 때문에 false입니다.

tbody: 브라우저가 테이블 요소에 tbody 요소가 포함되지 않도록 허용하는 경우 true를 반환합니다. 현재 IE에서는 false가 반환되며 누락된 tbody가 자동으로 삽입됩니다.