jquery中加动画,位置大小操作,操作节点时间监听和绑定,each方法,pc端特效制作,页面滚动动画,tab菜单,回到顶部,呼吸灯轮播图等

    1.加动画 

      show()显示  hide()隐藏  toggle();// 切换显示隐藏,如果显示则隐藏,反之

      slideDown()下拉  slideUp()上拉   slideToggle() 上拉下拉切换

     //淡入和淡出

     fadeIn()   fadeOut()   fadeTo() ;//切换淡入和淡出

     //自定义动画(需要定位)

      animate({},事件)     stop() 停止动画  (所有动画之前添加一个stop,显示隐藏除外,避免动画重复执行)

2.位置大小操作

    //获取left和top值,相对于视口(游览器)的距离

     标签.offset().left   例:$('.donghua').offset().left

     标签.offset().top   例:$('.donghua').offset().top

   //获取滚动距离  滚动事件 scroll()

     标签.scrollTop

     标签.scrollleft

 //获取宽高

    标签.width()  宽    例:$('.donghua').width()

    标签.height() 高    例:$('.donghua').height()

3.操作节点操作 

   empty() 清空(只清空内容)  例:$('.donghua').empty()

   remove() 移除(标签和内容一起移除)

   clone()复制   例:$('p').clone().appendTo('body') 将所有的p标签,并插入到body中去

   after() 标签之后插入

   before()标签之前插入

   prepend( ) 前面追加(第一个元素)

   append()标签  标签最后追加内容(最后一个元素)  追加元素在原文档中存在,移除之前的

   appendTo() 将某个标签添加到父元素标签中

注:append();//被选元素结尾(仍在内部) 插入指定内容

4.事件监听和绑定 on() off() 

    1.标签.on(事件类型,回调函数);可以添加多个事件

     例:$('.box').on(click,function(){})

    2.添加单击和鼠标移入事件

     $('button').eq(0).click(function(){//单击

       $('.box').on('click mouseover',function(){

         console.log('鼠标点击移入');

      })

      })

    //移除单击事件

      $('button').eq(1).click(function(){

       $('.box').off('click');

}

5.each方法  each方法也叫迭代,简单来说就循环

   注意:jquery中有隐式迭代,不需要我们在遍历某些元素操作,不一样的操作需要自己实现

例:[批量给标签添加事件 ,但是每个标签内容不一样],就可以使用each方法

        each就是一个简单的for循环

      $('#ul>li').each(function(index,element){

      $(element).css('opacity',(index+1)/10;//透明度化

     })

6.pc端特效

   1)开关灯

       $('button').click(function(){

            $('body').toggleClass('black') ;//移除和设置所有body元素的black类切换

      })

  2)购物车下拉菜单

     $('.box').hover(function(){

     $('.box .menu').stop().slideToggle() ;//slideToggle设置所有菜单下拉想切换

    })

   3)侧边二级菜单

        $('.nav .subnav').hide()隐藏

         $('.nav .item).click(function(){

           $(this).children('ul').slideDown();

            $(this).silbings('item').children('ul).slideUp()

          })

   4)轮播图圆点   .active{color:red}

          $('li').click(function(){

             $(this).addClass('active').silbings().removeClass('active) ;;//当前元素和他的兄弟元素

         })

 5)全选和反选

       $('button').eq(0).click(function(){//第一次点击

         $('input:checkbox').prop('checked',true);//全选

      })

     $('button').eq(1).click(function(){//第二次点击   

       $('input:checkbox').prop('checked',false);//全不选

      }) 

    $('button').eq(2).click(function(){//切换

      $('input':checkbox).each(funciton(index,element){

          // $(this).prop('checked' ,!$(this).prop('checked');//切换全(不)选

             if($(this).prop('checked')){//如果checked

               $(this).prop('checked',false);

             }else{

                  $(this).prop('checked',true);

            }

       }

  })

   6)页面滚动动画

      $(window).scroll(function(){//滚动事件

        var num=$(this).scrollTop();//滚动距离

          if(num>100){

          $('.nav).css('opacity',1)

         }else{

          $('.nav).css('opacity',0.1)

           }

       })

7)回到顶部

      $('.toTop').click(function(){

        $('html,body').animate({'scrollTop',0},500);//动画

    })

8)tab菜单   切换(排他思想)

    $('.box' .title li).click(function(){  //$(this).index()索引  0,1.2.3....

     $(this).addClass('active').silbings().removeClass('active')

       $('.box .content li').eq($(this).index()).addClass('active').siblings().remove('active')

   })

9)呼吸灯轮播图                           
    var imgIndex=0;
    //右箭头点击
    $('#arrowRight').click(function(){
          imgIndex++;
          if(imgIndex>4){
            imgIndex=0;
          }
        //让第几个图片盒子显示  图片的li          (很重要)
          $('#imgBox li').eq(imgIndex).stop().fadeIn().silbings().fadeOut();
          $('#dianBox li').eq(imgIndex).addClass('current').silbings().removeClass('current');
 })
      //左箭头点击
  $('#arrowLeft').click(function(){
     imgIndex--;
     if(imgIndex<0){
    imgIndex=4
   }
    //让第几个图片的盒子显示,图片的li
           $('#imgBox li').eq(imgIndex).stop().fadeIn().silbings().fadeOut();
          $('#dianBox li').eq(imgIndex).addClass('current').silbings().removeClass('current');
   })
//小圆点的点击
$('#dianBox li').click(function(){
   imgIndex=$(this).index();
  $("#imgBox li").eq(imgIndex).stop().fadeIn().silbings().fadeOut();
  $('#dianBox li).eq(imgIndex).addClass('current').silbings().removeClass('current');
})

10)//定时器   2s执行下点击事件
var timer=setInterval(function(){
    $('#arrowRight').click()
},2000)

$('.box').hover(function(){//盒子移上去
  clearInterval(timer);.
},function(){//另外一种
   timer=setInterval(function(){
    $('#arrowRight').click();
 },2000)
})

11)发布新浪微博
//功能1：点击文本域，获得焦点，失去焦点，修改边框颜色
   $('.box textarea').focus(function(){//获得焦点
      $(this).css('border','1px solid orange');
      由于input会有默认的蓝色边框，去掉方式
       $(this).css({
          border:'1px solid orange',
          outline:'none'    //去掉input默认蓝色边框，jquery不能在style中写
         }）
  })
  $('.box textarea').blur(function(){//失去焦点‘
    $(this).css('border','1px solid red');
 })

12)

//功能2：监听文本域的弹起事件，获得文本域长度，添加提示文字个数
$('.box textarea').keyup(function(){ //键盘弹起事件
    var vallen=$(this).val().length；//文本域长度val
   if(vallen>120){
      $('.box span').text(`你已经输入超过${vallen-120}个字了`).css('color','red');
   }else{
     $('.box span').text(`你还差${120-vallen}个字输入`).css('color','red');
    }
})
//功能3：点击发布按钮
 //如果内容为0，提示重新输入
 //如果内容大于120，提示重新输入
 //否则发布微博，先添加，然后隐藏，再slideDown()动画显示   (.news ul)
 //清空文本数据

$('.box button').click(function(){
   var num=$(this).val().length;
  if(num<=0){
   alert('内容为0，请重新输入');
  }else if(num>120){
    alert('内容大于120,请提示重新输入');
   }else{
     //发布微博
    //先添加
     $('.news ul').prepend(`<li><a href="#">${$('.box textarea').val()}</a><span>删除</span></li>`); 
    $('.news li').stop().hide().slideDown();
   //清空文本数据
     $('.box textarea').val('');
   }
})

//功能4:监听整个页面中.news span的元素,添加事件  (动态)
   $(document).on('click',function(){
            $(this).parent().slideUp(function(){
              $(this).remove()
    })
  })