十条很实用的jQuery代码片段

本文转自：http://developer.51cto.com/art/201604/509093.htm

作者：核子可乐译来源：51CTO

原文标题：10
jQuery Snippets for Efficient Web Development

JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 。它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及兴许版本号将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为站点提供AJAX交互。jQuery另一个比較大的优势是，它的文档说明非常全。并且各种应用也说得非常具体，同一时候还有很多成熟的插件可供选择。jQuery可以使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，仅仅须要定义id就可以。下面十项jQuery演示样例可以帮助大家的Web设计项目顺利实现效率提升。

1.检測IE浏览器

在进行CSS设计时，IE浏览器对开发人员及设计师而言无疑是个麻烦。虽然IE6的黑暗时代已经过去，IE浏览器家族的人气亦在不断下滑。但我们仍然有必要对其进行检測。当然，下面片段亦可用于检測其他浏览器。

$(document).ready(function() {
      if (navigator.userAgent.match(/msie/i) ){
        alert('I am an old fashioned Internet Explorer');
      }
}); 

来源: Stack
Overflow

     2.平滑滚动至页面顶部

下面是jQuery最为常见的一种实现效果：点击一条链接以平滑滚动至页面顶部。尽管没什么新奇感可言，但每位开发人员差点儿都用得上。

$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
}); 

来源: Stalk
Overflow

     3.保持始终处于顶部

下面代码片段同意某一元素始终处于页面顶部。能够想见，其很适合处理导航菜单、工具栏或者其他重要信息。

$(function(){ 

var $win = $(window) 

var $nav = $('.mytoolbar'); 

var navTop = $('.mytoolbar').length && $('.mytoolbar').offset().top; 

var isFixed=0; 

processScroll() 

$win.on('scroll', processScroll) 

function processScroll() { 

var i, scrollTop = $win.scrollTop() 

if (scrollTop >= navTop && !isFixed) { 

isFixed = 1 

$nav.addClass('subnav-fixed') 

} else if (scrollTop <= navTop && isFixed) { 

isFixed = 0 

 $nav.removeClass('subnav-fixed') 

} 

} 

来源: DesignBump

     4.替换html标签

jQuery可以很轻松地实现html标签替换，而这也将为我们带来很多其它新的可能。

$('li').replaceWith(function(){ 

  return $("<div />").append($(this).contents()); 

}); 

来源: Allure Web Solutions

     5.检測屏幕宽度

如今移动设备的人气差点儿已经超过了传统计算机。因此对小型屏幕的尺寸进行检測就变得很重要。幸运的是，我们能够利用jQuery轻松实现这项功能。

var responsive_viewport = $(window).width(); 

/* if is below 481px */ 

if (responsive_viewport < 481) { 

    alert('Viewport is smaller than 481px.'); 

} /* end smallest screen */ 

来源:jQuery Rain

     6.自己主动修复损坏图片

假设大家的网站很庞大并且已经上线数年，那么当中或多或少会出现图片损坏的情况。这项功能能够检測损坏图片并依据我们的选择加以替换。

$('img').error(function(){ 

$(this).attr('src', 'img/broken.png'); 

}); 

来源:WebDesignerDepot

     7.检測复制、粘贴与剪切操作

利用jQuery。大家能够很轻松地检測到选定元素的复制、粘贴与剪切操作。

$("#textA").bind('copy', function() { 

    $('span').text('copy behaviour detected!') 

}); 

$("#textA").bind('paste', function() { 

    $('span').text('paste behaviour detected!') 

}); 

$("#textA").bind('cut', function() { 

    $('span').text('cut behaviour detected!') 

}); 

来源: Snipplr

    8.自己主动为外部链接加入target=“blank”属性

在链接至外部网站时，大家可能希望使用target="blank"属性以确保在新的选项卡中打开页面。

问题在于。target="blank"属性并未经过W3C认证。

jQuery可以帮上大忙：下面片段可以检測当前链接是否指向外部。假设是则自己主动为其加入target="blank"属性。

var root = location.protocol + '//' + location.host; 

$('a').not(':contains(root)').click(function(){ 

    this.target = "_blank"; 

}); 

来源: jQuery Rain

     9.悬停时淡入/淡出

又是还有一项“经典”效果，大家能够利用下面片段随时加以运用。

$(document).ready(function(){ 

    $(".thumbs img").fadeTo("slow", 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads 

    $(".thumbs img").hover(function(){ 

        $(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover 

    },function(){ 

        $(this).fadeTo("slow", 0.6); // This should set the opacity back to 60% on mouseout 

    }); 

}); 

来源: Snipplr

      10.禁用文本/password输入中的空格

不管是电子邮件、username还是password。非常多常见字段都不须要使用空格。下面代码可以轻松禁用选定输入内容中的所有空格。

$('input.nospace').keydown(function(e) { 

if (e.keyCode == 32) { 

return false; 

} 

});