JQuery代码

  1. /* 新窗口打开链接：JQuery filter attr
  2.  * 禁止鼠标弹出右键菜单：DOM contextmenu
  3.  * 回到页面顶端：DOM scrollTo
  4.  * 动态更换Css样式表：JQuery filter Element Attribute
  5.  * 调整页面字体大小： Css html.css parseFloat
  6.  */
  7. //确定DOM载入完成
  8. $(document).ready(function () {
  9.  
  10.     /* 链接的href属性以http开头的都在新窗口打开链接 */
  11.     // ^ 过滤器，属性：以特定字符串开始
  12.     $("a[href ^='http']").attr("target", "_blank");
  13.  
  14.     /* 禁止鼠标右键 */
  15.     //DOM的contextmenu是鼠标右键菜单
  16.     $(document).bind("contextmenu", function (e) {
  17.         alert(("No right-clicking!"));
  18.         //不向下执行，也就是说右键菜单不出来
  19.         return false;
  20.     });
  21.  
  22.     /* 回到页面顶端 */
  23.     //id="top" 的元素的click事件触发
  24.     $('#top').click(function () {
  25.         //回到页面顶端
  26.         $(document).scrollTo(0, 500);
  27.     });
  28.  
  29.     /* 动态更换页面的css样式表 */
  30.     //用页面链接的href的值换掉了link标签的href属性值
  31.     $("a.cssSwap").click(function(){
  32.         $("link[rel=stylesheet]").attr("href",$(this).attr("rel"));
  33.     });
  34.  
  35.     /* 页面字体大小的放大、缩小、还原 */
  36.     //取得字体大小，在html标记下定义了font-size
  37.     var originalFontSize = $("html").css("font-size");
  38.     //恢复默认字体大小
  39.     $(".resetFont").click(function () {
  40.         $("html").css("font-size", originalFontSize);
  41.         //JavaScript不向下执行
  42.         return false;
  43.     });
  44.  
  45.     //加大字体,某个元素的class定义为increaseFont
  46.     $(".increaseFont").click(function () {
  47.         //取得当前字体大小 后缀px,pt,pc
  48.         var currentFontSize = $("html").css("font-size");
  49.         //取得当前字体大小，parseFloat()转为float类型去除后缀
  50.         var currentFontSizeNumber = parseFloat(currentFontSize);
  51.         //新定义的字体大小
  52.         var newFontSize = currentFontSizeNumber * 1.1;
  53.         //重写样式表
  54.         $("html").css("font-size", newFontSize);
  55.         //JavaScript不向下执行
  56.         return false;
  57.     });
  58.  
  59.     //减小字体，某个元素的class定义为decreaseFont
  60.     $(".decreaseFont").click(function () {
  61.         //取得当前字体大小 后缀px,pt,pc
  62.         var currentFontSize = $("html").css("font-size");
  63.         //取得当前字体大小，parseFloat()转为float类型去除后缀
  64.         var currentFontSizeNumber = parseFloat(currentFontSize);
  65.         //重新定义字体大小
  66.         var newFontSize = currentFontSizeNumber * 0.9;
  67.         //重写样式表
  68.         $("html").css("font-size", newFontSize);
  69.         //JavaScript不向下执行
  70.         return false;
  71.     });
  72. });

Html代码：

  1. <!DOCTYPE html>
  2. <meta charset="utf-8"/>
  3. <html>
  4. <head>
  5.     <title>JQuery 有益的技巧</title>
  6.     <!-- 默认样式表 -->
  7.     <link type="text/css" rel="stylesheet" href="css/background-white.css"/>
  8.     <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
  9.     <script type="text/javascript" src="script/helpful-tricks.js"></script>
  10. </head>
  11.  
  12. <body>
  13. <header>
  14.     <div><p>动态改变样式表</p>
  15.         <a href="#" class="cssSwap" rel="css/background-blue.css">蓝色背景</a>
  16.         <a href="#" class="cssSwap" rel="css/background-green.css">绿色背景</a>
  17.         <a href="#" class="cssSwap" rel="css/background-yellow.css">黄色背景</a>
  18.     </div>
  19.     <br/>
  20.  
  21.     <div><p>调整字体大小</p>
  22.         <a class="resetFont" href="#">重置字体大小</a>
  23.         <a class="increaseFont" href="#">加大字体大小</a>
  24.         <a class="decreaseFont" href="#">减小字体大小</a>
  25.     </div>
  26. </header>
  27. <div><p>在新窗口打开链接</p>
  28.     <a href="http://www.sina.com.cn">新浪</a><br/>
  29.     <a href="http://www.sohu.com.cn">搜狐</a><br/>
  30.     <a href="http://www.cnblogs.com">博客园</a><br/>
  31. </div>
  32. <div class="layout-bottom">
  33.     <a id="top" href="#">回到页面顶端</a>
  34. </div>
  35. </body>
  36. </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. ORM框架：EF与NHibernate了解

    在.Net Framework SP1微软包含一个实体框架(Entity Framework),此框架可以理解成微软的一个ORM产品.用于支持开发人员通过对概念性应用程序模型编程(而不是直接对关系存储 ...

  2. [SQL]SQL语言入门级教材_SQL语法参考手册（三）

    SQL 语法参考手册 DB2 提供了关连式资料库的查询语言 SQL (Structured Query Language),是一种非常口语化.既易学又易懂的语法. 此语言几乎是每个资料库系统都必须提供 ...

  3. Linux场景下的辅助命令操作汇总

    ============================================ 1.客户端: SecureCRT 7.1 或者putty 2.FTP 主要是上传文件往Linux,否则我们就的 ...

  4. unresolved external symbol "public: virtual __thiscall...错误

    今天自己在编写类模板的程序时,遇到了如下的错误:unresolved external symbol "public: virtual __thiscall...错误 调试修改了半天程序,还 ...

  5. Android 使用NineOldAndroids实现绚丽的ListView左右滑动删除Item效果

    本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/18311877) 今天还是给大家带来自定义控件的编写,自定义一个Lis ...

  6. [ CodeVS冲杯之路 ] P1092

    不充钱,你怎么AC? 题目:http://codevs.cn/problem/1092/ 嗯,这道题有一定难度啊,需要先用扩展欧几里得算法求出逆元,然后按照大小构一颗带边权为小时数的树 树链剖分后在树 ...

  7. 怎样调整CODESOFT中条码线的宽度

       CODESOFT是一款功能强大.灵活便捷的标签条码设计打印软件.在使用CODESOFT设计并打印标签,有时会因为打印精度或扫面清晰度等原因,需要调整条形码中行的宽度,即调整条码线宽度.本文,小编 ...

  8. 解决VS2008 开发Windows Mobile 项目生成速度慢的问题

    最近用VS2008开发Windows Mobile程序,使用C#..NET Compact Framework,发现项目生成速度比较慢.用VS2008打开项目后,开始一段时间生成速度还能忍受,时间一长 ...

  9. windows 10 笔记本关机不断电解决

    右键我的电脑-->管理-->设备管理器-->系统设备 找到Intel(R) Management Engine Interface  双击打开,禁用,确定,完事 原因,该驱动11.0 ...

  10. UVa10603 倒水 Fill-状态空间搜索

    https://vjudge.net/problem/UVA-10603 There are three jugs with a volume of a, b and c liters. (a, b, ...