JQuery实用技巧（二）

列高度相同

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

 
 
$(document).ready(function() {     
  function equalHeight(group) {     
  tallest = 0;     
  group.each(function() {     
 
  thisHeight = $(this).height();     
 
  if(thisHeight > tallest) {     
 
     tallest = thisHeight;     
 
  }     
 
});     
 
group.height(tallest);     
}     
 // how to use     
 $(document).ready(function() {     
 
   equalHeight($(".left"));     
 
   equalHeight($(".right"));     
 
  });     
 
});   

动态控制页面字体大小

 
 
$(document).ready(function() {     
 
  // Reset the font size(back to default)     
  var originalFontSize = $('html').css('font-size');     
 
  $(".resetFont").click(function(){     
  $('html').css('font-size', originalFontSize);     
 
});     
 
  // Increase the font size(bigger font0     
  $(".increaseFont").click(function(){     
 
var currentFontSize = $('html').css('font-size');     
var currentFontSizeNum = parseFloat(currentFontSize, 10);     
var newFontSize = currentFontSizeNum*1.2;     
 
$('html').css('font-size', newFontSize);     
 
   return false;     
 
});     
 
// Decrease the font size(smaller font)     
$(".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;     
  });     
});   

返回页面顶部功能

 
 
$(document).ready(function() {     
$('a[href*=#]').click(function() {     
   if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')     
   && location.hostname == this.hostname) {     
   var $target = $(this.hash);     
$target = $target.length && $target     
  || $('[name=' + this.hash.slice(1) +']');     
  if ($target.length) {     
 
var targetOffset = $target.offset().top;     
 
$('html,body')     
  .animate({scrollTop: targetOffset}, 900);     
  return false;     
}     
 
}     
});     
 
// how to use     
// place this where you want to scroll to     
 
<A name=top></A>   
    
// the link     
<A href="#top">go to top</A>     
});   

获得鼠标指针XY值

 
 
   $(document).ready(function() {     
   $().mousemove(function(e){     
     //display the x and y axis values inside the div with the id XY     
   $('#XY').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);     
 
});     
 
// how to use     
 
<DIV id=XY></DIV>     
});   

验证元素是否为空

 
 
  $(document).ready(function() {     
    if ($('#id').html()) {     
    // do something     
  }     
});   

替换元素

 
 
$(document).ready(function() {     
$('#id').replaceWith('    
  <DIV>I have been replaced</DIV>    
  );     
});