实际开发中直接使用。
$.函数名()
在jQuery中,主要有以下5大类工具函数。
(1)字符串操作
(2)URL操作
(3)数组操作
(4)对象操作
(5)检测操作
字符串操作
字符串操作的工具函数,暂时只有一种,那就是$.trim()
。在jQuery中,我们可以使用$.trim()
方法来去除字符串首尾的空白字符。
$.trim(str)
$.trim()
方法是一个全局函数,应该使用jQuery对象直接调用。这个方法会返回去除空格后的字符串。
$(function () {
var str =" 绿叶,给你初恋般的感觉。 "
console.log("开始长度:" + str.length);
var str = $.trim(str);
console.log("最终长度:" + str.length);
})
URL操作
有关URL操作的工具函数,暂时也只有一种,那就是:$.param()
。在jQuery中,我们可以使用$.param()方法将数组或对象转化为字符串序列,以便用于URL查询字符串或AJAX请求。
$(function () {
var person = {
name:"helicopter",
age:25
}
var str = $.param(person);
console.log(str);
})
控制台结果:name=helicopter&age=25
param()
方法把一个对象转换成用&符号连接起来的字符串序列,这个序列可以用于URL查询字符串或AJAX请求。
数组操作
方法 说明$.inArray()
判断元素$.merge()
合并数组$.makeArray()
转换数组$.grep()
过滤数组$.each()
遍历数组
- 判断元素:
$.inArray()
判断某个值是否存在于数组中。
$.inArray(value, array)
参数value是一个值,参数array是一个数组。$.inArray(value, array)
表示判断value是否存在于array。如果存在,则返回value的下标;如果不存在,则返回-1。$.inArray()
方法跟JavaScript中的indexOf()
方法很相似,indexOf()
返回的是字符串首次出现的位置,而$.inArray()
返回的是元素在数组中的位置。如果找到,返回的是一个大于或等于0的值(下标);如果未找到,则返回-1。
$(function(){
var arr = [1, 2, 3, 4, 5];
var index = $.inArray(3, arr);
if(index == -1){
console.log("没有找到元素");
}else{
console.log("元素下标为:" + index);
}
})
控制台结果:元素下标为:2
2.合并数组:$.merge()
使用$.merge()
方法来合并两个数组。
$.merge(arr1, arr2)
$.merge()方法会合并arr1和arr2,然后返回新的数组。
- 转换数组:
$.makeArray()
使用$.makeArray()
方法将“类数组对象”转换为真正的数组。什么叫类数组对象呢?
类数组对象具有两个特性:
1)具有:具有index和length属性;
2)不具有:不具有数组的操作方法,比如push,shift等。
js中有两个最典型的类数组对象:arguments和HTMLCollection集合(即通过getElementByTagName这类方法获得的集合.
$.makeArray(obj)
$.makeArray()
方法返回值是一个数组。如果参数obj不是类数组对象,则返回值是一个空数组。
function test() {
var arr = $.makeArray(arguments);
console.log(arr);
}
test("yes",1,{});
控制台结果:yes",1,Object
为什么要将arguments、nodeList这些类数组对象转换为真正的数组呢?因为转换为数组后,我们就可以调用数组的各种方法来操作这些对象!
举例:将nodeList转换为Array
var arr = $.makeArray($("li"));
$("ul").html(arr.reverse());
//颠倒li顺序
4.过滤数组:$.grep()
使用$.grep()
方法来过滤数组中不符合条件的元素。
$.grep(array, function(value,index){
……
}, false)
第1个参数array是一个数组。
第2个参数是一个匿名函数。该匿名函数有两个形参:value表示当前元素的“值”;index表示当前元素的“索引”。
第3个参数是一个布尔值。如果为false,则.grep()只会收集函数返回true的数组元素;如果为true,则.grep()
只会收集函数返回false的数组元素。
$(function(){
var arr = [3, 9, 1, 12, 50, 21];
var result = $.grep(arr, function(value,index){
return value > 10;
},false);
console.log(result);
})
结果:12,50,21
把第3个参数改为true时,此时控制台输出结果:3,9,1
在实际开发中,$.grep()
方法常用于获取两个数组中相同的部分或不相同的部分
var a = [3, 9, 1, 12, 50, 21];
var b = [2, 9, 1, 16, 50, 32];
var result = $.grep(a, function(value,index){
if(b.indexOf(value) >=0){
return true;
}
},false);
console.log(result);
结果:9,1,50
如果想要获取数组a中跟数组b不同的部分,只要把$.grep()
方法的第3个参数改为true就可以了。
- 遍历数组:
$.each()
使用$.each()
方法来遍历数组。
$.each(array, function(index, value){
……
})
第1个参数array是一个数组。
第2个参数是一个匿名函数。该匿名函数有两个形参,index表示当前元素的“索引”,value表示当前元素的“值”。
如果需要退出each循环,可以在回调函数中返回false,即return false。
这里是function(index, value)
,而不是function(value,index)
。.grep()和.each()
这两个方法中的匿名函数参数顺序是不一样的!
$(function(){
var arr = ["HTML","CSS","JavaScript"];
$.each(arr, function(index,value){
var result = "下标:" + index + ",值:" + value;
console.log(result);
})
})
上面代码其实可以等价于:
var result = "下标:" + index + ",值:" + arr[index];
对象操作
jQuery中,涉及对象操作的工具函数只有一个,那就是.each()不仅可以用于遍历数组,还可以用于遍历对象。
$.each(obj, function(key, value){
……
})
在$.each()
方法中,第1个参数obj是一个对象,第2个参数是一个匿名函数。该匿名函数有两个形参:key表示“键”;value表示“值”。
如果需要退出each循环,可以在回调函数中返回false,即return false。
从语法上看,$.each()
用于遍历数组,跟用于遍历对象,是完全不一样的。
$(function(){
var person = {
name:"helicopter",
age:25,
hobby:"swimming"
};
$.each(person, function(key, value){
console.log(value);
})
})
结果:
helicoper
25
swimming
上面代码其实可以等价于:
$.each(person, function(key, value){
console.log(person[key]);
})
检测操作
有时我们需要获取对象或元素的各种状态,例如是否为数组、是否为对象、是否为空等,然后根据这些状态值来决定程序的下一步操作。
函数 说明$.isFunction(obj)
判断变量是否为一个函数,返回true或false$.isArray(obj)
判断变量是否为一个数组,返回true或false$.isEmptyObject(obj)
判断变量是否为一个空对象,返回true或false$.isPlainObject(obj)
判断变量是否为一个原始对象,返回true或false$.contains(node1, node2)
判断一个DOM节点是否包含另一个DOM节点,返回true或false
检测变量是否数组
var a = ["HTML","CSS","JavaScript"];
console.log($.isArray(a)); //true
var b = {name:"helicopter", age:25};
console.log($.isArray(b)); //false
原生JavaScript判断是否数组
function isArr(o){
return Object.prototype.toString.call(o) == "[object Array]";
}
var a = ["HTML","CSS","JavaScript"];
console.log(isArr(a)); //true
var b = {name:"helicopter", age:25};
console.log(isArr(b)); //false
检测变量是否空对象
$(function(){
var a = {};
var b = {
name:"helicopter",
age:25,
hobby:"swimming"
};
console.log($.isEmptyObject(a)); //true
console.log($.isEmptyObject(b)); //false
})
检测一个节点是否包含另一个节点
$(function(){
var oDiv = $("div");
var oStrong = $("strong");
console.log($.contains(oDiv, oStrong)); //false
})
怎么输出结果是false?出现这种情况,那是因为小伙伴们没有搞清楚$.contains()
方法的两个参数。其中,$.contains()
方法的两个参数必须是DOM对象,不能是jQuery对象,因此正确的写法应该是:
var oDiv = document.getElementsByTagName("div")[0];
var oStrong = document.getElementsByTagName("strong")[0];
console.log($.contains(oDiv, oStrong)); //true
自定义工具函数
可以使用$.extend()
方法来自定义工具函数,以便供自己开发使用。
(function($){
$.extend({
"函数名": function(参数){
……
}
});
})(jQuery);
原型:
(function(){})()
是JavaScript立即执行函数,这种用法在高级开发中经常用到。
$.extend({
"函数名": function(参数){
……
}
});
如果不考虑其他情况,仅仅使用上面这段代码,其实也可以定义jQuery工具函数。但是为什么我们不这样做,而还要在外面套一个立即执行函数呢?
这是因为很多其他的JavaScript库都会使用到“$”
这个符号,使用$.extend()
定义工具函数时,就有可能受到其他JavaScript库中“$”
变量的影响。我们在外面套一个如下所示的立即执行函数,是为了让“$”
变量只属于这个立即执行函数的作用域,从而避免受到其他JavaScript库的污染。
(function($){
……
})(jQuery);
例子:
(function($){
$.extend({
"maxNum": function(m, n){
return (m>n)?m:n;
}
});
})(jQuery);
$(function () {
var result=$.maxNum(10, 5)
console.log("最大值是:"+result);
})
定义了一个maxNum()
函数,用于计算两个数的最大值。特别注意一点,自定义的工具函数跟普通函数在调用时是不一样的。对于自定义的工具函数,我们需要在前面加上“$.”,以表示这是属于jQuery对象下的一个函数。
练习题:1. 请使用jQuery自定义一个工具函数,函数名为sort()。该函数功能是接收一个数组作为参数,然后对数组中所有元素从小到大进行排序,最后返回排序好的数组。
代码
<script src="jquery.min.js"></script>
<script src="jquery.min.js"></script>
<script>
(function($){
$.extend({
"sort": function(m){
var temp;
for(var i=0;i<m.length;i++)
{
for (var j=0;j<m.length-i-1;j++){
if(m[j]>m[j+1])
{
temp=m[j];
m[j]=m[j+1];
m[j+1]=temp;
}
}
}
return m;
}
});
})(jQuery);
$(function () {
m=[4,2,8,7,3,1]
var result=$.sort(m)
console.log(result);
})
</script>