每一個(gè)網(wǎng)頁設(shè)計(jì)師都應(yīng)該了解的jQuery片段

jQuery是用成百上千個(gè)網(wǎng)頁。這是插入到頁面最常見的圖書館之一，它使DOM操作單元。
當(dāng)然，jQuery的受歡迎的原因之一是它的簡(jiǎn)單性。我們似乎可以這樣做幾乎任何強(qiáng)大的圖書館。
所有我們的選擇，有一些片段我們會(huì)回來一次又一次。今天我想給你10個(gè)片段，每個(gè)人，新手們，將用一次又一次。

1）回到頂部按鈕
回到頂部
$（'a.top”）。單擊（function() {
$（文檔。體）。動(dòng)畫（{ 0 }，scrollTop：800）；
返回false；
}）；
//創(chuàng)建一個(gè)錨標(biāo)簽
< class=“頂”href =“#”>返回頂部
你可以看到使用動(dòng)畫和scrollTop功能jQuery中我們不需要一個(gè)插件來創(chuàng)建一個(gè)簡(jiǎn)單的滾動(dòng)到頂部動(dòng)畫。
通過改變scrollTop值我們可以改變，我們希望滾動(dòng)條的土地，在我的情況下，我使用了一個(gè)價(jià)值0因?yàn)槲蚁胱屗サ捻敹耍覀兊木W(wǎng)頁，但是如果我想我可以抵消100px 100px的功能類型。
所以我們真的做的是動(dòng)畫文件的身體在800ms課程直到卷軸一直到頂層文件。

2）檢查是否加載圖像
$（'img”）。負(fù)荷（function() {
控制臺(tái)日志（圖像加載成功”）；
}）；
有時(shí)你需要檢查你的圖像是滿載為了繼續(xù)你的腳本，這三條線的jQuery代碼可以幫你輕松。
你也可以檢查是否一個(gè)特定的形象與身份或階級(jí)取代img標(biāo)簽加載。

3）修復(fù)損壞的圖像自動(dòng)
（'img美元的誤差（function() {）。
$（這）.attr（'src '、' IMG /破碎。png”）；
}）；
偶爾我們的時(shí)候，我們已經(jīng)打破了圖像鏈接在我們的網(wǎng)站和替換他們一個(gè)個(gè)并不容易，所以加入這段簡(jiǎn)單的代碼可以為你節(jié)省很多的麻煩。
即使你沒有任何斷開的鏈接將不會(huì)做任何傷害。

4）切換類在盤旋
$（'按鈕'）。懸停（function() {
$（這）.addClass（'hover”）；
function() { }，
$（這）。removeClass（'hover”）；
}
）；
成都網(wǎng)站制作通常想改變?cè)谖覀兊捻撁娴狞c(diǎn)擊元素視覺當(dāng)用戶將鼠標(biāo)懸停在這個(gè)jQuery代碼段只是說，它增加了一個(gè)類元素當(dāng)用戶懸停和在用戶停止它消除了階級(jí)，所以你要做的就是在你的CSS文件，添加必要的風(fēng)格。

5）禁用輸入字段
$（輸入[類型=“提交”]”）.attr（“殘疾”，真的）；
有時(shí)你可能想提交按鈕的形式甚至它的一個(gè)文本輸入被禁用，直到用戶執(zhí)行某個(gè)動(dòng)作（檢查“我已經(jīng)閱讀條款”復(fù)選框?yàn)槔?，這行代碼實(shí)現(xiàn)；添加禁用屬性輸入的所以你可以使它想你的時(shí)候。
做你需要做的是對(duì)殘疾人的輸入作為參數(shù)運(yùn)行把功能：
$（輸入[類型=“提交”]”）把（“禁用”）；

6）停止鏈接的加載
$（'a.no-link”）。單擊（function（e）{
E. preventdefault()；
}）；
有時(shí)我們不希望鏈接到某個(gè)頁面或者加載它，我們想讓他們做的東西像引發(fā)其他一些腳本，在這種情況下，這段代碼會(huì)阻止默認(rèn)動(dòng)作技巧。

7）切換淡入/幻燈片
/ /褪色
$（“-”），單擊（function() {
$（“元素”）。fadetoggle（“慢”）；
}）；
/ /切換
$（“-”），單擊（function() {
$（“元素”）。slidetoggle（“慢”）；
}）；
我們使用大量的幻燈片和消失在我們的動(dòng)畫使用jQuery的東西，有時(shí)我們只是想表明一個(gè)元素時(shí)，我們點(diǎn)擊的東西，顯露和slideDown方法是好的，但如果我們想要的元素出現(xiàn)在第一次點(diǎn)擊，然后在第二個(gè)這段代碼消失會(huì)工作得很好。

8）簡(jiǎn)單的手風(fēng)琴
/ /關(guān)閉所有面板
$（“#手風(fēng)琴”）。發(fā)現(xiàn)（的內(nèi)容）。hide()；
/ /手風(fēng)琴
$（“#手風(fēng)琴”）。找到（'。手風(fēng)琴頭”），點(diǎn)擊（function() {
VaR下=（這next()美元）；
接下來slidetoggle（'fast”）；
$（“內(nèi)容”），不（下）。slideup（'fast”）；
返回false；
}）；
通過添加這個(gè)腳本的所有你真的需要在您的網(wǎng)頁是必要的HTML去得到這個(gè)工作。
你可以看到這段我首先關(guān)閉所有面板在我國手風(fēng)琴然后單擊事件我做的，是聯(lián)系在一起的，標(biāo)題幻燈片切換的內(nèi)容，和其他所有的幻燈片。這是一個(gè)簡(jiǎn)單的方法快速的手風(fēng)琴。

9）使兩個(gè)div高度相同
$（“div”。）.css（'min-height，$（“div”。主要）。height()）；
有時(shí)候你想一下有相同的高度，無論什么內(nèi)容都在其中，這一點(diǎn)使剛剛；在這種情況下設(shè)置最小高度，意味著它可以大于主div不小。這是偉大的磚石類網(wǎng)站。

10）斑剝的無序列表
$（李：奇”）.css（背景”、“# e8e8e8”）；
這一點(diǎn)你可以很容易地創(chuàng)建斑馬條紋的無序列表，這個(gè)地方的背景你定義每一個(gè)奇怪的列表項(xiàng)，這樣你可以將默認(rèn)為在CSS文件中的偶數(shù)。你可以把這段代碼到任何類型的標(biāo)記，從表到平原的DIV，你想成為斑馬剝離。

結(jié)論
這是jQuery的代碼我發(fā)現(xiàn)自己一次又一次在我的項(xiàng)目中使用。我希望你將本頁加入書簽，回來時(shí)你需要一個(gè)這樣的片段。

創(chuàng)新互聯(lián)設(shè)計(jì)文章推薦：

仁壽網(wǎng)站推廣/網(wǎng)站優(yōu)化

彭山網(wǎng)站設(shè)計(jì)公司

網(wǎng)頁名稱：每一個(gè)網(wǎng)頁設(shè)計(jì)師都應(yīng)該了解的jQuery片段
分享路徑：http://www.muchs.cn/news36/19836.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、全網(wǎng)營銷推廣、品牌網(wǎng)站建設(shè)、做網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)