web前端开发几个有用的JQuery技巧

时间:2016-03-02
简介:WEB前端|JQuery代码web前端开发几个有用的JQuery技巧/* 新窗口打开链接:JQuery filter attr * 禁止鼠标弹出右键菜单:DOM conte

JQuery代码web前端开发几个有用的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.ablanxue.com/web/">web开发</a><br/>
    <a href="http://www.ablanxue.com/web/html5/">html5</a><br/>
    <a href="http://www.ablanxue.com/web/css3/">css3</a><br/>
</div>
<div class="layout-bottom">
    <a id="top" href="#">回到页面顶端</a>
</div>
</body>
</html>

TAGS:JQuery技巧

上一编:jQuery CSS属性操作 jQuery动态改变div css样式

下一编:jQuery+CSS让两栏/多栏div布局高度自动一致

New Hot