JQuery 的几个有用的技巧-优快云博客

本文介绍了使用JQuery实现的多项实用技巧，包括在新窗口打开链接、禁用鼠标右键菜单、快速返回页面顶部、动态更换CSS样式表、以及调整网页字体大小的方法。通过这些技巧，可以增强网站的用户体验并提高开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JQuery代码

/* 新窗口打开链接：JQuery filter attr
 * 禁止鼠标弹出右键菜单：DOM contextmenu
 * 回到页面顶端：DOM scrollTo
 * 动态更换Css样式表：JQuery filter Element Attribute
 * 调整页面字体大小： Css html.css parseFloat
 */
//确定DOM载入完成
$(document).ready(function () {

    /* 链接的href属性以http开头的都在新窗口打开链接 */
    // ^ 过滤器，属性：以特定字符串开始
    $("a[href ^='http']").attr("target", "_blank");

    /* 禁止鼠标右键 */
    //DOM的contextmenu是鼠标右键菜单
    $(document).bind("contextmenu", function (e) {
        alert(("No right-clicking!"));
        //不向下执行，也就是说右键菜单不出来
        return false;
    });

    /* 回到页面顶端 */
    //id="top" 的元素的click事件触发
    $('#top').click(function () {
        //回到页面顶端
        $(document).scrollTo(0, 500);
    });


    /* 动态更换页面的css样式表 */
    //用页面链接的href的值换掉了link标签的href属性值
    $("a.cssSwap").click(function(){
        $("link[rel=stylesheet]").attr("href",$(this).attr("rel"));
    });


    /* 页面字体大小的放大、缩小、还原 */
    //取得字体大小，在html标记下定义了font-size
    var originalFontSize = $("html").css("font-size");
    //恢复默认字体大小
    $(".resetFont").click(function () {
        $("html").css("font-size", originalFontSize);
        //JavaScript不向下执行
        return false;
    });

    //加大字体,某个元素的class定义为increaseFont
    $(".increaseFont").click(function () {
        //取得当前字体大小 后缀px,pt,pc
        var currentFontSize = $("html").css("font-size");
        //取得当前字体大小，parseFloat()转为float类型去除后缀
        var currentFontSizeNumber = parseFloat(currentFontSize);
        //新定义的字体大小
        var newFontSize = currentFontSizeNumber * 1.1;
        //重写样式表
        $("html").css("font-size", newFontSize);
        //JavaScript不向下执行
        return false;
    });

    //减小字体，某个元素的class定义为decreaseFont
    $(".decreaseFont").click(function () {
        //取得当前字体大小 后缀px,pt,pc
        var currentFontSize = $("html").css("font-size");
        //取得当前字体大小，parseFloat()转为float类型去除后缀
        var currentFontSizeNumber = parseFloat(currentFontSize);
        //重新定义字体大小
        var newFontSize = currentFontSizeNumber * 0.9;
        //重写样式表
        $("html").css("font-size", newFontSize);
        //JavaScript不向下执行
        return false;
    });
});

Html代码：

<!DOCTYPE html>
<meta charset="utf-8"/>
<html>
<head>
    <title>JQuery 有益的技巧</title>
    <!-- 默认样式表 -->
    <link type="text/css" rel="stylesheet" href="css/background-white.css"/>
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="script/helpful-tricks.js"></script>
</head>

<body>
<header>
    <div><p>动态改变样式表</p>
        <a href="#" class="cssSwap" rel="css/background-blue.css">蓝色背景</a>
        <a href="#" class="cssSwap" rel="css/background-green.css">绿色背景</a>
        <a href="#" class="cssSwap" rel="css/background-yellow.css">黄色背景</a>
    </div>
    <br/>

    <div><p>调整字体大小</p>
        <a class="resetFont" href="#">重置字体大小</a>
        <a class="increaseFont" href="#">加大字体大小</a>
        <a class="decreaseFont" href="#">减小字体大小</a>
    </div>
</header>
<div><p>在新窗口打开链接</p>
    <a href="http://www.sina.com.cn">新浪</a><br/>
    <a href="http://www.sohu.com.cn">搜狐</a><br/>
    <a href="http://www.cnblogs.com">博客园</a><br/>
</div>
<div class="layout-bottom">
    <a id="top" href="#">回到页面顶端</a>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/ponyblog/p/2379791.html