3_5：遍历元素 + 处理数据

1）概念

//1 对一类元素做 同样的操作  用到了 隐式迭代

//2 对一类元素做 不同的操作  用到了 遍历：

2）基本语法

$('div').each(function(index,domEle){});   //方法1 主要用于遍历元素

$.each($('div'),function(index,domEle){}); //方法2 主要遍历数组 对象 处理数据

3）遍历dom元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遍历元素</title>
    <script src="jquery.min.js"></script>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
    //需求1：把每一个div的字体颜色做设置
    var arr = ['red','blue','green'];
    //需求2：把三个div里面的值加起来
    var sum = 0;
    $('div').each(function (index , domEle) {
        //回调函数第一个参数：一定是一个索引号
        //回调函数第二个参数：是一个dom元素对象 如果要使用jQuery对象的方法 需要进行对象装换
        $(domEle).css('color', arr[index]);//完成需求1
        //$(domEle);//把dom对象转换为jquery对象
        sum += parseInt($(domEle).text());//完成需求2
    });
    console.log(sum);
</script>
</body>
</html>

4）遍历数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遍历数组 对象 处理数据</title>
    <script src="jquery.min.js"></script>
</head>
<body>
<script>
    //遍历数组
    var arr = ['李白','杜甫','白居易','陶渊明'];
    $.each(arr,function (index,value) {
        //console.log(index);//index是每一个元素的索引号
        //console.log(value);//value是每一个元素的值
    });
    //遍历对象
    $.each({name:'李白',age:58},function (index, value) {
        console.log(index);//index 是属性名
        console.log(value);//value 是属性值
    });
</script>
</body>
</html>

 

posted @ 2021-03-08 15:16  棉花糖88  阅读(65)  评论(0)  编辑  收藏  举报