分享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 相关文章推荐
js图片延迟加载的实现方法及思路
Jul 22 Javascript
JQuery文字列表向上滚动的代码
Nov 13 Javascript
JS合并数组的几种方法及优劣比较
Sep 19 Javascript
jquery实现弹出层效果实例
May 19 Javascript
详解jQuery中的deferred对象的使用(一)
May 27 Javascript
JS中递归函数
Jun 17 Javascript
微信小程序 实现拖拽事件监听实例详解
Nov 16 Javascript
js事件源window.event.srcElement兼容性写法(详解)
Nov 25 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
Mar 23 Javascript
20行JS代码实现粘贴板复制功能
Feb 06 Javascript
微信小程序实现拍照画布指定区域生成图片
Jul 18 Javascript
JS 自执行函数原理及用法
Aug 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
在IIS上安装PHP4.0正式版
2006/10/09 PHP
php计算几分钟前、几小时前、几天前的几个函数、类分享
2014/04/09 PHP
php对称加密算法示例
2014/05/07 PHP
如何让搜索引擎抓取AJAX内容解决方案
2014/08/25 PHP
php实现检查文章是否被百度收录
2015/01/27 PHP
php验证邮箱和ip地址最简单方法汇总
2015/10/30 PHP
网站被黑的假象--ARP欺骗之页面中加入一段js
2007/05/16 Javascript
在浏览器窗口上添加遮罩层的方法
2012/11/12 Javascript
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
jquery 淡入淡出效果的简单实现
2014/02/07 Javascript
JS判断文本框内容改变事件的简单实例
2014/03/07 Javascript
jQuery.form插件的使用及跨域异步上传文件
2016/04/27 Javascript
js判断空对象的实例(超简单)
2016/07/26 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
JS随机排序数组实现方法分析
2017/10/11 Javascript
微信小程序实现星星评价效果
2018/11/02 Javascript
详解使用React.memo()来优化函数组件的性能
2019/03/19 Javascript
原生js实现无缝轮播图效果
2021/01/28 Javascript
Python中的异常处理学习笔记
2015/01/28 Python
windows下安装python的C扩展编译环境(解决Unable to find vcvarsall.bat)
2018/02/21 Python
使用Python写一个小游戏
2018/04/02 Python
python中实现字符串翻转的方法
2018/07/11 Python
python实现四人制扑克牌游戏
2020/04/22 Python
Python flask框架实现浏览器点击自定义跳转页面
2020/06/04 Python
Django实现内容缓存实例方法
2020/06/30 Python
印度最大的酒店品牌网络:OYO Rooms
2016/07/24 全球购物
伦敦高达60%折扣的钻石珠宝商:Purely Diamonds
2018/06/24 全球购物
The Hut英国:英国领先的豪华在线百货商店
2019/07/26 全球购物
美国家庭鞋店:Shoe Sensation
2019/09/27 全球购物
一些Solaris面试题
2013/03/22 面试题
自荐信模版
2013/10/24 职场文书
优秀教师的感人事迹
2014/02/04 职场文书
保安队长职务说明书
2014/02/23 职场文书
小学生个人先进事迹材料
2014/05/08 职场文书
2014年乡镇党建工作总结
2014/11/11 职场文书
python执行js代码的方法
2021/05/13 Python