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 相关文章推荐
查询json的数据结构的8种方式简介
Mar 10 Javascript
ionic2 tabs使用 Modal底部tab弹出框
Dec 30 Javascript
详谈js模块化规范
Jul 07 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
Oct 11 Javascript
基于JavaScript判断两个对象内容是否相等
Jan 10 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
Feb 11 Javascript
在Vue.js中使用TypeScript的方法
Mar 19 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
Jul 20 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
Sep 08 Javascript
vue使用require.context实现动态注册路由
Dec 25 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
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
无数据库的详细域名查询程序PHP版(4)
2006/10/09 PHP
用cookies来跟踪识别用户
2006/10/09 PHP
php $_SERVER当前完整url的写法
2009/11/12 PHP
ThinkPHP的URL重写问题
2014/06/22 PHP
JS中style属性
2006/10/11 Javascript
javascript操作文本框readOnly
2007/05/15 Javascript
JQUBAR1.1 jQuery 柱状图插件发布
2010/11/28 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
js获得网页背景色和字体色的方法
2014/03/21 Javascript
详解AngularJS中自定义过滤器
2015/12/28 Javascript
js中window.open的参数及注意注意事项
2016/07/06 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
Javascript封装id、class与元素选择器方法示例
2017/03/13 Javascript
js模块加载方式浅析
2017/08/12 Javascript
纯js实现隔行变色效果
2017/11/29 Javascript
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
详解node登录接口之密码错误限制次数(含代码)
2019/10/25 Javascript
小程序表单认证布局及验证详解
2020/06/19 Javascript
Python时区设置方法与pytz查询时区教程
2013/11/27 Python
跟老齐学Python之永远强大的函数
2014/09/14 Python
python Django中models进行模糊查询的示例
2019/07/18 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
python调用接口的4种方式代码实例
2019/11/19 Python
解决Tensorboard 不显示计算图graph的问题
2020/02/15 Python
解决python中import文件夹下面py文件报错问题
2020/06/01 Python
Pyinstaller加密打包应用的示例代码
2020/06/11 Python
python开发一个解析protobuf文件的简单编译器
2020/11/17 Python
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
室内设计专业学生的自我评价分享
2013/11/27 职场文书
主治医师岗位职责
2013/12/10 职场文书
求职毕业生自荐书
2014/02/08 职场文书
党员教师一句话承诺
2014/05/30 职场文书
业绩倒数第一的检讨书
2014/09/24 职场文书
地方课程教学计划
2015/01/19 职场文书
四年级语文教学反思
2016/03/03 职场文书