跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客我的书AI学习GitHub 精选镜像AI工具UI配色美学关于
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
JavaScript大前端

8 个实用 jQuery 技巧

涵盖禁用右键、字体大小调整、新窗口打开链接、样式表切换、页面返回顶部、鼠标坐标获取以及图片预加载等 8 个常用场景的 jQuery 代码实现。内容涉及事件绑定、DOM 操作及属性修改,旨在提升前端开发效率与用户体验。

KernelLab发布于 2025/1/18更新于 2026/10/2491 浏览
8 个实用 jQuery 技巧

8 个实用 jQuery 技巧

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

1. 禁用右键单击功能

如果你想为用户节省网站信息,那么开发者可以使用这段代码——禁用右键单击功能。

$(document).ready(function() {
    $(document).on("contextmenu", function(e) {
        alert("No right-clicking!");
        return false;
    });
});

2. 使用 jQuery 设定文本大小

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

$(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(() {
         currentFontSize = $().();
         currentFontSizeNum = (currentFontSize, );
         newFontSize = currentFontSizeNum * ;
        $().(, newFontSize);
         ;
    });
    
    $().((){
        $().(, originalFontSize);
    });
});
function
var
'html'
css
'font-size'
var
parseFloat
10
var
0.8
'html'
css
'font-size'
return
false
'.resetFont'
click
function
'html'
css
'font-size'

3. 在新窗口打开链接

使用这段代码会帮助用户在新窗口打开链接,为用户带来更好的用户体验。

$(document).ready(function() {
    $("a[href^='http']").attr('target','_blank');
});

4. 更改样式列表

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

$(document).ready(function() {
    $("a.cssSwap").click(function() {
        $('link[rel=stylesheet]').attr('href', $(this).attr('rel'));
    });
});

5. 返回到顶部链接

此代码对于长时间点击单页面非常实用,你可以在重要关头点击'返回顶部'功能。

$(document).ready(function() {
    $('#top').click(function() {
        $('html, body').animate({ scrollTop: 0 }, 500);
    });
});

6. 获取鼠标指针的 X / Y 轴

$(document).mousemove(function(e){
    $('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
});

7. 检测当前鼠标坐标

使用这个脚本,你可以在任何网络浏览器获取鼠标坐标。

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

8. 图片预加载

此段代码帮助用户快速加载图片或网页页面。

$.preloadImages = function() {
    for(var ctr = 0; ctr < arguments.length; ctr++) {
        $('<img>').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. 8 个实用 jQuery 技巧
  2. 1. 禁用右键单击功能
  3. 2. 使用 jQuery 设定文本大小
  4. 3. 在新窗口打开链接
  5. 4. 更改样式列表
  6. 5. 返回到顶部链接
  7. 6. 获取鼠标指针的 X / Y 轴
  8. 7. 检测当前鼠标坐标
  9. 8. 图片预加载

更多推荐文章

查看全部
  • Clawbot 接入飞书与阿里云部署指南:打造 24 小时 AI 助理
  • 动态规划专题:子序列问题深度解析
  • 视觉语言模型(VLM)综述:训练、评估与扩展指南
  • Python 学习指南:基础语法、项目实战与职业路径
  • Go 1.24 Map 底层重构解析与性能收益
  • 旧安卓手机部署 Typecho 博客并实现外网访问
  • Python 实现空间注意力神经网络(SANN)的设计与实战
  • Linux 基础命令与 Java 项目部署实战
  • C++ map 容器:键值对有序管理与高效检索
  • 基于 Stable Diffusion v1.5 的企业产品概念图批量生成实践
  • Python 使用 Turtle 库实现动态烟花模拟效果
  • 无人机“黑飞”正式入法:2026 年 1 月 1 日起违规飞行将面临拘留
  • 环形链表检测、数组交集与随机链表复制
  • OpenDroneMap 实战指南:从无人机影像生成地理数据
  • CCF-CSP 第 38 次认证:机器人路径搜索题解
  • 队列的数组模拟与 STL queue 实战:从原理到代码实现
  • Arthas+IDEA 实战:Java 线上问题排查与 Spring Boot 落地
  • C++ GESP 七级核心考点与算法实战指南
  • Active Event Alignment for Monocular Distance Estimation 论文研读
  • OpenClaw v2026.3.8 全平台部署与本地模型对接教程

相关免费在线工具

  • Keycode 信息

    查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online

  • Escape 与 Native 编解码

    JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online

  • JavaScript / HTML 格式化

    使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online

  • JavaScript 压缩与混淆

    Terser 压缩、变量名混淆,或 javascript-obfuscator 高强度混淆(体积会增大)。 在线工具,JavaScript 压缩与混淆在线工具,online

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online