JQuery中的工具類（五）

一：1.serialize()
序清單表格内容為字元串。
傳回值
jQuery
示例
序清單表格内容為字元串，用于 Ajax 請求。 
HTML 代碼:
<p id="results"><b>Results: </b> </p>
<form>
  <select name="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
  <select name="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select><br/>
  <input type="checkbox" name="check" value="check1"/> check1
  <input type="checkbox" name="check" value="check2" checked="checked"/> check2
  <input type="radio" name="radio" value="radio1" checked="checked"/> radio1
  <input type="radio" name="radio" value="radio2"/> radio2</form> 
jQuery 代碼:
$("#results").append( "<tt>" + $("form").serialize() + "</tt>" ); <script type="text/javascript">
     $(document).ready(function() {

         $("#btn1").click(function() {
             $("#results").append("<tt>" + $("form").serialize() + "</tt>");


         });
         $("#btn2").click(function() {
         var fields = $("select, :radio").serializeArray(); 
         jQuery.each(fields, function(i, field) { $("#results").append(field.value + " "); });

          });

     })
     

  </script> 
2.serializeArray()
序列化表格元素 (類似 '.serialize()' 方法) 傳回 JSON 資料結構資料。
傳回值
jQuery
示例
取得表單内容并插入到網頁中。 
HTML 代碼:
<p id="results"><b>Results:</b> </p>
<form>
  <select name="single">   
 <option>Single</option>
    <option>Single2</option>
  </select>
  <select name="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select><br/>
 <input type="checkbox" name="check" value="check1"/> check1
  <input type="checkbox" name="check" value="check2" 
checked="checked"/> check2 
 <input type="radio" name="radio" value="radio1" checked="checked"/> radio1
  <input type="radio" name="radio" value="radio2"/> radio2
</form> 
jQuery 代碼:
var fields = $("select, :radio").serializeArray();
jQuery.each( fields, function(i, field){
  $("#results").append(field.value + " ");
});jQuery.param(obj) 
将表單元素數組或者對象序列化。是.serialize()的核心方法。
傳回值
jQuery
參數
obj: Array<Elements>, jQuery, Object
示例
數組或jQuery對象會按照name/value對進行序列化，普通對象按照key/value對進行序列化。
描述:按照key/value對序列化普通對象。
jQuery 代碼:
var params = { width:1680, height:1050 };
var str = jQuery.param(params); 
$("#results").text(str); 
結果:
width=1680&height=1050  
二：數組和對象操作
1、jQuery.each(obj,callback)
通用例遍方法，可用于例遍對象和數組。
不同于例遍 jQuery 對象的 $().each() 方法，此方法可用于例遍任何對象。 回調函數擁有兩個參數：第一個為對象的成員或數組的索引，第二個為對應變量或内容。

如果需要退出 each 循環可使回調函數傳回 false，其它傳回值将被忽略。
傳回值
Object
參數
object (Object) : 需要例遍的對象或數組。
callback (Function) : (可選) 每個成員/元素執行的回調函數 
示例
例遍數組，同時使用元素索引和内容。 
jQuery 代碼:
$.each( [0,1,2], function(i, n){
  alert( "Item #" + i + ": " + n );
}); 
例遍對象，同時使用成員名稱和變量内容。 
jQuery 代碼:
$.each( { name: "John", lang: "JS" }, function(i, n){
  alert( "Name: " + i + ", Value: " + n );
}); 2.jQuery.extend(target,obj1,[objN])
用一個或多個其他對象來擴充一個對象，傳回被擴充的對象。
用于簡化繼承。
傳回值
Object
參數
target (Object) : 待修改對象。
object1 (Object) : 待合并到第一個對象的對象。
objectN (Object) : (可選) 待合并到第一個對象的對象。 
示例
合并 settings 和 options，修改并傳回 settings。 
jQuery 代碼:
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options); 
結果:
settings == { validate: true, limit: 5, name: "bar" }  
合并 defaults 和 options, 不修改 defaults。 
jQuery 代碼:
var empty = {}
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = jQuery.extend(empty, defaults, options); 
結果:
settings == { validate: true, limit: 5, name: "bar" }
empty == { validate: true, limit: 5, name: "bar" } 代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery中的工具類介紹及應用</title>

 <!--   引入jQuery -->
    <script src="../scripts/jquery-1.2.6.js" type="text/javascript"></script>
    <script src="../scripts/jquery-1.2.6-vsdoc-cn.js" type="text/javascript"></script>
    
 <script type="text/javascript">
     $(document).ready(function() {
          $.each([1, 2, 3], function(i, n) { alert("Item #" + i + ": " + n); });
          $.each({ name: "John", lang: "JS" }, function(i, n) { alert("Name: " + i + ", Value: " + n); });
         var objs = [{ name: "John", lang: "JS1" }, { name: "tom", lang: "JS2" }, { name: "zhang", lang: "JS3"}]
         $.each(objs, function() {
             alert(this.lang);
         });
     })
     

  </script>
</head>
<body >

</body>
</html> 
3、jQuery.grep(array,callback,[invert])
使用過濾函數過濾數組元素。
此函數至少傳遞兩個參數：待過濾數組和過濾函數。過濾函數必須傳回 true 以保留元素或 false 以删除元素。
傳回值
Array
參數
array (Array) : 待過濾數組。
callback (Function) : 此函數将處理數組每個元素。第一個參數為目前元素，第二個參數而元素索引值。此函數應傳回一個布爾值。另外，此函數可設定為一個字元串，當設定為字元串時，将視為“lambda-form”（縮寫形式？），其中 a 代表數組元素，i 代表元素索引值。如“a > 0”代表“function(a){ return a > 0; }”。
invert (Boolean) : (可選) 如果 “invert” 為 false 或未設定，則函數傳回數組中由過濾函數傳回 true 的元素，當"invert" 為 true，則傳回過濾函數中傳回 false 的元素集。 
示例
過濾數組中大于 0 的元素。 
jQuery 代碼:
$.grep( [0,1,2], function(n,i){
  return n > 0;
}); 
結果:
[1, 2] 
排除數組中大于 0 的元素，使用第三個參數進行排除。 
jQuery 代碼:
$.grep( [0,1,2], function(n,i){
  return n > 0;
}, true); 
結果:
[0]  
4.jQuery.makeArray(obj)
将類數組對象轉換為數組對象。
類數組對象有 length 屬性，其成員索引為 0 至 length - 1。實際中此函數在 jQuery 中将自動使用而無需特意轉換。
傳回值
Array
參數
obj (Object) : 類數組對象。
示例
過濾數組中小于 0 的元素。 
HTML 代碼:
5、jQuery.map(array,callback)
将一個數組中的元素轉換到另一個數組中。
作為參數的轉換函數會為每個數組元素調用，而且會給這個轉換函數傳遞一個表示被轉換的元素作為參數。轉換函數可以傳回轉換後的值、null（删除數組中的項目）或一個包含值的數組，并擴充至原始數組中。
傳回值
Array
參數
array (Array) : 待轉換數組。
callback (Function) : 為每個數組元素調用，而且會給這個轉換函數傳遞一個表示被轉換的元素作為參數。函數可傳回任何值。另外，此函數可設定為一個字元串，當設定為字元串時，将視為“lambda-form”（縮寫形式？），其中 a 代表數組元素。如“a * a”代表“function(a){ return a * a; }”。示例
将原數組中每個元素加 4 轉換為一個新數組。
jQuery 代碼:
$.map( [0,1,2], function(n){

  return n + 4;

}); 結果:
[4, 5, 6]

 
原數組中大于 0 的元素加 1 ，否則删除。 
jQuery 代碼:
$.map( [0,1,2], function(n){
  return n > 0 ? n + 1 : null;
}); 
結果:
[2, 3] 
原數組中每個元素擴充為一個包含其本身和其值加 1 的數組，并轉換為一個新數組。 
jQuery 代碼:
$.map( [0,1,2], function(n){
  return [ n, n + 1 ];
}); 
結果:
[0, 1, 1, 2, 2, 3] 代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery中的工具類介紹及應用</title>

 <!--   引入jQuery -->
    <script src="../scripts/jquery-1.2.6.js" type="text/javascript"></script>
    <script src="../scripts/jquery-1.2.6-vsdoc-cn.js" type="text/javascript"></script>
    
 <script type="text/javascript">
     $(document).ready(function() {
         var settings = { validate: false, limit: 5, name: "foo" };
         var options = { validate: true, name: "bar" };
         var obj = jQuery.extend(settings, options); 
         $.each(obj,function(name,value){
            alert("name:"+name+",value:"+value);
         })
     
     })
     

  </script>
</head>
<body >

</body>
</html> 
6.jQuery.inArray(value,array)
确定第一個參數在數組中的位置(如果沒有找到則傳回 -1 )。
傳回值
jQuery
參數
value (Any) : 用于在數組中查找是否存在
array (Array) : 待處理數組。
示例
删除重複 div 标簽。 
jQuery 代碼:
var arr = [ 4, "Pete", 8, "John" ];
jQuery.inArray("John", arr);  //3
jQuery.inArray(4, arr);  //0
jQuery.inArray("David", arr); 
 //-1 
三：測試操作
示例
檢測是否為函數 
jQuery 代碼:
function stub() { } 
var objs = [ function () {}, { x:15, y:20 }, null, stub, "function" ];
 jQuery.each(objs, function (i) { 
var isFunc = jQuery.isFunction(objs[i]); 
$("span:eq( " + i + ")").text(isFunc); }); 
結果:
[ true,false,false,true,false ]  
字元串操作
jQuery.trim(str)
去掉字元串起始和結尾的空格。
傳回值
jQuery
參數
str (String) : 需要處理的字元串
示例
去掉字元串起始和結尾的空格。
jQuery 代碼:
$.trim("  hello, how are you?  ");
結果:
"hello, how are you?"
代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery中的工具類介紹及應用</title>

 <!--   引入jQuery -->
    <script src="../scripts/jquery-1.2.6.js" type="text/javascript"></script>
    <script src="../scripts/jquery-1.2.6-vsdoc-cn.js" type="text/javascript"></script>
    
 <script type="text/javascript">
     $(document).ready(function() {
         var newArray = $.map([0, 1, 2], function(n) { return n + 4; });
         $.each(newArray, function() { alert(this); });

     })
     

  </script>
</head>
<body >

</body>
</html>
JQuery中的工具類（五）

繼續閱讀

一個小小的移動web版音樂播放器

Docker - Dockerfile之ADD、COPY、WORKDIR、USER、EXPOSE指令詳解

2010年終總結--技術篇

HDU 1402 A * B Problem Plus

Compile workrave under windows &ndash; My exprience 在Windows上編譯Workrave

門戶通專訪草根站長九天狼：做站貴在堅持

tabpanel 使用問題

為什麼把CSS放頭部，script放下面

jQuery練習一. 選擇器練習二. DOM操作練習三. 事件練習

struts2 +jquey uploadify3.2 實作多檔案上傳，可預覽、删除、排序

JQuery--dom捕獲html元素

CSS之折疊菜單

數組和類數組

web開發之前後端渲染

403 Forbidden，You don't have permission to access / on this server.Forbidden

jquery_126_demo
