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>
新闻热点
疑难解答
