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人点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦