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>