Jquery数组和对象操作
1.迭代
jQuery.each( object, callback )
返回值:Object
说明:
通用例遍方法,可用于例遍对象和数组。
不同于例遍 jQuery 对象的 $().each() 方法,此方法可用于例遍任何对象。回调函数拥有两个参数:第一个为对象的成员或数组的索引,第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false,其它返回值将被忽略。
对于数组我们可以使用 jQuery.each( object, callback ) 来遍历, 这等同于使用for循环.
注意传入的第一个参数可以是数组或者对象.如果数组,则遍历数组中的每一个对象. 第一个参数表示索引,第二个参数表示值, this表示当前遍历的元素, 可以通过返回false终止迭代, 比如下面的示例遍历到第二个元素后会终止:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
$.each([ "a" , "b" , "c" ], function (i, n)
{
alert( "Item #" + i + ": " + n); //可以获取到i值
if (i >= 1)
{
return false ;
}
});
$( "#iterateArray" ).click( function (event)
{
var array = $.each([ "a" , "b" , "c" ], function (i, n)
{
alert( "Item #" + i + ": " + n ); //第一个参数i表示索引, this表示当前遍历的对象
if (i >= 1)
{
return false ;
}
});
});
|
如果传递的是对象, 则遍历对象的每一个属性, 即使函数返回false也依然会遍历完所有的属性, 第一个参数表示属性key(属性名称,是obejct类型),第二个参数表示值,,this表示当前属性的值:
1
2
3
4
5
6
7
8
9
10
11
|
$( "#iterateObject" ).click( function (event)
{
$.each({ name: "ziqiu.zhang" , sex: "male" , status: "single" }, function (i, n)
{
alert( "Item #" + i.toString() + ": " + n ); //第一个参数i表示属性的key(object), this表示属性值
if (i >= 1)
{
return false ;
}
});
});
|
each将是我们最常使用的函数, 特别注意each虽然迭代每一个元素或属性, 但是在迭代函数中并不会改变当前元素的值, 也就是无法改变返回后的对象.如果需要改变数组中的每一个元素并且将结果返回, 因使用jQuery.map( array, callback )函数.
2.筛选
jQuery.grep( array, callback, [invert] )
返回值: Array
说明:
使用过滤函数过滤数组元素。
此函数至少传递两个参数:待过滤数组和过滤函数。过滤函数必须返回 true 以保留元素或 false 以删除元素。
讲解:
默认invert为false, 即过滤函数返回true为保留元素. 如果设置invert为true, 则过滤函数返回true为删除元素.
下面的示例演示如何过滤数组中索引小于 0 的元素:
$.grep( [0,1,2], function (n,i){
return n > 0;
});
|
返回的结果是[1,2]
3.转换
jQuery.map( array, callback )
返回值:Array
说明:
将一个数组中的元素转换到另一个数组中。
作为参数的转换函数会为每个数组元素调用,而且会给这个转换函数传递一个表示被转换的元素作为参数。转换函数可以返回转换后的值、null(删除数组中的项目)或一个包含值的数组,并扩展至原始数组中。
讲解:
1.3.2版本中此函数和each函数已经几乎相同(以前稍有不同), 现在唯一的区别就是回调函数可以改变当前元素.返回null则删除当前元素.
下面是几个例子:
var arr = [ "a" , "b" , "c" , "d" , "e" ]
$( "div" ).text(arr.join( ", " ));
arr = jQuery.map(arr, function (n, i){
return (n.toUpperCase() + i);
});
$( "p" ).text(arr.join( ", " ));
arr = jQuery.map(arr, function (a) { return a + a; });
$( "span" ).text(arr.join( ", " ));
|
4.合并
合并对象是我们常常编写的功能, 通常使用臃肿的for循环来进行.jQuery为我们提供了很多功能的合并函数:
名称 | 说明 | 举例 |
jQuery.extend( [deep], target, object1, [objectN] ) |
用一个或多个其他对象来扩展一个对象,返回被扩展的对象。 如果不指定target,则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。 如果第一个参数设置为true,则jQuery返回一个深层次的副本,递归地复制找到的任何对象。否则的话,副本会与原对象共享结构。 为定义的属性将不会被复制,然而从对象的原型继承的属性将会被复制。 |
合并 settings 和 options,修改并返回 settings: var settings = { validate: false, limit: 5, name: "foo" };
结果: |
jQuery.makeArray( obj ) |
将类数组对象转换为数组对象。 类数组对象有 length 属性,其成员索引为 0 至 length - 1。实际中此函数在 jQuery 中将自动使用而无需特意转换。 |
将DOM对象集合转换为数组: var arr = jQuery.makeArray(document.getElementsByTagName("div"));
|
jQuery.inArray( value, array ) | 确定第一个参数在数组中的位置,从0开始计数(如果没有找到则返回 -1 )。 |
查看对应元素的位置:
|
jQuery.merge( first, second ) |
合并两个数组 返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素。要去除重复项,请使用$.unique() |
合并两个数组到第一个数组上: $.merge( [0,1,2], [2,3,4] )
结果:
|
jQuery.unique( array ) | 删除数组中重复元素。只处理删除DOM元素数组,而不能处理字符串或者数字数组。 |
删除重复 div 标签: $.unique(document.getElementsByTagName("div"));
,
, ...]
|
讲解:
上面的函数看着有些混乱. 看看我们以后会常用的.
首先是jQuery.merge( first, second ), 将两个数组合并. 下面这个示例说明如何使用此函数:
结果如图:
另外不能因为有了jQuery就忘记我们的原始javascript. 比merge更常用的其实是join和split函数.
merge函数会改变第一个合并的数组, 如果是我设计我就不会这么做. 因为返回值已经是合并后的数组了.如此设计让函数产生歧义.
列表中的那么多函数不再一一讲解. 先用先查. 除了 jQuery.extend 这个不得不提的函数. 下面单提一个小结讲解。
5. jQuery.extend
在开发插件的时候最常用此函数函数来处理options.
下面是fancybox插件获取options的代码:
Codesettings = $.extend({}, $.fn.fancybox.defaults, settings);
上面的代码target是一个空对象, 将默认设置defaults作为第一个对象, 将用户传入的设置setting合并到default上, setting上有的属性以setting为准. setting没有传入的属性则使用default的默认值. 然后将合并的结果复制给target并作为函数返回值返回.
看一个完整的示例:
Codevar empty = {}var defaults = { validate: false, limit: 5, name: "foo" };var options = { validate: true, name: "bar" };var settings = jQuery.extend(empty, defaults, options);
结果:
Codesettings == { validate: true, limit: 5, name: "bar" }empty == { validate: true, limit: 5, name: "bar" }
target参数要传递一个空对象是因为target的值最后将被改变.比如:
Codevar defaults = { validate: false, limit: 5, name: "foo" };var options = { validate: true, name: "bar" };var settings = jQuery.extend(defaults, options);
上面的代码将defaults作为target参数, 虽然最后settings的结果一样, 但是defaults的值被改变了! 而插件中的默认值应该都是固定! 所以使用时请注意target参数的用法.
下面是我的完整示例和结果:
结果:
七.测试工具函数
测试工具函数主要用于判断对象是否是某一种类型, 返回的都是Boolean值:
jQuery.isArray( obj )
jQuery.isFunction( obj )
同时别忘记了javascript中自带的isNaN和isFinite:
Codevar test = "123";alert(isNaN(test));alert(isFinite(test));
isNaN函数判断参数是否是非数字. 如果是数字则返回false.
isFinite函数检查其参数是否是无穷大.如果参数是 NaN(非数字),或者是正、负无穷大的数,则返回 false.否则返回true.
八.字符处操作工具函数
目前核心类库中只有一个字符串工具函数:
jQuery.trim( str )
返回值: string
说明:去掉字符串起始和结尾的空格。
举例:
去掉字符串起始和结尾的空格:
Code$.trim(" hello, how are you? ");
结果:
Code"hello, how are you?"
九.Url操作工具函数
jQuery.param( obj )
返回值:string
说明:
将表单元素数组或者对象序列化。是.serialize()的核心方法。
数组或jQuery对象会按照name/value对进行序列化,普通对象按照key/value对进行序列化
举例:
Code var params = { width:1680, height:1050 }; var str = jQuery.param(params); $("#results").text(str);
结果:
width=1680&height=1050
jQuery将其归为Urls分类, 因为此方法通常用于发送GET请求时将对象作为urls参数传递给服务端.
十. 扩展工具函数与jQuery包装集函数
扩展工具函数只需要对jQuery(即"$")进行扩展. 通常开发工具函数或者插件的人希望在开发时使用"$", 但因为"$"有可能和其他脚本库冲突, 所以通常我们使用下面的语法开发工具函数:
Code (function($) { $.myExtendMethod = function(o) { alert(0); }; })(jQuery);
在函数体内的"$"能保证是代表jQuery对象.
然后使用这种方式开发不能享受到智能感知的便利. 一般我们将扩展工具函数和扩展jQuery包装集函数都放在一个单独的文件中.
下面这个示例演示如何添加自定义的jQuery工具方法和jQuery包装集方法:
Code/// <reference path="jquery-1.3.2-vsdoc2.js" />jQuery.myExtendMethod = function(o){ /// <summary> /// 扩展方法注释. /// </summary> /// <param name="o" type="String">参数提示文字</param> /// <returns type="string" >返回值提示文字</returns> alert(0);}; jQuery.fn.myExtendMethod = function(o){ /// <summary> /// 扩展方法注释. /// </summary> /// <param name="o" type="String">参数提示文字</param> /// <returns type="string" >返回值提示文字</returns> alert(0);};
通过第一行reference, 我们可以在此js文件中继续使用jQuery脚本智能感知.
jQuery.myExtendMethod方法扩展的工具函数.
jQuery.fn.myExtendMethod方法扩展的是jQuery包装集函数, 即为使用$()获取到的对象添加了方法.
同理使用XML注释, 比如<summary> 还可以为自定义方法添加智能感知提示.脚本中的XML注释和.NET中的一样, 有关.NET中的XML注释可以参考我的另外一篇文章:
使用.NET中的XML注释(一) -- XML注释标签讲解
十一.总结
jQuery提供了许多的工具函数, 在一般情况下可以满足我们的需要. 但是对于像JSON格式化一类的操作, 需要我们自己扩展, 现有的各种扩展组件资源将提高我们的开发效率, 本系列Ajax章节就介绍的一个JSON序列化的组件jQuery.json. 更多的组件需要大家在工作中挖掘.
Jquery数组和对象操作相关推荐
- jquery数组及对象赋值不影响原对象及数组的方法
1.对象 New = Object.assign({},Old) New = JSON.parse(JSON.stringify(Old )) 2.数组 New = $.extend(true,{}, ...
- jQuery学习笔记系列(一)——入口函数,jQuery对象和DOM对象,jQuery选择器、样式操作、效果(显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列)
day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点 能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别 能够写出常用的 ...
- jQuery简介、引入jQuery、jQuery核心函数、jQuery对象、jQuery对象操作class、addclass补充、jQuery对象复制——jQuery
目录 一.jQuery简介 二.引入jQuery 三.jQuery核心函数 四.jQuery对象 五.jQuery对象操作class 六.addClass补充 七.jQuery对象复制 一.jQuer ...
- js对象、数组、字符串操作总结(保姆级教程)
对象操作 1. 扩展运算符 作用是遍历某个对象或者数组 testMethod() {// 三个点 ... 俗称扩展运算符或延展运算符,需要注意的是扩展运算符在拷贝的时候只能深拷贝第一层,第二层及以下都 ...
- jq数组赋值 java_js,jquery,数组操作小结
详解jQuery之数组处理: jQuery的数组处理,便捷,功能齐全. 最近的项目中用到的比较多,深感实用,一步到位的封装了很多原生js数组不能企及的功能. 最近时间紧迫,今天抽了些时间回过头来看 j ...
- JQuery和原生JS遍历数组和对象的对比
目录 1 遍历数组 1.1 JQuery遍历数组 1.2 原生JS遍历数组 2 遍历对象 2.1 JQuery遍历对象 2.2 原生JS遍历对象 1 遍历数组 1.1 JQuery遍历数组 在JQue ...
- 数组中数组/嵌套对象数组的遍历操作
数组中数组/嵌套对象数组的遍历操作 总结以下方法 1.for i in arr (推荐) 2.arr.foreach(item=>{ item.foreach(item2=>{ } ) } ...
- jquery html对象 转换成字符串,JQuery - 将'HTMLDivElement'对象数组转换为字符串
我过滤页面上的元素,然后检查显示的项目数,如果少于一定数量,我想使用$ .get()加载更多项目.JQuery - 将'HTMLDivElement'对象数组转换为字符串 我正在使用同位素插件,它要求 ...
- jQuery数组对象转javascript数组
当我们在前端开发中,使用了jQuery时,我们通常通过$(".box-item")的方式获取的是一个jQuery对象是一个类数组对象,当我们需要向后台传输的数据中,使用的是java ...
最新文章
- 如何清除SQL数据库日志,清除后对数据库有什么影响
- 算法全覆盖,还能玩星际争霸,开源决策智能平台OpenDILab面世
- 笔记(2015-07-24)
- MySQL 8.0 error 2059: Authentication plugin 'caching_sha2_password' cannot be loaded
- oracle ogg11.2.0.3,ogg在oracle database 11.2.0.3上还是谨慎使用集成捕捉模式
- Pandas 文本数据方法 cat()
- RMDB与hadoop的实时整合
- Nginx 从入门到放弃(三)
- KELL 平台 DM9000驱动
- VK1640脚位定义图
- 【渝粤教育】电大中专学前教育学作业 题库
- 它来了,指数基金定投实操!
- mastercam9.1按alt键卡机,mastercam输入参数卡机需要win10输入法兼容性设置
- Matching the Blanks: Distributional Similarity for Relation Learning (通篇翻译)
- FMCW雷达动作原理
- 编程语言学习——0基础C语言入门
- 程序设计 | python | Hello World的条件输出
- 计算机网络-数据链路层1
- 人机混合智能的哲学思考
- 双系统下利用MbrFix.exe卸载LINUX系统
热门文章
- java通配符有哪些
- html5 dreamlive,TME live追梦之夜线上演唱会,Dream Team为梦想而战
- 五行顺口溜_五行纳音口诀,五行相生相克歌诀
- test block.html文件不存在,我的世界testforblocks原版命令方块指令解读
- VB的农历算法(1900-2090)
- 60秒链快讯 | 火牛视频投资团队信息涉嫌造假;EOS社区论坛称其日交易量接近100万笔
- PS常用修图命令与工具速览
- idea系列:Intellij idea自动生成序列化id 快捷键
- Python实现暗通道去雾算法——清晰还原雾天景色
- SpringCloud组件OpenFeign——默认HTTP请求方式