高效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 相关文章推荐
获取DOM对象的几种扩展及简写
Oct 09 Javascript
javascript面向对象之Javascript 继承
May 04 Javascript
Express作者TJ告别Node.js奔向Go
Jul 14 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
Aug 27 Javascript
微信小程序 获取相册照片实例详解
Nov 16 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
Nov 22 Javascript
学习vue.js表单控件绑定操作
Dec 05 Javascript
原生js封装自定义滚动条
Mar 24 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
Jun 12 Javascript
electron + vue项目实现打印小票功能及实现代码
Nov 25 Javascript
微信小程序实现pdf、word等格式文件上传的方法
Sep 10 Javascript
详解Vue之计算属性
Jun 20 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 date与gmdate的获取日期的区别
2010/02/08 PHP
使用PHPMYADMIN操作mysql数据库添加新用户和数据库的方法
2010/04/02 PHP
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
WordPress的主题编写中获取头部模板和底部模板
2015/12/28 PHP
PHP大神的十大优良习惯
2016/09/14 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
Jquery颜色选择器ColorPicker实现代码
2012/11/14 Javascript
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
JavaScript省市联动实现代码
2014/02/15 Javascript
javascript的回调函数应用示例
2014/02/20 Javascript
JS中使用sort结合localeCompare实现中文排序实例
2014/07/23 Javascript
原生JavaScript生成GUID的实现示例
2014/09/05 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
2015/03/10 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
2015/10/30 Javascript
基于Nodejs利用socket.io实现多人聊天室
2017/02/22 NodeJs
微信小程序使用video组件播放视频功能示例【附源码下载】
2017/12/08 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
2018/05/07 Javascript
JavaScript继承的特性与实践应用深入详解
2018/12/30 Javascript
Nginx设置为Node.js的前端服务器方法总结
2019/03/27 Javascript
jQuery动态生成的元素绑定事件操作实例分析
2019/05/04 jQuery
如何在 Vue 表单中处理图片
2021/01/26 Vue.js
[01:08:44]NB vs VP 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python脚本实现下载合并SAE日志
2015/02/10 Python
Python使用time模块实现指定时间触发器示例
2017/05/18 Python
从头学Python之编写可执行的.py文件
2017/11/28 Python
Python和Java进行DES加密和解密的实例
2018/01/09 Python
pycharm修改界面主题颜色的方法
2019/01/17 Python
Python中使用__new__实现单例模式并解析
2019/06/25 Python
PyCharm专业最新版2019.1安装步骤(含激活码)
2019/10/09 Python
python 一维二维插值实例
2020/04/22 Python
英文版餐饮运营管理求职信
2013/11/06 职场文书
函授毕业生的自我鉴定
2013/11/26 职场文书
课堂教学改革实施方案
2014/03/17 职场文书
关于孝道的演讲稿
2014/05/21 职场文书
MySQL数据库查询之多表查询总结
2022/08/05 MySQL