第八周第五天笔记

2018-09-15 本文已影响0人果木山

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()方法；
  - 1. 设置图片的显示和隐藏，让每个图片隐藏，当需要显示的时候，利用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>

第八周第五天笔记

1 jQuery中的each及map

2 渐隐渐现轮播图实例

3 jQuery版左右切换轮播图实例

猜你喜欢

热点阅读