10个很棒的JQuery代码片段

来源：互联网发布：淘宝药物编辑：程序博客网时间：2024/05/16 14:47

1，图片预加载

function($){

var cache=[ ];

$.preLoadImages=function(){

var args_len=arguments.length;

for(var i=args_len;i--;){

var cacheIamge=document.createElement('img');

cacheImage.src=arguments[i];

cache.push(cacheImage);

}

JQuery.preLoadImage("image1.gif",''/path/to/image2.png');

}

2. [代码]在新窗口打开链接 (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*/

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

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

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

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        returnfalse;
10    });
11});

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

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

6. [代码]制作等高的列

1var 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);

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

01(function(){
02    if(!/*@cc_on!@*/0)
03        return;
04    vare = "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<!--[iflt IE 9]>
09<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
10<![endif]-->

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

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

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

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

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

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