`

Jquery有用的代码

阅读更多

 下面的文章是转载的,谢谢!

1) 禁止右键

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

1
2
3
4
5
6
7
8
9
10
$(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) 文本缩放

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

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() {
    //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 代码,用户会点击你的网站的任何链接都会在新的窗口中打开。如下:

1
2
3
4
5
$(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) 样式表切换

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

1
2
3
4
5
6
$(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) 回到顶部

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

1
2
3
4
5
6
7
$(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 坐标,代码如下:

1
2
3
4
$().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 的地方获取当前鼠标的坐标,如下:

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

8) 预加载图片

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

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

  调用方法:

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

  判断图片是否已加载:

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

相关推荐

    李炎恢jQuery讲义代码.rar

    《李炎恢jQuery讲义代码》是一份专为学习jQuery设计的配套资源,它与李炎恢老师的66集jQuery视频教程紧密关联。这个压缩包包含的代码文件旨在帮助观众更好地理解和实践视频中的讲解内容,提供了丰富的实例和练习,以...

    Jquery学习 Jquery源代码 Jquery数据库操作

    Jquery学习 Jquery源代码 Jquery数据库操作 Jquery学习 Jquery源代码 Jquery数据库操作 绝对有用,技术含量

    基于Swiper插件的触屏滑动jQuery相册代码

    基于Swiper插件的触屏滑动jQuery相册代码 基于Swiper插件的触屏滑动jQuery相册代码 基于Swiper插件的触屏滑动jQuery相册代码 基于Swiper插件的触屏滑动jQuery相册代码

    带滚动缩略图的全屏jQuery相册代码.rar

    带滚动缩略图的全屏jQuery相册代码.rar 带滚动缩略图的全屏jQuery相册代码.rar 带滚动缩略图的全屏jQuery相册代码.rar 带滚动缩略图的全屏jQuery相册代码.rar 带滚动缩略图的全屏jQuery相册代码.rar 带滚动缩略图的...

    jquery程序代码包

    **jQuery程序代码包详解** jQuery是一款广泛应用于Web开发的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。这个"jquery程序代码包"旨在提供全面的jQuery使用教程,帮助开发者深入理解...

    jquery Dreamweave代码提示插件

    jQuery Dreamweaver代码提示插件是一款专为Adobe Dreamweaver设计的辅助工具,它极大地提升了在Dreamweaver中编写jQuery代码的效率和准确性。这款插件通过提供自动完成、代码提示和上下文帮助等功能,使得开发者在...

    jQuery实现在线考试答题代码.zip

    开发周期短,上手快,入门低,但是进阶难一般常用的jquery特效 jquery焦点图 jquery选项卡 jquery滚动条 jquery下拉广告,jquery图片延时加载等,jquery代码,放大镜特效,jquery广告代码,jquery导航,jquery在线客服...

    常用jQuery代码 jQuery 插件 jQuery菜单 jQuery焦点轮播 jQuery弹层代码 焦点轮播 tab标签切换代码 jQ图片浏览

    常用jQuery代码 jQuery 插件 jQuery菜单 jQuery焦点轮播 jQuery弹层代码 焦点轮播 tab标签切换代码 jQ图片浏览 说明:压缩包分为jQuery code 1,2,3三卷。 本压缩包为卷jQuery code 2

    李炎恢在线课堂jQuery讲义代码

    最后,讲义可能还会涉及性能优化技巧,例如减少DOM操作、利用事件委托、以及如何正确使用$(document).ready()和$(window).load()等,这些都是提高jQuery代码执行效率的关键。 总的来说,《李炎恢在线课堂jQuery讲义...

    JQuery日历代码

    关键在于jQuery代码,它负责监听用户的交互事件,生成并显示日历,同时处理选中日期后的逻辑。 在实现jQuery日历时,有几种常见的方法: 1. **插件使用**:jQuery有许多现成的日历插件,如jQuery UI的Datepicker,...

    门户网站jQuery相册代码相册图片切换代码下载

    8. 兼容性和优化:考虑到不同浏览器的兼容性问题,确保jQuery代码在主流浏览器上都能正常运行。此外,通过优化图片加载和减少DOM操作,可以提高相册性能,特别是对于包含大量图片的门户网站来说。 9. 实际应用:在...

    jQuery攻略 源代码

    7. **性能优化**: 探讨如何编写高性能的jQuery代码,避免常见性能陷阱。 8. **兼容性问题**: 了解jQuery对不同浏览器的兼容策略,如何确保代码在多种环境下稳定运行。 9. **最佳实践**: 遵循官方推荐的编码规范和...

    6种独特的jQuery相册代码

    标题中的“6种独特的jQuery相册代码”表明我们将探讨六种使用jQuery库创建的不同风格或功能的相册实现。jQuery是一种流行的JavaScript库,它简化了DOM操作、事件处理、动画和Ajax交互,使得创建动态网页变得更为容易...

    jquery 分页代码

    jquery 分页代码,Ajax无刷新分页效果,简单易开发

    jquery网页内飘窗代码

    使用代码前必须引用jquery ,代码放在页面底部就行,亲测好用.

    超实用的jQuery代码段

    《超实用的jQuery代码段》精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台...

    《超实用的jQuery代码段》 PDF

    《超实用的jQuery代码段》精选近350个jQuery代码段,涵盖页面发中绝大多数要、技巧与方法,堪称*实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台、跨设备、...

    JQuery 游戏 俄罗斯方块 代码

    【jQuery 游戏 俄罗斯方块 代码】是一款基于JavaScript库jQuery实现的网页版俄罗斯方块游戏。这个游戏的特色在于其简洁高效的代码实现,通过利用jQuery的事件处理和DOM操作功能,使得开发者可以用相对较少的代码量...

    电商网站jQuery放大镜代码.rar

    电商网站jQuery放大镜代码.rar 电商网站jQuery放大镜代码.rar 电商网站jQuery放大镜代码.rar 电商网站jQuery放大镜代码.rar 电商网站jQuery放大镜代码.rar 电商网站jQuery放大镜代码.rar 电商网站jQuery放大镜代码....

Global site tag (gtag.js) - Google Analytics