复习-jQuery

咱就是说，发现了一个更好的方法每次把效果图制作成了一个gif，另外推荐个免费软件GIFcam很方便制作gif图，毕竟js是一门动态交互的语言对吧，没有动态的图那就是没有灵魂的所以以后就用这种方式来上传一些页面的效果交互，今天是对jQuery的复习，虽然说现在用jq的少了但是学一学还是可以的，学了不吃亏，还别说这里面还是有难得案例的逻辑性很强，就比如jq那个表单插件validate主要还是里面的属性方法这些要搞清楚。

1.

第一个案例是一个登录切换的案例，用到了jq的自触发事件，然后都在代码里了，看图吧

霍，不错不错，终于实现了动态交互，我的博客完成了一大进展，人类进入了一个新社会，然后还是一样html对应部分➕js的代码呈现，这个案例有个新鲜的点

  
    
    
    
    
  
  
    

      

        
        

          
            账号登录
          
          安全登录
          
        
        

          
          

            

              
            
            

              
            
            

              
                
                记住我
              
              忘记密码
            
            

              登录
            
            

              还没有微博? 立即注册!
            
            

              基它登录：
              
              
              
              
              
            
          
          
          

            

              
              请用最新版微博客户端扫码
            
            
还没有微博？立即注册!
          
          
          

            

              
            
            

              获取短信验证码
              
            
            

              
                
                记住我
              
              忘记密码
            
            

              登录
            
            

              还没有微博? 立即注册!
            
            

              基它登录：
              
              
              
              
              
            
          
        
      
    
    
    
   
  

2.

这一个案例，是一个多方面的案例主要运用到的技术还是jq的动画，以及它的添加节点之类的，先来两个效果展示一个是返回顶部的淡入淡出以及带有缓冲效果的返回顶部，一个是模拟客服反馈页面的显示隐藏效果

然后还有一个比较复杂一点是一个轮播版块的轮播，但是用的是节点和递归的操作去达到的

这图片大小居然还有限制，以后还要卡在十m以内，这是对应的轮播图html部分

          

            
悟语
            
              更多>>
            
          
          

            

              

                

                  
                  
作响_
                  
1分钟前
                
                

                  

                    青春，一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！
                  
                  
                
              
              

                

                  
                  
大媚子
                  
13分钟前
                
                

                  

                    人生最好的旅行，就是你在一个陌生的地方，发现一种久违的感动。独自旅行，不受羁绊。有一天，背上包，带上自己，有多远，走多远。
                  
                  
                
              
              

                

                  
                  
Honey米儿
                  
6分钟前
                
                

                  

                    任何一场旅行，都似对生活的拯救；每一个沉思的瞬间，都成就了旅行的意义。
                  
                  
                
              
              

                

                  
                  
如茅挽君
                  
16分钟前
                
                

                  

                    我想要一次旅行，到处留下足迹，和你一起。我在别人眼里，你在我心里。我想要一次旅行，不留任何足迹，独自一起。我在你的记忆，却不在你心里。我们一起走过过去和现在。
                  
                  
                
              
            
          
        

这是返回顶部和客服反馈界面

      

         返回顶部 
      
      

         意见反馈 
      
    
    

      

        
您对"当前页面"满意吗?
         
      
      

    

然后这是js部分

// 1.返回顶部淡入淡出
$('.gotop').css('display', 'none')
$(window).scroll(function() {
    if($(this).scrollTop() >= $('.view h3').offset().top){
        $('.gotop').stop().fadeIn(500)
    } else {
        $('.gotop').stop().fadeOut(500)
    }
})
// 1.1利用自动以动画做带有缓冲效果的返回顶部
$('.gotop').click(function() {
    $('html').animate({scrollTop : 0}, 500)
})
// 2.意见反馈
$('.suggest').click(function() {
    $('.sugform').show(500)
})
$('.close').click(function() {
    $('.sugform').hide(500)
})
// 3.最案例最重要内容 上下轮播
function autoPlay() {
    $('.wbdesc').prepend($('.wblist').last())
    var move = $('.wblist').first().height()
    $('.wbdesc').css('top',-move)
    $('.wbdesc').delay(1000).animate({
        top : 0
    }, 1000,function() {
        autoPlay()
    })
}
autoPlay()

3.

然后是一个记事本的案例，这个的难点在哪，在一个动画的添加，不管是新增还是删除都会有一个jq动画的效果再在动画的回调函数里面去删除

html

  
    
    
    
    
    
  
  
    

      

        
记事本
        
        
      
      

        
        

          
          
        
      
      

        
        
          合计:
          0
        
      
    

    
    
  

js部分

// 1.新增功能
$('.new-todo').keyup(function(e) {
  if (e.keyCode == 13) {
    var val = $(this).val()
    // console.log(val);
    if ($(this).val() != '') {
      $('.todo-list').prepend('
'+val+'
')
      $('.todo-list li').first().css('display', 'none').slideDown()
    }
    $(this).val('')
  }
  $('strong').text($('.todo-list').children().length)
})
// 2.删除功能
$('.todo-list').on('click','.destroy', function() {
  $(this).parent().parent().fadeOut(function() {
    $(this).remove()
    $('strong').text($('.todo-list').children().length)
  })
})

ok 差不多jQuery就这些内容了，你如果觉得还没完，那就是后面还有一些jq的插件的使用问题了，这个按着他的api来就完事了

前端爱好者，望大佬给个内推机会！！！