jQuery 新手入門教程

學識都 人氣:1.82W

什麼是jQuery?

jQuery 新手入門教程

jQuery是一個JavaScript庫,白癡解釋就是一個JavaScript工具箱,很多現成的工具,想用什麼就拿什麼。省去了自己重新編寫代碼的煩惱,對於像我一樣的JS白癡,更是容易上手。

jQuery能做什麼?

他能讓你的頁面產生很多讓人驚喜的動態效果,簡單的說就是讓你的網站更加漂亮,這裏有很多不同的效果,點擊查看>>>

怎麼用jQuery?

簡單的說:在頁面中調用jQuery庫(一個js文件),就可以方便的使用其中的工具了(使用時需要另一個js調用jQuery中的工具),從而實現想要的效果。

第一步:尋找想要的效果

本站的效果都出自兩個地方:sonicHTML,jQuery tools。網絡上有更多的效果,如果願意花時間,可以去其他地方找找。

第二步:扒代碼

首先推薦扒代碼利器Firefox+firebug。如果沒有,趕快去下!在扒代碼是要十分小心兩個地方!

1.靜態頁中的html和css

用firebug扒取頁面中你想要部分的HTML和CSS代碼,該部分的id和class千萬不要動,保持原狀!

同時,在你想要的HTML元素前,可能會有一個空的

例如這個效果>>>,千萬不要遺漏!

2.中的js

⑴在調用的js中,肯定會有一個js的文件名中帶有“jQuery”,直接把這個文件的代碼複製,變成你自己的文件。

⑵在中一定還有另一個js,這個js中會有以下代碼:

$(document)y(function() {

// 中間爲其他代碼

});

這個js可能是調用的外部文件,也可能就在head(body中也有可能,不過可能性低)中以形式出現。這個部分一定會出現之前HTML中的id或者class。一定要保持一致,如果想用其他的名字,一定要記得HTML中和js中同步,不一樣就功虧一簣了

第三步:本地測試並修改錯誤

本地新建HTML,CSS,JS,把扒到的代碼都放進去,該調用的文件都調用好。激動人心的時刻到了!用瀏覽器打開靜態頁,看是否出效果。如果出了,恭喜你!進入下一步,改造成你自己的東西!如果沒出就開始仔細檢查吧:

⑴HTML中可能出錯的地方:

①你修改了HTML中的id或class【解決方法:改回原來的】

②遺漏了空的

【解決方法:檢查你扒下的HTML,看看前後有沒有空的,有了就加上再試試】

⑵JS中可能出錯的地方:

①調用路徑出錯【解決方法:修改爲有效的`調用路徑,把js和HTML放一起最方便】

②遺漏了ready(上面有詳細代碼)這個js(可能是外部文件,可能是head中的代碼)【解決方法:在原靜態頁中尋找有ready的這段代碼,copy並加上】

③ready中的id或者class和HTML中的不一致【解決方法:在原HTML和js中找到對應關係,並修改爲一致】

第四步:修改HTML和css,變成你自己的東西

這步就沒有固定的方法了,你想怎麼修改就怎麼修改,不過千萬注意HTML中的id何class要和js對應!

第五步:加入到你自己的頁面中

這個基本沒什麼說的,不過還是想給wp的用戶說一句:外部文件調用都在主題文件夾中的中(我就找了半天~~~~)