jquery 小技巧

来源:互联网 发布:java链接oracle数据库 编辑:程序博客网 时间:2024/05/01 07:26
1 使用load加载
   可以使用load去加载外部文件
  
Java代码  收藏代码
  1. <!-- File name index.html -->  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  
  3. "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  
  4. <html>  
  5.     <head>  
  6.         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/  
  7.         libs/jquery/1.7.1/jquery.min.js"></script>  
  8.         <title>Load external files with jQuery Demo</title>  
  9.         <style type="text/css">  
  10.             .load_files {  
  11.                 padding: 5px;  
  12.                 font-weight: bold;  
  13.                 background-color: #A9F5A9;  
  14.                 border: solid #333333 1px;  
  15.                 cursor: pointer;  
  16.             }  
  17.             /* 装载中的图片*/  
  18.             .loading {  
  19.                 width: 20px;  
  20.                 height: 20px;  
  21.                 background-image: url('loader.gif');  
  22.                 display: none;  
  23.             }  
  24.   
  25.         </style>  
  26.         <script type="text/javascript">  
  27.             $(function() {  
  28.                 $(".load_files").click(function() {  
  29.                     $(this).hide();  
  30.                     /*当点加载按钮时,显示加载的图案*/  
  31.                     $(".loading").show();  
  32.                                         $(".loaded_files").load('external.html', function() {  
  33.   
  34.       //加载完毕隐藏加载图形                      $(".loading").hide();  
  35.                                             });  
  36.                 });  
  37.             });  
  38.   
  39.         </script>  
  40.     </head>  
  41.     <body>  
  42.         <h2>Load external files with jQuery</h2>  
  43.         <button class="load_files">  
  44.             Load Files  
  45.         </button>  
  46.         <div class="loading"></div>  
  47.         <div class="loaded_files"></div>  
  48.     </body>  
  49. </html>  

  

2 让用户自由的改动字体
   
Java代码  收藏代码
  1. $(document).ready(function() {  
  2.     //获得当前字体大小    
  3. var originalFontSize = $('html').css('font-size');  
  4.   
  5.   
  6.     //增加字体大小  
  7.     $(".increaseFont").click(function() {  
  8.         var currentFontSize = $('html').css('font-size');  
  9.         var currentFontSizeNumber = parseFloat(currentFontSize, 10);  
  10.         //设置新的字体大小  
  11.         var newFontSize = currentFontSizeNumber*1.2;  
  12.         $('html').css('font-size', newFontSize);  
  13.         return false;  
  14.     });  
  15.   
  16.     //减少字体大小  
  17.     $(".decreaseFont").click(function() {  
  18.         var currentFontSize = $('html').css('font-size');  
  19.         var currentFontSizeNum = parseFloat(currentFontSize, 10);  
  20.                 var newFontSize = currentFontSizeNum*0.8;  
  21.         $('html').css('font-size', newFontSize);  
  22.         return false;  
  23.     });  
  24.   
  25.     //重新恢复字体大小   
  26.     $(".resetFont").click(function(){  
  27.     $('html').css('font-size', originalFontSize);  
  28.   });  
  29. });  


3 在新窗口中打开连接
  
Java代码  收藏代码
  1.    $(document).ready(function() {  
  2.       
  3.     $("a[href^='http']").attr('target','_blank');  
  4. });  


4 禁止右键
  
Java代码  收藏代码
  1. //check that the DOM is ready  
  2. $(document).ready(function() {  
  3.     //catch the right-click context menu  
  4.     $(document).bind("contextmenu",function(e) {                   
  5.         //warning prompt - optional  
  6.         alert("No right-clicking!");  
  7.                        
  8.         //cancel the default context menu  
  9.         return false;  
  10.     });  
  11. });  


5 快速将用户从底部带到顶部
  
Java代码  收藏代码
  1. $(document).ready(function() {  
  2.     //when the id="top" link is clicked  
  3.     $('#top').click(function() {  
  4.         //scoll the page back to the top  
  5.         $(document).scrollTo(0,500);  
  6.     }  
  7. });  
原文参考:http://jackyrong.iteye.com/blog/1420784   尊重原创