1 jQuery中的each及map
- each()
-
$().each(callback):jQuery实例的each方法，只能遍历jQuery获得的元素数组；- 目的：遍历
$()数组，多次执行callback函数，每执行一次向callback中传入两个实参； - callback回调函数中的实参：第一个实参为：数组索引值；第二个实参为：索引值对应的属性值，为原生JS标签元素；
- callback回调函数中的this，为第二个实参，即原生JS标签元素；
- 返回值：原来实例对象
$()；回调函数中无论是否添加返回值，都不会影响each的返回值； - 回调函数返回布尔值true，false
-
return true:跳至下一个循环(就像在普通的循环中使用'continue')。 -
return false:将停止循环 (就像在普通的循环中使用 'break')。
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实例each</title> </head> <body> <div>内容1</div> <div>内容2</div> <div>内容3</div> <div>内容4</div> <div>内容5</div> <div>内容6</div> <script src="js/jquery.js"></script> <script> var $aDiv=$("div");//获取的是一个jQuery元素数组，每一项为元素标签 var res=$aDiv.each(function (index,item) { //传给callback的实参为两个，一个是数组索引值，一个是索引值对应的属性值，为原生JS标签元素 //回调函数中的this，指的是item，即原生JS标签元素； console.log(this===item);//结果为true; /*var obj={}; return obj;*/ //无论回调函数中是否添加返回值，都不会影响each的返回值； if(index==3){ return true;//跳过此循环 } console.log(index);//结果为：0,1,2,4,5 }); console.log(res)//结果为原来实例对象$aDiv; </script> </body> </html> - 目的：遍历
-
$.each(object,callback):实质是jQuery.each(),指jQuery类的静态属性方法，可以遍历jQuery获取的元素，也可以遍历原生数组和原生对象；- 目的：遍历任何对象和数组
- object:被遍历的原生数组或原生对象，或jQuery获取的元素数组
- 回调函数的实参：第一个实参为：数组索引值或对象的属性名；第二个实参为：数组每一项或对象的属性值
- 返回值：传入的object，返回object；
- 回调函数中可以返回布尔值true，false
- 注意点：
- 若object为原生数组，则回调函数中的this，与第二个参数相同；
- 若object为原生对象，则回调函数中的this，与第二个参数不同，为一个对象；
- 若object为jQuery获取的元素数组，则回调函数中的this，与第二个参数相同；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>静态属性each</title> </head> <body> <div>内容1</div> <div>内容2</div> <div>内容3</div> <div>内容4</div> <div>内容5</div> <div>内容6</div> <script src="js/jquery.js"></script> <script> //1 原生数组 var aDiv=document.getElementsByTagName("div"); var res=$.each(aDiv,function (index,item) { //item为原生JS标签元素 console.log(item); //回调函数中的this为item; console.log(this===item);//结果为true; }); console.log(res);//结果为：HTMLCollection元素集合，即aDiv原生JS数组； //2 原生对象 var obj={name:"guobin",age:18}; var ree=$.each(obj,function (index,item) { console.log(index); console.log(item); console.log(this);//此时的this不再是item; }); console.log(ree);//返回obj /*打印结果为： * name * guobin * String {"guobin"} * age * 18 * Number {18} * {name: "guobin", age: 18} * */ //3 jQuery元素 var rem=$.each($("div"),function (index,item) { console.log(index); console.log(item); console.log(this===item);//结果为true;即this跟item相同； }); console.log(rem);//返回的是$("div")，jQuery元素数组； </script> </body> </html>
-
- map()
-
$().map(callback)：jQuery实例的map方法，只能遍历jQuery获得的元素数组- 目的：遍历
$()数组，多次执行callback函数，返回callback函数的返回值； - callback回调函数中的实参：第一个实参为：数组索引值；第二个实参为：索引值对应的属性值，为原生JS标签元素；
- callback回调函数中的this，为第二个实参，即原生JS标签元素；
- callback回调函数的返回值，决定map的返回值；
- 返回值：所有callback回调函数的返回值组成的数组，为jQuery数组，无返回值，则返回空数组；
- 回调函数中不能设置false和true；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实例map</title> </head> <body> <div>内容1</div> <div>内容2</div> <div>内容3</div> <div>内容4</div> <div>内容5</div> <div>内容6</div> <script src="js/jquery.js"></script> <script> var $aDiv=$("div");//获取的是一个jQuery元素数组，每一项为元素标签 var res=$aDiv.map(function (index, item) { console.log(index);//为数组的索引 console.log(item);//为数组索引对应的原生JS标签元素 console.log(this===item);//结果为true; return item; }); console.log(res);//返回值为：每个回调函数中返回值，组成的一个jQuery数组； </script> </body> </html> - 目的：遍历
-
$.map(arr|obj,callback):jQuery类的静态方法- 目的：遍历
arr|obj，多次执行callback函数，返回callback函数的返回值； - callback回调函数中的实参：第一个实参为：索引值对应的属性值或对象的属性值；第二个实参为：数组索引值或对象属性名；第三个参数：未知；
- callback回调函数中的this，均为window；
- 返回值：所有callback回调函数的返回值组成的数组，为原生数组，如果callback回调函数无返回值，则为空数组；
- 回调函数中不能设置false和true；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>静态map</title> </head> <body> <div>内容1</div> <div>内容2</div> <div>内容3</div> <div>内容4</div> <div>内容5</div> <div>内容6</div> <script src="js/jquery.js"></script> <script> //1 传入的为jQuery元素 var $aDiv=$("div");//获取的是一个jQuery元素数组，每一项为元素标签 var res=$.map($aDiv,function (item,index) { console.log(item);//为数组索引对应的原生JS标签元素 console.log(index);//为数组的索引 console.log(this);//结果为window; return item; }); console.log(res);//返回值为：每个回调函数中返回值，组成的一个原生数组； //2 传入的是原生数组 var aDiv=document.getElementsByTagName("div"); var ree=$.map(aDiv,function (item,index) { console.log(item);//为数组索引对应的原生JS标签元素 console.log(index);//为数组的索引 console.log(this);//结果为window; return 3 }); console.log(ree)//返回值为：每个回调函数中返回值，组成的一个原生数组； //3 传入的是原生对象 var obj={name:"dd",age:44}; var rem=$.map(obj,function (val,attr) { console.log(val);//对象属性值 console.log(attr);//对象属性名 console.log(this);//结果为window; return 1; }); console.log(rem)//返回值为：每个回调函数中返回值，组成的一个原生数组； </script> </body> </html> - 目的：遍历
-
2 渐隐渐现轮播图实例
- 思路：
- 页面结构，将每一个图片进行定位，然后叠加在一起；通过改变层级，来控制哪张图片显示；
- 渐隐渐现效果：可以分为两种
- 1）设置图片的透明度为0，然后需要哪张图片显示的时候，将其透明度设置为1；利用animate()方法；
- 设置图片的显示和隐藏，让每个图片隐藏，当需要显示的时候，利用fadeIn()或show()来显示，利用fadeOut()或hide()隐藏；
- 知识点：
- jQuery动态插入DOM结构后，需要重新获取元素集合，无DOM映射；
- 在对每个图片进行设置时，必须要设置层级，再设置效果；
- 动画操作中：如show(),hide(),fadeIn(),fadeOut(),slideUp()等，均是对元素的显示和隐藏进行效果设置，而animate()则可以进行其他属性效果的设置；
- 代码：
- JS代码：
//获取元素 var $oWrap=$(".wrap"); var $boxBanner=$(".wrap .boxbanner"); var $ul=$(".wrap ul"); var $aLeft=$(".Left"); var $aRight=$(".Right"); var $aImg=null; var $aLi=null; var data=null; var n=-1; var timer=null; //获取数据 getData(); function getData() { $.ajax({ type: "get", url: "data/data1.txt", dataType: "json", async: false, success: function (val) { data=val; } }) } //绑定数据 blind(); function blind() { var str=""; var strli=""; //遍历数组对象，data为原生数组 $.each(data,function (index, item) { str+=`<img src="" realImg="${item.imgSrc}" alt="">`; strli+=index==0?'<li class="active"></li>':"<li></li>"; }); //添加内容用html() $boxBanner.html(str); $ul.html(strli); $aLi=$ul.children("li"); } //图片延迟加载 lazyImg(); function lazyImg() { //jQuery中无DOM映射，所以在DOM操作后，要重新获取元素 //重新获取aImg $aImg=$boxBanner.children("img"); $aImg.each(function (index, item) { var frgImg=new Image; frgImg.src=$(item).attr("realImg"); frgImg.onload=function () { item.src=this.src; frgImg=null; } }); autoMove();//运行一次，让第一个先出现 $ul.css("zIndex",1).stop().fadeIn(1000); timer=setInterval(autoMove,2000); } //图片自动轮播 function autoMove() { //通过全局n来控制哪张图片显示 n++; n%=$aImg.length; //先提高层级，再进行效果设置； /*$aImg.eq(n).css("zIndex",1).stop().fadeIn(1000,function () { $(this).siblings("img").css("zIndex",0).stop().hide(); }).siblings("img").css("zIndex",0);*/ //简化代码 $aImg.eq(n).css("zIndex",1).stop().fadeIn(1000).siblings("img").css("zIndex",0).stop().fadeOut(1500); //add(); autoMoveli(); } //思路2： /* function add() { $aImg.each(function (index, item) { if(index==n){ $(item).css("zIndex",1).stop().fadeIn(1000,function () { $(this).siblings("img").css("zIndex",0).hide(); }) }else{ $(item).css("zIndex",0); } }) }*/ //焦点自动轮播 function autoMoveli() { $aLi.eq(n).addClass("active").siblings("li").removeClass("active"); } //鼠标移入停止，移出继续事件 链式操作 $oWrap.mouseover(function () { clearInterval(timer); $aLeft.show(); $aRight.show(); }).mouseout(function () { timer=setInterval(autoMove,2000); $aLeft.hide(); $aRight.hide(); }); //点击焦点手动切换 $aLi.click(function () { //this为点击事件时对应的原生JS标签元素 n=$(this).index(); $aImg.eq(n).css("zIndex",1).stop().fadeIn(1000).siblings("img").css("zIndex",0).stop().fadeOut(1500); autoMoveli(); }); //点击左右按钮手动切换 $aRight.click(autoMove); $aLeft.click(function () { if(n<=0){ n=$aImg.length; } n--; $aImg.eq(n).css("zIndex",1).stop().fadeIn(1000).siblings("img").css("zIndex",0).stop().fadeOut(1500); autoMoveli(); });- html代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>渐隐渐现轮播图</title> <style> *{ margin: 0; padding: 0; list-style: none; } .wrap{ width: 750px; height: 290px; margin: 20px auto; position: relative; background: url("image1/7.png") no-repeat center; background-size: cover; } .wrap .boxbanner{ width: 750px; height: 290px; } .wrap .boxbanner img{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: none; z-index: 0; } /*.wrap .boxbanner img:first-child{ opacity: 1; filter: alpha(opacity=1); z-index: 1; }*/ .wrap ul{ position: absolute; right: 20px; bottom: 20px; z-index: 1; display: none; } .wrap ul li{ width: 20px; height: 20px; float: left; border-radius: 50%; background-color: lightslategray; margin-left: 10px; } .wrap ul li.active{ background-color: red; } .wrap a{ position: absolute; width: 43px; height: 67px; top: 50%; margin-top: -22px; background: url("image1/6.png") no-repeat lightslategray; display: none; opacity: 0.4; filter: alpha(opacity=40); z-index: 1; } .wrap a:hover{ opacity: 0.8; filter: alpha(opacity=80); } .wrap a.Left{ left: 20px; background-position: 0 0; } .wrap a.Right{ right: 20px; background-position: -62px 0; } </style> </head> <body> <div class="wrap"> <div class="boxbanner"> <!--<img src="" realImg="image1/1.jpg" alt=""> <img src="" realImg="" alt=""> <img src="" realImg="" alt=""> <img src="" realImg="" alt=""> <img src="" realImg="" alt="">--> </div> <ul> <!--<li class="active"></li> <li></li> <li></li> <li></li> <li></li>--> </ul> <a href="javascript:void(0);" class="Left"></a> <a href="javascript:void(0);" class="Right"></a> </div> <script src="js/jquery.js"></script> <script src="js/banner2.js"></script> </body> </html>
3 jQuery版左右切换轮播图实例
- 代码：
- JS代码：
//获取元素 var $oWrap=$(".wrap"); var $boxBanner=$oWrap.find(".boxbanner"); var $aImg=null; var $ul=$oWrap.find("ul"); var $aLi=null; var $aLeft=$oWrap.find(".Left"); var $aRight=$oWrap.find(".Right"); var data=null; var n=0; var timer=null; //获取数据 getData(); function getData() { $.ajax({ type: "get", url: "data/data2.txt", async: false, dataType: "json", success: function (val) { data=val; } }) } //绑定数据 blind(); function blind() { var str=""; var strli=""; $.each(data,function (index, item) { str+=`<img src="" realImg="${item.imgSrc}" alt="">`; strli+=index==0?`<li class="active"></li>`:`<li></li>`; }); //在boxbanner后面添加与第一张相同的一张图片，设置宽度 str+=`<img src="" realImg="${data[0].imgSrc}" alt="">`; //插入到页面 $boxBanner.html(str); //重新获取数据$aImg,无DOM映射 $aImg=$boxBanner.children("img"); $boxBanner.css({ width: $aImg[0].offsetWidth*$aImg.length }); $ul.html(strli); //重新获取数据 $aLi=$ul.children("li"); } //图片延迟加载 lazyImg(); function lazyImg(){ $aImg.each(function (index,item) { var frgImg=new Image; frgImg.src=$(item).attr("realImg"); frgImg.onload=function () { item.src=this.src; frgImg=null; } }); timer=setInterval(autoMove,3000); } //自动轮播 function autoMove() { n++; n%=$aImg.length; /*$boxBanner.css({ left:-n*750 });*/ //设置一个运动效果 $boxBanner.stop().animate({left:-n*750},1500,function () { if(n>=$aImg.length-1){ $boxBanner.css("left",0); n=0; } }); autoMoveLi(n); } //焦点自动轮播 function autoMoveLi(m) { m%=$aImg.length-1; $aLi.eq(m).addClass("active").siblings("li").removeClass("active"); } //鼠标移入停止，鼠标移出继续 $oWrap.mouseover(function () { clearInterval(timer); $aLeft.show(); $aRight.show(); }).mouseout(function () { $aLeft.hide(); $aRight.hide(); timer=setInterval(autoMove,3000); }); //焦点手动轮播 handMoveli(); function handMoveli() { $aLi.click(function () { clearInterval(timer); n=$(this).index(); $boxBanner.stop().animate({left:-n*750},1500); autoMoveLi(n); }) } //左右按钮手动切换 $aRight.click(autoMove); $aLeft.click(function () { if(n<=0){ n=$aImg.length-1; $boxBanner.css({left:-n*750}); } n--; $boxBanner.stop().animate({left:-n*750},1500,function () { if(n<=0){ n=$aImg.length-1; $boxBanner.css({left:-n*750}); } }); autoMoveLi(n); });- html代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>左右切换轮播图</title> <style> *{ margin: 0; padding: 0; list-style: none; } .wrap{ width: 750px; height: 290px; margin: 20px auto; position: relative; overflow: hidden; } .wrap .boxbanner{ width: 3000px; height: 290px; position: absolute; left: 0; top: 0; } .wrap .boxbanner img{ width: 750px; height: 290px; float: left; } .wrap ul{ position: absolute; right: 40px; bottom: 20px; } .wrap ul li{ width: 20px; height: 20px; border-radius: 50%; background-color: lightslategray; float: left; margin-left: 20px; } .wrap ul li.active{ background-color: red; } .wrap a{ position: absolute; width: 43px; height: 67px; top: 50%; margin-top: -34px; background: url("image1/6.png") no-repeat lightslategray; opacity: 0.5; filter: alpha(opacity:50); display: none; } .wrap a:hover{ opacity: 1; filter: alpha(opacity:100); } .wrap a.Left{ left: 20px; background-position: 0 0; } .wrap a.Right{ right: 20px; background-position: -62px 0; } </style> </head> <body> <div class="wrap"> <div class="boxbanner"> <!--<img src="image1/1.jpg" alt=""> <img src="image1/2.jpg" alt=""> <img src="image1/3.jpg" alt=""> <img src="image1/4.jpg" alt="">--> </div> <ul> <!--<li class="active"></li> <li></li> <li></li> <li></li>--> </ul> <a href="javascript:void(0);" class="Left"></a> <a href="javascript:void(0);" class="Right"></a> </div> <script src="js/jquery.js"></script> <script src="js/bom.js"></script> </body> </html>
