高效Web开发的10个jQuery代码片段

 更新时间:2016年07月22日 08:56:40   投稿:lijiao  
这篇文章主要为大家详细介绍了高效Web开发的10个jQuery代码片段,具有一定的实用性和参考价值,感兴趣的小伙伴们可以参考一下

在过去的几年中,jQuery一直是使用最为广泛的JavaScript脚本库。今天我们将为各位Web开发者提供10个最实用的jQuery代码片段,有需要的开发者可以保存起来。 

1、检测Internet Explorer版本 
当涉及到CSS设计时,对开发者和设计者而言Internet Explorer一直是个问题。尽管IE6的黑暗时代已经过去,IE也越来越不流行,它始终是一个能够容易检测的好东西。当然了,下面的代码也能用于检测别的浏览器。

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

2、平稳滑动到页面顶部
这是一个最广泛使用的jQuery效果:对一个链接点击下会平稳地将页面移动到顶部。这里没什么新的内容,但是每个开发者必须要会偶尔编写一下类似函数

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

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')
 }
} 

4、用其他内容取代html标志
jQuery使得用另外一个东西取代html标志很简单。可以利用的余地无穷无尽。

 $('li').replaceWith(function(){
 return $("<div />").append($(this).contents());
}); 

5、检测视窗宽度
 现在移动设备比过时的电脑更普遍,能够方便去检测一个更小的视窗宽度会很有帮助。幸运的是,用jQuery来做超级简单。

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

/* if is below 481px */
if (responsive_viewport < 481) {
  alert('Viewport is smaller than 481px.');
} /* end smallest screen */ 

6、自动定位并修复损坏图片 
如果你的站点比较大而且已经在线运行了好多年,你或多或少会遇到界面上某个地方有损坏的图片。这个有用的函数能够帮助检测损坏图片并用你中意的图片替换它,并会将此问题通知给访客。

 $('img').error(function(){
 $(this).attr('src', 'img/broken.png');
}); 

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!')
}); 

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";
}); 

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
  });
}); 

10、在文本或密码输入时禁止空格键
 在很多表格领域都不需要空格键,例如,电子邮件,用户名,密码等等等。这里是一个简单的技巧可以用于在选定输入中禁止空格键。

 $('input.nospace').keydown(function(e) {
 if (e.keyCode == 32) {
 return false;
 }
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • jQuery制作全屏宽度固定高度轮播图(实例讲解)

    jQuery制作全屏宽度固定高度轮播图(实例讲解)

    下面小编就为大家带来一篇jQuery制作全屏宽度固定高度轮播图(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • jquery实现简洁文件上传表单样式

    jquery实现简洁文件上传表单样式

    这篇文章向大家推荐了一款基于jquery实现的简洁文件上传表单样式,实现效果大方精致,极力推荐给大家,希望大家可以喜欢。
    2015-11-11
  • Jquery树插件zTree实现菜单树

    Jquery树插件zTree实现菜单树

    这篇文章主要为大家详细介绍了Jquery树插件zTree实现菜单树,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • jQuery子属性过滤选择器用法分析

    jQuery子属性过滤选择器用法分析

    这篇文章主要介绍了jQuery子属性过滤选择器用法,实例分析了:first-child、:last-child、:nth-child、:only-chilid等子属性过滤选择器使用技巧,需要的朋友可以参考下
    2015-02-02
  • 超级好用的jQuery圆角插件 Corner速成

    超级好用的jQuery圆角插件 Corner速成

    虽然圆角页面很好看,但一直以来都不太好实现,一方面是没有CSS3,二是都得通过美工切图切出来角。但这些麻烦事即将过去,就是因为它:jQuery Corner的出现!
    2014-08-08
  • jQuery.deferred对象使用详解

    jQuery.deferred对象使用详解

    这篇文章主要为大家详细介绍了jQuery.deferred对象的使用方法,内容很全面,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • jquery创建表格(自动增加表格)代码分享

    jquery创建表格(自动增加表格)代码分享

    jquery创建表格在点击单元格时自动增加一行表格,代码看下面
    2013-12-12
  • jQuery on()方法使用技巧详解

    jQuery on()方法使用技巧详解

    这篇文章主要介绍了jQuery on()方法使用技巧详解,本文讲解了trigger()绑定、多个事件绑定同一个函数、多个事件绑定不同函数、绑定自定义事件、传递数据到函数等技巧,需要的朋友可以参考下
    2015-04-04
  • jQuery实用基础超详细介绍

    jQuery实用基础超详细介绍

    本篇文章,小编为大家介绍关于jQuery实用基础超详细介绍,有需要的朋友可以参考一下
    2013-04-04
  • jquery 设置style:display的方法

    jquery 设置style:display的方法

    这篇文章主要介绍了jquery 设置style:display的方法,需要的朋友可以参考下
    2015-01-01

最新评论