JQuery 的几个有用的技巧，JQuery有用技巧_H5之家 - 中国HTML5教程资源分享第一站

JQuery 的几个有用的技巧，JQuery有用技巧

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" 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="#">蓝色背景</a> <a href="#">绿色背景</a> <a href="#">黄色背景</a> </div> <br/> <div><p>调整字体大小</p> <a href="#">重置字体大小</a> <a href="#">加大字体大小</a> <a 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> <a href="#">回到页面顶端</a> </div> </body> </html>