jQuery 工具函数

学习要点：

1.字符串操作

2.数组和对象操作

3.测试操作

4.URL 操作

5.其他操作

一、字符串操作

jq只封装了trim()方法来去除字符串收尾的空白字符

var text = "   hahha   ";
console.log(text.trim());       // hahha

二．数组和对象操作

1.遍历 each()

遍历数组

var arr = ["zhang", "li", "wang", "zhao"];
$.each(arr, function (index, value) {
console.log(index + "=" + value);   // 0=zhang ....
})

遍历对象

$.each($.ajax(), function (index, value) {
console.log(index + "=" + value);       // readyState=1 ....
})

PS : index表示索引，从0开始；value表示索引项的值

2.筛选数据 grep()

var arr = [234, 23, 9, 387, 238, 1773, 928, 2, 8, 34];
var grep = $.grep(arr, function (element, index) {
return element > 100 && index > 4;      // 选取索引大于4且值大于100的数值
});
alert(grep);    // 1773,928

PS : element表示值， index表示索引，从0开始

3.修改数据 map()

var arr = [234, 23, 9, 387, 238, 1773, 928, 2, 8, 34];
var map = $.map(arr, function (element, index) {
if (element > 100 && index > 4) {
return element * 10;    // // 选取索引大于4且值大于100的数值, 并乘10，返回
}
});
alert(map); // 17730,9280

4.查找一个元素的下表 inArray()

var arr = [234, 23, 9, 387, 238, 1773, 928, 2, 8, 34];
var index = $.inArray(2, arr);
alert(index);       // 7

5.合并两个数字

var arr1 = [2, 3, 90];
var arr2 = [8, 33];
alert($.merge(arr1, arr2));        // 2,3,90,8,33

6.删除重复的DOM元素 $.unique

<div></div>
<div></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div></div>

var divs = $("div").get();
divs = divs.concat($(".box").get());
alert($(divs).size());     // 9
divs = $.unique(divs);     // 6
alert($(divs).size());

7.合成多个DOM元素组成数组 toArray()

alert($("div").toArray()); // [object HTMLDivElement]...

三、测试操作

判断数据的类型和状态

1.$.isArray(obj) 判断是否为数组对象，是返回 true

console.log($.isArray([]));        // true

2.$.isFunction(obj) 判断是否为函数，是返回 true

console.log($.isFunction(function () {})); // true;

3.$.isEmptyObject(obj) 判断是否为空对象，是返回 true

console.log($.isEmptyObject({}));                      // true
console.log($.isEmptyObject({"name" : "zhang"}));      // false

4.$.isPlainObjet(obj) 判断是否为纯粹对象，是返回 true

即是否由{}或 new Object()创造出的对象

console.log($.isPlainObject({}));              // true
console.log($.isPlainObject(new Object()));    // true
console.log($.isPlainObject(window));          // false

5.$.contains(obj) 判断 DOM 节点是否含另一个 DOM 节点，是返回 true

console.log($.contains($("head").get(0), $("link").get(0)));      // true

6.$.type(data) 判断数据类型

console.log($.type(123));                  // number
console.log($.type("123"));                // string
console.log($.type({}));                   // object
console.log($.type([]));                   // array
console.log($.type(function () {}));       // function
console.log($.type(undefined));            // undefined
console.log($.type(null));                 // null

7.$.isNumeric(data) 判断数据是否为数值

console.log($.isNumeric(3.14));            // true

8.$.isWindow(data) 判断数据是否为 window 对象

console.log($.isWindow(window));           // true

四、URL操作

将对象转换为字符串 param()

var obj = {
name : "zhang",
age : "23"
};
console.log($.param(obj)); // name=zhang&age=23

五．其他操作

jQuery 提供了一个预备绑定函数上下文的工具函数：$.proxy()。

这个方法，可以解决诸如外部事件触发调用对象方法时 this 的指向问题。

var obj = {
name : "zhang",
test : function () {
alert(this.name);
}
};
$(document).click(obj.test);       // undefined, 这时的this指向的是document
$(document).click($.proxy(obj, "test"));  // zhang， 这时的this指向的是obj