高效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 10进制和62进制的相互转换
Jul 31 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
Mar 02 Javascript
分享一些常用的jQuery动画事件和动画函数
Nov 27 Javascript
浅谈JS中的bind方法与函数柯里化
Aug 10 Javascript
angularjs实现的前端分页控件示例
Feb 10 Javascript
微信小程序之购物车功能
Sep 23 Javascript
微信JSAPI Ticket接口签名详解
Jun 28 Javascript
简单实现js拖拽效果
Jul 25 Javascript
详解使用React进行组件库开发
Feb 06 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
Mar 01 Javascript
vue中进行微博分享的实例讲解
Oct 14 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
Nov 05 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上传图片类(随机名,缩略图,加水印)
2010/06/30 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
showModalDialog 和 showModelessDialog
2007/01/22 Javascript
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
2013/12/29 Javascript
调用jQuery滑出效果时闪烁的解决方法
2014/03/27 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
2014/06/01 Javascript
js使用DOM操作实现简单留言板的方法
2015/04/10 Javascript
使用JavaScript的AngularJS库编写hello world的方法
2015/06/23 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
易被忽视的js事件问题总结
2016/05/14 Javascript
javascript小数精度丢失的完美解决方法
2016/05/31 Javascript
jQuery实现的自定义滚动条实例详解
2016/09/20 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
JavaScript hasOwnProperty() 函数实例详解
2017/08/04 Javascript
详谈JS中数组的迭代方法和归并方法
2017/08/11 Javascript
ubuntu编译nodejs所需的软件并安装
2017/09/12 NodeJs
转换layUI的数据表格中的日期格式方法
2019/09/19 Javascript
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
[01:07:47]Secret vs Optic Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
简单介绍Python中用于求最小值的min()方法
2015/05/15 Python
Python实现从URL地址提取文件名的方法
2015/05/15 Python
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
python开发之tkinter实现图形随鼠标移动的方法
2015/11/11 Python
使用Python从有道词典网页获取单词翻译
2016/07/03 Python
Python(TensorFlow框架)实现手写数字识别系统的方法
2018/05/29 Python
python3+PyQt5 使用三种不同的简便项窗口部件显示数据的方法
2019/06/17 Python
python3 实现的对象与json相互转换操作示例
2019/08/17 Python
Python过滤序列元素的方法
2020/07/31 Python
html5利用canvas实现颜色容差抠图功能
2019/12/23 HTML / CSS
字符串str除首尾字符外的其他字符按升序排列
2013/03/08 面试题
会计职业生涯规划书
2014/01/13 职场文书
中学综治宣传月活动总结
2015/05/07 职场文书
2015年助理政工师工作总结
2015/05/26 职场文书
python+opencv实现视频抽帧示例代码
2021/06/11 Python
MySQL详解进行JDBC编程与增删改查方法
2022/06/16 MySQL