jQuery基础之开发技巧和上传方法
目录
1 开发技巧
一个简单技巧的集合，帮你提升 jQuery 技能。
1.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 毫秒内回到顶部
1.2 预加载图片
如果你的页面使用了大量不能初始可见的图片（例如绑定在 hover 上），预加载它们是十分有用的：
$.preloadImages = function () {
for (var i = 0; i < arguments.length; i++) {
$('').attr('src', arguments[i]);
}
};
$.preloadImages('img/hover-on.png', 'img/hover-off.png');1.3 检查图片是否加载完毕
有时你或许要检查图片是否完全加载完毕，才能在脚本中进行后续操作：
$('img').load(function () {
console.log('image load successful');
});1.4 自动修复损坏的图片
如果你发现自己网站的图片链接挂了，一个一个替换很麻烦。这段简单的代码可以帮上大忙
$('img').on('error', function () {
$(this).prop('src', 'img/broken.png');
});1.5 Hover 上的 Class 切换
如果用户的鼠标悬停在页面上某个可点击元素时，你想要改变这个元素的视觉表现。可以使用下面这段代码，当用户悬停时，为该元素增加一个 class；当用户鼠标离开后移除这个 class
$('.btn').hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});仅需增加必须的 CSS。如果需要更简单的方式，还可以使用 toggleClass 方法
$('.btn').hover(function () {
$(this).toggleClass('hover');
});注意：CSS 或许是这个例子更快速的解决方式，但大家仍然值得知道这一点
1.6 禁用 input 字段
有时你也许想让表单的提交按钮或其文本输入框变得不可用，直到用户执行了一个特定行为（例如确认 “我已经阅读该条款” 的复选框）。增加 disabled attribute 到你的 input，就可以实现自己想要的效果：
$('input[type="submit"]').prop('disabled', true);
当你想把 disabled 的值改为 false 时，仅需在该 input 上再运行一次 prop 方法
$('input[type="submit"]').prop('disabled', false);1.7 停止链接加载
有时你不想链接跳转到某个页面或重加载该页面，而希望可以做一些其他事情，比如触发其他脚本。下面的代码是禁止默认行为的一个小诀窍
$('a.no-link').click(function (e) {
e.preventDefault();
});1.8 淡入淡出/滑动开关
淡入淡出与滑动是我们经常使用 jQuery 做成的动画效果。或许你只是想在用户点击某物时展现一个元素，使用 fadeIn 和 slideDown 都很棒。但如果想让该元素在第一次点击时显现，第二次点击时消失，下面的代码可以很好地完成这个工作：
// Fade
$('.btn').click(function () {
$('.element').fadeToggle('slow');
});
// Toggle
$('.btn').click(function () {
$('.element').slideToggle('slow');
});1.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;
});1.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());
});1.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 的修复方法
1.12 通过文本找到元素
通过使用 jQuery 中的 contains() 选择器，你可以找到某个元素中的文本。如果文本不存在，该元素将会隐藏
var search = $('#search').val();
$('div:not(:contains("' + search + '"))').hide();1.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!');
}
});1.14 Ajax 调用的错误处理
当某次 Ajax 调用返回 404 或 500 错误，就会执行错误处理。但如果没有定义该处理，其他 jQuery 代码或许会停止工作。可以通过下面这段代码定义一个全局 Ajax 错误处理：
$(document).ajaxError(function (e, xhr, settings, error) {
console.log(error);
});1.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 中的链式操作和缓存方法，都极大精简和提速了代码。
1.16 重置（reset）表单
由于JQuery中，提交表单是像下面这样的：
$('#myform').submit()
$('#myform').submit()所以，想当然的认为，重置表单，当然就是像下面这样：
$('#myform').reset()
$('#myform').reset()但是，不幸的是，这样写的话，会有一个让你很郁闷的结果，那就是，表单无法重置！
后来，上网查了一下，说是，JQuery中没有reset方法，经核对，果然是没有。
那有么没有办法通过JQuery来重置表单呢，答案是有的，不过是一种间接的方法，如下：
$('#myform')[0].reset()
$('#myform')[0].reset()也就是通过调用 DOM 中的reset方法来重置表单
2 在线浏览PDF文件的实用jQuery插件
在web开发当中我们经常需要进行需要在线浏览PDf内容，在线嵌入动态pdf，传统的解决方法安装客户端PDF阅读器，如果是在谷歌是可以在线浏览的，因为他自身就带了一些插件，以前遇到这样的问题往往是费时又费力，很不好解决，
今天就给大家分享一系列使用javascript实现的pdf插件效果，无需借助第三方插件就可以实现在线浏览功能，非常实用。
2.1 PDFObject
PDFobject可以帮助你在页面直接嵌入pdf文件，有时候有些项目需要动态地嵌入PDF文件。PDFObject为此而设计的，他能够快速和容易的嵌入PDF文件，PDFObject使用JavaScript来产生相同的符合标准的 标记，然后插入 到您的HTML元素的选择。您可以填满整个浏览器窗口，或将PDF格式转换成一个或其他块级元素。
2.2 pdf.js
和 Google Chrome 使用的源自 Foxit 的闭源 PDF 浏览插件不同，PDF.js 是基于开放的 HTML5 及 JavaScript 技术实现的开源产品。
pdf.js 是一个主要用于HTML5 平台上在线阅读PDF文档的小插件，基于JavaScript技术编写而成，无需任何本地技术支持。
pdf.js是由Mozilla Labs发布的。他们的目标是创建一个通用的，基于标准的网络平台，能够解析和渲染PDF文件，并最终发布一个PDF阅读器扩展，毫无疑问 pdf.js 将被整合入 Gecko 成为 Firefox 的内嵌 PDF 阅读器，但是具体整合时间表尚未确定
2.3 jsPDF
jsPDF 是一个使用Javascript语言生成PDF的开源库。你可以在Firefox插件，服务端脚本或是浏览器脚本中使用它。客户端Safari 和 iPhone Safari 支持得最好,其次是Opera和Windows下的Firefox 3等。IE暂不支持
2.4 jQuery Media Plugin
jQuery Media Plugin是一款基于jQuery的网页媒体播放器插件，它支持大部分的网络多媒体播放器和多媒体格式，比如：Flash, Windows Media Player, Real Player, Quicktime, MP3,Silverlight, PDF。它根据当前的脚本配置，自动将a标签替换成div，并生成object, embed甚至是iframe代码，至于生成object还是embed，jQuery Media会根据当前平台自动判别，因此兼容性方面非常出色下面这段代码是jQuery Media生成后的
2.5 jQuery Document Viewer
Document Viewer是一个jQuery插件，可以让你在网页中直接查看多种文件格式。文档浏览器支持的文件格式：PDF文件，文本文件，代码，图像，音频，视频等
3 文件上传
假定网页有一个文件控件。
<input type="file" id="test-input">
下面就是如何使用Ajax上传文件。
var file = $('#test-input')[0].files[0];
var formData = new FormData();
formData.append('file', file);
$.ajax('myserver/uploads', {
method: 'POST',
contentType: false,
processData: false,
data: formData
});
上面代码是将文件作为表单数据发送。除此之外，也可以直接发送文件。
注意：$("#test_input")[0]是把jQuery对象转化为DOM对象
var file = $('#test-input')[0].files[0];
$.ajax('myserver/uploads', {
method: 'POST',
contentType: file.type,
processData: false,
data: file
});