jQuery里提供了许多创建交互式网站的方法，在开发Web项目时，开发人员应该好好利用jQuery代码，它们不仅能给网站带来各种动画、特效，还会提高网站的用户体验。
本文收集了15段非常实用的jQuery代码片段，你可以直接复制黏贴到代码里，但请开发者注意了，要理解代码再使用哦。下面就让我们一起来享受jQuery代码的魅力之处吧。
1.预加载图片
|
1
2
3
4
5
6
7
8
9
10
11
12
|
(
function
($) {
var
cache = [];
// Arguments are image paths relative to the current page.
$.preLoadImages =
function
() {
var
args_len = arguments.length;
for
(
var
i = args_len; i--;) {
var
cacheImage = document.createElement(
'img'
);
cacheImage.src = arguments[i];
cache.push(cacheImage);
}
}
jQuery.preLoadImages(
"image1.gif"
,
"/path/to/image2.png"
);
|
2. 让页面中的每个元素都适合在移动设备上展示
|
1
2
3
4
5
6
7
8
9
10
11
|
var
scr = document.createElement(
'script'
);
document.body.appendChild(scr);
scr.onload =
function
(){
$(
'div'
).attr(
'class'
,
''
).attr(
'id'
,
''
).css({
'margin'
: 0,
'padding'
: 0,
'width'
:
'100%'
,
'clear'
:
'both'
});
};
|
3.图像等比例缩放
|
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
|
$(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
});
|
4.返回页面顶部
|
1
2
3
4
5
6
7
8
|
// Back To Top
$(document).ready(
function
(){
$(
'.top'
).click(
function
() {
$(document).scrollTo(0,500);
});
});
//Create a link defined with the class .top
<a href=
"#"
class=
"top"
>Back To Top</a>
|
5.使用jQuery打造手风琴式的折叠效果
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
var
accordion = {
init:
function
(){
var
$container = $(
'#accordion'
);
$container.find(
'li:not(:first) .details'
).hide();
$container.find(
'li:first'
).addClass(
'active'
);
$container.on(
'click'
,
'li a'
,
function
(e){
e.preventDefault();
var
$
this
= $(
this
).parents(
'li'
);
if
($
this
.hasClass(
'active'
)){
if
($(
'.details'
).is(
':visible'
)) {
$
this
.find(
'.details'
).slideUp();
}
else
{
$
this
.find(
'.details'
).slideDown();
}
}
else
{
$container.find(
'li.active .details'
).slideUp();
$container.find(
'li'
).removeClass(
'active'
);
$
this
.addClass(
'active'
);
$
this
.find(
'.details'
).slideDown();
}
});
}
};
|
6.通过预加载图片廊中的上一幅下一幅图片来模仿Facebook的图片展示方式
|
1
2
3
4
5
6
7
8
|
var
nextimage =
"/images/some-image.jpg"
;
$(document).ready(
function
(){
window.setTimeout(
function
(){
var
img = $(
""
).attr(
"src"
, nextimage).load(
function
(){
//all done
});
}, 100);
});
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
$(
function
(){
$(
"select#ctlJob"
).change(
function
(){
$.getJSON(
"/select.php"
,{id: $(
this
).val(), ajax:
'true'
},
function
(j){
var
options =
''
;
for
(
var
i = 0; i < j.length; i++) {
options +=
'
'
+ j[i].optionDisplay +
'
'
;
}
$(
"select#ctlPerson"
).html(options);
})
})
})
|
8.自动替换丢失的图片
|
1
2
3
4
5
6
7
8
|
// Safe Snippet
$(
"img"
).error(
function
() {
$(
this
).unbind(
"error"
).attr(
"src"
,
"missing_image.gif"
);
});
// Persistent Snipper
$(
"img"
).error(
function
() {
$(
this
).attr(
"src"
,
"missing_image.gif"
);
});
|
9.在鼠标悬停时显示淡入/淡出特效
|
1
2
3
4
5
6
7
8
|
$(document).ready(
function
(){
$(
".thumbs img"
).fadeTo(
"slow"
, 0.6);
// This sets the opacity of the thumbs to fade down to 60% when the page loads
$(
".thumbs img"
).hover(
function
(){
$(
this
).fadeTo(
"slow"
, 1.0);
// This should set the opacity to 100% on hover
},
function
(){
$(
this
).fadeTo(
"slow"
, 0.6);
// This should set the opacity back to 60% on mouseout
});
});
|
10.清空表单数据
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
function
clearForm(form) {
// iterate over all of the inputs for the form
// element that was passed in
$(
':input'
, form).each(
function
() {
var
type =
this
.type;
var
tag =
this
.tagName.toLowerCase();
// normalize case
// it's ok to reset the value attr of text inputs,
// password inputs, and textareas
if
(type == 'text
' || type == '
password
' || tag == '
textarea
')
this.value = "";
// checkboxes and radios need to have their checked state cleared
// but should *not* have their '
value
' changed
else if (type == '
checkbox
' || type == '
radio
')
this.checked = false;
// select elements need to have their '
selectedIndex
' property set to -1
// (this works for both single and multiple select elements)
else if (tag == '
select')
this
.selectedIndex = -1;
});
};
|
11.预防对表单进行多次提交
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
$(document).ready(
function
() {
$(
'form'
).submit(
function
() {
if
(
typeof
jQuery.data(
this
,
"disabledOnSubmit"
) ==
'undefined'
) {
jQuery.data(
this
,
"disabledOnSubmit"
, { submited:
true
});
$(
'input[type=submit], input[type=button]'
,
this
).each(
function
() {
$(
this
).attr(
"disabled"
,
"disabled"
);
});
return
true
;
}
else
{
return
false
;
}
});
});
|
12.动态添加表单元素
|
1
2
3
4
5
|
//change event on password1 field to prompt new input
$(
'#password1'
).change(
function
() {
//dynamically create new input and insert after password1
$(
"#password1"
).append(
""
);
});
|
13.让整个Div可点击
|
1
2
|
blah blah blah. link
The following lines of jQuery will make the entire div clickable: $(
".myBox"
).click(
function
(){ window.location=$(
this
).find(
"a"
).attr(
"href"
);
return
false
; });
|
14.平衡高度或Div元素
|
1
2
3
4
5
|
var
maxHeight = 0;
$(
"div"
).each(
function
(){
if
($(
this
).height() > maxHeight) { maxHeight = $(
this
).height(); }
});
$(
"div"
).height(maxHeight);
|
15. 在窗口滚动时自动加载内容
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
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);
});
|
230
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
