jquery中几个小技巧

转载

mb5c80f4c73b73a 2022-12-05 09:30:32 博主文章分类：ajax/web相关

文章标签 jquery ViewUI html css 加载 文章分类 后端开发

再次小结若干个jquery的小技巧

1 使用load加载
可以使用load去加载外部文件

<!-- File name index.html -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/
    libs/jquery/1.7.1/jquery.min.js"></script>
    <title>Load external files with jQuery Demo</title>
    <style type="text/css">
      .load_files {
        padding: 5px;
        font-weight: bold;
        background-color: #A9F5A9;
        border: solid #333333 1px;
        cursor: pointer;
      }
      /* 装载中的图片*/
      .loading {
        width: 20px;
        height: 20px;
        background-image: url('loader.gif');
        display: none;
      }

    </style>
    <script type="text/javascript">
      $(function() {
        $(".load_files").click(function() {
          $(this).hide();
          /*当点加载按钮时,显示加载的图案*/
          $(".loading").show();
                    $(".loaded_files").load('external.html', function() {

      //加载完毕隐藏加载图形            $(".loading").hide();
                      });
        });
      });

    </script>
  </head>
  <body>
    <h2>Load external files with jQuery</h2>
    <button class="load_files">
      Load Files
    </button>
    <div class="loading"></div>
    <div class="loaded_files"></div>
  </body>
</html>

2 让用户自由的改动字体

$(document).ready(function() {
  //获得当前字体大小  
var originalFontSize = $('html').css('font-size');


  //增加字体大小
  $(".increaseFont").click(function() {
    var currentFontSize = $('html').css('font-size');
    var currentFontSizeNumber = parseFloat(currentFontSize, 10);
    //设置新的字体大小
    var newFontSize = currentFontSizeNumber*1.2;
    $('html').css('font-size', newFontSize);
    return false;
  });

  //减少字体大小
  $(".decreaseFont").click(function() {
    var currentFontSize = $('html').css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
        var newFontSize = currentFontSizeNum*0.8;
    $('html').css('font-size', newFontSize);
    return false;
  });

  //重新恢复字体大小 
  $(".resetFont").click(function(){
  $('html').css('font-size', originalFontSize);
  });
});

3 在新窗口中打开连接

$(document).ready(function() {

  $("a[href^='http']").attr('target','_blank');
});

4 禁止右键

//check that the DOM is ready
$(document).ready(function() {
  //catch the right-click context menu
  $(document).bind("contextmenu",function(e) {         
    //warning prompt - optional
    alert("No right-clicking!");

    //cancel the default context menu
    return false;
  });
});

5 快速将用户从底部带到顶部

$(document).ready(function() {
  //when the id="top" link is clicked
  $('#top').click(function() {
    //scoll the page back to the top
    $(document).scrollTo(0,500);
  }
});