工具函数是指直接依附于jQuery对象,针对jQuery对象本身定义的方法,即全局性的函数。它的作用主要是提供比如字符串、数组、对象等操作方面的遍历。
字符串操作
在jQuery中,字符串的工具函数只有一个,就是去除字符串左右空格的工具函数:$.trim()。如:
var str = " jQuery "; alert(str); alert($.trim(str));
数组和对象操作
jQuery为处理数组和对象提供了一些工具函数, 这些函数可以便利的给数组或对象进行遍历、筛选、搜索等操作。
工具函数.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>工具函数</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="box"></div> </body> </html>
$.each()遍历数组:
var arr = ["张三","李四","王五","赵六"]; $.each(arr,function(index, value) { $("#box").html($("#box").html() + (index+1) + ":" + value + "<br/>"); });
$.each()遍历对象:
$.each($.ajax(),function(name, fn) { $("#box").html($("#box").html() + fn + "<br/><br/>"); });
注意:$.each()中index表示数组元素的编号,默认从0开始。
$.grep()数据筛选:
var arr = [4,2,6,9,11,25,38,59]; var arrGrep = $.grep(arr,function(element,index) { return index < 5 && element < 6; //这里按道理是一个boolean值,但整体返回一个数组 }); alert(arrGrep); //4,2
注意:$.grep()方法的index是从0开始计算的。
$.map()修改数据:
var arr = [4,2,6,9,11,25,38,59]; var arrMap = $.map(arr,function(element,index) { //return index < 5 && element < 6; //这里就是按布尔值返回的 //return element + 1; //所有元素均+1 if(index < 5 && element < 6) { return element + 1; } }); alert(arrMap); //5,3
$.inArray()获取查找到元素的下标:
var arr = [4,2,6,9,11,25,38,59]; alert($.inArray(11,arr)); //4
注意:$.inArray()的下标从0开始计算。
$.merge()合并两个数组:
var arr = [4,2,6,9,11,25,38,59]; var arr2 = [200,300]; alert($.merge(arr,arr2)); //4,2,6,9,11,25,38,59,200,300
$.unique()删除重复的DOM元素:
工具函数.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>工具函数</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div></div> <div></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div></div> </body> </html>
var divs = $("div").get(); //concat()函数相当于在原有的6个<div>后接上3个<div class="box"></div> divs = divs.concat($(".box").get()); //divs为原生的,非jQuery对象 //alert(divs.length); //原生对象才有length的属性,而jQuery对象没有,它有size()函数 alert($(divs).size()); //9 $.unique(divs); alert($(divs).size()); //6
注意:$.unique()对数组无效:
var arr = [5,2,9,4,11,57,89,1,23,8]; var arr2 = [2,9,4]; var arr3 = $.merge(arr,arr2); alert($.unique(arr3)); //无效
.toArray()合并多个DOM元素组成数组
工具函数.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>工具函数</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html>
alert($("li").toArray());
alert($($("li").toArray()).size());