Jquery技巧(必须掌握)


Posted in Javascript onMarch 16, 2016

 检查 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 中用以简化和优化代码的最佳实践。

Javascript 相关文章推荐
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
Feb 03 Javascript
Javascript实现视频轮播在pc端与移动端均可
Sep 29 Javascript
javascript中定义类的方法汇总
Dec 28 Javascript
Javascript基础教程之JavaScript语法
Jan 18 Javascript
js实现DOM走马灯特效的方法
Jan 21 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
Aug 07 Javascript
详解vue 中使用 AJAX获取数据的方法
Jan 18 Javascript
浅谈$_FILES数组为空的原因
Feb 16 Javascript
JavaScript html5利用FileReader实现上传功能
Mar 27 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
node+vue实现用户注册和头像上传的实例代码
Jul 20 Javascript
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
Javascript的表单验证长度
Mar 16 #Javascript
Uploadify上传文件方法
Mar 16 #Javascript
通过隐藏iframe实现无刷新上传文件操作
Mar 16 #Javascript
原生JS实现平滑回到顶部组件
Mar 16 #Javascript
基于jquery实现百度新闻导航菜单滑动动画
Mar 15 #Javascript
dedecms页面如何获取会员状态的实例代码
Mar 15 #Javascript
JavaScript隐式类型转换
Mar 15 #Javascript
You might like
PHP的单引号和双引号 字符串效率
2009/05/27 PHP
mod_php、FastCGI、PHP-FPM等PHP运行方式对比
2015/07/02 PHP
Symfony2使用第三方库Upload制作图片上传实例详解
2016/02/04 PHP
php 截取utf-8格式的字符串实例代码
2016/10/30 PHP
PHP实现Unicode编码相互转换的方法示例
2020/11/17 PHP
Laravel框架使用monolog_mysql实现将系统日志信息保存到mysql数据库的方法
2018/08/16 PHP
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
Javascript base64编码实现代码
2011/12/02 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
2016/02/22 Javascript
Vue.js -- 过滤器使用总结
2017/02/18 Javascript
JavaScript和jQuery制作光棒效果
2017/02/24 Javascript
JSONP跨域请求
2017/03/02 Javascript
Vue2.0父子组件传递函数的教程详解
2017/10/16 Javascript
整理Python中的赋值运算符
2015/05/13 Python
基于python实现雪花算法过程详解
2019/11/16 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
python 使用递归的方式实现语义图片分割功能
2020/07/16 Python
基本款天堂:Everlane
2017/05/13 全球购物
澳大利亚小众服装品牌:Maurie & Eve
2018/03/27 全球购物
CK巴西官方网站:Calvin Klein巴西
2019/07/19 全球购物
美体小铺法国官方网站:The Body Shop法国
2020/06/04 全球购物
土建资料员岗位职责
2014/01/04 职场文书
小学教师事迹材料
2014/01/13 职场文书
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
司仪主持词两篇
2014/03/22 职场文书
遗嘱公证书标准样本
2014/04/08 职场文书
小学模范班主任事迹材料
2014/05/13 职场文书
学校教师安全责任书
2014/07/23 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
3.15消费者权益日活动总结
2015/02/09 职场文书
异地恋情人节寄语
2015/02/28 职场文书
上班迟到检讨书
2015/05/06 职场文书
少年派的奇幻漂流观后感
2015/06/08 职场文书
婚庆开业庆典主持词
2015/06/30 职场文书
文案策划岗位个人自我评价(范文)
2019/08/08 职场文书
Nginx域名转发https访问的实现
2021/03/31 Servers