热门关键字：
jquery > jquery教程 > 常用功能 > 漫画最新整理Jquery实用代码片段(1~6)

漫画最新整理Jquery实用代码片段(1~6)

2436
作者：管理员
发布时间：2012/7/26 20:52:03
评论数：0
转载请自觉注明原文：http://www.jq-school.com/Show.aspx?id=23
1、把所有带有#的空链接换成不友情的链接
  1. $('a[href="#"]').each(function() {   
  2.     $(this).attr('href', 'javascript:void(0)')   
  3. });  
 
2、jQuery全选与取消全选插件
  1. (function($){   
  2.     $.fn.checkall = function(options){   
  3.         var defaults = {chname:"checkname[]", callback:null},   
  4.             options = $.extend(defaults, options),   
  5.             $obj = $(this),   
  6.             $items = $("input[name='"+options.chname+"']"),   
  7.             checkedItem = 0;   
  8.         $items.click(function(){   
  9.             if($items.filter(":checked").length === $items.length){   
  10.                 $obj.attr("checked",true);   
  11.             }else{   
  12.                 $obj.removeAttr("checked");   
  13.             }   
  14.             checkedItem = $items.filter(":checked").length;   
  15.             if(typeof options.callback === "function") options.callback(checkedItem);   
  16.         });   
  17.         return $obj.each(function(){   
  18.             $(this).click(function(){   
  19.                 if($(this).attr("checked")){   
  20.                     $items.attr("checked",true);   
  21.                 }else{   
  22.                     $items.removeAttr("checked");   
  23.                 }   
  24.                 checkedItem = $items.filter(":checked").length;   
  25.                 if(typeof options.callback === "function") options.callback(checkedItem);   
  26.             });   
  27.         });   
  28.     }   
  29. })(jQuery);  
 
3、滚动条自动滚到顶部方法
  1. $("html,body").animate({scrollTop: 0}, "slow");  
 
4、滚动条自动滚到底部方法
  1. var s = $("body").height()-$(window).height();   
  2. $("html,body").animate({scrollTop: s}, "slow");  
 
5、jQuery自动根据图片高度宽度缩
  1. jQuery.fn.ImageAutoSize = function(width,height){   
  2.     $(“img”,this).each(function(){   
  3.     var image = $(this);   
  4.         if(image.width()>width){   
  5.             image.width(width);   
  6.             image.height(width/image.width()*image.height());   
  7.         }   
  8.         if(image.height()>height){   
  9.             image.height(height);   
  10.             image.width(height/image.height()*image.width());   
  11.         }   
  12.     });   
  13. }  
调用:先引用上面的脚本或将上页的脚本放入自己的JS库,然后只要再加 $(function(){ $(“图片组所在的容器”).ImageAutoSize(限制最大宽,限制最大高);});
 
6、JQuery IFrame框架高度自适应（支持嵌套–兼容IE,ff,safafi,chrome）
  1. $("#IframeID").load(function() {    
  2.     $(this).height($(this).contents().height());   
  3. })   
有一点需要注意的，我也在调试的时候才发现的，耽误了不少时间。就是绑定事件必须在iframe加载完毕之前绑定，否则不会执行。
以下是jQuery,load事件的概述
在每一个匹配元素的load事件中绑定一个处理函数。
如果绑定给window对象，则会在所有内容加载后触发，包括窗口，框架，对象和图像。如果绑定在元素上，则当元素的内容加载完毕后触发。
注意:只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。所以不要在$(document).ready()里绑定load事件，因为jQuery会在所有DOM加载完成后再绑定load事件。
 




如果您觉得本文的内容对您的学习有所帮助：支付鼓励



关键字：Jquery学堂 Jquery知识
友荐云推荐