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()方 ...
随机推荐
- redis的入门篇----启动和关闭
废话不多说 本博主要的内容是redis的常见命令 redis分为服务端和客户端 服务端的启动方式: redis-server redis-server ${redis.conf} //后面是一 ...
- ruby where用法
用法1 Subject.where(").order("name") 用法2 与find方法不同的是,where方法返回的结果不是数组而是ActiveRelation,这 ...
- groovy.lang.GroovyRuntimeException: Conflicting module versions
在运行groovy的junit方法时,报了这个错误: java.lang.ExceptionInInitializerError at org.codehaus.groovy.reflection.C ...
- Javaweb学习笔记——（二）——————CSS概述，进入JavaScript
day02day01内容回顾 1.html操作思想 **使用标签把要操作的数据包起来,通过修改标签的属性值来是实现标签内数据样式的变化 ***<font size="5"&g ...
- js scroll函数
$(function () { $(".sticky").hide(); var top = $(window).scrollTop(); if (top >= 100) { ...
- Linux - iptable 限制 IP 访问端口
iptable 设置iptables 限制特定IP 访问: -A INPUT -s 172.16.2.20 -p tcp -j ACCEPT-A INPUT -s -p tcp -j ACCEPT 设 ...
- Wannafly挑战赛21 E 未来城市规划
传送门 题目中给的信息很难直接维护,但是可以考虑一条边对答案的贡献 在以\(x\)为根的子树里,如果一条边\(i\)的权值为\(w_i\),这条边深度更深的端点为\(to_i\),那么这条边对这个子树 ...
- Django 2.0 学习(12)：Django 模板语法
Django 模板语法 一.模板 只要是在html里面有模板语法就不是html文件了,这样的文件就叫做模板. 二.模板语法 模板语法变量:{{ }} 在Django模板中遍历复杂数据结构的关键是句点字 ...
- adb的使用
前面配置了环境变量,可以在计算机任何位置打开cmd窗口使用adb. 连接android应用 使用connect命令连接盒子的ip(要确保电脑所连接的网络和盒子是一个网络) 抓日志 抓取某一个操作过程的 ...
- 内置函数id，返回内存地址
a = 2 def b(): a = 3 print id(a) class c(): def __init__(self): print id(c) d =c() print id(d) print ...