你的位置:首页 > Java教程

[Java教程]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" 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="#" rel="css/background-blue.css">蓝色背景</a>    <a href="#" rel="css/background-green.css">绿色背景</a>    <a href="#" rel="css/background-yellow.css">黄色背景</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 id="top" href="#">回到页面顶端</a></div></body></html>