对后端人而言，jQuery不但在后端自学中是十分关键的一小部分，在组织工作操作过程中也起著十分关键的促进作用，是他们时常会加进的小东西。jQuery是两套相容多应用程序的javascriptJAVA库。采用jQuery可以十分大的提升他们在撰写javascript标识符时的工作效率，协助他们节约大批的组织工作，让标识符显得更为专精且简约。
jQuery能说是当今社会最盛行的javascript架构众所周知，尽管那时出现许多人声说jQuery将要被黄金时代所出局。但，他们不得已直面的是，在现阶段的后端组织工作中依然十分多的须要采加进jQuery。因此，无论jQuery今后将怎样，做为一个符合要求的后端技师，你依然须要熟练和借助jQuery。
上面小贴士重新整理了许多他们在组织工作中常加进的jQuery基本功，能协助他们提升组织管理工作效率，为你下班北窝留出更多的天数，后端人很大无法错失~
一、回到顶端按键
他们能间接借助jQuery中的animate 和scrollTop 方式来同时实现回到顶端的动画电影，就不必再去采用其它的应用程序。
// Back to top
$(a.top).click(function () {
$(document.body).animate({scrollTop: 0}, 800);
return false;
}); <!– Create an anchor tag –> <a href=”#”>Back to top</a>
透过发生改变 scrollTop 的值就能修正回到距顶端的距，animate 的第三个模块是继续执行回到姿势须要的天数(基层单位：微秒)。
二、禁止右键点击
$(document).ready(function(){
$(document).bind(“contextmenu”,function(e){
return false;
});
});
三、自动修复破坏的图像
在组织工作中，他们有时会遇到须要逐个去替换掉已经破损掉的图像链接，相信遇到过的朋友都知道这个操作过程是十分痛苦的，那么上面的标识符能帮你解决这个问题。并且，即使没有须要修复的图像链接，加上这一段标识符也不会有任何损失。
$(img).on(error, function () {
if(!$(this).hasClass(broken-image)) {
$(this).prop(src,
img/broken.png).addClass(broken-image);
}
});
四、悬停切换类
如果你想要同时实现当用户将鼠标悬停在可点击的元素上就能让其发生改变颜色的效果，那你能在用户悬停的时候添加类到元素中，反之则删除类。（可能这种效果能透过CSS同时实现，但了解这个方式是很有必要的。）
$(.btn).hover(function () {
$(this).addClass(hover);
}, function () {
$(this).removeClass(hover);
});
你只须要添加必要的CSS即可。更简单的方式是采用toggleClass 方式：
$(.btn).hover(function () {
$(this).toggleClass(hover);
});
五、预加载图片
预加载图片能分为两种情况，一种是单图片预加载，一种是多个图片同时预加载。
1、单图片预加载
先实例化一个Image对象赋值给img，设置img.src为模块url指定的图片地址,然后判断img的complete属性，若本地有图片的缓存，则该值为true，此时能间接操作这张图片。若本地没有缓存，则值为false，此时须要监听img的onload事件，把对img的操作放在onload的回调函数中。
function preloadImg(url) {
var img = new Image();
img.src = url;
if(img.complete) {
//接下来能采用图片了
//do something here
}
else {
img.onload = function() {
//接下来能采用图片了
//do something here
};
}
}
2、多图片预加载
很多场景下，单图片预加载并无法满足他们的需求，因为像动画电影这种功能通常都会有很多的图片素材，在这种情况下，他们能透过上面的标识符来同时实现多图片的预加载。
function preloadImg(list,imgs) {
var def = $.Deferred(),
len = list.length;
$(list).each(function(i,e) {
var img = new Image();
img.src = e;
if(img.complete) {
imgs[i] = img;
len–;
if(len == 0) {
def.resolve();
}
}
else {
img.onload = (function(j) {
return function() {
imgs[j] = img
len–;
if(len == 0) {
def.resolve();
}
};
})(i);
img.onerror = function() {
len–;
console.log(fail to load image);
};
}
});
return def.promise();
}
var list = [……], //此处省略一万个字符
imgs = [];
$.when(preloadImg(list, imgs)).done(
function() {
//预加载结束
//do something here
}
);
六、验证元素是否为空
$(document).ready(function() {
if ($(‘#id‘).html()) {
// do something
}
});
七、淡入/滑动切换
滑动和淡入是他们在采用jQuery做动画电影时时常会加进的小东西。如果只是想在用户点击之后展示一个元素的话，能用fadeIn 和slideDown 方式就能完美同时实现。如果想要元素在第一次点击的时候出现，然后在第二次点击的时候消失的话，能采用上面的标识符同时实现。
Fade $(.btn).click(function () {
$(.element).fadeToggle(slow);
});
Toggle $(.btn).click(function () {
$(.element).slideToggle(slow);
});
八、重复的函数只定义一次
如果追求标识符的更高性能，那么在设置事件监听程序时必须要小心，只定义一次函数然后把它的名字做为事件处理程序传递是不错的方式。
$(document).ready(function(){
function showMenu(){
alert(Showing menu!);
// Doing something complex here
}
$(#menuButton).click(showMenu);
$(#menuLink).click(showMenu);
});
九、在新标签页/窗口打开外部链接
在一个新的应用程序tab或
$(a[href^=”http”]).attr(target, _blank);
$(a[href^=”//”]).attr(target, _blank);
$(a[href^=” + window.location.origin +
“]).attr(target, _self);
十、停止加载链接
如果你既不须要链接到某个特定的网页，也不想要重新加载页面，能透过阻止默认姿势的方式来触发许多JAVA。
$(a.no-link).click(function (e) {
e.preventDefault();
});
以上就是今天小贴士分享的全部干货基本功，你Get到了吗？后端人能试着动手操作一下哦~
想要成为一个优秀的后端人，jQuery依然是他们必须熟练并借助的一个部分。并且，如果想要在组织工作上更进一步，或者是想要让自己的组织工作更为轻松高工作效率，那么花费许多天数去自学和掌握许多小基本功是必不可少的。磨刀不误砍柴工，这些简单的jQuery小基本功或许能在你的组织工作中起著如虎添翼的促进作用哦~
