七个不允许错过的jQuery小技巧

jQuery是一款轻量级的JavaScript库，是最流行的客户端HTML脚本之一，它在WEB设计师和开发者中非常的有名，并且有非常多有用的插件和技术。

本文我们将为大家分享一些jQuery小技巧：
一、在新窗口打开链接
用下面的代码，你点击链接即可在新窗口打开：

$（document）.ready（function（） {//select all anchor tags that have http in the href//and apply the target=_blank$（"a[href^="http"]"）.attr（"target","_blank"）;}）;

二、设置等高的列
应用下面的代码，可以使得你的WEB应用每一列高度都想等：

<div class="equalHeight" style="border:1px solid"><p>First Line</p><p>Second Line</p><p>Third Line</p></div><div class="equalHeight" style="border:1px solid"><p>Column Two</p></div><script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script><script>$（document）.ready（function（） {equalHeight（".equalHeight"）;}）;//global variable, this will store the highest height valuevar maxHeight = 0;function equalHeight（col） {//Get all the element with class = colcol = $（col）;//Loop all the colcol.each（function（） {//Store the highest valueif （$（this）.height（） > maxHeight） {maxHeight = $（this）.height（）;}}）;//Set the heightcol.height（maxHeight）;}</script>

三、jQuery预加载图像
这个小技巧可以提升页面加载图片的速度：

jQuery.preloadImagesInWebPage = function（） {for （var ctr = 0; ctr & lt; arguments.length; ctr++） {jQuery（""）.attr（"src", arguments[ctr]）;}}// 使用方法：$.preloadImages（"image1.gif", "image2.gif", "image3.gif"）;// 检查图片是否被加载$（"#imageObject"）.attr（"src", "image1.gif"）.load（function（） {alert（"The image has been loaded…"）;}）;

四、禁用鼠标右键

$（document）.ready（function（） {//catch the right-click context menu$（document）.bind（"contextmenu", function（e） {//warning prompt - optionalalert（"No right-clicking！"）;//delete the default context menureturn false;}）;}）;

五、设定计时器

$（document）.ready（function（） {window.setTimeout（function（） {// some code}, 500）;}）;

六、计算子元素的个数

<div id="foo"><div id="bar"></div><div id="baz"><div id="biz"></div><span><span></span></span></div></div><script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script><script type="text/javascript">//jQuery code to count child elements $（"#foo > div"）.size（）alert（$（"#foo > div"）.size（））</script>

七、把元素定位到页面中间

<div id="foo" style="width:200px;height: 200px;background: #ccc;"></div><script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script><script type="text/javascript">jQuery.fn.center = function（） {this.css（"position", "absolute"）;this.css（"top", （$（window）.height（） - this.height（）） / 2 + $（window）.scrollTop（） + "px"）;this.css（"left", （$（window）.width（） - this.width（）） / 2 + $（window）.scrollLeft（） + "px"）;return this;}//Use the above function as:$（"#foo"）.center（）;</script>

读到这里的朋友就知道你没有错过学习的机会，把这些小技巧积累起来，一定会帮助大家设计出有创意和精美的Web页面。