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

　　

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

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

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

$(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(){//添加數(shù)字按鈕和按鈕后的半透明條&還有上一頁、下一頁兩個按鈕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");//顯示圖片函數(shù)，根據(jù)接收的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);}}});

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

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

總結

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

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