开发中可能会用到的jQuery小技巧

前端技术 2023/09/01 JavaScript

1) 禁止右键
在开发 Web 应用的时候，有些情况需要禁用右键单击功能。使用此代码，jQuery 开发人员可以在网页上禁用鼠标右键点击。代码如下：

复制代码 代码如下:

$(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;
});
});

2) 文本缩放
使用下面的代码，用户可以更具需要增大或者缩放网页中的字体大小，代码如下：
复制代码 代码如下:

$(document).ready(function() {
//find the current font size
var originalFontSize = $(\'html\').css(\'font-size\');

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

3) 在新窗口打开链接
使用这个 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\');
});

4) 样式表切换
你知道网站换肤是怎么做的吗？下面的代码可以帮助你实现样式表切换功能，如下：
复制代码 代码如下:

$(document).ready(function() {
$(\"a.cssSwap\").click(function() {
//swap the link rel attribute with the value in the rel
$(\'link[rel=stylesheet]\').attr(\'href\' , $(this).attr(\'rel\'));
});
});

5) 回到顶部
这是现在网站中很常用的回到顶部功能，特别适合页面很长的情况。代码很简单，如下：
复制代码 代码如下:

$(document).ready(function() {
//when the id=\"top\" link is clicked
$(\'#top\').click(function() {
//scoll the page back to the top
$(document).scrollTo(0,500);
}
});

6) 获取鼠标的 X、Y 坐标
下面的代码可以获取鼠标的 X,Y 坐标，代码如下：
复制代码 代码如下:

$().mousemove(function(e){
//display the x and y axis values inside the P element
$(\'p\').html(\"X Axis : \" + e.pageX + \" | Y Axis \" + e.pageY);
});

7) 检测当前鼠标的坐标
使用下面的代码，能够在任何支持 jQuery 的地方获取当前鼠标的坐标，如下：
复制代码 代码如下:

$(document).ready(function() {
$().mousemove(function(e){
$(\'# MouseCoordinates \').html(\"X Axis Position = \" + e.pageX + \" and Y Axis Position = \" + e.pageY);
});

8) 预加载图片
这个图片预加载片段让你能够快速的预先载入图片，不需要等待。代码如下：
复制代码 代码如下:

jQuery.preloadImagesInWebPage = function() {
for(var ctr = 0; ctr<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…\');
});

本文地址：https://www.stayed.cn/item/2848

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案