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

前端编程提高之旅（二）----网站常见特效的jquery 实现

时间 2014-08-09 23:11:11 CSDN博客原

文/yingyiledi/article/details/38460189

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

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

首先来看一个js原生代码不支持的方法，通过类来获取元素集合。document.getElementsByClassName=function(classname){

var retnode = [];

var myclass = new RegExp('\\b'+classname+'\\b');//匹配类名

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

for (var j = 0; j < elem.length; j++)

{

var classes = elem[j].className;

if (myclass.test(classes)){

retnode.push(elem[j]);

}

}

return retnode;

}//通过遍历整个文档元素类名，返回所有指定类名的数组

逻辑思路：

通过构造一个类名的正则表达式，选取所有标签，并通过正则表达式与所有标签类名属性进行匹配，从而返回一个类名数组，实现通过类名得到元素集合的目标。

实现这个方法的同时，也给在不使用jquery的情况下，选取特定序数的元素提供了便利。

2.二级联动菜单的构造

$("#select1").change( function() { //侦测一级菜单的change事件

var id = $("#select1").val();

if(id == 1){ //通过id判断二级菜单

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

$("span").empty(); //清空标签

$("span").append("济南青岛临沂"); //填充对应的二级菜单

});

}else{

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

$("span").empty(); //清空标签

$("span").append("郑州安阳洛阳"); //填充对应的二级菜单

});

}

});

逻辑思路：

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

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

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

$(function(){

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

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

id = setTimeout(function(){ //使用时间事件函数实现缓动效果更好的用户体验$("li.tab").removeClass('tab'); //移除默认的选项按钮的样式

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

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

$("#tab1 div:eq("+index+")").addClass('show'); //根据选中的index索引添加样式 },300);

}).mouseout(function(){

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

});

});

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

逻辑思路：

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

这里的亮点在于使用了一个显示默认样式的缓动效果，用户体验更细致。

4.“显示更多（more）”功能的实现

$(function(){

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

$hideObj.hide();

$('.showmore span').click(function(){

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

$hideObj.show();

$('.showmore span').css("background","url(./images/up.bmp) no-repeat 0 -10");//切换

状态更换图片

}else{

$hideObj.hide();

$('.showmore span').css("background","url(./images/down.bmp) no-repeat 0 0")

;//切换状态更换图片

}

});

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