一、數組和對象操作1. $.each——遍歷$.each(obj,function(param1,param2))遍曆數組時：param1為元素序號，param2為元素內容；遍歷對象時：param1為元素屬性名，param2為元素屬性值。例如：①遍曆數組:$(function () { ...
一、數組和對象操作
1. $.each——遍歷
$.each(obj,function(param1,param2))
遍曆數組時：param1為元素序號，param2為元素內容；
遍歷對象時：param1為元素屬性名，param2為元素屬性值。
例如：
①遍曆數組:
$(function () {
var arrStu = { "張三：": "60", "李四：": "70", "王二：": "80" }
var strContent = "<li class='title'>姓名：分數</li>";
$.each(arrStu, function (Name, Value) {
strContent += "<li>" + Name + Value + "</li>";
})
$("ul").append(strContent);
})
②遍歷對象：
<script type="text/javascript">
$(function() {
var strContent = "<li class='title'>屬性：值</li>";
$.each($.get, function(Property, Value) {
strContent += "<li>" + Property + "：" + Value + "</li>";
})
$("ul").append(strContent);
})
</script >
2.$.grep——篩選數組
$.grep(array,function(element,index))：array為要篩選的數組，element為數組中的元素，index為元素在數組中的序號（0起）。
<script type="text/javascript">
$(function() {
var strTmp = "篩選前數據：";
var arrNum = [2, 8, 3, 7, 4, 9, 3, 10, 9, 7, 21];
var arrGet = $.grep(arrNum, function(ele, index) {
return ele > 5 && index < 8 //元素值大於5且序號小於8
})
strTmp += arrNum.join();
strTmp += "<br/><br>篩選後數據：";
strTmp += arrGet.join();
$("#divTip").append(strTmp);
},true)
</script >
執行結果：
篩選前數據：2,8,3,7,4,9,3,10,9,7,21
篩選後數據：8,7,9,10
3.$.map——數據變更
$.map(array,function(element,index))：array為要篩選的數組，element為數組中的元素，index為元素在數組中的序號
<script type="text/javascript">
$(function() {
var strTmp = "變更前數據：";
var arrNum = [2, 8, 3, 7, 4, 9, 3, 10, 9, 7, 21];
var arrGet = $.map(arrNum, function(ele, index) {
if (ele > 5 && index < 8) { //元素值大於5且序號小於8
return ele + 1; //元素增加1
}
})
strTmp += arrNum.join();
strTmp += "<br/><br>變更後數據："
strTmp += arrGet.join();
$("#divTip").append(strTmp);
})
</script>
執行結果：
變更前數據：2,8,3,7,4,9,3,10,9,7,21
變更後數據：9,8,10,11
4.$.inArray()——查找數組元素
$.inArray(value,array)：查找元素在數組中的元素，如果不存在則返回-1。
$(function() {
var strTmp = "待搜索數據：";
var arrNum = [4, 21, 2, 12, 5];
var arrPos = $.inArray(12, arrNum);
strTmp += arrNum.join();
strTmp += "<br/><br>12搜索結果："
strTmp += arrPos;
$("#divTip").append(strTmp);
})
執行結果：
待搜索數據：4,21,2,12,5
12搜索結果：3
二、瀏覽器檢測
$.browser對象，可以處理瀏覽器相關檢測。
註意：該對象在jquery1.4.2添加，但是1.9中已經刪除。
$.support.boxModel檢測頁面是否為標準盒子模型。經測試該對象在1.10中測試也已經去掉。
三、字元串操作
$.trim()：去掉字元串左右兩側的空格。這是jquery核心庫中唯一針對字元串處理的函數。
四、測試函數
1.$.isEmptyObject(obj)：檢測參數是否為空對象。
<script type="text/javascript">
$( function() {
var obj0 = {};
var obj1 = { "name" : "taoguorong" };
var obj2 = [];
var obj3 = [1];
var obj4;
var strTmp = "obj0是否為空：" + $.isEmptyObject(obj0); //true
strTmp += "<br><br>obj1是否為空：" + $.isEmptyObject(obj1);//false
strTmp += "<br><br>obj2是否為空：" + $.isEmptyObject(obj2);//true
strTmp += "<br><br>obj3是否為空：" + $.isEmptyObject(obj3);//false
strTmp += "<br><br>obj4是否為空：" + $.isEmptyObject(obj4);//true
$( "#divTip").append(strTmp);
})
</script >
2.$.isPlainObject(obj)：檢測參數是否為原始對象，即通過{}或者new Object()創建。
<script type="text/javascript">
$( function() {
var obj0 = {};
var obj1 = new Object();
var obj2 = "null" ;
var obj3 = { "a" : 1 };
var obj4 = new Object(1);
var obj5 = 1;
var strTmp = "obj0是否為原始對象：" + $.isPlainObject(obj0); //true
strTmp += "<br><br>obj1是否為原始對象：" + $.isPlainObject(obj1);//true
strTmp += "<br><br>obj2是否為原始對象：" + $.isPlainObject(obj2);//false
strTmp += "<br><br>obj3是否為原始對象：" + $.isPlainObject(obj2);//false
strTmp += "<br><br>obj4是否為原始對象：" + $.isPlainObject(obj2);//false
strTmp += "<br><br>obj5是否為原始對象：" + $.isPlainObject(obj2);//false
$( "#divTip").append(strTmp);
})
</script >
說明：當new Object()方法帶參數時，不是原始對象。
3.$.contain(container,contained)：兩個參數均為dom對象，如果container對象包含contained對象則返回true，否則返回false。
五、URL操作
$.param(obj)：其中obj為數組或者jquery對象，該方法將其序列化為鍵值對。
<script type="text/javascript">
$( function() {
var arrInfo = { id: 101, name: "tao" , sex: 0 }; //基本信息數組
//分數和彙總信息數組
var arrScore = { Score: { chinese: 90, maths: 100, english: 98 },
SunNum: { Score: 288, Num: 3 }
};
//序列化各數組
var arrNewInfo = $.param(arrInfo);
var arrNewScore = $.param(arrScore);
var arrDecScore = decodeURIComponent($.param(arrScore));
//顯示序列化後的數組
var strTmp = "<b>arrInfo數組序列化後</b>：" ;
strTmp += arrNewInfo; //結果：id=101&name=tao&sex=0
strTmp += "<br><br><b>arrScore數組序列化後</b>：" ;
strTmp += arrNewScore;//結果：Score%5Bchinese%5D=90&Score%5Bmaths%5D=100&Score%5Benglish%5D=98&SunNum%5BScore%5D=288&SunNum%5BNum%5D=3
strTmp += "<br><br><b>arrScore序列化解碼後</b>：" ;
strTmp += arrDecScore;//結果：Score[chinese]=90&Score[maths]=100&Score[english]=98&SunNum[Score]=288&SunNum[Num]=3
//顯示在頁面中
$( "#divTip").append(strTmp);
})
</script >
六、$.extend——擴展工具函數
擴展
; (function ($) {
$.extend({
"test": function (p1, p2) {
return p1 && p2;
}
})
})(jQuery);
調用
$.test(true, true);
七、$.proxy——改變事件函數的作用域
兩種格式：
$.proxy(function,scope)：function為指定的事件方法，scope為事件函數設置作用域的對象。
$.proxy(scope,functionName)：scope為函數的作用域對象，functionName為函數名，它必須是scope對象的一個屬性。
<script type="text/javascript">
$( function() {
var objMyInfo = {
name: "小張", //設置對象name屬性
sex: "男", //設置對象sex屬性
ShowEvent: function() { //設置執行的事件
$( "#divShow").html("姓名：" +
this.name + "<br><br>性別：" +
this.sex);
}
}
$( "#Button1").bind("click" ,objMyInfo.ShowEvent);//結果：姓名:""，性別:undefined
$( "#Button1").bind("click" ,$.proxy(objMyInfo, "ShowEvent")); //通過proxy函數綁定設置的事件。結果：姓名:小張,性別:男。
$( "#Button1").bind("click" , $.proxy(objMyInfo.ShowEvent, objMyInfo));//通過proxy函數綁定設置的事件。結果：姓名:小張,性別:男。
})
</script >
八、實例——檢測對象類型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用jQuery 擴展工具函數實現對字元串指定類型的檢測</title>
<script type="text/javascript"
src="Jscript/jquery-1.4.2-vsdoc.js">
</script>
<script type="text/javascript"
src="Jscript/jquery-1.4.2.js">
</script>
<style type="text/css">
body{font-size:11px}
fieldset{width:410px}
fieldset div{padding:8px}
fieldset div select{font-size:9pt;padding:1px}
#divTip{margin-top:10px;padding:10px;border:solid 1px #666;
background-color:#eee;width:210px;display:none}
.txt{border:#666 1px solid;padding:2px;width:120px;margin-right:3px}
.btn {border:#666 1px solid;padding:2px;width:60px;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
</style>
<script type="text/javascript">
/*------------------------------------------------------------/
功能：返回檢測字元串指定類型的結果
參數：checkType 為檢測字元串的類型;strS 為待檢測的字元串
返回：一個bool值,true 表示是指定的類型，false 表示不是指定的字元類型
示例：$.chkStrByType("陶國榮", "zh_cn");
/------------------------------------------------------------*/
; (function($) {
$.extend({
chkStrByType: function(strS, chkType) {
var result;
switch (chkType) {
case 'odd'://奇數型
var chkStr = arrRegExp['number'];
var reg = RegExp(chkStr, 'g');
var result = reg.test(strS);
if (true == result) {
var num = parseInt(strS) % 2;
if (1 == num) {
result = true;
} else {
result = false;
}
} else {
result = false;
}
break;
case 'even'://偶數型
var chkStr = arrRegExp['number'];
var reg = RegExp(chkStr, 'g');
var result = reg.test(strS);
if (true == result) {
var num = parseInt(strS) % 2;
if (num == 0) {
result = true;
} else {
result = false;
}
} else {
result = false;
}
break;
default://其它類型按正則表達式檢測
var chkStr = arrRegExp[chkType];
var reg = RegExp(chkStr, 'g');
var result = reg.test(strS);
break;
}
return result;
}
});
/* 正則驗證字元串表達式 */
var arrRegExp = {};
arrRegExp['email'] = '\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*';
arrRegExp['telephone'] = '(\\(\\d{3,4}\\)|\\d{3,4}-|\\s)?\\d{7,8}';
arrRegExp['mobile'] = '(86)*0*1[3,5]\\d{9}';
arrRegExp['postcode'] = '^\\d{6}$';
arrRegExp['number'] = '^-?[0-9]\\d*$';
arrRegExp['zh_cn'] = '[\\u4e00-\\u9fa5]';
arrRegExp['url'] = '[a-zA-z]+://[^\\s]*';
})(jQuery);
$(function() {
$("#btnChkStr").click(function() {
//獲取待檢測的字元串與指定的類型
var $ChkStr = $("#txtChkStr").val();
var $ChkType = $("#selStrType").val();
//保存檢測後的結果值
var blnResult = $.chkStrByType($ChkStr, $ChkType);
//返回檢測後的結果
var strTmpShow = "";
var strTmpType = blnResult ? " 是 " : " 不是 ";
strTmpShow = $ChkStr + strTmpType;
strTmpShow = strTmpShow + $("select :selected").text();
strTmpShow = strTmpShow + " 類型";
//將返回後的結果顯示在頁面中
$("#divTip").show().html("").append(strTmpShow);
});
});
</script>
</head>
<body>
<fieldset><legend>指定類型檢測字元串</legend>
<div>
<span>檢測內容：</span><input id="txtChkStr" type="text" class="txt" />
<span>選擇類型：</span>
<select id="selStrType">
<option value="email">郵箱</option>
<option value="telephone">電話號碼</option>
<option value="mobile">手機號碼</option>
<option value="postcode">郵政編碼</option>
<option value="number">整數</option>
<option value="zh_cn">漢字</option>
<option value="url">網址</option>
<option value="odd">奇數</option>
<option value="even">偶數</option>
</select>
<input id="btnChkStr" type="button" value="檢測" class="btn" />
<div id="divTip"></div>
</div>
</fieldset>
</body>
</html>
實例
出處：http://www.cnblogs.com/janes/
