胡斌_JQUERY实用大全

《胡斌_JQUERY实用大全》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、本文翻译自：CatsWhoCode(后期大量翻译：TheWebsiteisverygood)1.平滑滚动到页面顶部我们以一个热门，实用的代码片段开始：下面的4行jquery代码，页面访问者通过点击id为[#top]，滑动到页面的顶部；$("a[href='#top']").click(function(){$("html,body").animate({scrollTop:0},"slow");returnfalse;});2.克隆表格的表头到表格底部为了使自己的表格可读性更强，将表格的表头克隆到表格底部是个不错的注意。下面就是这个实用的代码片段。var$tfoot=$('

2、t>');$($('thead').clone(true,true).children().get().reverse()).each(function(){$tfoot.append($(this));});$tfoot.insertAfter('tablethead');3.加载外部内容你需要添加外部内容到div标签么？如果使用jquery，这就变得很简单，具体实例如下：$("#content").load("somefile.html",function(response,status,xhr){//errorhandlingif(status=="error"

3、){$("#content").html("Anerroroccured:"+xhr.status+""+xhr.statusText);}});4.相同高度的标签纵列当你的网站是用纵列来显示的内容是，如果所有的模块列都是等高度的将会更好看，更整洁。下面的代码将会，将为所有类为.col的div标签自适应为（所有纵列高度最高）的等高模块：varmaxheight=0;$("div.col").each(function(){if($(this).height()>maxheight){maxheight=$(this).height();}});$("div.col").height(

4、maxheight);5.表格的条纹（斑马条纹）在表格上展示数据时，颜色交替无疑会增加可读性；下面这段代码，将为两行中间的的一行自动加上CSS类（css类自己定义）：$(document).ready(function(){$("tabletr:even").addClass('stripe');});6.页面局部刷新如果你需要刷新页面的一部分，下面会有一定的帮助，只需要3行代码。在这个例子中，#refreshdiv每10秒自动刷新：setInterval(function(){$("#refresh").load(location.href+"#refresh>*","");},1

5、0000);//millisecondstowaitPreloadimagesjQuery轻松预载图像背景中的游客不会永远等待时，他们将要显示的图像。此代码可以使用，更新图像列表只需8行：$.preloadImages=function(){for(vari=0;i").attr("src",arguments[i]);}}$(document).ready(function(){$.preloadImages("hoverimage1.jpg","hoverimage2.jpg");});7.在新标签/窗口打开链接ta

6、rget=”blank”属性允许你链接在新窗口打开的力量。当打开一个新窗口或标签的外部链接是相关，同域的链接一定要在同一个窗口中打开。此代码检测，如果一个链接是外部的，如果是，增加了一个目标target=”blank”的属性给它。$('a').each(function(){vara=newRegExp('/'+window.location.host+'/');if(!a.test(this.href)){$(this).click(function(event){event.preventDefault();event.stopPropagation();window.open(

7、this.href,'_blank');});}});8.使用jQuery让div满宽度/高度这个方便的代码允许你根据视图窗口创建一个全屏宽度/高度的div。代码也处理窗口大小调整。对模态对话框或弹出窗口来说不错。//globalvarsvarwinWidth=$(window).width();varwinHeight=$(window).height();//setinitialdivheight/width$('div').css({'width':