JQuery 的幾個有用的技巧

時間 2019-12-06

原文原文鏈接

JQuery代碼javascript

/* 新窗口打開連接：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代碼：css

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。