jQuery需要掌握的技巧
检查 jQuery 是否加载
在使用 jQuery 进行任何操作之前,你需要先确认它已经加载:
if (typeof jQuery == 'undefined') {
console.log('jQuery hasn\'t loaded');
} else {
console.log('jQuery has loaded');
}
返回顶部按钮
利用 jQuery 中的 animate 和 scrollTop 方法,你无需插件就可以创建简单的 scroll up 效果:
// 返回顶部
$('a.top').click(function (e) {
e.preventDefault();
$(document.body).animate({scrollTop: 0}, 800);
});
<!-- 设置锚 -->
<a class="top" href="#">Back to top</a>
调整 scrollTop 的值即可改变滚动着陆位置。你实际所做的是在 800 毫秒内不断设置文档主体的位置,直到它滚动到顶部。
预加载图片
如果你的网页使用了大量并非立即可见的图片(例如悬停鼠标触发的图片),那么预加载这些图片就显得很有意义了:
$.preloadImages = function () {
for (var i = 0; i < arguments.length; i++) {
$('<img>').attr('src', arguments[i]);
}
};
$.preloadImages('img/hover-on.png', 'img/hover-off.png');
判断图片是否加载完成
在有些情况下,为了继续执行脚本,你需要检查图片是否已经完全加载:
$('img').load(function () {
console.log('image load successful');
});
同样,换用一个带有 id 或者 class 属性的 <img> 标签,你也可以检查特定图片是否加载完成。
自动修复失效图片
如果你在你的网站上发现了失效的图片链接,逐个去替换它们将会是个苦差。这段简单的代码可以很大程度地减轻痛苦:
$('img').on('error', function () {
if(!$(this).hasClass('broken-image')) {
$(this).prop('src', 'img/broken.png').addClass('broken-image');
}
});
即使你暂无任何失效的链接,添加这段代码也不会有任何损失。
鼠标悬停切换 class
如果你希望在用户将鼠标悬停在某个可点击元素上时改变它的视觉效果,你可以在该元素被悬停时给它添加一个 class,当鼠标不再悬停时,移除这个 class:
$('.btn').hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});
如果你还寻求更简单的途径,可以使用 toggleClass 方法,仅需添加必要的 CSS:
$('.btn').hover(function () {
$(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 元素以便它正常运行。
使两个 div 等高
有时你希望无论两个 div 各自包含什么内容,它们总有相同的高度:
$('.div').css('min-height', $('.main-div').height());
这个例子设置了 min-height,意味着高度可以大于主 div 而不能小于它。然而,更灵活的方法是遍历一组元素,然后将高度设置为最高元素的高度:
var $columns = $('.column');
var height = 0;
$columns.each(function () {
if ($(this).height() > height) {
height = $(this).height();
}
});
$columns.height(height);
如果你希望所有列高度相同:
var $rows = $('.same-height-columns');
$rows.each(function () {
$(this).find('.column').height($(this).height());
});
在新标签页 / 新窗口打开外部链接
在一个新的浏览器标签页或窗口中打开外部链接,并确保相同来源的链接在同一个标签页或者窗口中打开:
$('a[href^="http"]').attr('target', '_blank');
$('a[href^="//"]').attr('target', '_blank');
$('a[href^="' + window.location.origin + '"]').attr('target', '_self');
注: window.location.origin 在 IE10 中不可用. 这个修复方案 正是关注于该问题。
通过文本查找元素
通过使用 jQuery 的 contains() 选择器,你能够查找元素内容中的文本。若文本不存在,该元素将被隐藏:
var search = $('#search').val();
$('div:not(:contains("' + search + '"))').hide();
在 visibility 属性变化时触发
当用户的焦点离开或者重新回到某个标签页时,触发 Javasrcipt:
$(document).on('visibilitychange', function (e) {
if (e.target.visibilityState === "visible") {
console.log('Tab is now in view!');
} else if (e.target.visibilityState === "hidden") {
console.log('Tab is now hidden!');
}
});
Ajax 调用错误处理
当一个 Ajax 调用返回 404 或 500 错误时,错误处理程序将被执行。若错误处理未被定义,其它 jQuery 代码可能不再有效。所以定义一个全局的 Ajax 错误处理:
$(document).ajaxError(function (e, xhr, settings, error) {
console.log(error);
});
链式插件调用
jQuery 允许通过“链式”插件调用的方法,来缓解反复查询 DOM 和创建多个 jQuery 对象的过程。例如,下面的代码代表着你的插件调用:
$('#elem').show();
$('#elem').html('bla');
$('#elem').otherStuff();
通过使用链式操作,有了显著的改善:
$('#elem')
.show()
.html('bla')
.otherStuff();
另一种方法是在变量(以 $ 为前缀)中,对元素进行缓存:
var $elem = $('#elem');
$elem.hide();
$elem.html('bla');
$elem.otherStuff();
无论是链式操作,还是缓存元素,都是 jQuery 中用以简化和优化代码的最佳实践。
这里收集了一些简单的窍门,助你玩转 jQuery。
检查 jQuery 是否加载
在使用 jQuery 进行任何操作之前,你需要先确认它已经加载:
if (typeof jQuery == 'undefined') {
console.log('jQuery hasn\'t loaded');
} else {
console.log('jQuery has loaded');
}
返回顶部按钮
利用 jQuery 中的 animate 和 scrollTop 方法,你无需插件就可以创建简单的 scroll up 效果:
// 返回顶部
$('a.top').click(function (e) {
e.preventDefault();
$(document.body).animate({scrollTop: 0}, 800);
});
<!-- 设置锚 -->
<a class="top" href="#">Back to top</a>
调整 scrollTop 的值即可改变滚动着陆位置。你实际所做的是在 800 毫秒内不断设置文档主体的位置,直到它滚动到顶部。
预加载图片
如果你的网页使用了大量并非立即可见的图片(例如悬停鼠标触发的图片),那么预加载这些图片就显得很有意义了:
$.preloadImages = function () {
for (var i = 0; i < arguments.length; i++) {
$('<img>').attr('src', arguments[i]);
}
};
$.preloadImages('img/hover-on.png', 'img/hover-off.png');
判断图片是否加载完成
在有些情况下,为了继续执行脚本,你需要检查图片是否已经完全加载:
$('img').load(function () {
console.log('image load successful');
});
同样,换用一个带有 id 或者 class 属性的 <img> 标签,你也可以检查特定图片是否加载完成。
自动修复失效图片
如果你在你的网站上发现了失效的图片链接,逐个去替换它们将会是个苦差。这段简单的代码可以很大程度地减轻痛苦:
$('img').on('error', function () {
if(!$(this).hasClass('broken-image')) {
$(this).prop('src', 'img/broken.png').addClass('broken-image');
}
});
即使你暂无任何失效的链接,添加这段代码也不会有任何损失。
鼠标悬停切换 class
如果你希望在用户将鼠标悬停在某个可点击元素上时改变它的视觉效果,你可以在该元素被悬停时给它添加一个 class,当鼠标不再悬停时,移除这个 class:
$('.btn').hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});
如果你还寻求更简单的途径,可以使用 toggleClass 方法,仅需添加必要的 CSS:
$('.btn').hover(function () {
$(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 元素以便它正常运行。
使两个 div 等高
有时你希望无论两个 div 各自包含什么内容,它们总有相同的高度:
$('.div').css('min-height', $('.main-div').height());
这个例子设置了 min-height,意味着高度可以大于主 div 而不能小于它。然而,更灵活的方法是遍历一组元素,然后将高度设置为最高元素的高度:
var $columns = $('.column');
var height = 0;
$columns.each(function () {
if ($(this).height() > height) {
height = $(this).height();
}
});
$columns.height(height);
如果你希望所有列高度相同:
var $rows = $('.same-height-columns');
$rows.each(function () {
$(this).find('.column').height($(this).height());
});
在新标签页 / 新窗口打开外部链接
在一个新的浏览器标签页或窗口中打开外部链接,并确保相同来源的链接在同一个标签页或者窗口中打开:
$('a[href^="http"]').attr('target', '_blank');
$('a[href^="//"]').attr('target', '_blank');
$('a[href^="' + window.location.origin + '"]').attr('target', '_self');
注: window.location.origin 在 IE10 中不可用. 这个修复方案 正是关注于该问题。
通过文本查找元素
通过使用 jQuery 的 contains() 选择器,你能够查找元素内容中的文本。若文本不存在,该元素将被隐藏:
var search = $('#search').val();
$('div:not(:contains("' + search + '"))').hide();
在 visibility 属性变化时触发
当用户的焦点离开或者重新回到某个标签页时,触发 Javasrcipt:
$(document).on('visibilitychange', function (e) {
if (e.target.visibilityState === "visible") {
console.log('Tab is now in view!');
} else if (e.target.visibilityState === "hidden") {
console.log('Tab is now hidden!');
}
});
Ajax 调用错误处理
当一个 Ajax 调用返回 404 或 500 错误时,错误处理程序将被执行。若错误处理未被定义,其它 jQuery 代码可能不再有效。所以定义一个全局的 Ajax 错误处理:
$(document).ajaxError(function (e, xhr, settings, error) {
console.log(error);
});
链式插件调用
jQuery 允许通过“链式”插件调用的方法,来缓解反复查询 DOM 和创建多个 jQuery 对象的过程。例如,下面的代码代表着你的插件调用:
$('#elem').show();
$('#elem').html('bla');
$('#elem').otherStuff();
通过使用链式操作,有了显著的改善:
$('#elem')
.show()
.html('bla')
.otherStuff();
另一种方法是在变量(以 $ 为前缀)中,对元素进行缓存:
var $elem = $('#elem');
$elem.hide();
$elem.html('bla');
$elem.otherStuff();
无论是链式操作,还是缓存元素,都是 jQuery 中用以简化和优化代码的最佳实践。
来自:http://blog.csdn.net/u011225629/article/details/50883611
jQuery需要掌握的技巧的更多相关文章
- 几个 jQuery 小提示和技巧
几个 jQuery 小提示和技巧 今天,我们将分享一些很有用的技巧和窍门给 jQuery 开发人员.jQuery 是最好的 JavaScript 库之一,用于简化动画,事件处理,支持 Ajax 和 H ...
- 深度解析JQuery Dom元素操作技巧
深度解析JQuery Dom元素操作技巧 DOM是一种与浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件,这篇文章给大家介绍了JQuery dom元素操作方法,写的十分的全面细 ...
- 开发中可能会用到的几个 jQuery 小提示和技巧
今天,我们将分享一些很有用的技巧和窍门给 jQuery 开发人员.jQuery 是最好的 JavaScript 库之一,用于简化动画,事件处理,支持 Ajax 和 HTML 的客户端脚本.网络中有大量 ...
- 开发中可能会用到的几个 jQuery 小提示和技巧(转)
今天,我们将分享一些很有用的技巧和窍门给 jQuery 开发人员.jQuery 是最好的 JavaScript 库之一,用于简化动画,事件处理,支持 Ajax 和 HTML 的客户端脚本.网络中有大量 ...
- 开发中可能会用到的几个 jQuery 小提示和技巧 (转)
转自:http://www.cnblogs.com/lhb25/p/useful-jquery-tips-and-tricks.html 今天,我们将分享一些很有用的技巧和窍门给 jQuery 开发人 ...
- 20个热门jQuery的提示和技巧
以下是一些非常有用的jQuery提示和所有jQuery的开发技巧. 1.优化性能复杂的选择 查询DOM中的一个子集,使用复杂的选择时,大幅提高了性能: var subset = $("&qu ...
- Visual Studio下使用jQuery的10个技巧
广泛流行的jQuery是一个开源的,跨浏览器和兼容CSS 3的JavaScript库,你可以用它简化你的JavaScript编码任务和操作(添加,编辑和删除)HTML内容中的DOM元素,本文介绍10个 ...
- jQuery源码分析-jQuery中的循环技巧
作者:nuysoft/JS攻城师/高云 QQ:47214707 EMail:nuysoft@gmail.com 声明:本文为原创文章,如需转载,请注明来源并保留原文链接. 前记:本文收集了jQuery ...
- JQuery中的小技巧,,,连载中。。。
获取下拉框中选中项的文本等操作 jQuery获取Select元素,并选择的Text和Value: 1.获取select 选中的 text : $("#ddlRegType").f ...
- jquery和js使用技巧
1. 如何得知图片已加载完毕 这也一个没有很好文档说明的问题(至少在我查找时没看到),但是在创建照片库.旋转灯笼效果等方面,它是相当常见的需求.而这在jQuery中很容易实现. 所有你要做的就是在IM ...
随机推荐
- Awstats分析Nginx日志
1.nginx日志格式设定 log_format access '$remote_addr - $remote_user [$time_local] "$request" ' '$ ...
- 通过xrdp实现远程桌面连接Windows Azure linux虚拟机
本文以Oracle Linux 6.4虚拟机为示例(22及3389端口必须打开,分别用于SSH及RDP连接) 1.在安装xrdp之前,首先需要安装一些必要的包,如: # yum -y install ...
- 【转】Java中==、equals、hashcode的区别与重写equals以及hashcode方法实例
原文地址:http://www.cnblogs.com/luankun0214/p/4421770.html 感谢网友的分享,记录下来只为学习. 1.重写equals方法实例 部分代码参考http ...
- AE 栅格图分级渲染
ArcEngine对矢量数据进行风格化实在是得心应手,同样的对于栅格图像也能进行风格化!以前没接触过,今天正好需要,做出了栅格图像的渲染!下面实现的思路: 1.定义渲染的一系列接口 2.判断图像是否建 ...
- poj-2376 Cleaning Shifts (排序+贪心)
http://poj.org/problem?id=2376 john有n头牛做打扫工作,他想在t时间内每个时间都至少有一头牛在做打扫工作,第一头牛在1,最后一头牛在t时间,每一头牛工作都有一个开始时 ...
- 巧用ifstream判断文件是否存在
最近在写手写数字的识别软件,训练样例数量巨大而且数字个数不唯一,有可能在中途粘出一部分做测试样例.因此写下面的脚本来获取文件名,之后丢到训练函数里. #include <algorithm> ...
- 《OD学算法》排序之冒泡排序
冒泡排序 一语中的:丢一把沙子,轻的物体往上浮. 基本思想:通过无序区中相邻记录关键字间的比较和位置的交换,使关键字最小的记录如气泡一般逐渐往上“漂浮”直至“水面”. 代码示例: import jav ...
- 区别Javascript中的Null与Undefined
在JavaScript中存在这样两种原始类型:Null与Undefined.这两种类型常常会使JavaScript的开发人员产生疑惑,在什么时候是Null,什么时候又是Undefined? Undef ...
- arithmetic-slices-ii-subsequence(太难了)
https://leetcode.com/problems/arithmetic-slices-ii-subsequence/ 太难了... package com.company; import j ...
- 使用JAVA直观感受快速排序与冒泡排序的性能差异
初学算法,肯定会编写排序算法 其中两个最为有名的就是冒泡排序和快速排序 理论上冒泡排序的时间复杂度为O(N^2),快速排序的时间复杂度为O(NlogN) 下面本门使用JAVA,分别编写三段排序程序 对 ...