前端编程提高之旅 jQuery常见特效

本文格式为Word版，下载可任意编辑——前端编程提高之旅jQuery常见特效前端编程提高之旅（二）网站常见特效的jquery实现

时间2023-08-0923:11:11CSDN博客原

文/yingyiledi/article/details/38460189

最好的编程语言是规律，前端各种交互特效的实现多可以用jquery实现，特效可以纷飞，内在规律则基本不变。这一篇文章主要介绍jquery实现常见特效背后的规律。

1.通过类名获取元素集合

首先来看一个js原生代码不支持的方法，通过类来获取元素集合。

document.getElementsByClassName=function(classname){

varretnode=[];

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

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

for(varj=0;j济南青岛沂\

//填充对应的二级菜单

临

});

}else{

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

$(\//清空标签

$(\郑州安阳阳\

//填充对应的二级菜单

洛

});

}

});

规律思路：

根据需要设置联动菜单的元素值被改变的状况，通过ajax方法传空值给自身页面，追加相应的元素，在这里是二级菜单。这里用到了jquery两个方法：change方法和empty方法。

change方法在选定标签值改变时，会被触发执行。empty方法则是将标签中html内容清空。

3.链接样式和链接内容的显示隐蔽

$(function(){

$(\).each(function(index){//遍历用户控制区域

$(this).mouseover(function(){//获取当前用户选择区域

id=setTimeout(function(){//使用时间事件函数实现缓动效果更好的用户体验

$(\).removeClass('tab');//移除默认的选项按钮的样式

$(this).addClass(\);//给当前选项按钮添加样式

$(\).removeClass('show');//移除默认的显示区域的样式

$(\+index+\).addClass('show');//根据选中的index索引添加样式

},300);

}).mouseout(function(){

clearTimeout(id);//用户鼠标移除时同时移除时间事件

});

});

});//链接对应相应内容的隐蔽和显示

规律思路：

这里首先用到$()在其中书写函数，这里详细介绍了jquery构造函数的适用范围。通过遍历每个导航链接，当鼠标移上对应元素，首先移除所有默认选项样式，在悬浮元素加上默认选中样式。并移除当前显示样式，设置默认选项对应内容样式为显示状态。

这里的亮点在于使用了一个显示默认样式的缓动效果，用户体验更细致。4.“显示更多（more）〞功能的实现

$(function(){

var$hideObj=$('ulli:gt(5):not(:last)');//选择index大于等于5的li元素，除去最终一个，隐蔽掉

$hideObj.hide();

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

if(!$hideObj.is(\)){//判断是否可见is方法

$hideObj.show();

$('.showmorespan').css(\,\);//切换状态更换图片

}else{

$hideObj.hide();

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

;//切换状态更换图片

}

});

});//选择一部分隐蔽掉，再将部分判断是否显示，显示或者隐蔽

规律思路：

这里首先动用了选择器除去最终一个元素所有大于5的li元素选中。通过用户点击事件，判断是否显示或者隐蔽，并联动修改被点击的图标。

亮点在选择器的掌控恰到好处，用jquery最基本的就要用熟选择器，这样会快速高效操作dom节点。这样也就不难理解css3为什么首要改革的就是选择器了，简化操作流程、正则化及语义化css选择器，使得前端工程师读和写代码更便捷。

5.文本域“剩余字数〞

$(document).ready(function(){

vartarea=$(\);//

tarea.focus(function(){

$(\).fadeIn(200);

}).blur(function(){

$(\).fadeOut(\);

})//文本域获得焦点和失去焦点剩余字数显示或消失，用到渐入渐出

$(\).keyup(function(){