jQuery 新手入門(mén)教程

時(shí)間：2020-11-09 13:18:08 jQuery 我要投稿

jQuery 新手入門(mén)教程

　　什么是jQuery？

　　jQuery是一個(gè)JavaScript庫(kù)，白癡解釋就是一個(gè)JavaScript工具箱，很多現(xiàn)成的工具，想用什么就拿什么。省去了自己重新編寫(xiě)代碼的煩惱，對(duì)于像我一樣的JS白癡，更是容易上手。

　　jQuery能做什么？

　　他能讓你的頁(yè)面產(chǎn)生很多讓人驚喜的動(dòng)態(tài)效果，簡(jiǎn)單的說(shuō)就是讓你的網(wǎng)站更加漂亮，這里有很多不同的效果，點(diǎn)擊查看>>>

　　怎么用jQuery？

　　簡(jiǎn)單的說(shuō)：在頁(yè)面中調(diào)用jQuery庫(kù)（一個(gè)js文件），就可以方便的使用其中的工具了（使用時(shí)需要另一個(gè)js調(diào)用jQuery中的工具），從而實(shí)現(xiàn)想要的效果。

　　第一步：尋找想要的效果

　　本站的效果都出自?xún)蓚€(gè)地方：sonicHTML，jQuery tools。網(wǎng)絡(luò)上有更多的效果，如果愿意花時(shí)間，可以去其他地方找找。

　　第二步：扒代碼

　　首先推薦扒代碼利器Firefox+firebug。如果沒(méi)有，趕快去下！在扒代碼是要十分小心兩個(gè)地方！

　　1.靜態(tài)頁(yè)中的html和css

　　用firebug扒取頁(yè)面中你想要部分的HTML和CSS代碼，該部分的id和class千萬(wàn)不要?jiǎng)�，保持原狀�?/p>

　　同時(shí)，在你想要的HTML元素前，可能會(huì)有一個(gè)空的

　　例如這個(gè)效果>>>，千萬(wàn)不要遺漏！

　　2.中的js

　�、旁谡{(diào)用的js中，肯定會(huì)有一個(gè)js的文件名中帶有“jQuery”，直接把這個(gè)文件的代碼復(fù)制，變成你自己的文件。

　�、圃谥幸欢ㄟ€有另一個(gè)js，這個(gè)js中會(huì)有以下代碼：

　　$(document).ready(function() {

　　// 中間為其他代碼

　　});

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

　　第三步：本地測(cè)試并修改錯(cuò)誤

　　本地新建HTML，CSS，JS，把扒到的代碼都放進(jìn)去，該調(diào)用的文件都調(diào)用好。激動(dòng)人心的時(shí)刻到了！用瀏覽器打開(kāi)靜態(tài)頁(yè)，看是否出效果。如果出了，恭喜你！進(jìn)入下一步，改造成你自己的東西！如果沒(méi)出就開(kāi)始仔細(xì)檢查吧：

　　⑴HTML中可能出錯(cuò)的地方：

　�、倌阈薷牧薍TML中的id或class【解決方法：改回原來(lái)的】

　　②遺漏了空的

　　【解決方法：檢查你扒下的HTML，看看前后有沒(méi)有空的，有了就加上再試試】

　　⑵JS中可能出錯(cuò)的地方：

　�、僬{(diào)用路徑出錯(cuò)【解決方法：修改為有效的`調(diào)用路徑，把js和HTML放一起最方便】

　�、谶z漏了ready（上面有詳細(xì)代碼）這個(gè)js（可能是外部文件，可能是head中的代碼）【解決方法：在原靜態(tài)頁(yè)中尋找有ready的這段代碼，copy并加上】

　�、踨eady中的id或者class和HTML中的不一致【解決方法：在原HTML和js中找到對(duì)應(yīng)關(guān)系，并修改為一致】

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

　　這步就沒(méi)有固定的方法了，你想怎么修改就怎么修改，不過(guò)千萬(wàn)注意HTML中的id何class要和js對(duì)應(yīng)！

　　第五步：加入到你自己的頁(yè)面中

　　這個(gè)基本沒(méi)什么說(shuō)的，不過(guò)還是想給wp的用戶(hù)說(shuō)一句：外部文件調(diào)用都在主題文件夾中的header.php中（我就找了半天~~~~）