分享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获取页面上某个元素的代码
Mar 13 Javascript
使用js完成节点的增删改复制等的操作
Jan 02 Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 Javascript
JavaScript返回网页中锚点数目的方法
Apr 03 Javascript
jQuery实现固定在网页顶部的菜单效果代码
Sep 02 Javascript
jQuery Dialog对话框事件用法实例分析
May 10 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
May 24 Javascript
Vue.js快速入门实例教程
Oct 15 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
Jun 17 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
Aug 04 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
vue修改Element的el-table样式的4种方法
Sep 17 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简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
php微信公众号开发之快递查询
2018/10/20 PHP
教您去掉ie网页加载进度条的方法
2010/12/09 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
2012/02/27 Javascript
onbeforeunload与onunload事件异同点总结
2013/06/24 Javascript
js中widow.open()方法使用详解
2013/07/30 Javascript
js中判断用户输入的值是否为空的简单实例
2013/12/23 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
2014/12/15 Javascript
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
js实现图片360度旋转
2017/01/22 Javascript
对于js垃圾回收机制的理解
2017/09/14 Javascript
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
动态加载、移除js/css文件的示例代码
2018/03/20 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
2018/05/09 Javascript
vue mounted组件的使用
2018/06/18 Javascript
代码分析vue中如何配置less
2018/09/28 Javascript
初学node.js中实现删除用户路由
2019/05/27 Javascript
详解Vue中的MVVM原理和实现方法
2020/07/15 Javascript
vue 单页应用和多页应用的优劣
2020/10/22 Javascript
Python模块学习 datetime介绍
2012/08/27 Python
Python使用matplotlib绘制动画的方法
2015/05/20 Python
通过5个知识点轻松搞定Python的作用域
2016/09/09 Python
Python使用numpy产生正态分布随机数的向量或矩阵操作示例
2018/08/22 Python
python3.4控制用户输入与输出的方法
2018/10/17 Python
对Python通过pypyodbc访问Access数据库的方法详解
2018/10/27 Python
python频繁写入文件时提速的方法
2019/06/26 Python
Django的Modelforms用法简介
2019/07/27 Python
python 中xpath爬虫实例详解
2019/08/26 Python
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
自我鉴定书范文
2013/10/02 职场文书
yy结婚证婚词
2014/01/10 职场文书
课前一分钟演讲稿
2014/08/26 职场文书
党风廉正建设个人工作总结
2015/03/06 职场文书
python 利用PyAutoGUI快速构建自动化操作脚本
2021/05/31 Python
Mysql多层子查询示例代码(收藏夹案例)
2022/03/31 MySQL
java实现自定义时钟并实现走时功能
2022/06/21 Java/Android