jquery遍历数组与筛选数组的方法_jquery

grep
grep()方法用于数组元素过滤筛选
grep(array,callback,invert)
array:待过滤数组;
callback:处理数组中的每个元素,并过滤元素,该函数中包含两个参数,第一个是当前数组元素的值,一个是当前数组元素的下标,即元素索引值。此函数应返回一个布尔值。另外,此函数可设置为一个字符串,当设置为字符串时,将视为“lambda-form”(缩写形式?),其中 a 代表数组元素,i 代表元素索引值。如“a > 0”代表“function(a){ return a > 0; }”
invert:布尔型可选项,默认值false,值为true或false, 如果 “invert” 为 false 或为设置,则函数返回数组中由过滤函数返回 true 的元素,当”invert” 为 true,则返回过滤函数中返回 false 的元素集
 
复制代码 代码如下:

<script type='text/javascript' src="/jquery.js"></script>
<script type="text/javascript">
$().ready(
    function(){
        var array = [1,2,3,4,5,6,7,8,9];
        var filterarray = $.grep(array,function(value){
            return value > 5;//筛选出大于5的
        });
        for(var i=0;i<filterarray.length;i++){
            alert(filterarray[i]);
        }
        for (key in filterarray){
            alert(filterarray[key]);
        }
    }
);
</script>
 

each
each的使用方法
在jQuery里有一个each方法,用起来非常的爽,不用再像原来那样写for循环,jQuery源码里自己也有很多用到each方法。
其实jQuery里的each方法是通过js里的call方法来实现的。

复制代码 代码如下:

<script type='text/javascript' src="/jquery.js"></script>
<script type="text/javascript">
$().ready(
    function(){
        var anObject = {one:1,two:2,three:3};//对json数组each
        $.each(anObject,function(name,value) {
            alert(name);
            alert(value);
        });
        var anArray = ['one','two','three'];
        $.each(anArray,function(n,value){
            alert(n);
            alert(value);
        }
        );
    }
);
</script>

inArray
jQuery.isArray(obj) 是 jQuery 1.3 新增。测试对象是否为数组。  返回值:Boolean
参数 : objObject用于测试是否为数组的对象
示例 :检测是否为数组

复制代码 代码如下:

<script type='text/javascript' src="/jquery.js"></script>
<script type="text/javascript">
$().ready(
    function(){
        var anArray = ['one','two','three'];
        var index = $.inArray('two',anArray);
        alert(index);//返回该值在数组中的键值,返回1
        alert(anArray[index]);//value is two
    }
);
</script>

map
map() 把每个元素通过函数传递到当前匹配集合中,生成包含返回值的新的 jQuery 对象。
由于返回值是 jQuery 封装的数组,使用 get() 来处理返回的对象以得到基础的数组。
.map() 方法对于获得或设置元素集的值特别有用。请思考下面这个带有一系列复选框的表单

复制代码 代码如下:

<script type='text/javascript' src="/jquery.js"></script>
<script type="text/javascript">
$().ready(
    function(){
        var strings = ['0','1','2','3','4','S','6'];
        var values = $.map(strings,function(value){
                var result = new Number(value);
                return isNaN(result) ? null:result;//isNaN:is Not a Number的缩写
            }
        );
        for (key in values) {
            alert(values[key]);
        }
    }
);
</script>

遍历json对象:

复制代码 代码如下:

<script>
var json = [{dd:'SB',AA:'东东',re1:123},{cccc:'dd',lk:'1qw'}];
for(var i=0,l=json.length;i<l;i++){
    for(var key in json[i]){
        alert(key+':'+json[i][key]);
    }
}
</script>

遍历json对象
有如下 json对象:

复制代码 代码如下:

var obj ={”name”:”冯娟”,”password”:”123456″,”department”:”技术部”,”sex”:” 女”,”old”:30};
遍历方法:
for(var p in obj){
    str = str+obj[p]+',';
    return str;
}

时间: 2024-09-15 17:26:37

jquery遍历数组与筛选数组的方法_jquery的相关文章

jquery遍历标签中自定义的属性方法_jquery

在开发中我们有时会对html标签添加属性,如何遍历处理? <ul> <li name="li1" sortid="nav_1">aaaaaaa</li> <li name="li1" sortid="nav_2">bbbbbbb</li> <li name="li1" sortid="nav_3">cccccccc&

jQuery遍历DOM节点操作之filter()方法详解_jquery

本文实例分析了jQuery遍历DOM节点操作之filter()方法.分享给大家供大家参考,具体如下: .filter(selector) 此方法用于在匹配元素中按照选择器表达式进行筛选. 记住:使用此方法必须得传入选择器表达式参数,不然会报错"'nodeType' 为空或不是对象" 另外请注意这个filter方法和jquery中的find方法的区别: filter方法是对匹配元素进行筛选,而find方法是对匹配元素的后代元素进行筛选. 从jquery1.4版本开始,filter方法又添

利用jQuery对无序列表排序的简单方法_jquery

利用jQuery对无序列表排序的原理是:获取到无序列表中的所有列表项,并转成数组形式,使用JavaScript函数对其进行排序后再次输出.其中使用到的jQuery函数有ready().get().text().each().append()和JavaScript函数sort(). 1.jQuery函数介绍 (1)jQuery函数get()--获取匹配元素集合 该函数取得所有匹配元素的一种向后兼容的方式(不同于jQuery对象,实际上是元素数组).其语法形式如下: object.get() 注:如

jQuery实现转动随机数抽奖效果的方法_jquery

本文实例讲述了jQuery实现转动随机数抽奖效果的方法.分享给大家供大家参考.具体实现方法如下: <!Doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <script src="jquery-1.6.2.min.js" type="text/jav

jQuery定义背景动态切换效果的方法_jquery

本文实例讲述了jQuery定义背景动态切换效果的方法.分享给大家供大家参考.具体如下: 通过下面的jQuery插件,你可以将图片放在一个数组里,然后告诉jQuery图片需要在什么地方背景轮换 (function($){ var defaultSettings; var divfg, divbg; var fadeInterval; var fqTimer; var currImg = 0; var displImg = 0; var running = false; // Setup setti

jQuery EasyUI datagrid实现本地分页的方法_jquery

本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法.分享给大家供大家参考.具体如下: 一般分页都是后台做,前端做无论从哪方面考虑都不合适.但是有的时候还是有这种需求. 这里重点用到了pagination的监听,以及JS数组的slice方法来完成.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></title&g

JQuery实现Ajax加载图片的方法_jquery

本文实例讲述了JQuery实现Ajax加载图片的方法.分享给大家供大家参考,具体如下: 最近在学习JQuery,想从原理上模拟一下无刷新的相册浏览. 最先想到的思路是利用缓存,也就是先显示提示消息,然后get图片,在get完的时候回调,将img标签的src改掉,由于刚刚get过,有了缓存,所以图片会立刻显示出来. 页面元素: <input class="picbtn" type="button" value="Next" /> <

jQuery调用WebMethod(PageMethod) NET2.0的方法_jquery

本文实例讲述了jQuery调用WebMethod(PageMethod) NET2.0的方法.分享给大家供大家参考,具体如下: 首先必须在WebConfig下的system.web节点加入此配置信息 <httpModules> <add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=

在jQuery中处理XML数据的大致方法_jquery

XML 全称为 可扩展标记语言,其文件结构与 HTML 类似,但是区别也很明显,HTML 只能使用已经定义的标签,如 title, body, span 等,标签种类是有限的,但是 XML 除了可以使用 HTML 的所有标签,还可以自己随意定制标签,如 person, name, sex, age 等,而且 XML 中的标签属性名称,也可以随意定制.另外二者用途方面也有明显区别,HTML 主要用来展示数据,XML 则侧重于数据的存储和传输.例如下面这个简单的 XML 文档用以存储员工信息: <员

基于jquery的手风琴图片展示效果实现方法_jquery

本文实例讲述了基于jquery的手风琴图片展示效果实现方法.分享给大家供大家参考.具体实现方法如下: 代码运行效果如下图所示: index.html页面代码如下: 复制代码 代码如下: <!DOCTYPE html> <html class=''> <head>     <title>一款基于jquery的手风琴图片展示效果demo</title>     <style class="cp-pen-styles">