這個星期最大的感悟是，只有在實踐中不斷的總結，才能打下扎實基本功。這是本周主要做的東西：

　　

　　第一個圖主要為對jQuery ajax的練習。后面兩個計算器和新浪微博頁面為之前做好的頁面，這次用一個load()函數把它們加載進來。不過中間的時候出了很多莫名其妙的錯誤，還來發現原來是載入進入的頁面的“全局”樣式與根頁面起了沖突，之前的時候特別喜歡對整個頁面定義全局字體樣式，結果不同頁面一碰面就打架了。第一部分的話就是用each()方法遍歷json里面的數據（保存著圖片的url）,每次都新增一個'<li><a href="#"><img src="' + data["src"] + '"\/><\/a><\/li>'節點數加到ul里頭，最后由節點個數來決定圖片右下方的數字個數，鼠標懸浮或者點擊時顯示相應圖片，或圖片定時輪播;

　　一直都是把頁面放到IIS建的服務器的網站上的，結果在加載json 數據的時候就糾結了好久都不知道什么原因的問題：直接打開網頁就可以加載到圖片并進行輪播，但用ip打開網頁卻不能加載到json數據。后來在師兄的指點下才知道服務器并未對外開放.json數據格式的文件，我的請求被服務器攔截了！！把json數據格式改成txt后就正常了，下面是關鍵代碼：

　　在這個細節還有一個問題就是，調試確定獲取了所有的圖片，但卻只是顯示一張，下標數字也只有1. 后來才恍然大悟jQuery是異步執行的，但調用ajax函數時，同時新增節點的函數也開始執行了，同步進行的話新增的節點當然只有一個。于是只好當圖片全部都加載好后才把作為回調函數的新增節點的函數調用。下面是對應代碼：　

$(document).ready(function() { //載入$('.calculator').load('calculator.html');$('.sinaweibo').load('sinaweibo.html');$.ajax({type : "GET",url : "$img/img.txt",dataType : "json",error: function(jqXHR, textStatus, errorThrown) {alert(errorThrown);},success : function(data) { $.each(data,function(i, data) {var imgSrc = '<li><a href="#"><img src="' + data["src"] + '"\/><\/a><\/li>';$('.imgscroll_wrapper #focus ul').append(imgSrc); });add();}});function add(){//添加數字按鈕和按鈕后的半透明條&還有上一頁、下一頁兩個按鈕var sWidth = $("#focus").width();var len = $("#focus ul li").length;var index = 0;var picTimer;var btn = "<div class='btnBg'></div><div class='btn'>";for(var i = 0; i < len; i++) {var j = i + 1;btn += "<span>" + j + "</span>";}btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";$("#focus").append(btn);$("#focus .btnBg").css("opacity", 0.5);$("#focus .btn span").css("opacity", 0.4).mouseenter(function() {index = $("#focus .btn span").index(this);showPics(index);}).eq(0).trigger("mouseenter");//上一頁、下一頁按鈕透明度處理$("#focus .preNext").css("opacity", 0.2).hover(function() {$(this).stop(true, false).animate({"opacity" : "0.5"}, 300);}, function() {$(this).stop(true, false).animate({"opacity" : "0.2"}, 300);});//上一頁按鈕$("#focus .pre").click(function() {index -= 1;if(index == -1) {index = len - 1;}showPics(index);});//下一頁按鈕$("#focus .next").click(function() {index += 1;if(index == len) {index = 0;}showPics(index);});$("#focus ul").css("width", sWidth * (len));//鼠標滑上焦點圖時停止自動播放，滑出時開始自動播放$("#focus").hover(function() {clearInterval(picTimer);}, function() {picTimer = setInterval(function() {showPics(index);index++;if(index == len) {index = 0;}}, 4000);}).trigger("mouseleave");//顯示圖片函數，根據接收的index值顯示相應的內容function showPics(index) {var nowLeft = -index * sWidth;$("#focus ul").stop(true, false).animate({"left" : nowLeft}, 300);//為當前的按鈕切換到選中的效果$("#focus .btn span").stop(true, false).animate({"opacity" : "0.4"}, 300).eq(index).stop(true, false).animate({"opacity" : "1"}, 300);}}});

　　至于第二個頁面，實現的功能是下拉框選擇相應的設備，左邊同時切換相應的設備，縮略圖同時切換相應的套圖。用到的特效都是slideup,slidedown.一開始做的是按比例縮放，第一次做按比例縮放的頁面，經驗不足有點糾結。其中遇到比較大問題是怎樣來實現設備與設備里面的圖片在不同屏幕時能相適應，一開始嘗試用z-index屬性來解決，但是效果不理想，后來終于試到了一種方案：把裝設備圖和縮略圖放大圖的盒子的position設為relative,再把2個圖的positon設為absolute，然后再調整這兩個圖的left和top。算的上很好的解決了這個問題。

轉載于:https://www.cnblogs.com/daisy7/archive/2012/07/29/2601836.html

總結

以上是生活随笔為你收集整理的jQuery 的各种练习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。