手记

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层的另一个元素中

3人推荐
随时随地看视频
慕课网APP