本篇内容介绍了“jQuery实用的示例代码分析”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

★使用 jQuery 来切换样式表

$("link[media='screen']").attr("href","Alternative.css");★jQuery 检测浏览器类型

(if($.browser.safari))(if($.browser.msie&&$.browser.version>6))(if($.browser.msie&&$.browser.version<=6))(if($.browser.mozilla&&$.browser.version>='1.8'))★jQuery 验证某个元素是否为空

if($("#Demo").html()){//null;}★jQuery从集合中获得索引值

$("ul>li").click(function(){varindex=$(this).prevAll().length;});★jQuery选择被选中的option元素

$("#someElement").find("option:selected");★jQuery为选择器绑定方法

$("table").delegate("td","hover",function(){$(this).toggleClass("hover");});//1.42版后,delegate替代live,因为它们提供了更好的上下文支持★jQuery自动滚动到页面中的某区域(可以看做一个小插件)

jQuery.fn.Autoscroll=function(sel){$('html,body').animate({scrollTop:$(sel).offset().top},500);}//调用:$("#area_name").Autoscroll();

★jQuery限制"TextArea"域中的字符数(可以看做一个小插件)

(function($){jQuery.fn.maxLength=function(max){this.each(function(){vartype=this.tagName.toLowerCase();varinputType=this.type?this.type.toLowerCase():null;if(type=="input"&&inputType=="text"||inputType=="password"){//应用标准的maxLengththis.maxLength=max;}elseif(type=="textarea"){this.onkeypress=function(e){varob=e||event;varkeyCode=ob.keyCode;varhasSelection=document.selection?document.selection.createRange().text.length>0:this.selectionStart!=this.selectionEnd;return!(this.value.length>=max&&(keyCode>50||keyCode==32||keyCode==0||keyCode==13)&&!ob.ctrlKey&&!ob.altKey&&!hasSelection);};this.onkeyup=function(){if(this.value.length>max){this.value=this.value.substring(0,max);}};}});})(jQuery);//调用:$('#macoArea").maxLength(500);

★jQuery判断某个元素是否可见

if($("#macoArea").is(":visible")=="true"){//少年,别跑}

★jQuery元素居中显示(可以看做一个小插件)

(function($){jQuery.fn.center=function(){this.css('position','absolute');this.css('top',($(window).height()-this.height())/+$(window).scrollTop()+'px');this.css('left',($(window).width()-this.width())/2+$(window).scrollLeft()+'px');returnthis;}})(jQuery);//调用:$("#macoArea").center();

★jQuery使用.siblings()选择同辈元素

//少年,你是否这样操作过$('#navli').click(function(){$("#macoAreali").removeClass("current");$(this).addClass("current");});//这样做是不是会更好呢$("#navli").click(function(){$(this).addClass("current").siblings().removeClass("current");});

★jQuery操作复选框全选反选

varsta=false;//你懂,全局东东$('a').click(function(){$("input[type=checkbox]").attr("checked",!sta);sta=!sta;});

★jQuery获得鼠标光标位置x和y

$(document).mousemove(function(e)}$(document).ready(function(){$().mousemove(function(e){$("#macoArea").html("XAxis:"+e.pageX+"|YAxis"+e.pageY);});});

★jQuery解析XML

functionParseXml(xml){$(xml).find("Node").each(function(){$("#macoArea").append($(this).attr("Author")+""););}

★jQuery判断图像是否被完全加载进来

$('#demoImg').attr("src","demo.jpg").load(function(){alert("是的,你看到的是真的");});

★jQuery让Cookie过期

vardate=newDate();date.setTime(date.getTime()+(x*60*1000));$.cookie("example","foo",{expires:date});;

★jQuery禁止鼠标右键

$(function(){$(document).bind("contextmenu",function(e){returnfalse;});});

“jQuery实用的示例代码分析”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!