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 相关文章推荐
jquery 防止表单重复提交代码
Jan 21 Javascript
JS中把字符转成ASCII值的函数示例代码
Nov 21 Javascript
php实例分享之实现显示网站运行时间
May 20 Javascript
基于insertBefore制作简单的循环插空效果
Sep 21 Javascript
javascript实现无缝上下滚动特效
Dec 16 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
Apr 30 Javascript
js实现彩色条纹滚动条效果
Mar 15 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
Sep 25 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
Nov 22 Javascript
js实现鼠标拖拽缩放div实例代码
Mar 25 Javascript
javascript实现弹出层效果
Dec 10 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
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
PHPLog php 程序调试追踪工具
2009/09/09 PHP
php中引用符号(&amp;)的使用详解
2013/11/13 PHP
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
PHP通过加锁实现并发情况下抢码功能
2016/08/10 PHP
PHP压缩图片功能的介绍
2019/03/21 PHP
Iframe 自适应高度并实时监控高度变化的js代码
2009/10/30 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
2016/08/10 Javascript
JS实现AES加密并与PHP互通的方法分析
2017/04/19 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
2018/07/10 Javascript
如何使用JavaScript实现栈与队列
2019/06/24 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
Python MySQLdb模块连接操作mysql数据库实例
2015/04/08 Python
使用beaker让Facebook的Bottle框架支持session功能
2015/04/23 Python
详细介绍Python中的偏函数
2015/04/27 Python
Python+微信接口实现运维报警
2016/08/27 Python
pycharm远程调试openstack的图文教程
2017/11/21 Python
Python去除、替换字符串空格的处理方法
2018/04/01 Python
判断python字典中key是否存在的两种方法
2018/08/10 Python
python获取微信小程序手机号并绑定遇到的坑
2018/11/19 Python
python实现趣味图片字符化
2019/04/30 Python
tesserocr与pytesseract模块的使用方法解析
2019/08/30 Python
大家检讨书5000字
2014/02/03 职场文书
工程专业求职自荐书范文
2014/02/08 职场文书
仓管员岗位责任制
2014/02/19 职场文书
就业意向书
2014/07/29 职场文书
实现中国梦思想汇报2014
2014/09/13 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
县人大领导班子四风对照检查材料思想汇报
2014/10/09 职场文书
租赁协议书
2015/01/27 职场文书
廉洁自律承诺书范文
2015/04/28 职场文书
写给女朋友的保证书
2015/05/09 职场文书
基层工作经历证明
2015/06/19 职场文书
Python破解极验滑动验证码详细步骤
2021/05/21 Python
浅谈python中的多态
2021/06/15 Python
一篇文章带你深入了解Mysql触发器
2021/08/02 MySQL
Python编程中Python与GIL互斥锁关系作用分析
2021/09/15 Python