18个非常棒的jQuery代码片段

2024-03-26 05:07:04 666

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

$('a[href^="#"]').bind('click.smoothscroll',function(e){
e.preventDefault();

varanchor=this.hash,
$target=$(target);

$('html,body').stop().animate({
'scrollTop':$target.offset().top
},500,'swing',function(){
window.location.hash=anchor;
});

});

2、使用jQuery获取所有节点

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

3、限制选择框选择个数

$("#categoriesoption").click(function(e){
if($(this).parent().val().length<2){
$(this).removeAttr("selected");
}
});

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

var_c='your-icon-class'

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

5、切换启用和禁用

/*HTML
|
|
<inputtype="text"value="欢迎访问www.admin10000.com"/><inputtype="button"value="禁用按钮"/>
|
|
*/

//Plugin
(function($){
$.fn.toggleDisabled=function(){
returnthis.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、平滑滚动返回顶端

<h1id="anchor">admin10000.com</h1>
<aclass="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"
});
returnfalse;
});

});

7、使用jQuery和GoogleAnalytics来跟踪表单

vararray1=[];
$(document).ready(function(){
$('input').change(function(){
varformbox=$(this).attr('id');
array1.push(formbox);
console.log("youfilledoutbox"+array1);
});
$('#submit').click(function(){
console.log('tracked'+array1);
//alert('thisistheorderofboxesyoufilledout:'+array1);
_gaq.push(['_trackEvent','Form','completed','"'+array1+'"']);
});
});

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

$('#pass').keyup(function(e){
varstrongRegex=newRegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\W).*$","g");
varmediumRegex=newRegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$","g");
varenoughRegex=newRegExp("(?=.{6,}).*","g");
if(false==enoughRegex.test($(this).val())){
$('#passstrength').html('MoreCharacters');
}elseif(strongRegex.test($(this).val())){
$('#passstrength').className='ok';
$('#passstrength').html('Strong!');
}elseif(mediumRegex.test($(this).val())){
$('#passstrength').className='alert';
$('#passstrength').html('Medium!');
}else{
$('#passstrength').className='error';
$('#passstrength').html('Weak!');
}
returntrue;
});

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

//Windowloadeventusedjustincasewindowheightisdependantuponimages
$(window).bind("load",function(){
varfooterHeight=0,
footerTop=0,
$footer=$("#footer");
positionFooter();

functionpositionFooter(){
footerHeight=$footer.height();
footerTop=($(window).scrollTop()+$(window).height()-footerHeight)+"px";
/*DEBUGGING
console.log("Documentheight:",$(document.body).height());
console.log("Windowheight:",$(window).height());
console.log("Windowscroll:",$(window).scrollTop());
console.log("Footerheight:",footerHeight);
console.log("Footertop:",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、预防对表单进行多次提交

$(document).ready(function(){
$('form').submit(function(){
if(typeofjQuery.data(this,"disabledOnSubmit")=='undefined'){
jQuery.data(this,"disabledOnSubmit",{submited:true});
$('input[type=submit],input[type=button]',this).each(function(){
$(this).attr("disabled","disabled");
});
returntrue;
}
else
{
returnfalse;
}
});
});

11、图像等比例缩放

$(window).bind("load",function(){

//IMAGERESIZE
$('#product_cat_listimg').each(function(){
varmaxWidth=120;
varmaxHeight=120;
varratio=0;
varwidth=$(this).width();
varheight=$(this).height();
if(width>maxWidth){
ratio=maxWidth/width;
$(this).css("width",maxWidth);
$(this).css("height",height*ratio);
height=height*ratio;
}
varwidth=$(this).width();
varheight=$(this).height();
if(height>maxHeight){
ratio=maxHeight/height;
$(this).css("height",maxHeight);
$(this).css("width",width*ratio);
width=width*ratio;
}
});

//$("#contentpageimg").show();

//IMAGERESIZE
});

12、鼠标滑动时的渐入和渐出

$(document).ready(function(){
$(".thumbsimg").fadeTo("slow",0.6);//Thissetstheopacityofthethumbstofadedownto60%whenthepageloads

$(".thumbsimg").hover(function(){
$(this).fadeTo("slow",1.0);//Thisshouldsettheopacityto100%onhover
},function(){
$(this).fadeTo("slow",0.6);//Thisshouldsettheopacitybackto60%onmouseout
});
});

13、制作等高的列

varmax_height=0;
$("div.col").each(function(){
if($(this).height()>max_height){max_height=$(this).height();}
});
$("div.col").height(max_height);

14、图片预加载

(function($){
varcache=[];
//Argumentsareimagepathsrelativetothecurrentpage.
$.preLoadImages=function(){
varargs_len=arguments.length;
for(vari=args_len;i--;){
varcacheImage=document.createElement('img');
cacheImage.src=arguments[i];
cache.push(cacheImage);
}
}

jQuery.preLoadImages("image1.gif","/path/to/image2.png");

15、获取URL中传递的参数

$.urlParam=function(name){
varresults=newRegExp('[\\?&]'+name+'=([^&#]*)').exec(window.location.href);
if(!results){return0;}
returnresults[1]||0;
}

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

$("#form").keypress(function(e){
if(e.which==13){
returnfalse;
}
});

17、让整个DIV可以被点击

<divclass="myBox">
<ahref="https://www.nhooo.com">www.nhooo.com</a>
</div>

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

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

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

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

18个非常棒的jQuery代码片段

热门推荐

随机推荐