分享12个实用的jQuery代码片段

jQuery是一款优秀的JavaScript库，它在WEB开发者和网页设计师中非常出名，帮助网页设计师开发出很多有创意和漂亮的WEB页面。

本文主要分享了12个有用的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');
});
 

二、设定计时器

$(document).ready(function() {
 window.setTimeout(function() {
 // some code
 }, 500);
});

三、设置等高的列

使用下面的代码，可以使得你的网页应用每一列高度都一样：

<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://huoche.7234.cn/images/jb51/1sy0suxanyf.html", "image2.gif", "image3.gif");
// 检查图片是否被加载
$('#imageObject').attr('src', 'image1.gif').load(function() {
 alert('The image has been loaded…');
});

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

<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>

六、禁用鼠标右键

$(document).ready(function() {
 //catch the right-click context menu
 $(document).bind("contextmenu", function(e) {
 //warning prompt - optional
 alert("No right-clicking!");
 //delete the default context menu
 return false;
 });
});

 七、计算子元素的个数

<div id="foo">
 <div id="bar"></div>								 
 1/3    1 2 3 下一页 尾页