非常实用的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 相关文章推荐
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
jQuery实现的简单在线计算器功能
May 11 jQuery
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
jquery实现倒计时小应用
Sep 19 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
jquery实现手风琴案例
May 04 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
php简单对象与数组的转换函数代码(php多层数组和对象的转换)
2011/05/18 PHP
有关于PHP中常见数据类型的汇总分享
2014/01/06 PHP
PHP常用数组函数介绍
2014/07/28 PHP
PHP通过加锁实现并发情况下抢码功能
2016/08/10 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
2011/10/29 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
2015/08/04 Javascript
JavaScript常用标签和方法总结
2015/09/01 Javascript
向JavaScript的数组中添加元素的方法小结
2015/10/24 Javascript
jQuery实现带玻璃流光质感的手风琴特效
2015/11/20 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
2016/05/20 Javascript
jQuery表单元素选择器代码实例
2017/02/06 Javascript
浅析node.js的模块加载机制
2018/05/25 Javascript
解析vue路由异步组件和懒加载案例
2018/06/08 Javascript
vue脚手架搭建项目的兼容性配置详解
2018/07/17 Javascript
js实现轮播图的完整代码
2020/10/26 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
详解微信小程序开发用户授权登陆
2019/04/24 Javascript
对Xpath 获取子标签下所有文本的方法详解
2019/01/02 Python
如何使用Python自动控制windows桌面
2019/07/11 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
html5中嵌入视频自动播放的问题解决
2020/05/25 HTML / CSS
Tretorn美国官网:瑞典外套和鞋类品牌,抵御风雨
2018/07/19 全球购物
维多利亚的秘密阿联酋官网:Victoria’s Secret阿联酋
2019/12/07 全球购物
外语系毕业生找工作的求职信
2013/11/28 职场文书
物业客服专员岗位职责
2013/11/30 职场文书
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
李敖北大演讲稿
2014/05/24 职场文书
甜品店创业计划书
2014/09/21 职场文书
银行催款通知书
2015/04/17 职场文书
赢在执行观后感
2015/06/16 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书
中秋节祝酒词
2015/08/12 职场文书
小学六年级班主任工作经验交流材料
2015/11/02 职场文书
jquery插件实现代码雨特效
2021/04/24 jQuery
MySQL数据管理操作示例讲解
2022/12/24 MySQL