18个非常棒的jQuery代码片段

1、jQuery实现的内链接平滑滚动 不需要使用太复杂的插件，只要使用下载这段代码即可实现基于内部链接的平滑滚动

rush:js;"> $('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;
});

});

2、使用jQuery获取所有节点

rush:js;"> var $element = $('#gbtags'); var $nodes = $element.contents(); $nodes.each(function() { if(this.nodeType === 3 && $.trim($(this).text())) { $(this).wrap(''); } });

3、限制选择框选择个数

rush:js;"> $("#categories option").click(function(e){ if ($(this).parent().val().length < 2) { $(this).removeAttr("selected"); } });

4、jQuery使用通配符来删除class

rush:js;"> var _c = 'your-icon-class'

$('.currency').removeClass (function (index,css) {
return (css.match (/\bicon-\S+/g) || []).join(' ');
}).addClass('icon-'+_c);

5、切换启用和禁用

rush:js;"> /* HTML | | | | */

// 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、平滑滚动返回顶端

rush:js;">

$(document).ready(function () {

$("a.topLink").click(function () {
$("html,body").animate({
scrollTop: $($(this).attr("href")).offset().top + "px"
},{
duration: 500,easing: "swing"
});
return false;
});

});

7、使用jQuery和Google Analytics来跟踪表单

rush:js;"> 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 + '"']); }); });

8、超简单的密码强度提示

rush:js;"> $('#pass').keyup(function (e) { var h3Regex = 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 (h3Regex.test($(this).val())) { $('#passstrength').className = 'ok'; $('#passstrength').html('h3!'); } else if (mediumRegex.test($(this).val())) { $('#passstrength').className = 'alert'; $('#passstrength').html('Medium!'); } else { $('#passstrength').className = 'error'; $('#passstrength').html('Weak!'); } return true; });

9、jQuery生成一个自动停靠页尾效果

rush:js;"> // 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);
});

10、预防对表单进行多次提交

rush:js;"> $(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; } }); });

11、图像等比例缩放

// 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、鼠标滑动时的渐入和渐出

rush:js;"> $(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
});
});

13、制作等高的列

max_height) { max_height = $(this).height(); } }); $("div.col").height(max_height);

14、图片预加载

rush:js;"> (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");

15、获取 URL 中传递的参数

rush:js;"> $.urlParam = function(name){ var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href); if (!results) { return 0; } return results[1] || 0; }

16、禁用表单的回车键提交

rush:js;"> $("#form").keypress(function(e) { if (e.which == 13) { return false; } });

17、让整个DIV可以被点击

rush:js;">

< a href = "//www.jb51.cc" > www.jb51.cc < /a>

$(".myBox").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});

18、在新窗口打开链接 (target=”blank”)

rush:js;"> $('a[@rel$='external']').click(function(){ this.target = "_blank"; });

大家可以结合之前小编整理的文章进行学习，把实用的jQuery代码片段进行汇总，以便日后学习使用。