让子元素都是同样的高度

view plaincopy to clipboardprint?
$.fn.equalHeights = function() {
$(this).each(function(){
var currentTallest = 0;
$(this).children().each(function(i){
if ($(this).height() > currentTallest) { currentTallest = $(this).height(); }
});
// for ie6, set height since min-height isn't supported
if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); }
$(this).children().css({'min-height': currentTallest});
});
return this;
};
$.fn.equalHeights = function() {
$(this).each(function(){
var currentTallest = 0;
$(this).children().each(function(i){
if ($(this).height() > currentTallest) { currentTallest = $(this).height(); }
});
// for ie6, set height since min-height isn't supported
if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); }
$(this).children().css({'min-height': currentTallest});
});
return this;
};

使用方法

view plaincopy to clipboardprint?
$(function(){
$('#container').equalHeights();
})
$(function(){
$('#container').equalHeights();
})

via setting equal heights with jquery

避免css hack

通常我们为了兼容IE，会专门为它写一个CSS，如何通过jQuery来避免呢，可以尝试一下这段代码

view plaincopy to clipboardprint?
$(document).ready(function(){
$('html').addClass($.browser);
});
$(document).ready(function(){
$('html').addClass($.browser);
});

使用方法

view plaincopy to clipboardprint?
.msie .example {
background-color: red;
}
.mozilla .example {
background-color: green;
}
.opera .example {
background-color: cyan;
}
.safari .example {
background-color: black;
}
.js .example {
border: 10px solid black;
}
.example {
width: 100px;
height: 100px;
background-color: yellow;
}
.msie .example {
background-color: red;
}
.mozilla .example {
background-color: green;
}
.opera .example {
background-color: cyan;
}
.safari .example {
background-color: black;
}
.js .example {
border: 10px solid black;
}
.example {
width: 100px;
height: 100px;
background-color: yellow;
}

可以指定默认样式，还可以针对各个浏览器单独指定样式
via avoiding css hacks using javascript

输入框提示文字，点击消失

view plaincopy to clipboardprint?
jQuery.fn.hint = function (blurClass) {
if (!blurClass) {
blurClass = 'blur';
}

return this.each(function () {
// get jQuery version of 'this'
var $input = jQuery(this),

// capture the rest of the variable to allow for reuse
title = $input.attr('title'),
$form = jQuery(this.form),
$win = jQuery(window);

function remove() {
if ($input.val() === title && $input.hasClass(blurClass)) {
$input.val('').removeClass(blurClass);
}
}

// only apply logic if the element has the attribute
if (title) {
// on blur, set value to title attr if text is blank
$input.blur(function () {
if (this.value === '') {
$input.val(title).addClass(blurClass);
}
}).focus(remove).blur(); // now change all inputs to title

// clear the pre-defined text when form is submitted
$form.submit(remove);
$win.unload(remove); // handles Firefox's autocomplete
}
});
};

$(function(){
// find all the input elements with title attributes
$('input[title!=""]').hint();
});
jQuery.fn.hint = function (blurClass) {
if (!blurClass) {
blurClass = 'blur';
}

return this.each(function () {
// get jQuery version of 'this'
var $input = jQuery(this),

// capture the rest of the variable to allow for reuse
title = $input.attr('title'),
$form = jQuery(this.form),
$win = jQuery(window);

function remove() {
if ($input.val() === title && $input.hasClass(blurClass)) {
$input.val('').removeClass(blurClass);
}
}

// only apply logic if the element has the attribute
if (title) {
// on blur, set value to title attr if text is blank
$input.blur(function () {
if (this.value === '') {
$input.val(title).addClass(blurClass);
}
}).focus(remove).blur(); // now change all inputs to title

// clear the pre-defined text when form is submitted
$form.submit(remove);
$win.unload(remove); // handles Firefox's autocomplete
}
});
};

$(function(){
// find all the input elements with title attributes
$('input[title!=""]').hint();
});

使用方法