很棒的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;

}

});