$(this).toggleClass('hover');
});
注:在这种情况下,使用 CSS 或许是一个更快速的解决方案,但这种方法仍然值得稍作了解。
禁用输入字段
有时,你可能希望在用户完成特定操作(例如,勾选“我已阅读条例”的确认框)前禁用表单的提交按钮或禁用其中某个输入框。你可以在你的输入字段上添加disabled 属性,而后你能在需要时启用它:
$('input[type="submit"]').prop('disabled', true);你只需在输入字段上再次运行 prop 方法, 但是这一次把 disabled 值改为 false:
$('input[type="submit"]').prop('disabled', false);阻止链接加载
有时你不希望链接到指定页面或者重载当前页面,而是想让它们干些别的,例如触发其它脚本。这需要在阻止默认动作上做些文章:
$('a.no-link').click(function (e) {
e.preventDefault();
});缓存 jQuery 选择器
想想你在项目中一次又一次地写了多少相同的选择器吧。每个 $(‘.element’) 都必须查询一次整个 DOM,不管它是否曾这样执行过。作为代替,我们只运行一次选择器,并把结果储存在一个变量中:
var blocks = $('#blocks').find('li');现在你能在任何地方使用 blocks 变量而无需每次查询 DOM 了:
$('#hideBlocks').click(function () {
blocks.fadeOut();
});
$('#showBlocks').click(function () {
blocks.fadeIn();
});缓存 jQuery 的选择器是种简单的性能提升。
切换淡出 / 滑动
淡出和滑动都是我们在 jQuery 中大量使用的效果。你可能只想在用户点击后展现某个元素,此时用 fadeIn 和 slideDown 方法就很完美。但是如果你希望这个元素在首次点击时出现,在再次点击时消失,这段代码就很有用了:
// 淡出
$('.btn').click(function () {
$('.element').fadeToggle('slow');
});// 切换
$('.btn').click(function () {
$('.element').slideToggle('slow');
});
简单的手风琴效果
这是一个快速实现手风琴效果的简单方法:
// 关闭所有面板
$('#accordion').find('.content').hide();// 手风琴效果
$('#accordion').find('.accordion-header').click(function () {
var next = $(this).next();
next.slideToggle('fast');
$('.content').not(next).slideUp('fast');
return false;
});
通过添加这段脚本,你实际要做的只是提供必要的 HTML 元素以便它正常运行。










