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>
);
});