正文
很棒的jQuery代码片段分享
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
jQuery实现的内链接平滑滚动
不需要使用太复杂的插件，只要使用下载这段代码即可实现基于内部链接的平滑滚动
$(
'a[href^="#"]'
).bind(
'click.smoothscroll'
,
function
(e) {
e.preventDefault();
var
anchor =
this
.hash,
$target = $(target);
$(
'html, body'
).stop().animate({
'scrollTop'
: $target.offset().top
}, 500,
'swing'
,
function
() {
window.location.hash = anchor;
});
});
使用jQuery获取所有节点
var
$element = $(
'#gbtags'
);
var
$nodes = $element.contents();
$nodes.each(
function
() {
if
(
this
.nodeType === 3 && $.trim($(
this
).text())) {
$(
this
).wrap(
''
);
}
});
限制选择框选择个数
$(
"#categories option"
).click(
function
(e){
if
($(
this
).parent().val().length < 2) {
$(
this
).removeAttr(
"selected"
);
}
});
jQuery使用通配符来删除class
var
_c =
'your-icon-class'
$(
'.currency'
).removeClass (
function
(index, css) {
return
(css.match (/\bicon-\S+/g) || []).join(
' '
);
}).addClass(
'icon-'
+_c);
切换启用和禁用
/* HTML
|
|
<
input
type
=
"text"
value
=
"欢迎访问www.admin10000.com"
/><
input
type
=
"button"
value
=
"禁用按钮"
/>
|
|
*/
// Plugin
(function ($) {
$.fn.toggleDisabled = function () {
return this.each(function () {
var $this = $(this);
if ($this.attr('disabled')) $this.removeAttr('disabled');
else $this.attr('disabled', 'disabled');
});
};
})(jQuery);
// TEST
$(function () {
$('input:button').click(function () {
$('input:text').toggleDisabled();
});
});
平滑滚动返回顶端
<
h1
id
=
"anchor"
>admin10000.com</
h1
>
<
a
class
=
"topLink"
href
=
"#anchor"
>返回顶端</
a
>
$(document).ready(function () {
$("a.topLink").click(function () {
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top + "px"
}, {
duration: 500,
easing: "swing"
});
return false;
});
});
使用jQuery和Google Analytics来跟踪表单
var
array1 = [];
$(document).ready(
function
() {
$(
'input'
).change(
function
() {
var
formbox = $(
this
).attr(
'id'
);
array1.push(formbox);
console.log(
"you filled out box "
+ array1);
});
$(
'#submit'
).click(
function
() {
console.log(
'tracked '
+ array1);
//alert('this is the order of boxes you filled out: ' + array1);
_gaq.push([
'_trackEvent'
,
'Form'
,
'completed'
,
'"'
+ array1 +
'"'
]);
});
});
超简单的密码强度提示
$(
'#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
;
});
jQuery生成一个自动停靠页尾效果
// Window load event used just in case window height is dependant upon images
$(window).bind(
"load"
,
function
() {
var
footerHeight = 0,
footerTop = 0,
$footer = $(
"#footer"
);
positionFooter();
function
positionFooter() {
footerHeight = $footer.height();
footerTop = ($(window).scrollTop() + $(window).height() - footerHeight) +
"px"
;
/* DEBUGGING
console.log("Document height: ", $(document.body).height());
console.log("Window height: ", $(window).height());
console.log("Window scroll: ", $(window).scrollTop());
console.log("Footer height: ", footerHeight);
console.log("Footer top: ", footerTop);
*/
if
(($(document.body).height() + footerHeight) < $(window).height()) {
$footer.css({
position:
"absolute"
}).stop().animate({
top: footerTop
});
}
else
{
$footer.css({
position:
"static"
});
}
}
$(window)
.scroll(positionFooter)
.resize(positionFooter);
});
预防对表单进行多次提交
$(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
;
}
});
});
图像等比例缩放
$(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
});
鼠标滑动时的渐入和渐出
$(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
});
});
让整个DIV可以被点击
<
div
class
=
"myBox"
>
<
a
href
=
"http://www.admin10000.com"
> admin10000.com < /
a
>
</
div
>
$(".myBox").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
图片预加载
(
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"
);
获取 URL 中传递的参数
$.urlParam =
function
(name){
var
results =
new
RegExp(
'[\\?&]'
+ name +
'=([^&#]*)'
).exec(window.location.href);
if
(!results) {
return
0; }
return
results[1] || 0;
}
禁用表单的回车键提交
$(
"#form"
).keypress(
function
(e) {
if
(e.which == 13) {
return
false
;
}
});
