2、使用jQuery获取所有节点
var$element=$('#gbtags');
var$nodes=$element.contents();
$nodes.each(function(){
if(this.nodeType===3&&$.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代码片段进行汇总，以便日后学习使用。