10 个 jQuery 代码片段

最新推荐文章于 2020-07-16 11:09:29 发布

最新推荐文章于 2020-07-16 11:09:29 发布 · 123 阅读

文章标签：

#jquery #ViewUI

jquery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一段JavaScript代码实现图片预加载功能，并展示了如何在不支持JavaScript的浏览器中使用伪代码实现CSS3特性检测。具体内容包括：图片预加载、新窗口打开链接、JavaScript支持检测、页面平滑滚动、CSS3动画效果、列高一致性、HTML5特性启用、CSS3属性支持检测、URL参数获取、表单禁用回车提交。

[代码]图片预加载

01

(function($)
 {

02

varcache
 = [];

03

//
 Arguments are image paths relative to the current page.

04

$.preLoadImages
 =function()
 {

05

varargs_len
 = arguments.length;

06

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

07

varcacheImage
 = 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

returnfalse;

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

varmax_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

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]-->

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

01

varsupports
 = (function()
 {

02

vardiv
 = document.createElement('div'),

03

vendors
 ='Khtml
 Ms O Moz Webkit'.split('
 '),

04

len
 = vendors.length;

05

06

returnfunction(prop)
 {

07

if(
 propindiv.style
 )returntrue;

08

09

prop
 = prop.replace(/^[a-z]/,function(val)
 {

10

returnval.toUpperCase();

11

});

12

13

while(len--)
 {

14

if(
 vendors[len] + propindiv.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

24

if(
 supports('textShadow')
 ) {

25

document.documentElement.className
 +='
 textShadow';

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

1

$.urlParam
 =function(name){

2

varresults
 =newRegExp('[\\?&]'+
 name +'=([^&#]*)').exec(window.location.href);

3

if(!results)
 {return0;
 }

4

returnresults[1]
 || 0;

5

}

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

1

$("#form").keypress(function(e)
 {

2

if(e.which
 == 13) {

3

returnfalse;

4

}

5

});