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>

posted @ 2016-09-16 20:05 石shi 阅读(613) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

石

JQuery中的工具类（五）

公告