10个超实用的jQuery代码片段分享

10个超实用的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 = $ts();$nodes.each(function() {deType === 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.gbtags" /><input type="button" value="禁用按钮" />
|
|
*/// Plugin
(function ($) {$.fn.toggleDisabled = function () {return this.each(function () {var $this = $(this);if ($this.attr('disabled')) $veAttr('disabled');else $this.attr('disabled', 'disabled');});};
})(jQuery);// TEST
$(function () {$('input:button').click(function () {$('input:text').toggleDisabled();});
});

在线调试：

.htm

平滑滚动返回顶端

<h1 id="anchor">gbtags</h1>
<a class="topLink" href="#anchor">返回顶端</a>$(document).ready(function () {$(&#pLink").click(function () {$("html, body").animate({scrollTop: $($(this).attr("href")).offset().top + "px"}, {duration: 500,easing: "swing"});return false;});});

.htm

使用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 == st($(this).val())) {$('#passstrength').html('More Characters');} else if (st($(this).val())) {$('#passstrength').className = 'ok';$('#passstrength').html('Strong!');} else if (st($(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";/* DEBUGGINGconsole.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);});

在线调试：

.htm

让整个DIV可以被点击

<div class = "myBox" > < a href = "" > gbtags < /a>
</div > $(".myBox").click(function(){window.location=$(this).find("a").attr("href");return false;
});

在线调试：

.htm

希望大家喜欢，如果你也有珍藏的一些jQuery代码片段的话，请留言和我们分享，谢谢阅读！