10个很棒的jQuery代码片段


Posted in Javascript onSeptember 24, 2015

图片预加载

(function($) { 
 var cache = []; 
 // Arguments are image paths relative to the current page. 
 $.preLoadImages = function() { 
  var args_len = arguments.length; 
  for (var i = args_len; i--;) { 
   var cacheImage = document.createElement('img'); 
   cacheImage.src = arguments[i]; 
   cache.push(cacheImage); 
  } 
 } 
 
jQuery.preLoadImages("image1.gif", "/path/to/image2.png");

在新窗口打开链接 (target=”blank”)

$('a[@rel$='external']').click(function(){ 
   this.target = "_blank"; 
}); 
 
/* 
  Usage: 
  <a href="http://www.catswhocode.com" rel="external">catswhocode.com</a> 
*/

当支持 JavaScript 时为 body 增加 class

/* 该代码只有1行,但是最简单的用来检测浏览器是否支持 JavaScript 的方法,如果支持 JavaScript 就在 body 元素增加一个 hasJS 的 class */ 
$('body').addClass('hasJS');

平滑滚动页面到某个锚点

$(document).ready(function() { 
  $("a.topLink").click(function() { 
    $("html, body").animate({ 
      scrollTop: $($(this).attr("href")).offset().top + "px" 
    }, { 
      duration: 500, 
      easing: "swing" 
    }); 
    return false; 
  }); 
});

鼠标滑动时的渐入和渐出

$(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 
  }); 
});

制作等高的列

var max_height = 0; 
$("div.col").each(function(){ 
  if ($(this).height() > max_height) { max_height = $(this).height(); } 
}); 
$("div.col").height(max_height);

在一些老的浏览器上启用 HTML5 的支持

(function(){ 
  if(!/*@cc_on!@*/0) 
    return; 
  var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])} 
})() 
 
//然后在head中引入该js 
<!--[if lt IE 9]> 
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]-->

测试浏览器是否支持某些 CSS3 属性

var supports = (function() { 
  var div = document.createElement('div'), 
   vendors = 'Khtml Ms O Moz Webkit'.split(' '), 
   len = vendors.length; 
 
  return function(prop) { 
   if ( prop in div.style ) return true; 
 
   prop = prop.replace(/^[a-z]/, function(val) { 
     return val.toUpperCase(); 
   }); 
 
   while(len--) { 
     if ( vendors[len] + prop in div.style ) { 
      // browser supports box-shadow. Do what you need. 
      // Or use a bang (!) to test if the browser doesn't. 
      return true; 
     } 
   } 
   return false; 
  }; 
})(); 
 
if ( supports('textShadow') ) { 
  document.documentElement.className += ' textShadow';

获取 URL 中传递的参数

$.urlParam = function(name){ 
  var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href); 
  if (!results) { return 0; } 
  return results[1] || 0; 
}

禁用表单的回车键提交

$("#form").keypress(function(e) { 
 if (e.which == 13) { 
  return false; 
 } 
});

之前的《直接拿来用的15个jQuery代码片段》文章就很不错,不知道大家收藏了吗?现在再来一份,一样很棒!

Javascript 相关文章推荐
从QQ网站中提取的纯JS省市区三级联动菜单
Dec 25 Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 Javascript
浅谈Sizzle的“编译原理”
Apr 14 Javascript
TypeError document.getElementById(...) is null错误原因
May 18 Javascript
jquery实现两边飘浮可关闭的对联广告
Nov 27 Javascript
jQuery实现验证年龄简单思路
Feb 24 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
Feb 05 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
May 28 Javascript
vuejs 单文件组件.vue 文件的使用
Jul 28 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
浅谈vue生命周期共有几个阶段?分别是什么?
Aug 07 Javascript
JS模拟实现Select效果代码
Sep 24 #Javascript
JS基于面向对象实现的拖拽库实例
Sep 24 #Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
Sep 24 #Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 #Javascript
javascript同步服务器时间和同步倒计时小技巧
Sep 24 #Javascript
js中不同的height, top的区别对比
Sep 24 #Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
Sep 24 #Javascript
You might like
php Sql Server连接失败问题及解决办法
2009/08/07 PHP
在php和MySql中计算时间差的方法
2011/04/22 PHP
php array_filter除去数组中的空字符元素
2020/06/21 PHP
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
CodeIgniter实现从网站抓取图片并自动下载到文件夹里的方法
2015/06/17 PHP
PHP使用DOM和simplexml读取xml文档的方法示例
2017/02/08 PHP
php使用crypt()函数进行加密
2017/06/08 PHP
在Laravel5中正确设置文件权限的方法
2019/05/22 PHP
laravel实现上传图片,并且制作缩略图,按照日期存放的代码
2019/10/16 PHP
Node.js中的事件驱动编程详解
2014/08/16 Javascript
JS获得图片alt信息的方法
2015/04/01 Javascript
JavaScript获取当前网页最后修改时间的方法
2015/04/03 Javascript
浅谈JS原型对象和原型链
2016/03/02 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
2018/04/19 jQuery
JS操作字符串转数字的常见方法示例
2019/10/29 Javascript
jQuery 选择器用法实例分析【prev + next】
2020/05/22 jQuery
[58:42]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第一局
2016/02/27 DOTA
[01:03:27]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
Tensorflow:转置函数 transpose的使用详解
2020/02/11 Python
Django ORM 查询表中某列字段值的方法
2020/04/30 Python
Pycharm2020最新激活码|永久激活(附最新激活码和插件的详细教程)
2020/09/29 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
详解HTML5中垂直上下居中的解决方案
2017/12/20 HTML / CSS
Myprotein葡萄牙官方网站:英国优质运动营养品牌
2016/09/12 全球购物
选购世界上最好的美妆品:Cult Beauty
2017/11/03 全球购物
KOHLER科勒美国官网:国际著名卫浴橱柜领先品牌
2020/06/27 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2014/07/21 面试题
水产养殖学应届生求职信
2013/09/29 职场文书
电子商务个人自荐信
2013/12/12 职场文书
计算机学生的自我评价分享
2014/02/18 职场文书
远程网络教育毕业生自我鉴定
2014/04/14 职场文书
2014年机关党委工作总结
2014/12/11 职场文书
处级干部考察材料
2014/12/24 职场文书