原文地址:http://info.9iphp.com/10-jquery-tips-everyone-should-know/

人人必知的10个 jQuery 小技巧

 

收集的10个 jQuery 小技巧/代码片段,可以帮你快速开发。

1. 返回顶部按钮

你可以利用 animate 和 scrollTop 来实现返回顶部的动画,而不需要使用其他插件。

// Back to top
$('a.top').click(function () {
$(document.body).animate({scrollTop: 0}, 800);
return false;
});
<!-- Create an anchor tag -->
<a class="top" href="#">Back to top</a>

改变 scrollTop 的值可以调整返回距离顶部的距离,而 animate 的第二个参数是执行返回动作需要的时间(单位:毫秒)。

2. 预加载图片

如果你的页面中使用了很多不可见的图片(如:hover 显示),你可能需要预加载它们:

$.preloadImages = function () {
for (var i = 0; i < arguments.length; i++) {
$('<img>').attr('src', arguments[i]);
}
}; $.preloadImages('img/hover1.png', 'img/hover2.png');

3. 检查图片是否加载完成

有时候你需要确保图片完成加载完成以便执行后面的操作:

$('img').load(function () {
console.log('image load successful');
});

你可以把 img 替换为其他的 ID 或者 class 来检查指定图片是否加载完成。

4. 自动修改破损图像

如果你碰巧在你的网站上发现了破碎的图像链接,你可以用一个不易被替换的图像来代替它们。添加这个简单的代码可以节省很多麻烦:

$('img').on('error', function () {
$(this).prop('src', 'img/broken.png');
});

即使你的网站没有破碎的图像链接,添加这段代码也没有任何害处。

5. 鼠标悬停(hover)切换 class 属性

假如当用户鼠标悬停在一个可点击的元素上时,你希望改变其效果,下面这段代码可以在其悬停在元素上时添加 class 属性,当用户鼠标离开时,则自动取消该 class 属性:

$('.btn').hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});

你只需要添加必要的CSS代码即可。如果你想要更简洁的代码,可以使用toggleClass 方法:

$('.btn').hover(function () {
$(this).toggleClass('hover');
});

:直接使用CSS实现该效果可能是更好的解决方案,但你仍然有必要知道该方法。

6. 禁用 input 字段

有时你可能需要禁用表单的 submit 按钮或者某个 input 字段,直到用户执行了某些操作(例如,检查“已阅读条款”复选框)。可以添加 disabled 属性,直到你想启用它时:

$('input[type="submit"]').prop('disabled', true);

你要做的就是执行 removeAttr 方法,并把要移除的属性作为参数传入:

$('input[type="submit"]').removeAttr('disabled');

7. 阻止链接加载

有时你不希望链接到某个页面或者重新加载它,你可能希望它来做一些其他事情或者触发一些其他脚本,你可以这么做:

$('a.no-link').click(function (e) {
e.preventDefault();
});

8. 切换 fade/slide

fade 和 slide 是我们在 jQuery 中经常使用的动画效果,它们可以使元素显示效果更好。但是如果你希望元素显示时使用第一种效果,而消失时使用第二种效果,则可以这么做:

// Fade
$('.btn').click(function () {
$('.element').fadeToggle('slow');
});
// Toggle
$('.btn').click(function () {
$('.element').slideToggle('slow');
});

9. 简单的手风琴效果

这是一个实现手风琴效果快速简单的方法:

// Close all panels
$('#accordion').find('.content').hide();
// Accordion
$('#accordion').find('.accordion-header').click(function () {
var next = $(this).next();
next.slideToggle('fast');
$('.content').not(next).slideUp('fast');
return false;
});

10. 让两个 DIV 高度相同

有时你需要让两个 div 高度相同,而不管它们里面的内容多少。可以使用下面的代码片段:

var $columns = $('.column');
var height = 0;
$columns.each(function () {
if ($(this).height() > height) {
height = $(this).height();
}
});
$columns.height(height);

这段代码会循环一组元素,并设置它们的高度为元素中的最大高。

via:github.com,由 Specs 翻译整理,发布在 Coder资源网,转载请注明来源。

人人必知的10个 jQuery 小技巧的更多相关文章

  1. 人人必知的10个jQuery小技巧

    收集的10个 jQuery 小技巧/代码片段,可以帮你快速开发. 1.返回顶部按钮 你可以利用 animate 和 scrollTop 来实现返回顶部的动画,而不需要使用其他插件. // Back t ...

  2. 必知的 15 个jQuery小技巧(干货)

    jQuery小技巧(干活) 1.返回顶部按钮 你可以利用 animate 和 scrollTop 来实现返回顶部的动画,而不需要使用其他插件. $('a.top').click(function(){ ...

  3. 10个jQuery小技巧

    收集的10个 jQuery 小技巧/代码片段,可以帮你快速开发. 1.返回顶部按钮 你可以利用 animate 和 scrollTop 来实现返回顶部的动画,而不需要使用其他插件. $('a.top' ...

  4. 10个 jQuery 小技巧

    10个 jQuery 小技巧 -----整理by: xiaoshuai 1. 返回顶部按钮 可以利用 animate 和 scrollTop 来实现返回顶部的动画,而不需要使用其他插件. // Bac ...

  5. 前端程序员应该知道的15个 jQuery 小技巧

    下面这些简单的小技巧能够帮助你玩转jQuery. 返回顶部按钮 预加载图像 检查图像是否加载 自动修复破坏的图像 悬停切换类 禁用输入字段 停止加载链接 切换淡入/幻灯片 简单的手风琴 让两个div高 ...

  6. 前端程序员应该知道的 15 个 jQuery 小技巧

    下面这些简单的小技巧能够帮助你玩转jQuery. 返回顶部按钮 预加载图像 检查图像是否加载 自动修复破坏的图像 悬停切换类 禁用输入字段 停止加载链接 切换淡入/幻灯片 简单的手风琴 让两个div高 ...

  7. 03人人都应该了解的10个 jQuery 小技巧

    1  返回顶部按钮 你可以利用animate和scrollTop来实现返回顶部的动画,而不需要使用其他插件. // Back to top $('a.top').click(function () { ...

  8. (网页)人人都会的35个Jquery小技巧

    转自CSDN: 收集的35个 jQuery 小技巧/代码片段,可以帮你快速开发. 1. 禁止右键点击 $(document).ready(function(){ $(document).bind(&q ...

  9. 程序员都会的 35 个 jQuery 小技巧

    收集的35个 jQuery 小技巧/代码片段,可以帮你快速开发. 1. 禁止右键点击 $(document).ready(function(){ $(document).bind("cont ...

随机推荐

  1. Asset Catalog Help (九)---Changing Image Set Names

    Changing Image Set Names Use the Attributes inspector to edit a set’s name. 使用属性检查器(Attributes inspe ...

  2. eclispe的使用

    1.eclipse 有的时候,子类包都已经写了,这时候要添加一个父类包,如果在包结构下是添加不了的,这时候需要切换格式:    

  3. jQuery EasyUI API 中文文档 - Tree树使用介绍

    用 $.fn.tree.defaults 重写了 defaults. 依赖 draggable droppable 用法 Tree 能在 <ul> 元素里定义,此标记可以定义为叶节点和子节 ...

  4. Java 类加载器的作用

    深入探讨 Java 类加载器 成 富, 软件工程师, IBM 中国软件开发中心 成富任职于 IBM 中国软件开发中心,目前在 Lotus 部门从事 IBM Mashup Center 的开发工作.他毕 ...

  5. Appium + junit 的简单实例

    import static junit.framework.Assert.assertTrue; import static org.junit.Assert.*; import org.junit. ...

  6. 洛谷 - P3164 - 和谐矩阵 - 高斯约旦消元法

    为什么可以跑n立方,我也不知道,反正就是可以. 模2意义的,据说每一行可以存一个bitset,会比用bool更快(快32倍?). 本题告诉我们一个道理: 高斯消元之后,每个变量的含义不变(虽然交换了两 ...

  7. iTween基础之iTweenPath浅析(自定义路径移动)

    http://www.2cto.com/kf/201604/498023.html 在游戏开发中经常会用到让一个游戏对象按照指定的路线移动,iTweenPath就提供了可视化的编辑路径功能. iTwe ...

  8. C++中的声明与定义

    转自:http://www.cnblogs.com/kingcat/archive/2011/12/30/2307426.html C++是一种复杂的计算机语言,很多在现代高级语言中已经不需要程序员操 ...

  9. button 获取 cell

        - (void)cellBtnClicked:(id)sender event:(id)event {     NSSet *touches =[event allTouches];      ...

  10. UVA10140 Prime Distance【素数/数论】By cellur925

    题目传送门 我们注意到,L,R是肥肠大的.........我们不可能在1s内筛出2^31内的全部质数. “上帝为你关上一扇门,同时为你打开一扇窗” 我们又注意到,R-L是肥肠比较小的,珂以从这入手解决 ...