开发中实用的jQuery技巧

admin

jQuery 是最好的 JavaScript 库之一，用于简化动画，事件处理，支持 Ajax 和 HTML 的客户端脚本。网络中有大量的 jQuery 插件，有助于在短时间内通过简单容易的方法创建网站。

下面几个对 jQuery 开发人员非常有用的代码片段。希望你的下一个项目中能用得上这些代码。

1、 禁止右键

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

1. $(document).ready(function() {
   
2. //catch the right-click context menu
   
3. $(document).bind("contextmenu",function(e) {
   
4. //warning prompt - optional
   
5. alert("No right-clicking!");
   
6. //delete the default context menu
   
7. return false;
   
8. });
   
9. });

复制代码

2、文本缩放

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

1. $(document).ready(function() {
   
2. //find the current font size
   
3. var originalFontSize = $('html').css('font-size');
   
4. //Increase the text size
   
5. $(".increaseFont").click(function() {
   
6. var currentFontSize = $('html').css('font-size');
   
7. var currentFontSizeNumber = parseFloat(currentFontSize, 10);
   
8. var newFontSize = currentFontSizeNumber*1.2;
   
9. $('html').css('font-size', newFontSize);
   
10. return false;
    
11. });
    
12. //Decrease the Text Size
    
13. $(".decreaseFont").click(function() {
    
14. var currentFontSize = $('html').css('font-size');
    
15. var currentFontSizeNum = parseFloat(currentFontSize, 10);
    
16. var newFontSize = currentFontSizeNum*0.8;
    
17. $('html').css('font-size', newFontSize);
    
18. return false;
    
19. });
    
20. // Reset Font Size
    
21. $(".resetFont").click(function(){
    
22. $('html').css('font-size', originalFontSize);
    
23. });
    
24. });

复制代码

3、在新窗口打开链接

使用这个 jQuery 代码，用户会点击你的网站的任何链接都会在新的窗口中打开。如下：

1. $(document).ready(function() {
   
2. //select all anchor tags that have http in the href
   
3. //and apply the target=_blank
   
4. $("a[href^='http']").attr('target','_blank');
   
5. });

复制代码

4、样式表切换

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

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

复制代码

5、回到顶部

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

1. $(document).ready(function() {
   
2. //when the id="top" link is clicked
   
3. $('#top').click(function() {
   
4. //scoll the page back to the top
   
5. $(document).scrollTo(0,500);
   
6. }
   
7. });

复制代码

6、获取鼠标的 X、Y 坐标

下面的代码可以获取鼠标的 X,Y 坐标，代码如下：

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

复制代码

7、检测当前鼠标的坐标

使用下面的代码，能够在任何支持 jQuery 的地方获取当前鼠标的坐标，如下：

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

复制代码

8、预加载图片

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

1. jQuery.preloadImagesInWebPage = function() {
   
2. for(var ctr = 0; ctr<arguments.length; ctr++){
   
3. jQuery("").attr("src", arguments[ctr]);
   
4. }
   
5. }

复制代码

调用方法：

1. $.preloadImages("image1.gif", "image2.gif", "image3.gif");

复制代码

判断图片是否已加载：

1. $('#imageObject').attr('src', 'image1.gif').load(function() {
   
2. alert('The image has been loaded…');
   
3. });

复制代码