jQuery工具函数操作DOM

jQuery工具函数操作DOM

《jQuery实战》（第三版）第九章学习总结：

• 过滤数组

• $.grep(array,callback[,invert]);
• invert为true,则回调函数的值是false，导致值被收集；
• invert为false,则回调函数的值是true，导致值数据收集；
• 初始元素不变；

var originalArray = [0,34,32,1,1,23,3214,342,1,43,56,5,8,9,0,75];

var bigNum1 = $.grep(originalArray, function(value) {
    return value > 10;
},false);

var bigNum2 = $.grep(originalArray, function(value) {
    return value > 10;
},true);

console.log('bigNum1',bigNum1);
console.log('bigNum2',bigNum2);
console.log('originalArray',originalArray);

• 转换数组

• $.map(collection, callback);
• collection[Array | Object]
• callback(Function) 接受两个参数：当前值和初始数组值的索引；如果传递的是对象，则第二个参数是属性的当前值；

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

//将收集到的保存字符串的数组提取里面的数值，如若是，则提取，如若不是，则忽略；
var strings = ['1','2','3','a','b','4'];

var values1 = $.map(strings, function(value) {
    var result = new Number(value);
    return isNaN(result) ? null : result;
});

var values2 = $.map(strings, function(value) {
    return isNaN(value) ? null : value;
});

console.log('values1',values1);
console.log('values2',values2);

//处理从转换函数里返回的数组，并存入结果数组中
var characters = $.map(['hello','world'], function(value) {
    return value.split('');
});
console.log('characters', characters);

• $.inArray

• $.inArray(value, array[, fromIndex])
• 确定一个数组是否包含某个特定的值，或者位置
• fromIndex(Number) 数组中开始查询的位置;默认0
• 返回数组中第一个出现值得位置索引，没有返回-1

var index1 = $.inArray(2,[1,2,3,4]);
var index2 = $.inArray(3,[1,2,3,4],3);

console.log('index1', index1);   //index 1
console.log('index2', index2);   //index -1(未找到)

• $.makeArray(object) -- 把类数组对象转换为JavaScript数组
• $.merge(array1, array2) -- 合并两个数组，并将第一个数组被修改后作为结果返回
• 扩展对象

• $.extend([deep,] target, [source1, source2,...,sourceN])
• 通过传递的对象属性来扩展target对象；扩展后的对象可作为返回值
• deep(Boolean) 忽略或者为false，使用浅拷贝扩展；true，则使用深拷贝扩展
• target(Object) 使用源元素属性来扩展目标对象
• source1...(Object) 一个或者多个对象,属性会添加到target目标对象中

//$.extend()函数合并了多个源对象的属性不包含重复值，而且按照顺序排序 
var target = {a:1, b:2, c:3};   
var source1 = {c:4, d:5, e:6};  
var source2 = {c:8, e:10, f:9}; 

$.extend(target, source1, source2);

console.log('target(after)',target);

//传递空对象作为目标
var newObject = $.extend({}, source1, source2);
console.log('newObject', newObject);    

//深拷贝
var target1 = {a:1, b:2};
var source11 = {b:{foo:'bar'}, c:3};
var source22 = {b:{oof:'rab'}, d:4};

$.extend(true, target1, source11, source22);

console.log('target1', target1);

• 序列化参数

• $.param(params[, traditional])
• 序列化为适当的字符串传递信息，便于为查询字符串提交请求
• params(Array|jQuery|Object)
• traditional(Boolean) 是否执行传统的影子序列化

    <form action="">
        <lable for="name">Name:</lable>
        <input id="name" name="name" value="YangTao" />
        <lable for="surname">Surname:</lable>
        <input id="surname" name="surname" value="Bluth" />
        <lable for="address">Address:</lable>
        <input id="address" name="address" value="Fake street 1, Beijing, China" />
    </form>

var formResult = $.param($('input'));
console.log('formResult', formResult);

• 测试对象

• $.isArray(param) param是JavaScript数组，返回true,否则返回false
• $.isFunction(param) param是函数，返回true，否则返回false
• $.isNumeric(param) param是数值，返回true，否则返回false
• $.isWindow(param) param表示window对象，返回true，否则返回false
• $.isEmptyObject(param) param是JavaScript对象，不包含属性，返回true，否则返回false
• $.isPlainObject(param) param表示用via{} 或者new Object()创建的JavaScript对象，返回true，否则返回false
• $.isXMLDoc(param) param表示XML文档或XML节点，返回true，否则返回false
• 查看值的类型
• $.type(param)

• 解析函数

• $.paramJSON(json)
• $.paramXML(xml)
• $.paramHTML(html[,context][,keepScripts])

• 测试包含

$.contains(container, contained) 测试元素是否包含在DOM层的另一个元素中