18个非常棒的jQuery代码片段
前端之家 收集整理的这篇文章主要介绍了
18个非常棒的jQuery代码片段 ,
前端之家 小编觉得挺不错的,现在分享给大家,也给大家做个参考。
1、jQuery实现的内链接 平滑滚动
@H_403 _2@不需要使用太复杂的插件 ,只要使用下载这段代码 即可实现基于内部链接 的平滑滚动
var anchor = this.hash,$target = $(target);
$('html,body').stop().animate({
'scrollTop': $target.offset().top
},500,'swing',function () {
window.location.hash = anchor;
});
});
2、使用jQuery获取 所有节点
@H_403 _2@
3、限制选择框选择个数
@H_403 _2@
4、jQuery使用通配 符来删除 class
@H_403 _2@
$('.currency').removeClass (function (index,css) {
return (css.match (/\bicon-\S+/g) || []).join(' ');
}).addClass('icon-'+_c);
5、切换启用和禁用
@H_403 _2@
|
|
*/
// 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();
});
});
6、平滑滚动返回顶端
@H_403 _2@
7、使用jQuery和Google Analytics来跟踪表单
@H_403 _2@
Box = $(this).attr('id');
array1.push(form
Box );
console.log("you filled out
Box " + array1);
});
$('#submit').click(function () {
console.log('tracked ' + array1);
//alert('this is the order of
Box es you filled out: ' + array1);
_gaq.push(['_trackEvent','Form','completed','"' + array1 + '"']);
});
});
8、超简单的密码强度提示 @H_403 _2@
9、jQuery生成 一个自动 停靠页尾效果
@H_403 _2@
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);
});
10、预防对表单进行多次提交
@H_403 _2@
11、图像等比例缩放
@H_403 _2@
// 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
});
12、鼠标滑动时的渐入和渐出
@H_403 _2@
$(".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 mou
SEO ut
});
});
13、制作等高的列
@H_403 _2@
max_height) { max_height = $(this).height(); }
});
$("div.col").height(max_height);
14、图片 预加载
@H_403 _2@
jQuery.preLoadImages("image1.gif","/path/to/image2.png");
15、获取 URL 中传递的参数
@H_403 _2@
16、禁用表单的回车键提交
@H_403 _2@
17、让整个DIV可以被点击@H_403 _2@
< a href = "//www.jb51.cc" > www.jb51.cc < /a>
$(".myBox ").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});