竹磬网-邵珠庆の日记 生命只有一次，你可以用它来做些更多伟大的事情–Make the world a little better and easier


192月/130

10 个不错的 jQuery 代码片段

发布在 邵珠庆

 

[代码] 图片预加载

01 (function($) {
02   var cache = [];
03   // Arguments are image paths relative to the current page.
04   $.preLoadImages = function() {
05     var args_len = arguments.length;
06     for (var i = args_len; i--;) {
07       var cacheImage = document.createElement('img');
08       cacheImage.src = arguments[i];
09       cache.push(cacheImage);
10     }
11   }
12  
13 jQuery.preLoadImages("image1.gif", "/path/to/image2.png");

[代码] 在新窗口打开链接 (target=”blank”)

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

[代码] 当支持 JavaScript 时为 body 增加 class

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

[代码] 平滑滚动页面到某个锚点

01 $(document).ready(function() {
02     $("a.topLink").click(function() {
03         $("html, body").animate({
04             scrollTop: $($(this).attr("href")).offset().top + "px"
05         }, {
06             duration: 500,
07             easing: "swing"
08         });
09         return false;
10     });
11 });

[代码] 鼠标滑动时的渐入和渐出

1 $(document).ready(function(){
2     $(".thumbs img").fadeTo("slow", 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads
3  
4     $(".thumbs img").hover(function(){
5         $(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
6     },function(){
7         $(this).fadeTo("slow", 0.6); // This should set the opacity back to 60% on mouseout
8     });
9 });

[代码] 制作等高的列

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

[代码] 在一些老的浏览器上启用 HTML5 的支持

01 (function(){
02     if(!/*@cc_on!@*/0)
03         return;
04     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])}
05 })()
06  
07 //然后在head中引入该js
08 <!--[if lt IE 9]>
09 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
10 <![endif]-->

[代码] 测试浏览器是否支持某些 CSS3 属性

01 var supports = (function() {
02    var div = document.createElement('div'),
03       vendors = 'Khtml Ms O Moz Webkit'.split(' '),
04       len = vendors.length;
05  
06    return function(prop) {
07       if ( prop in div.style ) return true;
08  
09       prop = prop.replace(/^[a-z]/, function(val) {
10          return val.toUpperCase();
11       });
12  
13       while(len--) {
14          if ( vendors[len] + prop in div.style ) {
15             // browser supports box-shadow. Do what you need.
16             // Or use a bang (!) to test if the browser doesn't.
17             return true;
18          }
19       }
20       return false;
21    };
22 })();
23  
24 if ( supports('textShadow') ) {
25    document.documentElement.className += ' textShadow';

[代码] 获取 URL 中传递的参数

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

[代码] 禁用表单的回车键提交

1 $("#form").keypress(function(e) {
2   if (e.which == 13) {
3     return false;
4   }
5 });

标签: , 没有评论
   

支持博主

了解慈善捐款计划

关于邵珠庆博客

文章标签

API GA Git Google Analytics HTML5 jquery JS Linux MySQL nginx PHP SaaS web 互联网 代码 使用 分析 创业 原理 命令 好东西 如何 工具 常用 开发 总结 技巧 技术 插件 数据 文件 方法 时间 架构 框架 汇总 百度 管理 系统 网站 网站分析 设计 详解 问题 阿里云

记事邵珠庆博客

1、Web前端网址导航
2、邵珠庆极客筛站
3、识别移动设备访问代码


最近文章

最近评论

博客日历

2013年2月
一 二 三 四 五 六 日
« 1月   3月 »
 123
45678910
11121314151617
18192021222324
25262728  

目录分类

文章归档

博客功能