分享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 相关文章推荐
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
May 18 Javascript
js关闭当前页面(窗口)的几种方式总结
Mar 05 Javascript
Javascript 中创建自定义对象的方法汇总
Dec 04 Javascript
node.js中的fs.unlink方法使用说明
Dec 15 Javascript
详解AngularJS的通信机制
Jun 18 Javascript
快速学习AngularJs HTTP响应拦截器
Dec 31 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
Mar 05 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
Mar 22 Javascript
vue从使用到源码实现教程详解
Sep 19 Javascript
Node.js 数据加密传输浅析
Nov 16 Javascript
详解JavaScript的BUG和错误
May 07 Javascript
nuxt 每个页面head标签内容设置方式
Nov 05 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 会话(session 时间设定)使用入门代码
2008/06/05 PHP
应用开发中涉及到的css和php笔记分享
2011/08/02 PHP
yii框架builder、update、delete使用方法
2014/04/30 PHP
一个php短网址的生成代码(仿微博短网址)
2014/05/07 PHP
WordPress中创建用户角色的相关PHP函数使用详解
2015/12/25 PHP
php遍历解析xml字符串的方法
2016/05/05 PHP
微信公众号开发客服接口实例代码
2016/10/21 PHP
浅谈laravel数据库查询返回的数据形式
2019/10/21 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
Windows Live的@live.com域名注册漏洞 利用代码
2006/12/27 Javascript
JavaScript 编程引入命名空间的方法与代码
2007/08/13 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
2014/12/29 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
2015/09/09 Javascript
D3.js中强制异步文件读取同步的几种方法
2017/02/06 Javascript
ES6解构赋值实例详解
2017/10/31 Javascript
Angular ng-animate和ng-cookies用法详解
2018/04/18 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
2019/04/17 Javascript
javascript实现时间日期的格式化的方法汇总
2020/08/06 Javascript
零基础写python爬虫之打包生成exe文件
2014/11/06 Python
Python实现的归并排序算法示例
2017/11/21 Python
Python进阶之尾递归的用法实例
2018/01/31 Python
对pandas进行数据预处理的实例讲解
2018/04/20 Python
Python实现压缩文件夹与解压缩zip文件的方法
2018/09/01 Python
解决pycharm运行出错,代码正确结果不显示的问题
2018/11/30 Python
使用python绘制3维正态分布图的方法
2018/12/29 Python
python利用Tesseract识别验证码的方法示例
2019/01/21 Python
python使用PyQt5的简单方法
2019/02/27 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
如何理解Python中的变量
2020/06/01 Python
HealthElement海外旗舰店:新西兰大卖场
2018/02/23 全球购物
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
优秀毕业生自荐信范文
2014/01/01 职场文书
工作违纪检讨书
2014/02/17 职场文书
干部考察材料范文
2014/12/24 职场文书
Python TypeError: ‘float‘ object is not subscriptable错误解决
2022/12/24 Python