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>

JQuery 的几个有用的技巧的更多相关文章

  1. jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等

    转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...

  2. Xmind几个有用的技巧

    Xmind是一个很好的思维导图工具,是学习研究总结的好帮手. Xmind功能很丰富,这里只是简要列出几个比较有用的技巧. 1.善用属性 选中一个xmind元素(专业名词叫[主题])后,一般在右下角会出 ...

  3. jQuery 使用注意事项 与 小技巧（tips）

    jQuery 使用注意事项 与 小技巧(tips) 1 $( document ).ready() https://learn.jquery.com/using-jquery-core/documen ...

  4. jQuery 选择器和JavaScript 选择器的技巧与异常原因

    jquery的选择器借鉴了css选择器,核心依然依靠JavaScript的getElementById()和getElementsByTagName()方法,但是他封装了2个方法,让jquery选择器 ...

  5. jQuery 插件编程精讲与技巧

    适应的读者: 1.有一定的jquery编程基础但是想在技能上有所提升的人 2.前端开发的程序员 3.对编程感兴趣的学生 为什么要学习jquery插件的编写? 为什么要学习jquery插件的编写?相信这 ...

  6. iOS 开发的9个超有用小技巧

    http://www.jianshu.com/p/221507eb8590 1.如何快速的查看一段代码的执行时间. 1 2 #define TICK   NSDate *startTime = [NS ...

  7. PHP程序员的10个有用的技巧和教程

    PHP被定义为一个通用的服务器端脚本语言,它基本上是专为Web开发的重要目的.借助PHP可以创建动态和惊人的网页效果,他是被嵌入在一个HTML源文件的服务器端的脚本语言之一.因此,它成为最流行的,也是 ...

  8. Pycharm5个非常有用的技巧

    PyCharm 是一款非常强大的编写 python 代码的工具.掌握一些小技巧能成倍的提升写代码的效率,本篇介绍几个经常使用的小技巧. 一.分屏展示 当你想同时看到多个文件的时候: 右击标签页: 选择 ...

  9. javascript有用小技巧—实现分栏显示

    记得给师哥师姐測试考试系统的时候,看到他们的考试页面能够实现隐藏左边的考生信息部分,当时认为好高大上.好人性化. 如今学了javascript,我也能实现这个功能了,以下来显摆一下. 1.页面设计: ...

随机推荐

  1. Citrix 服务器虚拟化之五 Xenserver配置存储

    Citrix 服务器虚拟化之五  Xenserver配置存储 XenServer中定义了一个容器称为存储库(SR)来描述一个特定的存储目标存储虚拟磁盘映像(VDI). VDI是一个的磁盘抽象,包含一个 ...

  2. sqlldr导入数据

    直接在cmd输入sqlldr即可,不需要先输sqlplus. 参考链接:每次提交多少行很重要:http://www.cnblogs.com/wingsless/archive/2012/08/04/2 ...

  3. JAVA中的定时调度(Timer和TimerTask)

    某些时候我们需要定时去完成一些任务,这里举一个例子:我们需要在3秒钟后打印当前系统时间,此后每隔5秒重复此操作.代码如下: import java.util.TimerTask; import jav ...

  4. sikuli常用方法学习

    Screen s = new Screen(); 1.在文本框中填入文本 以下两个方法都可以 type是用来在文本框中输入指定的文本 paste是用来在文本框中复制指定的文本 s.type(imgpa ...

  5. springmvc笔记(基本配置,核心文件,路径,参数,文件上传,json整合)

    首先导入jar包 大家注意一下我的springmvc,jackson,common-up的jar包版本.其他版本有可能出现不兼容. src文件: webroot目录: web.xml <?xml ...

  6. 如何使weblogic11g类似weblogic923一样统一使用一个boot.properties文件

    如何使weblogic11g类似weblogic923一样 统一使用一个boot.properties文件 1.在weblogic域下创建文件boot.properties输入用户密码例如:usern ...

  7. [ASP.NET]动态绑定树控件：

    public void BindTree(TreeView tview, TreeNode tn_main, string parentId,string sql) { TreeNode tn=nul ...

  8. [模板总结] Java的一些模板

    快速排序(数组a从小到大,参数1是待排序的数组,参数2是起始下标,参数3是终止下标): static void sort(int [] a, int l,int r){ int m = l+r> ...

  9. HTTP 和 HTTPS 协议

    HTTP协议是什么? 简单来说,就是一个基于应用层的通信规范:双方要进行通信,大家都要遵守一个规范,这个规范就是HTTP协议. HTTP协议能做什么? 很多人首先一定会想到:浏览网页.没错,浏览网页是 ...

  10. Oracle corrupt block（坏块） 详解

    转自:http://blog.csdn.net/tianlesoftware/article/details/5024966 一. 坏块说明 1.1 相关链接 在看坏块之前,先看几个相关的链接,在后面 ...