分享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 相关文章推荐
提高 DHTML 页面性能
Dec 25 Javascript
Javascript学习笔记4 Eval函数
Jan 11 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
Jan 04 Javascript
jQuery判断密码强度实现思路及代码
Apr 24 Javascript
jquery获取子节点和父节点的示例代码
Sep 10 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 Javascript
轻松实现jquery选项卡切换效果
Oct 10 Javascript
在 Angular 中实现搜索关键字高亮示例
Mar 21 Javascript
基于JavaScript中标识符的命名规则介绍
Jan 06 Javascript
Next.js实现react服务器端渲染的方法示例
Jan 06 Javascript
记录一次完整的react hooks实践
Mar 11 Javascript
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
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缓存设计实现代码
2011/09/30 PHP
解析php中反射的应用
2013/06/18 PHP
PHP实现抓取Google IP并自动修改hosts文件
2015/02/12 PHP
解析WordPress中控制用户登陆和判断用户登陆的PHP函数
2016/03/01 PHP
Nginx+php配置文件及原理解析
2020/12/09 PHP
jquery蒙版控件实现代码
2010/12/08 Javascript
Dom 学习总结以及实例的使用介绍
2013/04/24 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
javascript实用方法总结
2015/02/06 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
2015/06/24 Javascript
jquery插件pagination实现无刷新ajax分页
2015/09/30 Javascript
使用AJAX实现Web页面进度条的实例分享
2016/05/06 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
javascript this详细介绍
2016/09/19 Javascript
详解Vue中一种简易路由传参办法
2017/09/15 Javascript
浅谈vue中.vue文件解析流程
2018/04/24 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
2019/04/23 Javascript
js设置鼠标悬停改变背景色实现详解
2019/06/26 Javascript
bootstrap实现tab选项卡切换
2020/08/09 Javascript
跟老齐学Python之数据类型总结
2014/09/24 Python
Python的迭代器和生成器
2015/07/29 Python
Python使用re模块实现信息筛选的方法
2018/04/29 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
python basemap 画出经纬度并标定的实例
2019/07/09 Python
基于python使用tibco ems代码实例
2019/12/20 Python
Python爬虫解析网页的4种方式实例及原理解析
2019/12/30 Python
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
基于Canvas+Vue的弹幕组件的实现
2019/07/23 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
2020/03/17 HTML / CSS
代理协议书范本
2014/04/22 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
单位考核聘任报告
2015/03/02 职场文书
浅谈Python numpy创建空数组的问题
2021/05/25 Python
详解Python常用的魔法方法
2021/06/03 Python
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/06 PostgreSQL
python解析json数据
2022/04/29 Python