高效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 相关文章推荐
js 实现菜单左右滚动显示示例介绍
Nov 21 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
Mar 28 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
Oct 14 Javascript
jQuery中on()方法用法实例
Jan 19 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
Dec 07 Javascript
ionic2 tabs使用 Modal底部tab弹出框
Dec 30 Javascript
微信小程序页面间通信的5种方式
Mar 31 Javascript
JS实现的简单四则运算计算器功能示例
Sep 27 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
May 31 Javascript
微信小程序实现倒计时补零功能
Jul 09 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
Apr 17 Javascript
vue使用video插件vue-video-player的示例
Oct 03 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
解密ThinkPHP3.1.2版本之模块和操作映射
2014/06/19 PHP
护卫神php套件 php版本升级方法(php5.5.24)
2015/05/10 PHP
WordPress中登陆后关闭登陆页面及设置用户不可见栏目
2015/12/31 PHP
Yii2中事务的使用实例代码详解
2016/09/07 PHP
Laravel5.7框架安装与使用学习笔记图文详解
2019/04/02 PHP
JavaScript中各种编码解码函数的区别和注意事项
2010/08/19 Javascript
NodeJS框架Express的模板视图机制分析
2011/07/19 NodeJs
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
纯JS实现根据CSS的class选择DOM
2014/03/22 Javascript
ExtJS4如何给同一个formpanel不同的url
2014/05/02 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
jquery中checkbox使用方法简单实例演示
2015/11/24 Javascript
Angularjs中UI Router全攻略
2016/01/29 Javascript
微信小程序中的onLoad详解及简单实例
2017/04/05 Javascript
使用requirejs模块化开发多页面一个入口js的使用方式
2017/06/14 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
2018/04/03 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
2019/02/11 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
vue 在methods中调用mounted的实现操作
2020/08/07 Javascript
javascript实现数字时钟效果
2021/02/06 Javascript
11月编程语言排行榜 Python逆袭C#上升到第4
2017/11/15 Python
Python实现GUI学生信息管理系统
2020/04/05 Python
Python打印“菱形”星号代码方法
2018/02/05 Python
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
处理python中多线程与多进程中的数据共享问题
2019/07/28 Python
Python爬虫 bilibili视频弹幕提取过程详解
2019/07/31 Python
python 直接赋值和copy的区别详解
2019/08/07 Python
OpenCV 使用imread()函数读取图片的六种正确姿势
2020/07/09 Python
python中pow函数用法及功能说明
2020/12/04 Python
css sprite简单实例
2016/05/23 HTML / CSS
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
十岁生日家长答谢词
2014/01/17 职场文书
暑假社会实践心得体会
2014/09/02 职场文书
升级 Win11 还是坚守 Win10?微软 Win11 新系统缺失功能大盘点
2022/04/05 数码科技