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 相关文章推荐
IE本地存储userdata的一个bug说明
Jul 01 Javascript
基于jquery的页面划词搜索JS
Sep 14 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
Dec 26 Javascript
JS解析XML文件和XML字符串详解
Apr 17 Javascript
JavaScript实现图片DIV竖向滑动的方法
Apr 25 Javascript
javascript清空table表格的方法
May 14 Javascript
js文本框走动跑马灯效果代码分享
Aug 25 Javascript
分享两款带遮罩的jQuery弹出框
Dec 30 Javascript
JS简单生成随机数(随机密码)的方法
May 11 Javascript
浅谈JS如何实现真正的对象常量
Jun 25 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
Oct 02 Javascript
js 实现 list转换成tree的方法示例(数组到树)
Aug 18 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读取txt文件的内容并赋值给数组的代码
2011/11/03 PHP
PHP中常用的字符串格式化函数总结
2014/11/19 PHP
PHP上传文件时自动分配路径的方法
2015/01/09 PHP
php上传图片获取路径及给表单字段赋值的方法
2016/01/23 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
Jquery下attr和removeAttr的使用方法
2010/12/28 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
2016/01/03 Javascript
BootStrapTable服务器分页实例解析
2016/12/20 Javascript
详解Angular的数据显示优化处理
2016/12/26 Javascript
详解angular中如何监控dom渲染完毕
2017/01/03 Javascript
微信小程序 视图容器组件的详解及实例代码
2017/01/19 Javascript
简单谈谈axios中的get,post方法
2017/06/25 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
js实现多张图片每隔一秒切换一张图片
2019/07/29 Javascript
ant-design-vue 快速避坑指南(推荐)
2020/01/21 Javascript
python网络编程示例(客户端与服务端)
2014/04/24 Python
Python实现删除列表中满足一定条件的元素示例
2017/06/12 Python
Python实现的rsa加密算法详解
2018/01/24 Python
Pycharm设置界面全黑的方法
2018/05/23 Python
使用Python更换外网IP的方法
2018/07/09 Python
pandas DataFrame 删除重复的行的实现方法
2019/01/29 Python
Python根据当前日期取去年同星期日期
2019/04/14 Python
实现Python与STM32通信方式
2019/12/18 Python
Python3爬虫中识别图形验证码的实例讲解
2020/07/30 Python
CSS3解析抖音LOGO制作的方法步骤
2019/04/11 HTML / CSS
HTML5安全介绍之内容安全策略(CSP)简介
2012/07/10 HTML / CSS
荣耀商城:HIHONOR
2020/11/03 全球购物
行政专员的岗位职责
2014/03/10 职场文书
代理协议书
2014/04/22 职场文书
秋天的怀念教学反思
2014/04/28 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
2014年材料员工作总结
2014/11/19 职场文书
纪委立案决定书
2015/06/24 职场文书
2016年“六一儿童节”校园广播稿
2015/12/17 职场文书
MySQL复制问题的三个参数分析
2021/04/07 MySQL
SpringBoot项目多数据源及mybatis 驼峰失效的问题解决方法
2022/07/07 Java/Android