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
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章