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


Posted in Javascript onJuly 22, 2016

在过去的几年中,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;
 }
});

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

Javascript 相关文章推荐
javascript实现的基于金山词霸网络翻译的代码
Jan 15 Javascript
js ondocumentready onmouseover onclick onmouseout 样式
Jul 22 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
Oct 11 Javascript
Jquery插件分享之气泡形提示控件grumble.js
May 20 Javascript
jQuery简单获取键盘事件的方法
Jan 22 Javascript
JavaScript的设计模式经典之代理模式
Feb 24 Javascript
又一款js时钟!transform实现时钟效果
Aug 15 Javascript
jQuery Raty 一款不错的星级评分插件
Aug 24 Javascript
vue插件tab选项卡使用小结
Oct 27 Javascript
微信小程序slider组件使用详解
Jan 31 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
Mar 02 Javascript
JavaScript如何实现防止重复的网络请求的示例
Jan 28 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
Jul 22 #Javascript
JS结合bootstrap实现基本的增删改查功能
Jul 22 #Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
Jul 22 #Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
Jul 22 #Javascript
jQuery 更改checkbox的状态,无效的解决方法
Jul 22 #Javascript
Javascript字符串常用方法详解
Jul 21 #Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
Jul 21 #Javascript
You might like
PHP操作XML作为数据库的类
2010/12/19 PHP
Codeigniter实现处理用户登录验证后的URL跳转
2014/06/12 PHP
PHP 微信扫码支付源代码(推荐)
2016/11/03 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
jQuery与ExtJS之选择实例分析
2010/08/19 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
2013/01/23 Javascript
地址栏传递中文参数乱码在js里用escape转码
2013/08/28 Javascript
Node.js(安装,启动,测试)
2014/06/09 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
2015/09/19 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
详解springmvc 接收json对象的两种方式
2016/12/06 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
2019/08/28 Javascript
12 种使用Vue 的最佳做法
2020/03/30 Javascript
ES2020 已定稿,真实场景案例分析
2020/05/25 Javascript
python二叉树的实现实例
2013/11/21 Python
由浅入深讲解python中的yield与generator
2017/04/05 Python
使用Python和Scribus创建一个RGB立方体的方法
2019/07/17 Python
python中栈的原理及实现方法示例
2019/11/27 Python
tensorflow estimator 使用hook实现finetune方式
2020/01/21 Python
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
英国当代时尚和街头服饰店:18montrose
2018/12/15 全球购物
DC Shoes荷兰官方网站:美国极限运动品牌
2019/10/22 全球购物
毕业生的求职信范文分享
2013/12/04 职场文书
酒店销售主管岗位职责
2014/01/04 职场文书
社区优秀志愿者材料
2014/02/02 职场文书
小松树教学反思
2014/02/11 职场文书
工程造价专业大学生职业规划范文
2014/03/09 职场文书
广告创意求职信
2014/03/17 职场文书
安全生产月活动总结
2014/05/04 职场文书
船舶工程技术专业求职信
2014/08/07 职场文书
2014三年级班主任工作总结
2014/12/05 职场文书
中层干部考核评语
2015/01/04 职场文书
歌咏比赛口号大全
2015/12/25 职场文书
2019奶茶店创业计划书范本!
2019/07/15 职场文书