jQuery学习笔记(4)

1.$.each( )函数

使用$.each( )函数可以完成指定数组或对象的遍历,语法格式如下:

$.each(obj,fn(index,value))
注意: $.each是异步操作

其中参数obj,表示要遍历的数组或对象,fn为每个遍历元素执行的回调函数,该函数包含2个参数,index表示数组的下标或对象的属性,value表示数组的元素或对象的属性值。

实现代码

<style type="text/css">
    body{font-size:13px}
    ul{padding:0px;margin:0px;list-style-type:none;
       width:260px;border-top:dashed 1px #ccc;
       border-left:dashed 1px #ccc;border-right:dashed 1px #ccc}
    ul li{border-bottom:dashed 1px #ccc;padding:8px}
    .title{background-color:#eee; font-weight:bold}
</style>
<script src="js/jquery-1.11.3.js"></script>
</head>
<body>
    <ul></ul>
    <script type="text/javascript">
        $(function() {
            var arrStu = { "张三:": "60", "李四:": "70", "王二:": "80" }
            var strContent = "<li class='title'>姓名:分数</li>";
            $.each(arrStu, function(Name, Value) {
                strContent += "<li>" + Name + Value + "</li>";
            })
            $("ul").append(strContent);
        })
    </script>
</body>

页面效果

2.$.grep()函数

$.grep() 函数使用指定的函数过滤数组中的元素,并返回过滤后的数组。
提示:源数组不会受到影响,过滤结果只反映在返回的结果数组中。
语法格式如下:

$.grep( array, function [,invert ] )

参数 描述
array Array类型 将被过滤的数组。
function Function类型 指定的过滤函数。grep()方法为function提供了两个参数:其一为当前迭代的数组元素,其二是当前迭代元素在数组中的索引。
invert Boolean类型默认值为false,指定是否反转过滤结果。如果参数invert为true,则结果数组将包含function返回false的所有元素。
var arr =$.grep( [0,1,2], function(n,i){
        return n > 0;
    });
console.log(arr);//[1,2]

var arr =$.grep( [0,1,2], function(n,i){
        return n > 0;
    },true);//返回n<=0的元素
console.log(arr);//[0]

3.$.map( )函数

使用$.map( )方法可以在遍历数组或对象成员的同时,经过回调函数的调用,然后转换到另一个新的数组中(这也是和 $.each()的最大区别)。
语法格式如下:

$.map(obj,fn(value,index))

//遍历数组
$(function(){
var arr = ["a","b","c","d"];
var arr1 = $.map(arr,function(value,index){  //注意回调函数的参数位置和$.each()的不一致
    console.log(index+value);
    var val = value.toUpperCase();//可以在回调函数中对成员进行操作,然后将其返回到新的数组中。toUpperCase()方法转换字符为大写。
    return val;//一定要使用return返回值,否则新数组接受不到
});
console.log(arr1);
 var res = Object.prototype.toString.call(obj1);//使用Object.prototype.toString.call()方法返回传入变量的类型
 console.log(res);
});
//首先依次输出遍历的结果
a0
b1
c2
d3
//输出arr1的结果(可以看出是返回值组成的新数组)
[A,B,C,D]
//输出res结果为
Object Array
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章