欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery動(dòng)態(tài)追加頁面數(shù)據(jù)以及事件委托詳解

 更新時(shí)間：2017年05月06日 11:49:00   作者：畫一生情入顏容  
這篇文章主要為大家詳細(xì)介紹了jQuery動(dòng)態(tài)追加頁面數(shù)據(jù)以及事件委托的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

我們要執(zhí)行的任務(wù)是頁面起初有一部分圖片，我們?cè)诘紫掠幸粋€(gè)More Photos的鏈接，點(diǎn)擊后，向當(dāng)前頁面后加載一部分圖片，再點(diǎn)擊該鏈接，繼續(xù)加載，直到將我們列出的頁面加載完成，此時(shí)該鏈接也消失了。

首先效果圖如下：

這個(gè)只截取了最底下的一部分頁面。在鼠標(biāo)懸停在圖片上時(shí)，還會(huì)有文字出現(xiàn)，鼠標(biāo)移出時(shí)文字消失。
我們現(xiàn)在要做的就是點(diǎn)擊底下的MorePhotos鏈接時(shí)，再加載一部分?jǐn)?shù)據(jù)，然后再點(diǎn)擊在加載一部分?jǐn)?shù)據(jù)，直到數(shù)據(jù)加載完。
首先body中代碼如下：

<div id = "container">
<h1> Photo Gallery</h1>

<div id = "gallery">
  <div class = "photo">
    <img src = "./images/1.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye ....</div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

  <div class = "photo">
    <img src = "./images/2.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye.... </div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

    <div class = "photo">
    <img src = "./images/3.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye.... </div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>
//若干圖片

</div>

 <div class = "link"><a id = "more-photos" href = "1.html"> More Photos &gt;&gt;</a></div> 
</div>

然后在同一根目錄下寫幾個(gè)HTML代碼片段，用于加載。

如，我這有一個(gè)1.html代碼如下

<div class = "photo">
    <img src = "./images/1.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye </div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

  <div class = "photo">
    <img src = "./images/2.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye </div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

    <div class = "photo">
    <img src = "./images/3.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye </div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

    <div class = "photo">
    <img src = "./images/4.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye </div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

    <div class = "photo">
    <img src = "./images/5.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye </div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

    <div class = "photo">
    <img src = "./images/6.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye </div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

在這個(gè)HTML片段中我引入了6個(gè)圖片。其他的片段如2.html等等都可以仿照上面的這個(gè)來寫。在定義好了許多個(gè)HTML片段后，利用jQuery進(jìn)行動(dòng)態(tài)追加數(shù)據(jù)。

首先引入一個(gè)jquery庫 http://libs.baidu.com/jquery/1.9.0/jquery.js

<script>
  $(document).ready(function(){
  //首先定義一個(gè)變量來記錄當(dāng)前是多少頁
    var pageNum = 1;

    //給鏈接添加點(diǎn)擊事件
    $("#more-photos").click(function(event){
      event.preventDefault();
      var $link = $(this);

      //獲得當(dāng)前所點(diǎn)鏈接的url
      var url = $link.attr('href');

      //如果該鏈接的url存在，進(jìn)行頁面追加
      if(url){
        $.get(url, function(data){
          $("#gallery").append(data);
        });

    pageNum ++;
  //總共有十個(gè)片段要追加，名稱分別為1.html,2.html ...10.html
    當(dāng)當(dāng)前頁面的總數(shù)小于總數(shù)時(shí)，進(jìn)行鏈接更新。
    if(pageNum < 10){
      $link.attr('href', './'+pageNum+'.html');
        }

    //當(dāng)將所有片段追加完成后，移除鏈接。
      else{
        $link.remove();
      }
      }
    })
  });

以上的代碼就可以進(jìn)行動(dòng)態(tài)的向頁面追加數(shù)據(jù)了。

但是在谷歌的瀏覽器中會(huì)出現(xiàn)以下的錯(cuò)誤：

jquery.js:8475 XMLHttpRequest cannot load file:///C:/Users/%E9%95%BF%E5%AD%99%E4%B8%B9%E5%87%A4/Desktop/webtest/1.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

在IE10的環(huán)境下進(jìn)行測(cè)試的，沒問題。

解決辦法就是裝一個(gè)web服務(wù)器，然后將文件拷到項(xiàng)目中，以web服務(wù)器中的路徑訪問，就沒有問題啦！形如http://localhost:8080/ajax/ajaxLoad.html

由于還有鼠標(biāo)懸浮事件，當(dāng)我們將鼠標(biāo)懸浮在某個(gè)圖片上時(shí)，就會(huì)出現(xiàn)文字，移出時(shí)，圖片上的文字消失。

$(document).ready(function(){
    $('div .photo').hover(function(){
      $(this).find('.details').fadeTo('slow', 0.7);
    },function(){
        $(this).find('.details').fadeOut('slow');
    })
  });

或者可以將上面的代碼組合起來減少冗余代碼：

$(document).ready(function(){
  $('div.photo').on('mouseenter mouseleave', 
      function(event){
      var $details = $(this).find('.details');
      if(event.type == 'mouseenter'){
        $details.fadeTo('slow', 0.7);
        //0.7代表的是透明度
      }
      else{
        $details.fadeOut('slow');
      }
    })
});

當(dāng)我們使用上面的兩種代碼為每個(gè)圖片添加鼠標(biāo)懸浮事件時(shí)，只有最初頁面上的那些圖片才會(huì)被綁定事件，而經(jīng)過動(dòng)態(tài)加載的圖片上卻沒能綁定上事件。因?yàn)槭录幚沓绦蛑粫?huì)添加到調(diào)用方法時(shí)已經(jīng)存在的元素上，像通過這種動(dòng)態(tài)追加的元素，不會(huì)綁定那些事件。

所以有兩種解決方案：

1. 在動(dòng)態(tài)加載后重新綁定事件處理程序
2. 一開始就把事件綁定在存在的元素上，依賴于事件冒泡。

接下來就是使用jquery的委托方法;

$(document).ready(function(){
    $('#gallery').on('mouseenter mouseleave', 'div.photo', function(event){

      var $details = $(this).find('.details');
      if(event.type == 'mouseenter'){
        $details.fadeTo('slow', 0.7);
      }
      else{
        $details.fadeOut('slow');
      }
    })
  })

$(‘#gallery').on(‘mouseenter mouseleave', ‘div.photo', function(event)中，在將'div.photo'作為第二個(gè)參數(shù)的情況下，.on()方法會(huì)把 this映射到 gallery中與該選擇符匹配的元素。換句話說，就是this指向gallery中的 div class= ‘photo'的元素。

所以在最后追加的頁面中，由于都屬于gallery 下的元素，所以每一個(gè)圖片都會(huì)加上相應(yīng)的事件。

或許在你不知道要添加的頁面屬于哪個(gè)父級(jí)元素的話，可以將$(‘#gallery').on( )中的'#gallery'替換成document。這樣就不必?fù)?dān)心選錯(cuò)容器。因?yàn)閐ocument是頁面中所有元素的祖先。

但使用document有弊端：

當(dāng)DOM嵌套結(jié)構(gòu)很深，事件冒泡通過大量的祖先元素會(huì)有較大的性能損失。
但是還會(huì)有其他的原因讓我們選擇document作為委托作用域。
一般來說，只有當(dāng)相應(yīng)的DOM元素加載完畢，才會(huì)給它綁定事件處理程序。這就是為什么我們要把代碼放到$(document).ready(function(){}內(nèi)部的原因。可是document元素是隨著頁面加載幾乎就立即可以調(diào)用的。把處理程序綁定到document不用等到完整的DOM構(gòu)建結(jié)束。如上面的代碼可以寫為：‘

(function($){
    $(document).on('mouseenter mouseleave', 'div.photo', function(event){

      var $details = $(this).find('.details');
      if(event.type == 'mouseenter'){
        $details.fadeTo('slow', 0.7);
      }
      else{
        $details.fadeOut('slow');
      }
    })
  })(jQuery);

因?yàn)闆]有等到整個(gè)文檔就緒，所以可以確保所有<div class= 'photo'>元素只要呈現(xiàn)在頁面上，就可以應(yīng)用mouseenter 和mouseleave行為。

上面就是關(guān)于利用jQuery動(dòng)態(tài)追加頁面數(shù)據(jù)以及事件委托的全部知識(shí)。下面附上源代碼；

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
  <title>動(dòng)態(tài)加載</title>
  <script type="text/javascript" src = "http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  <style type="text/css">
  *{
    margin: 0px;
    padding: 0px;
  }


  #container{
    position: relative;
    width: 1300px;
    margin: 0 auto;
    /*background-color: #ccc;
    height: auto;*/
  }
  #gallery{
    position: relative;
    width: 1300px;
    margin: 0 auto;

  }
  .details{
    display: none;
  }

  .photo{
    padding: 20px;
    border-radius: 5px;
    border:1px solid #ccc;
    box-shadow: 0 0 5px #ccc;
    float: left;
    margin: 8px;
  }

  .photo img{

    /*z-index: 1;*/
    width: 200px;
    height: 300px;
    clear: both;
  }

  .photo .details{
    position: absolute;
    z-index: 2;
    padding-left: 20px;
    margin-top:-200px;
    /*clear: both;*/
    overflow: hidden;
  }
  .description{
    overflow: hidden;
    width: 200px;
    color: lightgreen;
    font-size: 18px;
    font-weight: bold;
  }

  .date{
    font-size:16px;
    margin: 20px 0px;
    color: red; 
  }
  .photographer{
    font-size:14px;
    font-family: "Arial" ;
  }
  .link a{

    clear: both;
    text-decoration: none;
    padding-left: 90%;


  }
  h1{
    text-align: center; 
  }
  </style>

  <script>
  $(document).ready(function(){

    var pageNum = 1;
    $("#more-photos").click(function(event){
      event.preventDefault();
      var $link = $(this);
      var url = $link.attr('href');
      console.log(url);
      if(url){
        $.get(url, function(data){
          $("#gallery").append(data);
        });

        pageNum ++;
        if(pageNum < 4){
          $link.attr('href', './'+pageNum+'.html');
        }


      else{
        $link.remove();
      }
      }
    })
  })

  // $(document).ready(function(){
  // $('div .photo').hover(function(){
  //   $(this).find('.details').fadeTo('slow', 0.7);
  // },function(){
  //     $(this).find('.details').fadeOut('slow');
  // })
  // })

  $(document).ready(function(){
    $('#gallery').on('mouseenter mouseleave', 'div.photo', function(event){

      var $details = $(this).find('.details');
      if(event.type == 'mouseenter'){
        $details.fadeTo('slow', 0.7);
      }
      else{
        $details.fadeOut('slow');
      }
    })
  })

  </script>
</head>
<body>
<div id = "container">
<h1> Photo Gallery</h1>

<div id = "gallery">
  <div class = "photo">
    <img src = "./images/1.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye ....</div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

  <div class = "photo">
    <img src = "./images/2.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye.... </div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

    <div class = "photo">
    <img src = "./images/3.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye.... </div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

    <div class = "photo">
    <img src = "./images/4.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye .....</div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

    <div class = "photo">
    <img src = "./images/5.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye ....</div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

    <div class = "photo">
    <img src = "./images/6.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye ...</div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

    <div class = "photo">
    <img src = "./images/7.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye.... </div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

    <div class = "photo">
    <img src = "./images/8.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye..... </div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

    <div class = "photo">
    <img src = "./images/9.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye ...... </div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

    <div class = "photo">
    <img src = "./images/10.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye </div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

    <div class = "photo">
    <img src = "./images/11.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye </div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

    <div class = "photo">
    <img src = "./images/12.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye </div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>


    <div class = "photo">
    <img src = "./images/13.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye </div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

    <div class = "photo">
    <img src = "./images/14.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye </div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

    <div class = "photo">
    <img src = "./images/15.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye </div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

</div>

 <div class = "link"><a id = "more-photos" href = "1.html"> More Photos &gt;&gt;</a></div> 
</div>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論