JQ工具函数运用
1.把对象转换为字符串
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="../Scripts/jquery-1.9.1.js"></script> <script type="text/javascript"> $(function () { $("button").click(function () { var option = { user: "wangqiang", pass:"123456789" } var str = jQuery.param(option); $("#result").text(str); }) }) </script> <title></title> </head> <body> <button>定义序列化字符串</button> <div id="result"></div> </body> </html>
2.处理字符串（去除空格）
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="../Scripts/jquery-1.9.1.js"></script> <script type="text/javascript"> $(function () { $("button").click(function () { var str = " "; alert(str.length); str = jQuery.trim(str) alert(str.length); }) }) </script> <title></title> </head> <body> <div> <button> 修剪字符串</button> </div> </body> </html>
3.对数组和集合进行迭代
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="../Scripts/jquery-1.9.1.js"></script> <script type="text/javascript"> $(function () { var a = [ { width: 400 }, { height: 300 } ]; jQuery.each(a,function(name,value) { if (name > 0) return false;//只进行一次循环即退出 需要退出each循环，返回一个false就可以了 alert(name+="="+value); }) }) </script> <title></title> </head> <body> </body> </html>
4.对数组进行筛选
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="../Scripts/jquery-1.9.1.js"></script> <script type="text/javascript"> //筛选数组 var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; arr = jQuery.grep(arr, function (value, index) { return value >= 5; }) alert(arr); //转换数组 var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; arr = jQuery.map(arr, function (elem) { return elem * 2 > 5 ? elem * 2 : null; }) alert(arr); //合并数组 var arr1 = [1, 2, 3, ["a", "b", "c"]]; var arr2 = [4, 5, 6, [7, 8, 9]]; arr3 = jQuery.merge(arr1, arr2); alert(arr1); alert(arr1.length);// alert(arr3); alert(arr3.length); </script> <title></title> </head> <body> </body> </html>
5.检测用户代理
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="../Scripts/jquery-1.4.1.js"></script> <script type="text/javascript"> $(function () { var brower = $.browser; var temp = ""; for (var name in brower) { if (brower[name] == true) { temp += name + "=" + brower[name] + "当前浏览器是：" + name; } else { temp += name + "=" + brower[name]; } } $("div").html(temp); }) </script> <title></title> </head> <body> <div></div> </body> </html>
6.判断是否是数组类型
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="../Scripts/jquery-1.9.1.js"></script> <script type="text/javascript"> $(function () { var a = [ {width:400}, {height:300} ]; if (jQuery.isArray(a)) alert("变量a是数组"); }) </script> <title></title> </head> <body> </body> </html>
7.生成数组
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="../Scripts/jquery-1.9.1.js"></script> <script type="text/javascript"> var arr = jQuery.makeArray($("li").val); alert(arr); $("ul").html(arr.reverse()); </script> <title></title> <style type="text/css"></style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </body> </html>
