WEB前端开发都应知道的jquery小技巧及jquery三个简写


Posted in Javascript onNovember 15, 2015

一个简单技巧的集合,帮你提升 jQuery 技能。目前小编给大家整理了14个jquery小技巧。

目录结构

1回到顶部按钮
2预加载图片
3检查图片是否加载完毕
4自动修复损坏的图片
5Hover 上的 Class 开关
6禁用 input 字段
7停止链接加载
8淡入淡出/滑动开关
9简单的折叠效果
10将两个 Div 设为相同高度
11在新窗口打开外部链接
12找到文本元素
13切换可视与隐藏的触发器

下面给大家介绍每个小技巧的具体含义。

1.回到顶部按钮

通过使用 jQuery 中的 animate 和 scrollTop 方法,你无需插件便可创建一个简单地回到顶部动画:

// Back to top
 $('a.top').click(function (e) {
 e.preventDefault();
 $(document.body).animate({scrollTop: 0}, 800);
 });
 <!-- Create an anchor tag -->
 <a class="top" href="#">Back to top</a>

将 scrollTop 的值改为你想要 scrollbar 停止的地方。然后你要做的就是,设置在 800 毫秒内回到顶部。

2.预加载图片

如果你的页面使用了大量不能初始可见的图片(例如绑定在 hover 上),预加载它们是十分有用的:

$.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.检查图片是否加载完毕

有时你或许要检查图片是否完全加载完毕,才能在脚本中进行后续操作:

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

你也可以通过把 img 标签替换成 ID 或 class,来检查特定图片是否加载完成。

4.自动修复损坏的图片

如果你发现自己网站的图片链接挂了,一个一个替换很麻烦。这段简单的代码可以帮上大忙:

$('img').on('error', function () {
 $(this).prop('src', 'img/broken.png');
});

即使你没有任何损坏的链接,增加这段代码也不会有什么影响。

5.Hover 上的 Class 切换

如果用户的鼠标悬停在页面上某个可点击元素时,你想要改变这个元素的视觉表现。可以使用下面这段代码,当用户悬停时,为该元素增加一个 class;当用户鼠标离开后移除这个 class:

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

你仅需增加必须的 CSS。如果需要更简单的方式,还可以使用 toggleClass 方法:

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

注意:CSS 或许是这个例子更快速的解决方式,但大家仍然值得知道这一点。

6.禁用 input 字段

有时你也许想让表单的提交按钮或其文本输入框变得不可用,直到用户执行了一个特定行为(例如确认 “我已经阅读该条款” 的复选框)。增加 disabled attribute 到你的 input,就可以实现自己想要的效果:

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

当你想把 disabled 的值改为 false 时,仅需在该 input 上再运行一次 prop 方法。

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

7.停止链接加载

有时你不想链接跳转到某个页面或重加载该页面,而希望可以做一些其他事情,比如触发其他脚本。下面的代码是禁止默认行为的一个小诀窍:

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

8.淡入淡出/滑动开关

淡入淡出与滑动是我们经常使用 jQuery 做成的动画效果。或许你只是想在用户点击某物时展现一个元素,使用 fadeIn 和 slideDown 都很棒。但如果想让该元素在第一次点击时显现,第二次点击时消失,下面的代码可以很好地完成这个工作:

// 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());

该例设置了 min-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 在 IE 10 中不可用,该 issue 的修复方法。

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

Ajax 调用的错误处理

当某次 Ajax 调用返回 404 或 500 错误,就会执行错误处理。但如果没有定义该处理,其他 jQuery 代码或许会停止工作。可以通过下面这段代码定义一个全局 Ajax 错误处理:

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

14.插件链式调用

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小技巧之三个简写

简洁写法如下所示:

对象的简写

在过去,如果你想创建一个对象,你需要这样:

var car = new Object(); 
car.colour = 'red'; 
car.wheels = 4; 
car.hubcaps = 'spinning'; 
car.age = 4;

下面的写法能够达到同样的效果:

var car = { 
colour:'red', 
wheels:4, 
hubcaps:'spinning', 
age:4 
}

这样就简单多了,你不需要反复使用这个对象的名称。
这样 car 就定义好了,也许你会遇到 invalidUserInSession 的问题,这只有你在使用IE时会碰到,只要记住一点,不要右大括号前面写分号,你就不会有麻烦。

数组的简写

传统的定义数组的方法是这样:

var moviesThatNeedBetterWriters = new Array(
  'Transformers','Transformers2','Avatar','Indiana Jones 4');

简写版是这样:

var moviesThatNeedBetterWriters = [
  'Transformers','Transformers2','Avatar','Indiana Jones 4'];

对于数组,这里有个问题,其实没有什么图组功能。但你会经常发现有人这样定义上面的 car ,就像这样:

var car = new Array(); 
car['colour'] = 'red'; 
car['wheels'] = 4; 
car['hubcaps'] = 'spinning'; 
car['age'] = 4;

数组不是万能的;这样写不对,会让人困惑。图组实际上是对象的功能,人们混淆了这两个概念。

三元条件符号的简写

另外一个非常酷的简写方法是使用与三元条件符号。
你不必写成下面的样子:

var direction; 
if(x < 200){ 
  direction = 1; 
}
else { 
  direction = -1; 
}

你可以使用三元条件符号简化它:

var direction = x < 200 ? 1 : -1;

当条件为true 时取问号后面的值,否则取冒号后面的值。

Javascript 相关文章推荐
JS俄罗斯方块,包含完整的设计理念
Dec 11 Javascript
调整小数的格式保留小数点后两位
May 14 Javascript
jquery实现顶部向右伸缩的导航区域代码
Sep 02 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
Jan 14 Javascript
jquery实现图片列表鼠标移入微动
Dec 01 Javascript
详解js树形控件—zTree使用总结
Dec 28 Javascript
Vue之Watcher源码解析(1)
Jul 19 Javascript
Angular 作用域scope的具体使用
Dec 11 Javascript
Angular浏览器插件Batarang介绍及使用
Feb 07 Javascript
Vue 进阶之路(三)
Apr 18 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
May 28 Javascript
js轮播图之旋转木马效果
Oct 13 Javascript
JS使用eval解析JSON的注意事项分析
Nov 14 #Javascript
js读取并解析JSON类型数据的方法
Nov 14 #Javascript
基于JS实现PHP的sprintf函数实例
Nov 14 #Javascript
javascript动态生成树形菜单的方法
Nov 14 #Javascript
node.js回调函数之阻塞调用与非阻塞调用
Nov 13 #Javascript
JavaScript在网页中画圆的函数arc使用方法
Nov 13 #Javascript
学习JavaScript正则表达式
Nov 13 #Javascript
You might like
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
php 学习资料零碎东西
2010/12/04 PHP
php实现头像上传预览功能
2017/04/27 PHP
js获取提交的字符串的字节数
2009/02/09 Javascript
jquery autocomplete自动完成插件的的使用方法
2010/08/07 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
jquery禁用右键示例
2014/04/28 Javascript
Javascript 是你的高阶函数(高级应用)
2015/06/15 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
Node.js 日志处理模块log4js
2016/08/28 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
2016/09/29 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
2016/12/02 Javascript
BootStrap 导航条实例代码
2017/05/18 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
2018/05/03 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
2019/09/21 Javascript
vue如何使用async、await实现同步请求
2019/12/09 Javascript
python3抓取中文网页的方法
2015/07/28 Python
详解Python3.6安装psutil模块和功能简介
2018/05/30 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
python+pygame实现坦克大战
2019/09/10 Python
Python如何使用BeautifulSoup爬取网页信息
2019/11/26 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
pytorch实现mnist分类的示例讲解
2020/01/10 Python
python手机号前7位归属地爬虫代码实例
2020/03/31 Python
pyinstaller打包单文件时--uac-admin选项不起作用怎么办
2020/04/15 Python
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
小学教研工作制度
2014/01/15 职场文书
学校就业推荐信范文
2014/05/19 职场文书
小学语文教研活动总结
2014/07/01 职场文书
2015年民主生活会发言材料
2014/12/15 职场文书
2015年推广普通话演讲稿
2015/03/20 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
公司开业致辞
2015/07/29 职场文书
Java 获取Word中所有的插入和删除修订的方法
2022/04/06 Java/Android
鸿蒙3.0体验感怎么样? 鸿蒙3.0系统评测向
2022/08/14 数码科技