jQuery 之 鏈式調用 & 動畫 & 尺寸 & 滾動事件 & 簡單實例

jquery鏈式調用

  • jquery對象的方法會在執行完后返回這個jquery對象,所有jquery對象的方法可以連起來寫:
    $('#div1') // id為div1的元素
    .children('ul') //該元素下面的ul子元素
    .slideDown('fast') //高度從零變到實際高度來顯示ul元素
    .parent()  //跳到ul的父元素,也就是id為div1的元素
    .siblings()  //跳到div1元素平級的所有兄弟元素
    .children('ul') //這些兄弟元素中的ul子元素
    .slideUp('fast');  //高度實際高度變換到零來隱藏ul元素
    

jquery動畫

  • 通過animate方法可以設置元素某屬性值上的動畫,可以設置一個或多個屬性值,動畫執行完成后會執行一個函數。

    $('#div1').animate({
        width:300,
        height:300
    },1000,swing,function(){
        alert('done!');
    });
    
  • 參數可以寫成數字表達式:

    $('#div1').animate({
        width:'+=100',
        height:300
    },1000,swing,function(){
        alert('done!');
    });
    

尺寸相關、滾動事件

  • 1、獲取和設置元素的尺寸
    width()、height()    獲取元素width和height  
    innerWidth()、innerHeight()  包括padding的width和height  
    outerWidth()、outerHeight()  包括padding和border的width和height  
    outerWidth(true)、outerHeight(true)   包括padding和border以及margin的width和height
    
  • 2、獲取元素相對頁面的絕對位置 : offse()
  • 3、獲取可視區高度 : $(window).height();
  • 4、獲取頁面高度 : $(document).height();
  • 5、獲取頁面滾動距離
 $(document).scrollTop();  
 $(document).scrollLeft();
  • 6、頁面滾動事件
    $(window).scroll(function(){  
        ......  
    })
    

簡單實例操作

  • 1、層級菜單

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>元素絕對位置</title>
          <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
          <script type="text/javascript">
              $(function(){
    
                  var $pos = $('.pos');
                  var pos =$pos.offset();
                  var w = $pos.outerWidth();
                  var h = $pos.outerHeight();
    
                  $('.pop').css({left:pos.left+w,top:pos.top});
    
                  $pos.mouseover(function(){
                      $('.pop').show();
                  })
    
                  $pos.mouseout(function(){
                      $('.pop').hide();
                  })
              })
          </script>
          <style type="text/css">
              .con{
                  width:600px;
                  height:600px;
                  margin:50px auto 0;
              }
              
              .box{
                  width:100px;
                  height:100px;
                  background-color:gold;
                  margin-bottom:10px;
              }
    
              .pos{
                  margin-left:500px;
              }
    
              .pop{
                  width:100px;
                  height:100px;
                  background-color:red;
                  position:fixed;
                  left:0;
                  top:0;
                  display:none;
    
              }
          </style>
      </head>
      <body>
          <div class="con">
              <div class="box"></div>
              <div class="box"></div>
              <div class="box pos"></div>
              <div class="box"></div>
          </div>
          
          <div class="pop">
              提示信息!
          </div>
    
      </body>
      </html>
    
  • 2、選項卡

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Document</title> 
          <style type="text/css">
              .btns{
                  width:500px;
                  height:50px;
              }
              .btns input{
                  width:100px;
                  height:50px;
                  background-color:#ddd;
                  color:#666;
                  border:0px;
              }
              .btns input.cur{
                  background-color:gold;
              }
              .contents div{
                  width:500px;
                  height:300px;
                  background-color: gold;
                  display:none;
                  line-height:300px;
                  text-align:center;
              }
              .contents div.active{
                  display: block;
              }
          </style>
          <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
          <script type="text/javascript">
              $(function(){
    
                  $('#btns input').click(function() {
    
                      $(this).blur();
    
                      // this是原生的對象
                      $(this).addClass('cur').siblings().removeClass('cur');
    
                      //$(this).index() 獲取當前按鈕所在層級范圍的索引值
                      $('#contents div').eq($(this).index()).addClass('active').siblings().removeClass('active');
    
                  });
              })
              
          </script>
      </head>
      <body>
          <div class="btns" id="btns">
              <input type="button" value="tab01" class="cur">
              <input type="button" value="tab02">
              <input type="button" value="tab03">
          </div>
    
          <div class="contents" id="contents">
              <div class="active">tab文字內容一</div>
              <div>tab文字內容二</div>
              <div>tab文字內容三</div>
          </div>
      </body>
      </html>
    
  • 3、置頂菜單, 滾動到頂部

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>置頂菜單</title>
          <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
          <script type="text/javascript">
              $(function(){
    
                  $(window).scroll(function() {
                      
                      var nowTop = $(document).scrollTop();
    
                      if(nowTop>200){
                          $('.menu').css({
                              position:'fixed',
                              left:'50%',
                              top:0,
                              marginLeft:-480
                          });
    
                          $('.menu_pos').show();
                      }
                      else{
                          $('.menu').css({
                              position:'static',                      
                              marginLeft:'auto'
                          });
                          $('.menu_pos').hide();
                      }
                    if(nowTop>400){
                       $('.totop').fadeIn();
                    }
                    else{
                      $('.totop').fadeOut();
                    }
                  });
                  $('.totop').click(function() {
                      
                      $('html,body').animate({'scrollTop':0});
    
                  });
              })
          </script>
          <style type="text/css">
              body{margin:0px;}
              .logo_bar{
                  width:960px;
                  height:200px;
                  background-color:#f0f0f0;
                  margin:0 auto;
                  
              }
              .menu,.menu_pos{
                  width:960px;
                  height:50px;
                  margin:0 auto;
                  background-color:gold;
                  text-align:center;
                  line-height:50px;
              }
              .menu_pos{
                  display:none;
              }
    
              .down_con{
                  width:960px;
                  height:1800px;
                  margin:0 auto;
              }
    
              .down_con p{
                  margin-top:100px;
                  text-align:center;
              }
              .totop{
                  width:50px;
                  height:50px;
                  background:url(images/up.png) center center no-repeat #000;
                  border-radius:50%;
                  position:fixed;
                  right:50px;
                  bottom:50px;
                  display:none;
              }
          </style>
    
      </head>
      <body>
          <div class="logo_bar">頂部logo</div>
          <div class="menu">置頂菜單</div>
          <div class="menu_pos"></div>
          <div class="down_con">
              <p style="color:red">網站主內容</p>
              <p>網站主內容</p>
              <p>網站主內容</p>
              <p>網站主內容</p>
              <p>網站主內容</p>
          </div>
          <a href="javascript:;" class="totop"></a>
      </body>
      </html>
    
  • 4、無縫滾動

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>無縫滾動</title>
          <style type="text/css">
              body,ul,li{margin:0;padding:0}
              ul{list-style:none;}
              .slide{
                  width:500px;
                  height:100px;
                  border:1px solid #ddd;
                  margin:20px auto 0;
                  position:relative;
                  overflow:hidden;
              }
    
              .slide ul{
                  position:absolute;
                  width:1000px;
                  height:100px;
                  left:0;
                  top:0;
              }
    
              .slide ul li{
                  width:90px;
                  height:90px;
                  margin:5px;
                  background-color:#ccc;
                  line-height:90px;
                  text-align: center;
                  font-size:30px;
                  float:left;
              }
    
              .btns{
                  width:500px;
                  height:50px;
                  margin:10px auto 0;
              }
    
          </style>
          <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
          <script type="text/javascript">
              $(function(){
                  var $ul = $('#slide ul');
                  var left = 0;
                  var deraction = 2;
    
                  $ul.html($ul.html()+$ul.html());
                  var timer = setInterval(move,30);
                  function move(){
                      left-=deraction;
                      if(left<-500){  
                          left = 0;
                      }
                      if(left>0){
                          left=-500;
                      }
                      $ul.css({left:left});
                  }
                  $('#btn1').click(function(){
                      deraction = 2;
                  });
                  $('#btn2').click(function(){
                      deraction = -2;
                  })
                  $('#slide').mouseover(function(){
                      clearInterval(timer);               
                  })
                  $('#slide').mouseout(function(){
                      timer = setInterval(move,30);           
                  })
              })
          </script>
      </head>
      <body>
          <div class="btns">
              <input type="button" name="" value="向左" id="btn1">
              <input type="button" name="" value="向右" id="btn2">
    
          </div>
          <div class="slide" id="slide">
              <ul>
                  <li>1</li>
                  <li>2</li>
                  <li>3</li>
                  <li>4</li>
                  <li>5</li>          
              </ul>
          </div>
      </body>
      </html>
    
  • 5、手風琴效果

      <!doctype html>
      <html>
      <head>
      <meta charset="utf-8">
      <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
      <style>
      *{margin:0;padding:0;}
      body{font-size:12px;}
      #accordion{width:727px; height:350px; margin:100px auto 0 auto; position:relative; overflow:hidden; border:1px solid #CCC;}
      #accordion ul{list-style:none;}
      #accordion ul li{width:643px;height:350px; position:absolute; background:#FFF;}
      #accordion ul li span{display:block;width:20px; height:350px; float:left; text-align:center; color:#FFF; padding-top:5px; cursor:pointer;}
      #accordion ul li img{display:block; float:right;}
      .bar01{left:0px;}
      .bar02{left:643px;}
      .bar03{left:664px;}
      .bar04{left:685px;}
      .bar05{left:706px;}
      .bar01 span{background:#09E0B5;}
      .bar02 span{background:#3D7FBB;}
      .bar03 span{background:#5CA716;}
      .bar04 span{background:#F28B24;}
      .bar05 span{background:#7C0070;}
      </style>
    
      <script type="text/javascript">
          $(function(){
              $('#accordion li').click(function() {       
                  $(this).animate({left:$(this).index()*21});         
                  $(this).prevAll().each(function(){              
                      $(this).animate({left:$(this).index()*21}); 
                  });
                  $(this).nextAll().each(function(){  
                      $(this).animate({left:(727-(5-$(this).index())*21)});               
                  });
              });
          })
      </script>
      <title>手風琴效果</title>
      </head>
      <body>
      <div id="accordion">
          <ul>
          <li class="bar01"><span>非洲景色01</span><img src="images/001.jpg" /></li>
          <li class="bar02"><span>非洲景色02</span><img src="images/002.jpg" /></li>
          <li class="bar03"><span>非洲景色03</span><img src="images/003.jpg" /></li>
          <li class="bar04"><span>非洲景色04</span><img src="images/004.jpg" /></li>
          <li class="bar05"><span>非洲景色05</span><img src="images/005.jpg" /></li>
          </ul>
      </div>
      </body>
      </html>
    
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 通過jQuery,您可以選取(查詢,query)HTML元素,并對它們執行“操作”(actions)。 jQuer...
    枇杷樹8824閱讀 669評論 0 3
  • 1. tab列表折疊效果 html: 能源系統事業部 崗位名稱: 工作地點 崗位名...
    lilyping閱讀 1,886評論 0 1
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,786評論 1 92
  • 請記得在進行JQuery類庫的運用時,加入JQuery類庫,并且要保證先寫文檔就緒函數 $(document).r...
    Sunshinemm閱讀 2,918評論 1 40
  • 導讀:這些竅門簡便實用,是老古玩商們幾十年的經驗總結,對清代晚期民窯瓷器的斷代有很大幫助。 1、畫粉彩或青花的盤...
    坐看云起2閱讀 2,554評論 0 0