第八周第五天笔记

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')。

     
     
     
         
         
     
     
     
    内容1
     
    内容2
     
    内容3
     
    内容4
     
    内容5
     
    内容6
     
     
     
     
    

  • $.each(object,callback):实质是jQuery.each(),指jQuery类的静态属性方法，可以遍历jQuery获取的元素，也可以遍历原生数组和原生对象；
    • 目的：遍历任何对象和数组
    • object:被遍历的原生数组或原生对象，或jQuery获取的元素数组
    • 回调函数的实参：第一个实参为：数组索引值或对象的属性名；第二个实参为：数组每一项或对象的属性值
    • 返回值：传入的object，返回object；
    • 回调函数中可以返回布尔值true，false
    • 注意点：
      • 若object为原生数组，则回调函数中的this，与第二个参数相同；
      • 若object为原生对象，则回调函数中的this，与第二个参数不同，为一个对象；
      • 若object为jQuery获取的元素数组，则回调函数中的this，与第二个参数相同；

     
     
     
         
         
     
     
     
    内容1
     
    内容2
     
    内容3
     
    内容4
     
    内容5
     
    内容6
     
     
     
     
    

• map()
  • $().map(callback)：jQuery实例的map方法，只能遍历jQuery获得的元素数组
    • 目的：遍历$()数组，多次执行callback函数，返回callback函数的返回值；
    • callback回调函数中的实参：第一个实参为：数组索引值；第二个实参为：索引值对应的属性值，为原生JS标签元素；
    • callback回调函数中的this，为第二个实参，即原生JS标签元素；
    • callback回调函数的返回值，决定map的返回值；
    • 返回值：所有callback回调函数的返回值组成的数组，为jQuery数组，无返回值，则返回空数组；
    • 回调函数中不能设置false和true；

     
     
     
         
         
     
     
     
    内容1
     
    内容2
     
    内容3
     
    内容4
     
    内容5
     
    内容6
     
     
     
     
    

  • $.map(arr|obj,callback):jQuery类的静态方法
    • 目的：遍历arr|obj，多次执行callback函数，返回callback函数的返回值；
    • callback回调函数中的实参：第一个实参为：索引值对应的属性值或对象的属性值；第二个实参为：数组索引值或对象属性名；第三个参数：未知；
    • callback回调函数中的this，均为window；
    • 返回值：所有callback回调函数的返回值组成的数组，为原生数组，如果callback回调函数无返回值，则为空数组；
    • 回调函数中不能设置false和true；

     
     
     
         
         
     
     
     
    内容1
     
    内容2
     
    内容3
     
    内容4
     
    内容5
     
    内容6
     
     
     
     
    

2 渐隐渐现轮播图实例

• 思路：
  • 页面结构，将每一个图片进行定位，然后叠加在一起；通过改变层级，来控制哪张图片显示；
  • 渐隐渐现效果：可以分为两种
    • 1）设置图片的透明度为0，然后需要哪张图片显示的时候，将其透明度设置为1；利用animate()方法；
    • 2. 设置图片的显示和隐藏，让每个图片隐藏，当需要显示的时候，利用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+=``;
           strli+=index==0?'
  ':"
  ";
       });
       //添加内容用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代码：

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+=``;
           strli+=index==0?`
  `:`
  `;
       });
       //在boxbanner后面添加与第一张相同的一张图片，设置宽度
       str+=``;
       //插入到页面
       $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代码：