非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】


Posted in jQuery onAugust 08, 2019

本文实例总结了非常实用的jQuery代码段。分享给大家供大家参考,具体如下:

检测IE浏览器

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

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

平滑滚动至页面顶部

以下是jQuery最为常见的一种实现效果:点击一条链接以平滑滚动至页面顶部。虽然没什么新鲜感可言,但每位开发者几乎都用得上

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

保持始终处于顶部

以下代码片段允许某一元素始终处于页面顶部。可以想见,其非常适合处理导航菜单、工具栏或者其它重要信息。

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

自动修复损坏图片

如果大家的站点非常庞大而且已经上线数年,那么其中或多或少会出现图片损坏的情况。这项功能可以检测损坏图片并根据我们的选择加以替换。

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

检测复制、粘贴与剪切操作

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

自动为外部链接添加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";
});

禁用文本/密码输入中的空格

无论是电子邮件、用户名还是密码,很多常见字段都不需要使用空格。以下代码能够轻松禁用选定输入内容中的全部空格。

$('input.nospace').keydown(function(e) {
if (e.keyCode == 32) {


return false;

}
});

悬停时淡入/淡出

$(document).ready(function(){
  $(".thumbs img").fadeTo("slow", 0.6); // 透明度设置0.6
  $(".thumbs img").hover(function(){
    $(this).fadeTo("slow", 1.0); //悬停时,设为1
  },function(){
    $(this).fadeTo("slow", 0.6);
  });
});

更多关于jQuery相关内容还可查看本站专题:《jQuery操作DOM节点方法总结》、《jQuery遍历算法与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
jQuery validata插件实现方法
Jun 25 jQuery
jQuery实现一个简单的验证码功能
Jun 26 jQuery
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
jQuery提示框插件SweetAlert用法分析
Aug 05 #jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 #jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 #jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 #jQuery
jQuery pager.js 插件动态分页功能实例分析
Aug 02 #jQuery
jQuery中DOM常见操作实例小结
Aug 01 #jQuery
jQuery中DOM操作原则实例分析
Aug 01 #jQuery
You might like
Zend Framework教程之连接数据库并执行增删查的方法(附demo源码下载)
2016/03/21 PHP
php版微信公众号自定义分享内容实现方法
2016/09/22 PHP
PHP中的密码加密的解决方案总结
2016/10/26 PHP
window.onload 加载完毕的问题及解决方案(下)
2009/07/09 Javascript
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
2009/11/26 Javascript
jquery 仿QQ校友的DIV模拟窗口效果源码
2010/03/24 Javascript
前台js改变Session的值(用ajax实现)
2012/12/28 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
2013/02/05 Javascript
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
2013/12/31 Javascript
无刷新预览所选择的图片示例代码
2014/04/02 Javascript
javascript类型系统——undefined和null全面了解
2016/07/13 Javascript
微信小程序之前台循环数据绑定
2017/08/18 Javascript
nodejs微信扫码支付功能实现
2018/02/17 NodeJs
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
2018/09/14 Javascript
使用pkg打包Node.js应用的方法步骤
2018/10/19 Javascript
记一次用vue做的活动页的方法步骤
2019/04/11 Javascript
python爬虫面试宝典(常见问题)
2018/03/02 Python
python爬虫超时的处理的实例
2018/12/19 Python
python远程调用rpc模块xmlrpclib的方法
2019/01/11 Python
numpy数组广播的机制
2019/07/12 Python
Python2与Python3的区别详解
2020/02/09 Python
Python自定义sorted排序实现方法详解
2020/09/18 Python
python利用tkinter实现图片格式转换的示例
2020/09/28 Python
Python Pandas list列表数据列拆分成多行的方法实现
2020/12/14 Python
linux系统下pip升级报错的解决方法
2021/01/31 Python
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
Annoushka英国官网:英国奢侈珠宝品牌
2018/10/20 全球购物
科室工作的个人自我评价
2013/10/30 职场文书
餐饮业创业计划书范文
2014/01/06 职场文书
大学生实习思想汇报
2014/01/12 职场文书
2014年小学元旦活动方案
2014/02/12 职场文书
村干部承诺书
2014/03/28 职场文书
班级学习雷锋活动总结
2014/07/04 职场文书
党支部特色活动方案
2014/08/20 职场文书
幼儿园感恩节活动总结
2015/03/24 职场文书