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 相关文章推荐
jQuery中的.bind()、.live()和.delegate()之间区别分析
Jun 08 Javascript
JavaScript实现的in_array函数
Aug 27 Javascript
avascript中的自执行匿名函数应用示例
Sep 15 Javascript
jquery加载图片时以淡入方式显示的方法
Jan 14 Javascript
javascript实现密码强度显示
Mar 18 Javascript
在Javascript中处理字符串之big()方法的使用
Jun 08 Javascript
JS控制表单提交的方法
Jul 09 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
Oct 01 Javascript
location.hash保存页面状态的技巧
Apr 28 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
JavaScript canvas实现围绕旋转动画
Nov 18 Javascript
原生js实现点击按钮复制内容到剪切板
Nov 19 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
php数组函数序列之in_array() 查找数组值是否存在
2011/10/29 PHP
PHP中的switch语句的用法实例详解
2015/10/21 PHP
jquery map方法使用示例
2014/04/23 Javascript
javascript操作符&quot;!~&quot;详解
2015/02/10 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
2015/09/06 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
2016/03/04 Javascript
利用BootStrap弹出二级对话框的简单实现方法
2016/09/21 Javascript
javascript动画之模拟拖拽效果篇
2016/09/26 Javascript
详解js的六大数据类型
2016/12/27 Javascript
vue.js学习之UI组件开发教程
2017/07/03 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
基于js中的存储键值对以及注意事项介绍
2018/03/30 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
2018/04/10 Javascript
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
Angular6项目打包优化的实现方法
2019/12/15 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
2021/01/30 Vue.js
[03:47]2015国际邀请赛第三日现场精彩回顾
2015/08/08 DOTA
Python 时间处理datetime实例
2008/09/06 Python
机器学习python实战之手写数字识别
2017/11/01 Python
Python使用装饰器模拟用户登陆验证功能示例
2018/08/24 Python
python实现从pdf文件中提取文本,并自动翻译的方法
2018/11/28 Python
Python实现判断一个整数是否为回文数算法示例
2019/03/02 Python
python PyQt5/Pyside2 按钮右击菜单实例代码
2019/08/17 Python
纯CSS实现设置半个字符的样式
2014/07/03 HTML / CSS
医学生个人求职信范文
2013/09/24 职场文书
消防先进事迹材料
2014/02/10 职场文书
我爱祖国演讲稿
2014/09/02 职场文书
2014年党建工作汇报材料
2014/11/02 职场文书
公司员工离职感言
2015/08/03 职场文书
HTML5中 rem适配方案与 viewport 适配问题详解
2021/04/27 HTML / CSS
pytorch常用数据类型所占字节数对照表一览
2021/05/17 Python
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers
python运行脚本文件的三种方法实例
2022/06/25 Python