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; }”。
return n + 4;
});
原数组中大于 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 ]
字符串操作
"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中的工具类（五）的更多相关文章
- JUC学习笔记--JUC中并发工具类
JUC中并发工具类 CountDownLatch CountDownLatch是我目前使用比较多的类,CountDownLatch初始化时会给定一个计数,然后每次调用countDown() 计数减1, ...
- jquery-12 jquery中的工具方法有哪些
jquery-12 jquery中的工具方法有哪些 一.总结 一句话总结:四个较常用方法.1.isArray();2.isFunction();3.isEmptyObejct();4.trim(); ...
- js进阶 11-4/5 jquery中css的类的操作有哪些
js进阶 11-4/5 jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...
- Java中的工具类究竟如何命名？
先来几个例子 JDK自带工具类 Arrays.asList(); Objects.equals(); Collections.sort(); Spring框架工具类 StringUtils.isEmp ...
- 简单了解Spring中常用工具类_java - JAVA
文章来源:嗨学网 敏而好学论坛www.piaodoo.com 欢迎大家相互学习 文件资源操作 Spring 定义了一个 org.springframework.core.io.Resource 接口, ...
- JQuery中的工具函数总结
前提引入 前提当然也是要引入Jquery啦... <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" typ ...
- Spark中常用工具类Utils的简明介绍
<深入理解Spark:核心思想与源码分析>一书前言的内容请看链接<深入理解SPARK:核心思想与源码分析>一书正式出版上市 <深入理解Spark:核心思想与源码分析> ...
- spring中常用工具类介绍
http://www.cnblogs.com/langtianya/p/3875103.html 文件资源操作 Spring 定义了一个 org.springframework.core.io ...
- Unity3D中的工具类
1.时间:Unity提供了Time类,这个类主要用来获取当前的系统时间. Time.time:从游戏开始后开始计时,表示截止目前共运行的游戏时间. Time.deltaTime:获取Update()方 ...
随机推荐
- javascript 实现手风琴特效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- C语言上机复习（一）文件操作
C语言—文件操作 1.1 fgetc() + fputc(): 以 字符 形式存取数据定义文件指针 #define _CRT_SECURE_NO_WARNINGS #include <cstdi ...
- elementUI 表格设置表头样式
eader-row-class-name 表头行的 className 的回调方法,也可以使用字符串为所有表头行设置一个固定的 className. Function({row, rowIndex}) ...
- JAVA BufferedReader 类从标准输入读取数据
1,从标准输入上建立输入流: BufferedReader localReader = new BufferedReader( new InputStreamReader(System.in)); S ...
- u-boot移植（二）---修改前工作：代码流程分析1
一.代码执行总体流程图 1.1 代码路径 U-boot.lds (arch\arm\cpu) vectors.S (arch\arm\lib) start.S (arch\arm\cpu\arm920 ...
- LeetCode -Reverse Pairs
my solution: class Solution { public: int reversePairs(vector<int>& nums) { int length=num ...
- Linux - 文件ACL权限控制
getfacl 1.test # 查看文件ACL权限 setfacl -R -m u:xuesong:rw- 1.test # 对文件增加用户的读写权限 -R 递归
- C#中富文本编辑器Simditor带图片上传的全部过程（MVC架构的项目）
描述:最近c#项目中使用富文本编辑器Simditor,记录一下以便以后查看. 注:此项目是MVC架构的. 1.引用文件 项目中引用相应的css和js文件,注意顺序不能打乱,否则富文本编辑器不会正常显示 ...
- Window上，启动Tomcat服务之后，关闭启动窗口，服务器也随之关闭
在Window环境上,启动Tomcat服务器之后,随手关闭启动窗口,服务器也随之关闭了. 现在想要的效果是,当关闭启动窗口后,服务器仍然运行. 1. 开始:运行cmd,进入doc命令行 tomcat安 ...
- C# 反编译项目修复
1.反编译测试程序 1>.将测试程序添加到.NET Reflector 2>.选中测试程序后右键选择导出 2.反编译项目修复 1>.问题一 问题现象: base.AutoScaleM ...