程序博客网 > 好搜刷排名软件

12个Jquery使用技巧

来源：互联网 发布：好搜刷排名软件 编辑：程序博客网 时间：2024/06/07 03:06

1. 禁止右键点击

[javascript] view plaincopy
  1. $(document).ready(function(){
  2. $(document).bind("contextmenu",function(e){
  3. return false;
  4. });
  5. });
[javascript] view plain copy
  1. $(document).ready(function(){  
  2.      $(document).bind("contextmenu",function(e){  
  3.          return false;  
  4.      });  
  5.  });   


2. 预加载图片

[javascript] view plaincopy
  1. $(document).ready(function(){
  2. jQuery.preloadImages = function()
  3. {
  4. for(var i = 0; i<ARGUMENTS.LENGTH; jQuery(?<img { i++)>").attr("src", arguments[i]);
  5. }
  6. }
  7. // how to use
  8. $.preloadImages("image1.jpg");
  9. });
[javascript] view plain copy
  1. $(document).ready(function(){  
  2.  jQuery.preloadImages = function()  
  3.  {  
  4.    for(var i = 0; i<ARGUMENTS.LENGTH; jQuery(?<img { i++)>").attr("src", arguments[i]);  
  5.    }  
  6.  }  
  7.  // how to use  
  8.  $.preloadImages("image1.jpg");   
  9. });   


3. 页面样式切换

[javascript] view plaincopy
  1. $(document).ready(function() {
  2. $("a.Styleswitcher").click(function() {
  3. //swicth the LINK REL attribute with the value in A REL attribute
  4. $('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));
  5. });
  6. // how to use
  7. // place this in your header
  8. <LINK rel=stylesheet type=text/css href="default.css">
  9. // the links
  10. <A class=Styleswitcher href="#" rel=default.css>Default Theme</A>
  11. <A class=Styleswitcher href="#" rel=red.css>Red Theme</A>
  12. <A class=Styleswitcher href="#" rel=blue.css>Blue Theme</A>
  13. });
[javascript] view plain copy
  1. $(document).ready(function() {  
  2.      $("a.Styleswitcher").click(function() {  
  3.          //swicth the LINK REL attribute with the value in A REL attribute  
  4.          $('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));  
  5.      });  
  6.  // how to use  
  7.  // place this in your header  
  8.  <LINK rel=stylesheet type=text/css href="default.css">  
  9.  // the links  
  10.  <A class=Styleswitcher href="#" rel=default.css>Default Theme</A>  
  11.  <A class=Styleswitcher href="#" rel=red.css>Red Theme</A>  
  12.  <A class=Styleswitcher href="#" rel=blue.css>Blue Theme</A>  
  13.  }); 

4. 列高度相同

如果使用了两个CSS列，使用此种方式可以是两列的高度相同。

[javascript] view plaincopy
  1. $(document).ready(function() {
  2. function equalHeight(group) {
  3. tallest = 0;
  4. group.each(function() {
  5. thisHeight = $(this).height();
  6. if(thisHeight > tallest) {
  7. tallest = thisHeight;
  8. }
  9. });
  10. group.height(tallest);
  11. }
  12. // how to use
  13. $(document).ready(function() {
  14. equalHeight($(".left"));
  15. equalHeight($(".right"));
  16. });
  17. });
[javascript] view plain copy
  1. $(document).ready(function() {  
  2.    function equalHeight(group) {  
  3.      tallest = 0;  
  4.      group.each(function() {  
  5.          thisHeight = $(this).height();  
  6.          if(thisHeight > tallest) {  
  7.              tallest = thisHeight;  
  8.          }  
  9.      });  
  10.      group.height(tallest);  
  11.  }  
  12.  // how to use  
  13.  $(document).ready(function() {  
  14.      equalHeight($(".left"));  
  15.      equalHeight($(".right"));  
  16.  });  
  17.  });  

5. 动态控制页面字体大小

用户可以改变页面字体大小

[javascript] view plaincopy
  1. $(document).ready(function() {
  2. // Reset the font size(back to default)
  3. var originalFontSize = $('html').css('font-size');
  4. $(".resetFont").click(function(){
  5. $('html').css('font-size', originalFontSize);
  6. });
  7. // Increase the font size(bigger font0
  8. $(".increaseFont").click(function(){
  9. var currentFontSize = $('html').css('font-size');
  10. var currentFontSizeNum = parseFloat(currentFontSize, 10);
  11. var newFontSize = currentFontSizeNum*1.2;
  12. $('html').css('font-size', newFontSize);
  13. return false; });
  14. // Decrease the font size(smaller font)
  15. $(".decreaseFont").click(function(){
  16. var currentFontSize = $('html').css('font-size');
  17. var currentFontSizeNum = parseFloat(currentFontSize, 10);
  18. var newFontSize = currentFontSizeNum*0.8;
  19. $('html').css('font-size', newFontSize);
  20. return false;
  21. });
  22. });
[javascript] view plain copy
  1. $(document).ready(function() {  
  2.    // Reset the font size(back to default)  
  3.    var originalFontSize = $('html').css('font-size');  
  4.      $(".resetFont").click(function(){  
  5.      $('html').css('font-size', originalFontSize);  
  6.    });  
  7.    // Increase the font size(bigger font0  
  8.    $(".increaseFont").click(function(){  
  9.      var currentFontSize = $('html').css('font-size');  
  10.      var currentFontSizeNum = parseFloat(currentFontSize, 10);  
  11.      var newFontSize = currentFontSizeNum*1.2;  
  12.      $('html').css('font-size', newFontSize);  
  13.      return false;   });  
  14.    // Decrease the font size(smaller font)  
  15.    $(".decreaseFont").click(function(){  
  16.      var currentFontSize = $('html').css('font-size');  
  17.      var currentFontSizeNum = parseFloat(currentFontSize, 10);  
  18.      var newFontSize = currentFontSizeNum*0.8;  
  19.      $('html').css('font-size', newFontSize);  
  20.      return false;  
  21.    });  
  22.  });   
  23.    
  24.    

6. 返回页面顶部功能

[javascript] view plaincopy
  1. $(document).ready(function() {
  2. $('a[href*=#]').click(function() {
  3. if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
  4. && location.hostname == this.hostname) {
  5. var $target = $(this.hash);
  6. $target = $target.length && $target
  7. || $('[name=' + this.hash.slice(1) +']');
  8. if ($target.length) {
  9. var targetOffset = $target.offset().top;
  10. $('html,body')
  11. .animate({scrollTop: targetOffset}, 900);
  12. return false;
  13. }
  14. }
  15. });
  16. // how to use
  17. // place this where you want to scroll to
  18. <A name=top></A>
  19. // the link
  20. <A href="#top">go to top</A>
  21. });
[javascript] view plain copy
  1. $(document).ready(function() {  
  2.  $('a[href*=#]').click(function() {  
  3.   if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')  
  4.   && location.hostname == this.hostname) {  
  5.     var $target = $(this.hash);  
  6.     $target = $target.length && $target  
  7.     || $('[name=' + this.hash.slice(1) +']');  
  8.     if ($target.length) {  
  9.    var targetOffset = $target.offset().top;  
  10.    $('html,body')  
  11.    .animate({scrollTop: targetOffset}, 900);  
  12.      return false;  
  13.     }  
  14.    }  
  15.    });  
  16.  // how to use  
  17.  // place this where you want to scroll to  
  18.  <A name=top></A>  
  19.  // the link  
  20.  <A href="#top">go to top</A>  
  21.  });   


7. jQuery延时加载功能

[javascript] view plaincopy
  1. $(document).ready(function() {
  2. window.setTimeout(function() {
  3. // do something
  4. }, 1000);
  5. });
[javascript] view plain copy
  1. $(document).ready(function() {  
  2.     window.setTimeout(function() {  
  3.       // do something  
  4.     }, 1000);  
  5.  });   
  6.   
  7.    


8. ID与Class之间转换.

当改变Window大小时，在ID与Class之间切换

[javascript] view plaincopy
  1. $(document).ready(function() {
  2. function checkWindowSize() {
  3. if ( $(window).width() > 1200 ) {
  4. $('body').addClass('large');
  5. }
  6. else {
  7. $('body').removeClass('large');
  8. }
  9. }
  10. $(window).resize(checkWindowSize);
  11. });
[javascript] view plain copy
  1. $(document).ready(function() {  
  2.     function checkWindowSize() {  
  3.      if ( $(window).width() > 1200 ) {  
  4.          $('body').addClass('large');  
  5.      }  
  6.      else {  
  7.          $('body').removeClass('large');  
  8.      }  
  9.     }  
  10.  $(window).resize(checkWindowSize);  
  11.  });   


9. 使元素居屏幕中间位置

[javascript] view plaincopy
  1. $(document).ready(function() {
  2. jQuery.fn.center = function () {
  3. this.css("position","absolute");
  4. this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
  5. this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
  6. return this;
  7. }
  8. $("#id").center();
  9. });
[javascript] view plain copy
  1. $(document).ready(function() {  
  2.    jQuery.fn.center = function () {  
  3.        this.css("position","absolute");  
  4.        this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");  
  5.        this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");   
  6.       return this;  
  7.    }  
  8.    $("#id").center();  
  9.  });   


10. 引用Google主机上的Jquery类库

[javascript] view plaincopy
  1. //Example 1
  2. <SCRIPT src="http://www.google.com/jsapi"></SCRIPT>
  3. <SCRIPT type=text/javascript> google.load("jquery", "1.2.6");
  4. google.setOnLoadCallback(function() {
  5. // do something });
  6. </SCRIPT>
  7. <SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></SCRIPT>
  8. // Example 2:(the best and fastest way)
  9. <SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></SCRIPT>
[javascript] view plain copy
  1. //Example 1  
  2.  <SCRIPT src="http://www.google.com/jsapi"></SCRIPT>  
  3.  <SCRIPT type=text/javascript> google.load("jquery", "1.2.6");  
  4.  google.setOnLoadCallback(function() {  
  5.      // do something });  
  6.  </SCRIPT><SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></SCRIPT>  
  7.     // Example 2:(the best and fastest way)  
  8.  <SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></SCRIPT>   
  9.    

11. 禁用Jquery（动画）效果

[javascript] view plaincopy
  1. $(document).ready(function() {
  2. jQuery.fx.off = true;
  3. });
[javascript] view plain copy
  1. $(document).ready(function() {  
  2.     jQuery.fx.off = true;  
  3. });   

12. 与其他Javascript类库冲突解决方案

[javascript] view plaincopy
  1. $(document).ready(function() {
  2. var $jq = jQuery.noConflict();
  3. $jq('#id').show();
  4. });
阅读全文
0 0
好搜刷排名软件 好搜刷排名软件
原创粉丝点击
热门IT博客
a星算法原理a星算法原理
全民淘宝客平台全民淘宝客平台
鱼鹰软件立项申请单
ie缓存中js被篡改
现金结算股份支付 知乎
北京网络营销策划公司
雅思口语书籍知乎
虎扑认证vans淘宝店铺
getrow java
科比1213赛季数据
linux http文件服务器
php电子书下载
mysql数据库恢复命令
unity3d 室内装修
网络运维面试题及答案
苹果开蜂窝数据 快捷
linux bsp基础知识
c语言是脚本语言吗
女神都有什么特征 知乎
服装平面设计软件
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 蒸脸器和面膜使用顺序 哪种蒸脸器好用 中草药蒸脸器 蒸脸有用吗 蒸脸器价格 便携式蒸脸器 痘痘肌适合蒸脸吗 加湿器可以蒸脸吗 蒸脸器排行榜 蒸脸器的好处和坏处 蒸脸机 蒸脸器什么牌子好 蒸脸机有用吗 蒸脸器哪个牌子好 松下蒸脸器 蒸脸器怎么用 蒸脸器有用吗 蒸脸有什么好处 蒸脸有什么好处和坏处 蒸脸好吗 蒸脸要蒸多长时间 怎么蒸脸 蒸脸仪有用吗 热水蒸脸 精油蒸脸 蒸完脸后的护肤步骤 先蒸脸还是先洗脸 热水蒸脸有什么好处 水蒸气蒸脸 蒸脸仪哪个牌子好 蒸汽蒸脸好不好 经常用蒸脸器蒸脸好吗 蒸脸面膜 松下蒸脸 蒸汽蒸脸好吗 茶树精油蒸脸 用水蒸气蒸脸 蒸脸加湿器 加湿器蒸脸 蒸脸机使用方法 纳米离子蒸脸器

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里