jQuery:数组遍历【阶段重点】
<script> $(function(){ var arr = ['a','b','c','d']; //js普通FOR循环遍历 for(var i=0;i<arr.length;i++){ console.log("索引:"+i+" 元素:"+arr[i]); } console.log("-----"); //Jquery循环遍历1 $(arr).each(function (index) { console.log("索引:"+index+" 元素:"+this); }); console.log("-----"); //Jquery循环遍历2 $.each($(arr),function (index) { console.log("索引:"+index+" 元素:"+this); }); }); </script>
建议使用第一种。
格式2:
function(index,n){
//index 为当前遍历的索引,从0开始
//n 就是this,为当前遍历出来的元素,这个元素是JS对象
}
jQuery:事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #d1{ background-color: #87CEFA; width:300px; height:300px; } #d2{ background-color:bisque; width:300px; height:300px; } </style> <script src="../js/jquery-3.3.1.min.js"></script> <script> $(function(){ //页面加载完成时, //为d1加入鼠标移入和点击事件 $("#d1").mouseover(function () { //修改内容体为红色字体 $(this).html("<font color='red'>我是div1</font>"); }).click(function () { alert(this.innerHTML); }); //为d2加入鼠标移出事件 $("#d2").mouseout(function () { alert(this.innerHTML); }); }); </script> </head> <body> <div id="d1">我是div1</div> <div id="d2">我是div2</div> </body> </html>
链式:jq对象.事件1().事件2();