经验分享：10个简单实用的 jQuery 代码片段
平滑滚动到锚点
这个功能很常见，在网站底部添加一个让访客快速回到页面顶部的功能，下面是实现这个功能的示例代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
// HTML:
// <h1 id="anchor">Lorem Ipsum</h1>
// <p><a href="#anchor" class="topLink">Back to Top</a></p>
$(document).ready(
function
() {
$(
"a.topLink"
).click(
function
() {
$(
"html, body"
).animate({
scrollTop: $($(
this
).attr(
"href"
)).offset().top +
"px"
}, {
duration: 500,
easing:
"swing"
});
return
false
;
});
});
|
缩放图片
虽然图片应该在服务器端缩放，不过如果服务器端未做缩放，需要再客户端缩放的时候，可以使用下面这个方便的代码片段：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
$(window).bind(
"load"
,
function
() {
// IMAGE RESIZE
$(
'#product_cat_list img'
).each(
function
() {
var
maxWidth = 120;
var
maxHeight = 120;
var
ratio = 0;
var
width = $(
this
).width();
var
height = $(
this
).height();
if
(width > maxWidth){
ratio = maxWidth / width;
$(
this
).css(
"width"
, maxWidth);
$(
this
).css(
"height"
, height * ratio);
height = height * ratio;
}
var
width = $(
this
).width();
var
height = $(
this
).height();
if
(height > maxHeight){
ratio = maxHeight / height;
$(
this
).css(
"height"
, maxHeight);
$(
this
).css(
"width"
, width * ratio);
width = width * ratio;
}
});
//$("#contentpage img").show();
// IMAGE RESIZE
});
|
滚动时自动加载内容
很多网站使用了流行的瀑布图布局，这种类型的网站在页面滚动的时候会自动加载内容。下面这段代码让你能够把这个功能搬到你的网站上。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
var
loading =
false
;
$(window).scroll(
function
(){
if
((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
if
(loading ==
false
){
loading =
true
;
$(
'#loadingbar'
).css(
"display"
,
"block"
);
$.get(
"load.php?start="
+$(
'#loaded_max'
).val(),
function
(loaded){
$(
'body'
).append(loaded);
$(
'#loaded_max'
).val(parseInt($(
'#loaded_max'
).val())+50);
$(
'#loadingbar'
).css(
"display"
,
"none"
);
loading =
false
;
});
}
}
});
$(document).ready(
function
() {
$(
'#loaded_max'
).val(50);
});
|
检测密码强度
在表单功能中，经常会有检测用户输入的密码强度的功能，下面这个代码片段使用正则表达式来检测密码是否足够安全，当然记得在服务端也进行表单验证。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
$(
'#pass'
).keyup(
function
(e) {
var
strongRegex =
new
RegExp(
"^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\W).*$"
,
"g"
);
var
mediumRegex =
new
RegExp(
"^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$"
,
"g"
);
var
enoughRegex =
new
RegExp(
"(?=.{6,}).*"
,
"g"
);
if
(
false
== enoughRegex.test($(
this
).val())) {
$(
'#passstrength'
).html(
'More Characters'
);
}
else
if
(strongRegex.test($(
this
).val())) {
$(
'#passstrength'
).className =
'ok'
;
$(
'#passstrength'
).html(
'Strong!'
);
}
else
if
(mediumRegex.test($(
this
).val())) {
$(
'#passstrength'
).className =
'alert'
;
$(
'#passstrength'
).html(
'Medium!'
);
}
else
{
$(
'#passstrength'
).className =
'error'
;
$(
'#passstrength'
).html(
'Weak!'
);
}
return
true
;
});
|
均衡元素的高度
使用纯 CSS代码实现均衡元素的高度比较困难，而下面这段 jQuery 代码会根据最高的元素来均衡所有的 Div 元素。
|
1
2
3
4
5
6
7
|
var
maxHeight = 0;
$(
"div"
).each(
function
(){
if
($(
this
).height() > maxHeight) { maxHeight = $(
this
).height(); }
});
$(
"div"
).height(maxHeight);
|
修复 IE6 PNG 问题
至今，IE6 在国内仍然占据了大量的份额，因此在 Web 开发中仍然需要考虑 IE6 的兼容问题。比较常用的 IE6 PNG 图片问题，下面这段代码可以方便的修复。
|
1
2
3
4
5
|
$(
'.pngfix'
).each(
function
() {
$(
this
).attr(
'writing-mode'
,
'tb-rl'
);
$(
this
).css(
'background-image'
,
'none'
);
$(
this
).css(
'filter'
,
'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="path/to/image.png",sizingMethod="scale")'
);
});
|
解析 JSON 字符串
使用 jQuery 解析 JSON 数据并不复杂。下面是一个高效解析 JSON 数据并将其追加到您的网页的例子。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
function
parseJson(){
//Start by calling the json object, I will be using a
//file from my own site for the tutorial
//Then we declare a callback function to process the data
$.getJSON(
'hcj.json'
,getPosts);
//The process function, I am going to get the title,
//url and excerpt for 5 latest posts
function
getPosts(data){
//Start a for loop with a limit of 5
for
(
var
i = 0; i < 5; i++){
var
strPost =
'<h2>'
+ data.posts[i].title
+
'</h2>'
+
'<p>'
+ data.posts[i].excerpt
+
'</p>'
+
'<a href="'
+ data.posts[i].url
+
'" title="Read '
+ data.posts[i].title
+
'">Read ></a>'
;
//Append the body with the string
$(
'body'
).append(strPost);
}
}
}
//Fire off the function in your document ready
$(document).ready(
function
(){
parseJson();
});
|
隔行换色
这是一个很老的功能了，在大的列表或表格中，隔行颜色可以大大提高内容的可读性。下面的代码可以非常简单实现这个功能。
$(
'div:odd'
).css(
"background-color"
,
"#F4F4F8"
);
$(
'div:even'
).css(
"background-color"
,
"#EFF1F1"
);
|
预加载图片
你是否注意到 facebook 相册的图片加载速度特别快？那是因为在你看到这些图片之前已经预加载到你的浏览器缓存中了。下面是实现这个类似功能的代码示例：
|
1
2
3
4
5
6
7
8
|
var
nextimage =
"/images/some-image.jpg"
;
$(document).ready(
function
(){
window.setTimeout(
function
(){
var
img = $(
"<img>"
).attr(
"src"
, nextimage).load(
function
(){
//all done
});
}, 100);
});
|
让整个 Div 可点击
这是实现链接的父 Div 也能够点击的简单方法，HTML 示例代码如下：
|
1
2
3
4
|
<div
class
=
"myBox"
>
blah blah blah.
<a href=
"http://google.com"
>link</a>
</div>
|
下面的 jQuery 代码让整个 Div 可点击：
|
1
2
3
4
|
$(
".myBox"
).click(
function
(){
window.location=$(
this
).find(
"a"
).attr(
"href"
);
return
false
;
});
|