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

前端之家收集整理的这篇文章主要介绍了分享12个实用的jQuery代码片段前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

本文主要分享了12个有用的jQuery技巧,具体内容如下

下面是我收集的一些小技巧,这些技巧将帮助你提高你网站布局和应用的创意性以及功能性。

一、在新窗口打开链接

用这个代码,你点击超文本链接时会在新窗口中打开,为用户带来更好的体验:

二、设定计时器

三、设置等高的列

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

First Line

Second Line

Third Line

Column Two

四、jQuery预加载图像

这个技巧可以加快网页加载图片的速度:

方法: $.preloadImages("image1.gif","image2.gif","image3.gif"); // 检查图片是否被加载 $('#imageObject').attr('src','image1.gif').load(function() { alert('The image has been loaded…'); });

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

六、禁用鼠标右键

七、计算子元素的个数

八、更改样式列表

这段代码将帮助你更改样式列表。

九、使用jQuery设定文本大小

加入这段代码用户可根据需求重新设定文本尺寸(增加或减少)。

//Increase the text 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;
});

//Decrease the Text Size
$(".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;
});

// Reset Font Size
$(".resetFont").click(function(){
$('html').css('font-size',originalFontSize);
});
});

十、检测当前鼠标坐标

使用这个JS代码,你可以在任何浏览器里获取鼠标坐标。

获取鼠标指针的X / Y轴

十二、返回到顶部链接

代码对于比较长的页面非常实用,用户不必拉滚动条来返回顶部,直接点击“返回顶部”即可。

jQuery是JavaScript最好的库之一,支持Ajax及HTML 脚本客户端,主要用于事件处理及制作动画。另外,jQuery还拥有各种插件,可以让开发者在最快的时间内创建网页。

希望本文所述对大家学习jquery程序设计有所帮助。

猜你在找的jQuery相关文章