您的位置：首页 > Web前端 > JQuery

0+个方便，可重复使用的jQuery代码片段

2014-01-22 16:00 260 查看
http://www.open-open.com/news/view/1522776

多年来，jQuery已经成为每个Web开发人员必须使用的一个JS库。它使用简单，速度快，功能非常强大。在这篇文章中分享给大家一系列的10+个得心应手的jQuery代码片段。


平滑滚动到页面顶部

1
$(
"a[href='#top']"
).click(
function
()
{
2
$(
"html,
body"
).animate({
scrollTop: 0 },
"slow"
);
3
return
 
false
;
4
});
来源: http://stackoverflow.com/questions/1144805/how-do-i-scroll…

克隆表头至表的底部
将表头复制一份到表的底部，可以让你的表格更具可读性。

1
var
 
$tfoot
= $(
'<tfoot></tfoot>'
);
2
$($(
'thead'
).clone(
true
,
true
).children().get().reverse()).each(
function
(){
3
$tfoot.append($(
this
));
4
});
5
$tfoot.insertAfter(
'table
thead'
);
来源: http://lunart.com.ua/jquery

加载外部内容
你是否需要加载一些外部内容到一个div中？利用jQuery就很容易做到，如下面的例子：

1
$(
"#content"
).load(
"somefile.html"
,
function
(response,
status,xhr) {
2
//
error handling
3
if
(status
==
"error"
)
{
4
$(
"#content"
).html(
"An
error occured: "
 
+
xhr.status +
"
"
 
+
xhr.statusText);
5
}
6
});
来源: http://api.jquery.com/load/

等高列
当你使用的列个来显示您网站内容，如果列有同等的高度，它肯定更好看。下面的代码将对所有div元素增加.col类。并会根据最大的元素调整自己的高度。超好用！

1
var
 
maxheight
= 0;
2
$(
"div.col"
).each(
function
(){
3
if
($(
this
).height()
> maxheight) { maxheight = $(
this
).height();
}
4
});
5
6
$(
"div.col"
).height(maxheight);
来源: http://web.enavu.com/tutorials/top-10-jquery-snippets-including-jquery-1-4/

Table Stripes (Zebra)
当在表上显示的数据，每一行交替颜色肯定会增加可读性。这里有一个片段，帮你自动实现这种效果。

1
$(document).ready(
function
(){
2
 
$(
"table
tr:even"
).addClass(
'stripe'
);
3
});
来源: http://www.alovefordesign.com/5-jquery-must-have-code-snippets/

部分页面刷新
如果你只需要刷新页面的某一部分，下面的3行代码就能够实现。在这个例子中，一个
#refresh
 div会每10秒自动刷新。

1
setInterval(
function
()
{
2
$(
"#refresh"
).load(location.href+
"
#refresh>*"
,
""
);
3
},
10000);
//
milliseconds to wait
来源: http://web.enavu.com/tutorials/top-10-jquery-snippets-including-jquery-1-4/

预先载入图像
利用jQuery能够很方便实现在后台，预先加载图片。以下8行代码就能够实现。.

1
$.preloadImages
=
function
()
{
2
 
for
(
var
 
i
= 0; i<arguments.length; i++) {
3
 
$(
"<img
/>"
).attr(
"src"
,
arguments[i]);
4
 
}
5
}
6
7
$(document).ready(
function
()
{
8
 
$.preloadImages(
"hoverimage1.jpg"
,
"hoverimage2.jpg"
);
9
});
来源: http://css-tricks.com/snippets/jquery/image-preloader/

在新标签/窗口中打开外部链接
01
$(
'a'
).each(
function
()
{
02
 
var
 
a
=
new
 
RegExp(
'/'
 
+
window.location.host +
'/'
);
03
 
if
(!a.test(
this
.href))
{
04
 
$(
this
).click(
function
(event)
{
05
 
event.preventDefault();
06
 
event.stopPropagation();
07
 
window.open(
this
.href,
'_blank'
);
08
 
});
09
 
}
10
});
来源: http://css-tricks.com/snippets/jquery/open-external-links-in-new-window/

利用jQuery实现Div占满一个viewport的宽/高
这一段代码允许您根据viewport大小创建一个全宽/全高的div。该代码也可以调整窗口大小。实现强大模态对话框或弹出窗口。

01
//
global vars
02
var
 
winWidth
= $(window).width();
03
var
 
winHeight
= $(window).height();
04
05
//
set initial div height / width
06
$(
'div'
).css({
07
'width'
:
winWidth,
08
'height'
:
winHeight,
09
});
10
11
//
make sure div stays full width/height on resize
12
$(window).resize(
function
(){
13
$(
'div'
).css({
14
'width'
:
winWidth,
15
'height'
:
winHeight,
16
});
17
});
来源: http://www.jqueryrain.com/2013/03/div-full-widthheight-of-viewport-with-jquery/

测试密码强度
当你让用户定义自己的密码，它通常是一件好事，表明有多强密码。这正是这段代码做。

首先，假设此HTML：

1
<input
type=
"password"
 
name=
"pass"
 
id=
"pass"
 
/>
2
<span
id=
"passstrength"
></span>
这里是相应的jQuery代码。所输入的密码将使用正则表达式进行评估和消息将被返回给用户，让他知道，如果他所选择的密码为强，中，弱，或太短。

01
$(
'#pass'
).keyup(
function
(e)
{
02
 
var
 
strongRegex
=
new
 
RegExp(
"^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$"
,
"g"
);
03
 
var
 
mediumRegex
=
new
 
RegExp(
"^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$"
,
"g"
);
04
 
var
 
enoughRegex
=
new
 
RegExp(
"(?=.{6,}).*"
,
"g"
);
05
 
if
 
(
false
 
==
enoughRegex.test($(
this
).val()))
{
06
 
$(
'#passstrength'
).html(
'More
Characters'
);
07
 
}
else
 
if
 
(strongRegex.test($(
this
).val()))
{
08
 
$(
'#passstrength'
).className
=
'ok'
;
09
 
$(
'#passstrength'
).html(
'Strong!'
);
10
 
}
else
 
if
 
(mediumRegex.test($(
this
).val()))
{
11
 
$(
'#passstrength'
).className
=
'alert'
;
12
 
$(
'#passstrength'
).html(
'Medium!'
);
13
 
}
else
 
{
14
 
$(
'#passstrength'
).className
=
'error'
;
15
 
$(
'#passstrength'
).html(
'Weak!'
);
16
 
}
17
 
return
 
true
;
18
});
来源: http://css-tricks.com/snippets/jquery/password-strength/

使用jQuery调整图像大小
01
$(window).bind(
"load"
,
function
()
{
02
//
IMAGE RESIZE
03
$(
'#product_cat_list
img'
).each(
function
()
{
04
var
 
maxWidth
= 120;
05
var
 
maxHeight
= 120;
06
var
 
ratio
= 0;
07
var
 
width
= $(
this
).width();
08
var
 
height
= $(
this
).height();
09
 
10
if
(width
> maxWidth){
11
ratio
= maxWidth / width;
12
$(
this
).css(
"width"
,
maxWidth);
13
$(
this
).css(
"height"
,
height * ratio);
14
height
= height * ratio;
15
}
16
var
 
width
= $(
this
).width();
17
var
 
height
= $(
this
).height();
18
if
(height
> maxHeight){
19
ratio
= maxHeight / height;
20
$(
this
).css(
"height"
,
maxHeight);
21
$(
this
).css(
"width"
,
width * ratio);
22
width
= width * ratio;
23
}
24
});
25
//$("#contentpage
img").show();
26
//
IMAGE RESIZE
27
});
来源: http://snipplr.com/view/62552/mage-resize/

页面滚动时自动加载内容
一些网站如Twitter在页面滚动时会加载内容。这意味着，所有内容都在一个页面上，只要你向下滚动就会动态加载。

下面这段代码可以实现这样的效果。

01
var
 
loading
=
false
;
02
$(window).scroll(
function
(){
03
if
((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
04
if
(loading
==
false
){
05
loading
=
true
;
06
$(
'#loadingbar'
).css(
"display"
,
"block"
);
07
$.get(
"load.php?start="
+$(
'#loaded_max'
).val(),
function
(loaded){
08
$(
'body'
).append(loaded);
09
$(
'#loaded_max'
).val(parseInt($(
'#loaded_max'
).val())+50);
10
$(
'#loadingbar'
).css(
"display"
,
"none"
);
11
loading
=
false
;
12
});
13
}
14
}
15
});
16
17
$(document).ready(
function
()
{
18
$(
'#loaded_max'
).val(50);
19
});
来源: http://fatfolderdesign.com/173/content-load-on-scroll-with-jquery

检查一个图像是否已经加载
这里有一个片段，用来判断、一个图像是否已经加载。

1
var
 
imgsrc
=
'img/image1.png'
;
2
$(
'<img/>'
).load(
function
 
()
{
3
alert(
'image
loaded'
);
4
}).error(
function
 
()
{
5
alert(
'error
loading image'
);
6
}).attr(
'src'
,
imgsrc);
来源: http://tympanus.net/codrops/2010/01/05/some-useful…

按字母顺序对列表进行排序
view
source

print?

01
$(
function
()
{
02
$.fn.sortList
=
function
()
{
03
var
 
mylist
= $(
this
);
04
var
 
listitems
= $(
'li'
,
mylist).get();
05
listitems.sort(
function
(a,
b) {
06
var
 
compA
= $(a).text().toUpperCase();
07
var
 
compB
= $(b).text().toUpperCase();
08
return
 
(compA
< compB) ? -1 : 1;
09
});
10
$.each(listitems,
function
(i,
itm) {
11
mylist.append(itm);
12
});
13
 
}
14
15
$(
"ul#demoOne"
).sortList();
16
17
});

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航