分享15个大家都熟知的jquery小技巧


Posted in Javascript onDecember 02, 2015

帮助提高你jQuery应用的15个大家都熟知的jquery小技巧,分享给大家

  • 回到顶部按钮
  • 图片预加载
  • 判断图片是否加载完
  • 自动修补破损图像
  • Hover切换class类
  • 禁用输入
  • 停止正在加载的链接
  • toggle fade/slide
  • 简单的手风琴
  • 使两个DIV同等高度
  • 在浏览器标签/新窗口打开外部链接
  • 根据文本获取元素
  • 可见变化的触发
  • Ajax调用错误处理
  • 链式操作

1、回到顶部按钮

利用jQuery里的animate和scrollTop方法,你便不需要使用插件创建简单的滚动到顶部动画。

// Back to top

$('.top').click(function (e) {

 e.preventDefault();

 $('html, body').animate({scrollTop: 0}, 800);

});

<!-- Create an anchor tag -->

<a class="top" href="#">Back to top</a>

通过scrollTop的值来改变你想要滚动到的位置。其实你就是做了:在接下来的800毫秒中让页面滚动,直到它滚动到文档的顶部。

备注:来看一些scrollTop的调皮行为 。

2、图片预加载

如果你的网页使用了很多隐藏图片文件(例如:鼠标悬停展示的图片),那么图片的预加载是有意义的:

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

3、判断图片是否加载完

有时候你可能需要检查图像是否已经加载完成,以便于可以继续执行相应的js代码:

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

你还可以检查一个特定的图片是否加载完并且被带有Id或者class的<img>标签代替。

4、自动修补破损图像

如果你碰巧发现在你的网站上发现破损的图像链接,一个个去替代他们是痛苦的。这个简单的代码可以节省很多的麻烦:

$('img').on('error', function () {
 if(!$(this).hasClass('broken-image')) {
 $(this).prop('src', 'img/broken.png').addClass('broken-image');
 }
});

即使你没有任何断开的链接,加入这代码也不会有任何影响。

5、Hover切换class类

比方说,当用户将鼠标悬停在你页面上的元素时,你想改变其视觉效果。当用户鼠标悬停在元素上,你可以在该元素上添加一个class类,当鼠标停止悬停事件时移除此class类:

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

如果你想要一个更简单的方式使用toggleClass方法,则仅仅需要添加必要的CSS:

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

备注:CSS在这种情况下使用是一个快速的解决方案,但要知道这点知识依旧是值得去了解下的。

6、禁用输入

有时你可能需要用表单的提交按钮或者某个输入框直到用户执行了某个动作(比如:检查“我已阅读条款”复选框)。在你的输入框上设置disabled属性,然后当你需要的时候启用该属性:

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

你需要做的只是需要在输入框上再次运行prop方法,但设置的被禁用值是false:
$('input[type="submit"]').prop('disabled', false);

7、停止正在加载的链接

有时你不想链接到特定的网页或者重新载入页面;你可能想让他们做一些其他事情,如触发一些其他的脚本。这是防止违约行动的技巧:

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

8、toggle 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;
});

通过添加这个脚本,你需要做的则是必要的HTML操作在你的页面上。

10、使两个DIV同等高度

有时你会想要两个DIV有相同的高度,无论他们都有什么内容:

$('.div').css('min-height', $('.main-div').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());
});

11、在浏览器标签/新窗口打开外部链接

在新的浏览器标签或窗口中打开外部链接,并确保在同一个标签或窗口中打开的是同一个源的链接:

$('a[href^="http"]').attr('target', '_blank');
$('a[href^="//"]').attr('target', '_blank');
$('a[href^="' + window.location.origin + '"]').attr('target', '_self');

备注:window.location.origin 在IE10不工作。

12、根据文本获取元素

通过jQuery中的contains()选择器,你能找到一个元素内的文本内容。如果文本不存在,则这个元素将被隐藏:

var search = $('#search').val();
$('div:not(:contains("' + search + '"))').hide();

13、可见变化的触发

当用户不再聚焦或者重新聚焦一个标签时触发javascript脚本:

$(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!');
 }
});

14、Ajax调用错误处理

当一个Ajax调用返回一个404或500的错误时,将执行该错误处理。如果该处理未定义,则其他jQuery代码便可能不会执行了。定义一个全局Ajax错误处理程序:

$(document).ajaxError(function (e, xhr, settings, error) {
 console.log(error);
});

15、链式操作

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应用能力。

Javascript 相关文章推荐
从JavaScript 到 JQuery (1)学习小结
Feb 12 Javascript
JQuery live函数
Dec 24 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
Nov 18 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
Node.js文件操作方法汇总
Mar 22 Javascript
javascript实现获取图片大小及图片等比缩放的方法
Nov 24 Javascript
微信小程序 动态绑定数据及动态事件处理
Mar 14 Javascript
详解在AngularJS的controller外部直接获取$scope
Jun 02 Javascript
vue router+vuex实现首页登录验证判断逻辑
May 17 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
Sep 14 Javascript
redux处理异步action解决方案
Mar 22 Javascript
如何使用JavaScript策略模式校验表单
Apr 29 Javascript
jQuery实现为控件添加水印文字效果(附源码)
Dec 02 #Javascript
jqGrid中文文档之选项设置
Dec 02 #Javascript
javascript实现自动填写表单实例简析
Dec 02 #Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
Dec 02 #Javascript
纯js代码实现简单计算器
Dec 02 #Javascript
jquery判断输入密码两次是否相等
Apr 22 #Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
Dec 02 #Javascript
You might like
php 进度条实现代码
2009/03/10 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
Laravel-添加后台模板AdminLte的实现方法
2019/10/08 PHP
jQuery 1.2.x 升? 1.3.x 注意事项
2009/05/06 Javascript
JavaScript Event事件学习第一章 Event介绍
2010/02/07 Javascript
一个JavaScript变量声明的知识点
2013/10/28 Javascript
对比分析json及XML
2014/11/28 Javascript
JavaScript中使用Math.PI圆周率属性的方法
2015/06/14 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
2016/05/03 Javascript
详解handlebars+require基本使用方法
2016/12/21 Javascript
javascript 中的try catch应用总结
2017/04/01 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
2017/07/11 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
2017/09/19 jQuery
Vue的移动端多图上传插件vue-easy-uploader的示例代码
2017/11/27 Javascript
vue项目国际化vue-i18n的安装使用教程
2018/03/14 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
2019/02/15 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
2019/07/31 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
python list语法学习(带例子)
2013/11/01 Python
介绍Python中的__future__模块
2015/04/27 Python
Python在不同目录下导入模块的实现方法
2017/10/27 Python
详解将Pandas中的DataFrame类型转换成Numpy中array类型的三种方法
2019/07/06 Python
opencv导入头文件时报错#include的解决方法
2019/07/31 Python
Python 中由 yield 实现异步操作
2020/05/04 Python
HTML5单页面手势滑屏切换原理分析
2017/07/10 HTML / CSS
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
JAVA的事件委托机制和垃圾回收机制
2014/09/07 面试题
2014年社区庆元旦活动方案
2014/03/08 职场文书
企业百日安全活动总结
2015/05/07 职场文书
中小学生安全教育观后感
2015/06/17 职场文书
2016秋季田径运动会广播稿
2015/12/21 职场文书
《秋天的图画》教学反思
2016/02/19 职场文书
导游词之苏州阳澄湖
2019/11/15 职场文书
MySQL实现用逗号进行拼接、以逗号进行分割
2022/12/24 MySQL