高效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 相关文章推荐
Jquery 基础学习笔记之文档处理
May 29 Javascript
JavaScript this 深入理解
Jul 30 Javascript
select 控制网页内容隐藏于显示的实现代码
May 25 Javascript
javascript学习笔记(十四) window对象使用介绍
Jun 20 Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
Oct 12 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
Jun 19 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
Jun 14 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
Sep 19 Javascript
js+html5实现的自由落体运动效果代码
Jan 28 Javascript
layui前段框架日期控件使用方法详解
May 19 Javascript
基于js的变量提升和函数提升(详解)
Sep 17 Javascript
浅谈VUE中演示v-for为什么要加key
Jan 16 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
一个图形显示IP的PHP程序代码
2007/10/19 PHP
简单谈谈PHP vs Node.js
2015/07/17 PHP
JavaScript 通过模式匹配实现重载
2010/08/12 Javascript
JavaScript中的类继承
2010/11/25 Javascript
JavaScript中判断函数是new还是()调用的区别说明
2011/04/07 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
js获取url中&quot;?&quot;后面的字串方法
2014/05/15 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
2015/05/28 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
2016/10/09 Javascript
浅谈vue项目可以从哪些方面进行优化
2018/05/05 Javascript
JavaScript设计模式之构造函数模式实例教程
2018/07/02 Javascript
vue axios数据请求及vue中使用axios的方法
2018/09/10 Javascript
JavaScript面试技巧之数组的一些不low操作
2019/03/22 Javascript
浅谈Vue组件单元测试究竟测试什么
2020/02/05 Javascript
小程序中手机号识别的示例
2020/12/14 Javascript
Python实现快速傅里叶变换的方法(FFT)
2018/07/21 Python
Win10系统下安装labelme及json文件批量转化方法
2019/07/30 Python
Python实现RGB与HSI颜色空间的互换方式
2019/11/27 Python
通过python 执行 nohup 不生效的解决
2020/04/16 Python
Python如何避免文件同名产生覆盖
2020/06/09 Python
Elasticsearch py客户端库安装及使用方法解析
2020/09/14 Python
amazeui页面校验功能的实现代码
2020/08/24 HTML / CSS
GLAMGLOW格莱魅美国官网:美国知名的面膜品牌
2016/12/31 全球购物
what is the difference between ext2 and ext3
2013/11/03 面试题
费用会计岗位职责
2014/01/01 职场文书
《愚公移山》教学反思
2014/02/20 职场文书
毕业生如何写自我鉴定
2014/03/15 职场文书
委托书格式
2014/08/01 职场文书
公司年底活动方案
2014/08/17 职场文书
毕业生个人总结
2015/02/28 职场文书
写作技巧:如何撰写商业计划书
2019/08/08 职场文书
Python中基础数据类型 set集合知识点总结
2021/08/02 Python
Java Spring Boot 正确读取配置文件中的属性的值
2022/04/20 Java/Android
什么是css原子化,有什么用?
2022/04/24 HTML / CSS