jQuery是一款优秀的JavaScript库,它在WEB开发者和网页设计师中非常出名,帮助网页设计师开发出很多有创意和漂亮的WEB页面。
本文主要分享了12个有用的jQuery技巧,具体内容如下
下面是我收集的一些小技巧,这些技巧将帮助你提高你网站布局和应用的创意性以及功能性。
一、在新窗口打开链接
用这个代码,你点击超文本链接时会在新窗口中打开,为用户带来更好的体验:
1 2 3 4 5 | $(document).ready( function () {
$( "a[href^='http']" ).attr( 'target' , '_blank' );
});
|
登录后复制
二、设定计时器
1 2 3 4 5 | $(document).ready( function () {
window.setTimeout( function () {
}, 500);
});
|
登录后复制
三、设置等高的列
使用下面的代码,可以使得你的网页应用每一列高度都一样:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <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' );
});
var maxHeight = 0;
function equalHeight(col) {
col = $(col);
col.each( function () {
if ($( this ).height() > maxHeight) {
maxHeight = $( this ).height();
}
});
col.height(maxHeight);
}
</script>
|
登录后复制
四、jQuery预加载图像
这个技巧可以加快网页加载图片的速度:
1 2 3 4 5 6 7 8 9 10 11 | 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…' );
});
|
登录后复制
五、把元素定位到页面中间
1 2 3 4 5 6 7 8 9 10 11 12 13 | <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 ;
}
$( '#foo' ).center();
</script>
|
登录后复制
六、禁用鼠标右键
1 2 3 4 5 6 7 8 9 | $(document).ready( function () {
$(document).bind( "contextmenu" , function (e) {
alert( "No right-clicking!" );
return false ;
});
});
|
登录后复制
七、计算子元素的个数
1 2 3 4 5 6 7 8 9 10 11 12 | <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" >
alert($( "#foo > div" ).size())
</script>
|
登录后复制
八、更改样式列表
这段代码将帮助你更改样式列表。
1 2 3 4 5 6 | $(document).ready( function () {
$( "a.cssSwap" ).click( function () {
$( 'link[rel=stylesheet]' ).attr( 'href' , $( this ).attr( 'rel' ));
});
});
|
登录后复制
九、使用jQuery设定文本大小
加入这段代码,用户可根据需求重新设定文本尺寸(增加或减少)。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | $(document).ready( function () {
var originalFontSize = $( 'html' ).css( 'font-size' );
$( ".increaseFont" ).click( function () {
var currentFontSize = $( 'html' ).css( 'font-size' );
var currentFontSizeNumber = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNumber*1.2;
$( 'html' ).css( 'font-size' , newFontSize);
return false ;
});
$( ".decreaseFont" ).click( function () {
var currentFontSize = $( 'html' ).css( 'font-size' );
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$( 'html' ).css( 'font-size' , newFontSize);
return false ;
});
$( ".resetFont" ).click( function (){
$( 'html' ).css( 'font-size' , originalFontSize);
});
});
|
登录后复制
十、检测当前鼠标坐标
使用这个JS代码,你可以在任何浏览器里获取鼠标坐标。
1 2 3 4 5 | $(document).ready( function () {
$().mousemove( function (e)
{
$( '# MouseCoordinates ' ).html( "X Axis Position = " + e.pageX + " and Y Axis Position = " + e.pageY);
});
|
登录后复制
十一、获取鼠标指针的X / Y轴
1 2 3 4 | $().mousemove( function (e){
$( 'p' ).html( "X Axis : " + e.pageX + " | Y Axis " + e.pageY);
});
|
登录后复制
十二、返回到顶部链接
此代码对于比较长的页面非常实用,用户不必拉滚动条来返回顶部,直接点击“返回顶部”即可。
1 2 3 4 5 6 7 | $(document).ready( function () {
$( '#top' ).click( function () {
$(document).scrollTo(0,500);
}
});
|
登录后复制
jQuery是JavaScript最好的库之一,支持Ajax及HTML 脚本客户端,主要用于事件处理及制作动画。另外,jQuery还拥有各种插件,可以让开发者在最快的时间内创建网页。
希望本文所述对大家学习jquery程序设计有所帮助。