jQuery遍历

jQuery遍历

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

// 遍历div列表，index是下标，item是元素
$("div").each(function(index,item){
    console.log(index,item);
})

var arr=Array.from($("div"));
arr.forEach(function(item,index){
    console.log(index,item);
})

var arr=[
    {site:"新浪",url:"http://www.sina.com"},
    {site:"京东",url:"http://www.jd.com"},
    {site:"腾讯",url:"http://www.qq.com"},
    {site:"百度",url:"http://www.baidu.com"},
    {site:"网易",url:"http://www.163.com"},
]
// 遍历div列表，给每个div元素添加html超链接
// 将arr数组中每个对象里面的属性使用字符串拼接的方式添加到div元素中
// 方法一：
$("div").each(function(index,item){
    $(item).html("<a href='"+arr[index].url+"'>"+arr[index].site+"</a>")
})
// 方法二：
// ES6写法
$("div").each((index,item)=>{
    $(item).html(`<a href='${arr[index].url}'>${arr[index].site}</a>`);
})

// 函数也是对象
function fn(){
    var m2=function(){
        console.log("A");
    }
}
fn.a=10;// 增加a属性，就是属性值
fn.m1=function(){// 增加m1函数就叫做方法
    console.log("a");
}
// fn是函数也是对象，因此可以有m1的方法
fn.m1();
// fn.m2();// 错误的

// $("div")  jQuery对象，它是一个列表
console.log($("div"));
// $  是jQuery函数 函数也是对象
console.log($);
$.each($("div"),function(index,item){
    console.log(index,item);
})

// $.each可以遍历数组
$.each(arr,function(index,item){
    console.log(index,item);
})

// 遍历对象
var obj={a:1,b:2,c:3,d:4};
$.each(obj,function(prop,value){
    console.log(prop,value);
})