jQuery实用函数用法总结
这篇文章主要介绍了jQuery实用函数用法总结,汇总了jQuery常用的函数及相关技巧,需要的朋友可以参考下
本文以实例的形式总结了jQuery的常见实用函数。分享给大家供大家参考之用。具体示例如下：
1.修剪字符串
$('#id').val($.trim($('#someid').val()))
2.遍历集合
可能这样写：
var anArray = ['one','two'];
for(var n = 0; n < anArray.length; n++){
}
还有可能这样写：
var anObject = {one: 1, two: 2};
for(var p in anObject){
}
但有了$.each函数后，就可以这样写了：
var anArray = ['one','two'];
$.each(anArray, funtion(n, value){
})
var anObject = {one: 1, two: 2};
$.each(anObjct, function(name,value){
})
3.筛选数组
使用$.grep()方法能筛选数组。先来看grep方法的定义：
grep: function(elems, callback, inv){
var ret = [], retVal;
inv = !!inv;
for(var i = 0; length = elems.length; i < length; i++){
retVal = !!callback(elems[i],i)
if(inv !== retVal){
ret.push(elems[i]);
}
}
return ret;
}
以上示例中：
① grep方法的第二个参数是回调函数，该回调函数接收2个参数，一个是数组的元素，一个是数组的索引。
② grep方法的第三个参数inv，默认情况下是undefined，所以!!inv为false，即inv的默认值是false
举例1：int类型数组
var arr = [1, 2, 3, 4, 5, 6];
arr = $.grep(arr, function(val, index){
return val > 3;
})
console.log(arr);//结果是：4 5 6
如果把grep的第三个参数显式地设置为true，结果怎样呢？
var arr = [1, 2, 3, 4, 5, 6];
arr = $.grep(arr, function(val, index){
return val > 3;
}, true)
console.log(arr);//结果是：1 2 3
可见，当把grep方法的第三个参数设置为true后，会把不符合回调函数的数组元素过滤出来。
举例2：object类型数组
var arr = [
{
first: "Jeffrey",
last: 'Way'
},{
first: 'Allison',
last: 'Way'
},{
first: 'John',
last: 'Doe'
},{
first: 'Thomas',
last: 'Way'
};
arr = $.grep(arr, function(obj, index){
return obj.last === 'Way';
});
console.log(arr);
];
4.转换数组
使用$.map(arr, callback)为数组的每一个元素调用回调函数，并返回一个新的数组
给数组的每一个元素加1:
var oneBased = $.map([0, 1, 2, 3, 4], function(value){return value +1;})
把字符串数组转换成整型数字数组，判断数组元素是否是数字：
var strings = ['1', '2', '3','4','S','6'];
var values = $.map(strings, function(value){
var result = new Number(value);
return isNaN(result) ? null : result;
})
把转换后的数组合并到原先的数组中：
var chars = $.map(['this','that'], function(value){return value.split(' ')});
5.返回数组元素的索引
使用$.inArray(value, array)返回传入的值第一次出现的下标，即索引。
var index = $.inArray(2, [1, 2, 3]);
6.将对象转换成数组
$.makeArray(object)将传入类似数组的对象转换成Javascript数组。
<div>First</div>
<div>Second</div>
<div>Third</div>
<div>Fourth</div>
<script>
var elems = document.getElementsByTagName("div");
var arr = jQuery.makeArray(elems);
arr.reverse();
$(arr).appendTo(document.body);
</script>
7.得到不含重复元素的数组
使用$.unique(array)返回由原始数组中不重复的元素组成的数组。
<div>There are 6 divs in this document.</div>
<div></div>
<div class="dup"></div>
<div class="dup"></div>
<div class="dup"></div>
<div></div>
//把到所有div，get方法转换成javascript数组，总共6个div
var divs = $("div").get();
//再把3个class名为dup的div合并到前面的6个div
divs = divs.concat($(".dup").get());
alert(divs.length); //9个div
//过滤去掉重复
divs = jQuery.unqiue(divs);
alert(divs.length);//6个div
8.合并2个数组
$.merge(array1, array2)把第二个数组合并到第一个数组中，并返回第一个数组。
var a1 = [1, 2]; var a2 = [2, 3]; $.merge(a1, a2); console.log(a1);//[1, 2, 2, 3]
9.把对象序列化成查询字符串
精彩图集
精彩文章