前端工程师应该知道的10个jQuery的代码片段

jQuery在WEB开发中应用最为广泛，因为他有着很强大的功能。。看看下面的10个片段,你会发现他们在开发过程中很实用。

10、列表间隔颜色

1	$(‘li:odd’).css(‘background’, ‘ #E8E8E8’);

添加此段代码即可轻松实现li列表的颜色间隔

9、让两个div高度相同

1	$(‘.div’).css(‘min-height’, $(‘.main-div’).height());

如果你想要两个相同的高度div，您可以简单地使用这个代码，它可以做到这一点。不管div中包含什么样的内容，该代码都会正常工作。方便了很多不同的网站。

8、简单的手风琴

1 2 3 4 5 6 7 8 9

// Close all Panels $(‘ #accordion’).find(‘.content’).hide(); // Accordion $(‘ #accordion’).find(‘.accordion-header’).click(function(){ var  next = $( this ).next(); next.slideToggle(‘fast’); $(‘.content’).not(next).slideUp(‘fast’); return  false ; });

您可以使用此脚本进行快速的达到手风琴效果。 方法非常简单，你需要做的就是复制粘贴上面的代码。

7、切换淡入/幻灯片

1 2 3 4 5 6 7 8

// Fade $( “.btn” ).click( function () { $( “.element” ).fadeToggle(“slow”); }); // Toggle $( “.btn” ).click( function () { $( “.element” ).slideToggle(“slow”); });

这也许是网络上出现的使用jQuery的最常见的动画之一。

6、停止链接的加载

1 2 3

$(‘a.no-link’).click( function (e){ e.preventDefault(); });

有些时候，我们不希望链接重定向到某个页面或重新加载它们。 或者希望通过链接引发一些其他的脚本。 如果是这样的话，你可以看看这个很小片段，因为可以做到这一点。

5、禁用输入字段

1	$(‘input[type= "submit" ]‘).attr(“disabled”,  true );

有些时候，我们希望表单的提交按钮被禁用，或者想禁用某些输入文本直到用户执行特定动作。例如当在登记结束时，你勾选这个选项，询问您是否同意这些条款和条件。 使用上面这行代码，它会做到这一点。

4、Hover样式切换

1 2 3 4 5 6

$(‘.btn’).hover( function (){ $( this ).addClass(‘hover’); },  function (){ $( this ).removeClass(‘hover’); } );

您会注意到，当你悬停一个可点击的元素上的视觉变化？这种效果是很好的。 当我们悬停在某个元素上，我们需要通过视觉变化来判断是否可以点击。 上面提到的这种特殊的片段可以完成这一点，他将一个样式添加到你的元素中。

3、自动修复损坏图像

1 2 3

$(‘img’).error( function (){ $( this ).attr(‘src’, ‘img/broken.png’); });

有些时候，网站展示的图片被损坏了，无法正常展示。 发生这种情况时，我们通常会一个一个地替换它们。 这很浪费时间，很简单，但如果有很多这样的图片需要替换的话就不是很容易做到了。使用上面提到的这一小小的片段代码将会替换那些图像，为我们节省了很多时间。 即使没有任何损坏的图片，加入上面的代码段也不会有影响。

2、检查是否加载图片

1 2 3

$(‘img’).load( function () { console.log(‘image load successful’); });

有时候我们需要等图片加载完后才会继续加载其他代码，使用上面这段代码将很容易判断图片的加载与否。您还可以检查图像是否通过一个特定的ID或其他类替换img标签加载

1、返回顶部按钮

1 2 3 4 5 6 7

// Back To Top $(‘a.top’).click( function (){ $(document.body).animate({scrollTop : 0},800); return  false ; }); //Create an anchor tag <a class=”top” href=” #”>Back to top</a>

使用上面的jQuery代码片段，你会看到一个非常棒的回到到顶部的效果，无需通过额外的插件。