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 相关文章推荐
CSS常用网站布局实例
Apr 03 Javascript
JavaScript 判断日期格式是否正确的实现代码
Jul 04 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
Mar 29 Javascript
javascript中的if语句使用介绍
Nov 20 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
Mar 18 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
Aug 17 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
Apr 03 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
Jan 03 Javascript
微信小程序 开发之顶部导航栏实例代码
Feb 23 Javascript
Angular8路由守卫原理和使用方法
Aug 29 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
Sep 06 Javascript
Vue项目配置跨域访问和代理proxy设置方式
Sep 08 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生成静态html页面的方法(2种方法)
2015/09/14 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
php版微信js-sdk支付接口类用法示例
2016/10/12 PHP
PHP正则替换函数preg_replace()报错:Notice Use of undefined constant的解决方法分析
2017/02/04 PHP
tp5框架内使用tp3.2分页的方法分析
2019/05/05 PHP
PHP语言对接抖音快手小红书视频/图片去水印API接口源码
2020/08/11 PHP
日期 时间js控件
2009/05/07 Javascript
Javascript 页面模板化很多人没有使用过的方法
2012/06/05 Javascript
关于JS中的闭包浅谈
2013/08/23 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
JSON+HTML实现国家省市联动选择效果
2014/05/18 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
2015/12/25 Javascript
JavaScript知识点总结之如何提高性能
2016/01/15 Javascript
javascript实现抽奖程序的简单实例
2016/06/07 Javascript
利用Javascript仿Excel的数据透视分析功能
2016/09/07 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
vue配置请求本地json数据的方法
2018/04/11 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
2018/09/14 Javascript
深入解析vue 源码目录及构建过程分析
2019/04/24 Javascript
基于JavaScript实现控制下拉列表
2020/05/08 Javascript
[17:13]DOTA2 HEROS教学视频教你分分钟做大人-斯拉克
2014/06/13 DOTA
PyQt5每天必学之带有标签的复选框
2018/04/19 Python
python之生产者消费者模型实现详解
2019/07/27 Python
python多项式拟合之np.polyfit 和 np.polyld详解
2020/02/18 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
英国最大的高品质珠宝和手表专家:Goldsmiths
2017/03/11 全球购物
美国眼镜网:GlassesUSA
2017/09/07 全球购物
日本最大的购物网站:日本乐天市场(Rakuten Ichiba)
2020/11/04 全球购物
大学毕业生自我鉴定
2013/11/05 职场文书
中专生自我鉴定
2013/12/17 职场文书
全民健身日活动方案
2014/01/29 职场文书
计划生育标语
2014/06/23 职场文书
司法局群众路线教育实践活动整改措施思想汇报
2014/10/13 职场文书
实施意见格式范本
2015/06/05 职场文书
浅谈移动端中的视口(viewport)的具体使用
2021/04/13 HTML / CSS
Win10 Anaconda安装python-pcl
2022/04/29 Servers