高效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 获取图片颜色
Apr 05 Javascript
jquery下checked取值问题的解决方法
Aug 09 Javascript
原生js写的放大镜效果
Aug 22 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Apr 01 Javascript
jQuery实现鼠标划过修改样式的方法
Apr 14 Javascript
jquery html动态添加的元素绑定事件详解
May 24 Javascript
js实现功能比较全面的全选和多选
Mar 02 Javascript
微信小程序实现全国机场索引列表
Jan 31 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
Nov 05 Javascript
node.js中事件触发器events的使用方法实例分析
Nov 23 Javascript
JS实现鼠标移动拖尾
Dec 27 Javascript
React自定义hook的方法
Jun 25 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以FLASH获取为乱码终极解决
2009/08/07 PHP
PHP5各个版本的新功能和新特性总结
2014/03/16 PHP
php读取csv文件并输出的方法
2015/03/14 PHP
php通过PHPExcel导入Excel表格到MySQL数据库的简单实例
2016/10/29 PHP
不常用但很实用的PHP预定义变量分析
2019/06/25 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
JQuery toggle使用分析
2009/11/16 Javascript
在UpdatePanel内jquery easyui效果失效的解决方法
2010/04/11 Javascript
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
2010/10/15 Javascript
一个JQuery写的点击上下滚动的小例子
2011/08/27 Javascript
Js与下拉列表处理问题解决
2014/02/13 Javascript
实例说明为什么不要行内使用javascript
2014/04/18 Javascript
JQuery中的事件及动画用法实例
2015/01/26 Javascript
简单谈谈Vue 模板各类数据绑定
2016/09/25 Javascript
node.js学习之base64编码解码
2016/10/21 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
JS逻辑运算符短路操作实例分析
2018/07/09 Javascript
vue2.0 watch里面的 deep和immediate用法说明
2020/10/30 Javascript
[01:13]这,就是刀塔
2014/07/16 DOTA
基于Python实现对PDF文件的OCR识别
2016/08/05 Python
Python3.4学习笔记之 idle 清屏扩展插件用法分析
2019/03/01 Python
django使用admin站点上传图片的实例
2019/07/28 Python
解决Pytorch 训练与测试时爆显存(out of memory)的问题
2019/08/20 Python
Pytorch 实现计算分类器准确率(总分类及子分类)
2020/01/18 Python
在django中使用post方法时,需要增加csrftoken的例子
2020/03/13 Python
关于Kotlin中SAM转换的那些事
2020/09/15 Python
css3实现3d旋转动画特效
2015/03/10 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
2017/09/07 HTML / CSS
消防安全员岗位职责
2014/03/10 职场文书
2014法制宣传日活动总结
2014/07/09 职场文书
2015年财务部工作总结
2015/04/10 职场文书
给下属加薪申请报告
2015/05/15 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书
使用pandas或numpy处理数据中的空值(np.isnan()/pd.isnull())
2021/05/14 Python
python中opencv实现图片文本倾斜校正
2021/06/11 Python