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 相关文章推荐
论坛特效代码收集(落伍转发-不错)
Dec 02 Javascript
javascript css styleFloat和cssFloat
Mar 15 Javascript
JavaScript 字符串处理函数使用小结
Dec 02 Javascript
根据选择不同的下拉值出现相对应的文本输入框
Aug 01 Javascript
jquery中prop()方法和attr()方法的区别浅析
Sep 06 Javascript
jquery中append()与appendto()用法分析
Nov 14 Javascript
JavaScript无缝滚动效果的实例代码
Mar 27 Javascript
收集前端面试题之url、href、src
Mar 22 Javascript
使用vue自定义指令开发表单验证插件validate.js
May 23 Javascript
微信js-sdk 录音功能的示例代码
Nov 01 Javascript
vue $mount 和 el的区别说明
Sep 11 Javascript
使用webpack和rollup打包组件库的方法
Feb 25 Javascript
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
thinkphp模板输出技巧汇总
2014/11/24 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
彪哥1.1(智能表格)提供下载
2006/09/07 Javascript
javascript 避免闭包引发的问题
2009/03/17 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
2012/09/17 Javascript
用javascript判断IE版本号简单实用且向后兼容
2013/09/11 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
2014/01/09 Javascript
Js制作点击输入框时默认文字消失的效果
2015/09/05 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
浅析JS异步加载进度条
2016/05/05 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
js replace()去除代码中空格的实例
2017/02/14 Javascript
HTML的select控件美化
2017/03/27 Javascript
原生js实现移动端触摸轮播的示例代码
2017/12/22 Javascript
使用Vuex实现一个笔记应用的方法
2018/03/13 Javascript
微信小程序倒计时功能实例代码
2018/07/17 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
2018/08/14 Javascript
layui 实现加载动画以及非真实加载进度的方法
2019/09/23 Javascript
0基础学习前端开发的一些建议
2020/07/14 Javascript
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
[02:15]2014DOTA2国际邀请赛 专访LGD.lin小兔子是大腿
2014/07/14 DOTA
Python采用socket模拟TCP通讯的实现方法
2014/11/19 Python
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
python使用 zip 同时迭代多个序列示例
2019/07/06 Python
详解Python self 参数
2019/08/30 Python
Python实现多线程下载脚本的示例代码
2020/04/03 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
python中逻辑与或(and、or)和按位与或异或(&amp;、|、^)区别
2020/08/05 Python
Django模型验证器介绍与源码分析
2020/09/08 Python
GANT葡萄牙官方商店:拥有美国运动服传统的生活方式品牌
2018/10/18 全球购物
物业工作计划书
2014/01/10 职场文书
外贸采购员岗位职责
2014/03/08 职场文书
新员工试用期自我鉴定
2014/04/17 职场文书
课前三分钟演讲稿
2014/04/24 职场文书
公司应聘自荐书
2014/06/14 职场文书
JavaScript实现酷炫的鼠标拖尾特效
2022/02/18 Javascript