前端編程提高之旅 jQuery常見(jiàn)特效

本文格式為Word版，下載可任意編輯——前端編程提高之旅jQuery常見(jiàn)特效前端編程提高之旅（二）網(wǎng)站常見(jiàn)特效的jquery實(shí)現(xiàn)

時(shí)間2023-08-0923:11:11CSDN博客原

文/yingyiledi/article/details/38460189

最好的編程語(yǔ)言是規(guī)律，前端各種交互特效的實(shí)現(xiàn)多可以用jquery實(shí)現(xiàn)，特效可以紛飛，內(nèi)在規(guī)律則基本不變。這一篇文章主要介紹jquery實(shí)現(xiàn)常見(jiàn)特效背后的規(guī)律。

1.通過(guò)類名獲取元素集合

首先來(lái)看一個(gè)js原生代碼不支持的方法，通過(guò)類來(lái)獲取元素集合。

document.getElementsByClassName=function(classname){

varretnode=[];

varmyclass=newRegExp('\\\\b'+classname+'\\\\b');//匹配類名

varelem=this.getElementsByTagName('*');//得到所有元素

for(varj=0;j濟(jì)南青島沂\

//填充對(duì)應(yīng)的二級(jí)菜單

臨

});

}else{

$.get('index.php',null,function(data){//get方式傳值

$(\//清空標(biāo)簽

$(\鄭州安陽(yáng)陽(yáng)\

//填充對(duì)應(yīng)的二級(jí)菜單

洛

});

}

});

規(guī)律思路：

根據(jù)需要設(shè)置聯(lián)動(dòng)菜單的元素值被改變的狀況，通過(guò)ajax方法傳空值給自身頁(yè)面，追加相應(yīng)的元素，在這里是二級(jí)菜單。這里用到了jquery兩個(gè)方法：change方法和empty方法。

change方法在選定標(biāo)簽值改變時(shí)，會(huì)被觸發(fā)執(zhí)行。empty方法則是將標(biāo)簽中html內(nèi)容清空。

3.鏈接樣式和鏈接內(nèi)容的顯示隱蔽

$(function(){

$(\).each(function(index){//遍歷用戶控制區(qū)域

$(this).mouseover(function(){//獲取當(dāng)前用戶選擇區(qū)域

id=setTimeout(function(){//使用時(shí)間事件函數(shù)實(shí)現(xiàn)緩動(dòng)效果更好的用戶體驗(yàn)

$(\).removeClass('tab');//移除默認(rèn)的選項(xiàng)按鈕的樣式

$(this).addClass(\);//給當(dāng)前選項(xiàng)按鈕添加樣式

$(\).removeClass('show');//移除默認(rèn)的顯示區(qū)域的樣式

$(\+index+\).addClass('show');//根據(jù)選中的index索引添加樣式

},300);

}).mouseout(function(){

clearTimeout(id);//用戶鼠標(biāo)移除時(shí)同時(shí)移除時(shí)間事件

});

});

});//鏈接對(duì)應(yīng)相應(yīng)內(nèi)容的隱蔽和顯示

規(guī)律思路：

這里首先用到$()在其中書(shū)寫(xiě)函數(shù)，這里詳細(xì)介紹了jquery構(gòu)造函數(shù)的適用范圍。通過(guò)遍歷每個(gè)導(dǎo)航鏈接，當(dāng)鼠標(biāo)移上對(duì)應(yīng)元素，首先移除所有默認(rèn)選項(xiàng)樣式，在懸浮元素加上默認(rèn)選中樣式。并移除當(dāng)前顯示樣式，設(shè)置默認(rèn)選項(xiàng)對(duì)應(yīng)內(nèi)容樣式為顯示狀態(tài)。

這里的亮點(diǎn)在于使用了一個(gè)顯示默認(rèn)樣式的緩動(dòng)效果，用戶體驗(yàn)更細(xì)致。4.“顯示更多（more）〞功能的實(shí)現(xiàn)

$(function(){

var$hideObj=$('ulli:gt(5):not(:last)');//選擇index大于等于5的li元素，除去最終一個(gè)，隱蔽掉

$hideObj.hide();

$('.showmorespan').click(function(){

if(!$hideObj.is(\)){//判斷是否可見(jiàn)is方法

$hideObj.show();

$('.showmorespan').css(\,\);//切換狀態(tài)更換圖片

}else{

$hideObj.hide();

$('.showmorespan').css(\,\)

;//切換狀態(tài)更換圖片

}

});

});//選擇一部分隱蔽掉，再將部分判斷是否顯示，顯示或者隱蔽

規(guī)律思路：

這里首先動(dòng)用了選擇器除去最終一個(gè)元素所有大于5的li元素選中。通過(guò)用戶點(diǎn)擊事件，判斷是否顯示或者隱蔽，并聯(lián)動(dòng)修改被點(diǎn)擊的圖標(biāo)。

亮點(diǎn)在選擇器的掌控恰到好處，用jquery最基本的就要用熟選擇器，這樣會(huì)快速高效操作dom節(jié)點(diǎn)。這樣也就不難理解css3為什么首要改革的就是選擇器了，簡(jiǎn)化操作流程、正則化及語(yǔ)義化css選擇器，使得前端工程師讀和寫(xiě)代碼更便捷。

5.文本域“剩余字?jǐn)?shù)〞

$(document).ready(function(){

vartarea=$(\);//

tarea.focus(function(){

$(\).fadeIn(200);

}).blur(function(){

$(\).fadeOut(\);

})//文本域獲得焦點(diǎn)和失去焦點(diǎn)剩余字?jǐn)?shù)顯示或消失，用到漸入漸出

$(\).keyup(function(){