（网页）人人都会的35个Jquery小技巧

　　收集的35个jQuery小技巧代码片段，可以帮你快速开发。
　　1。禁止右键点击（document）。ready（function（）｛（document）。bind（contextmenu，function（e）｛returnfalse；｝）；｝）；
　　2。隐藏搜索文本框的文字Hidewhenclickedinthesearchfield，thevalue。（examplecanbefoundbelowinthecommentfields）（document）。ready（function（）｛（input。text1）。val（Enteryoursearchtexthere）；textFill（（input。text1））；｝）；functiontextFill（input）｛inputfocustextfunctionvaroriginalvalueinput。val（）；input。focus（function（）｛if（。trim（input。val（））originalvalue）｛input。val（）；｝｝）；input。blur（function（）｛if（。trim（input。val（）））｛input。val（originalvalue）；｝｝）；｝
　　3。在新窗口中打开链接XHTML1。0Strictdoesn’tallowthisattributeinthecode，sousethistokeepthecodevalid。（document）。ready（function（）｛Example1：Everylinkwillopeninanewwindow（a〔hrefhttp：〕）。attr（target，blank）；Example2：Linkswiththerelexternalattributewillonlyopeninanewwindow（a〔relexternal〕）。click（function（）｛this。targetblank；｝）；｝）；howtouseopenlink
　　4。检测浏览器
　　注：在版本jQuery1。4中，。support替换掉了。browser变量（document）。ready（function（）｛TargetFirefox2andaboveif（。browser。mozilla。browser。version1。8）｛dosomething｝TargetSafariif（。browser。safari）｛dosomething｝TargetChromeif（。browser。chrome）｛dosomething｝TargetCaminoif（。browser。camino）｛dosomething｝TargetOperaif（。browser。opera）｛dosomething｝TargetIE6andbelowif（。browser。msie。browser。version6）｛dosomething｝TargetanythingaboveIE6if（。browser。msie。browser。version6）｛dosomething｝｝）；
　　5。预加载图片
　　Thispieceofcodewillpreventtheloadingofallimages，whichcanbeusefulifyouhaveasitewithlotsofimages。（document）。ready（function（）｛jQuery。preloadImagesfunction（）｛for（vari0；i）。attr（src，arguments〔i〕）；｝｝howtouse。preloadImages（image1。jpg）；｝）；
　　6。页面样式切换（document）。ready（function（）｛（a。Styleswitcher）。click（function（）｛swicththeLINKRELattributewiththevalueinARELattribute（link〔relstylesheet〕）。attr（href，（this）。attr（rel））；｝）；howtouseplacethisinyourheaderLINKrelstylesheettypetextcsshrefdefault。cssthelinksDefaultThemeRedThemeBlueTheme｝）；
　　7。列高度相同
　　如果使用了两个CSS列，使用此种方式可以是两列的高度相同。（document）。ready（function（）｛functionequalHeight（group）｛tallest0；group。each（function（）｛thisHeight（this）。height（）；if（thisHeighttallest）｛tallestthisHeight；｝｝）；group。height（tallest）；｝howtouse（document）。ready（function（）｛equalHeight（（。left））；equalHeight（（。right））；｝）；｝）；
　　8。动态控制页面字体大小
　　用户可以改变页面字体大小（document）。ready（function（）｛Resetthefontsize（backtodefault）varoriginalFontSize（html）。css（fontsize）；（。resetFont）。click（function（）｛（html）。css（fontsize，originalFontSize）；｝）；Increasethefontsize（biggerfont0（。increaseFont）。click（function（）｛varcurrentFontSize（html）。css（fontsize）；varcurrentFontSizeNumparseFloat（currentFontSize，10）；varnewFontSizecurrentFontSizeNum1。2；（html）。css（fontsize，newFontSize）；returnfalse；｝）；Decreasethefontsize（smallerfont）（。decreaseFont）。click（function（）｛varcurrentFontSize（html）。css（fontsize）；varcurrentFontSizeNumparseFloat（currentFontSize，10）；varnewFontSizecurrentFontSizeNum0。8；（html）。css（fontsize，newFontSize）；returnfalse；｝）；｝）；
　　9。返回页面顶部的功能
　　Forasmooth（animated）ridebacktothetop（oranylocation）。（document）。ready（function（）｛（a〔href〕）。click（function（）｛if（location。pathname。replace（，）this。pathname。replace（，）location。hostnamethis。hostname）｛vartarget（this。hash）；targettarget。lengthtarget（〔namethis。hash。slice（1）〕）；if（target。length）｛vartargetOffsettarget。offset（）。top；（html，body）。animate（｛scrollTop：targetOffset｝，900）；returnfalse；｝｝｝）；howtouseplacethiswhereyouwanttoscrolltothelinkgototop｝）；
　　10。获得鼠标指针值
　　Wanttoknowwhereyourmousecursoris？（document）。ready（function（）｛（）。mousemove（function（e）｛displaythexandyaxisvaluesinsidethepwiththeidXY（XY）。html（XAxis：e。pageXYAxise。pageY）；｝）；howtouse｝）；
　　11。返回顶部按钮
　　你可以利用animate和scrollTop来实现返回顶部的动画，而不需要使用其他插件。Backtotop（a。top）。click（function（）｛（document。body）。animate（｛scrollTop：0｝，800）；returnfalse；｝）；！CreateananchortagBacktotop
　　改变scrollTop的值可以调整返回距离顶部的距离，而animate的第二个参数是执行返回动作需要的时间（单位：毫秒）。
　　12。预加载图片
　　如果你的页面中使用了很多不可见的图片（如：hover显示），你可能需要预加载它们：。preloadImagesfunction（）｛for（vari0；iarguments。length；i）｛（img）。attr（src，arguments〔i〕）；｝｝；。preloadImages（imghover1。png，imghover2。png）；
　　13。检查图片是否加载完成
　　有时候你需要确保图片完成加载完成以便执行后面的操作：（img）。load（function（）｛console。log（imageloadsuccessful）；｝）；
　　你可以把img替换为其他的ID或者class来检查指定图片是否加载完成。
　　14。自动修改破损图像
　　如果你碰巧在你的网站上发现了破碎的图像链接，你可以用一个不易被替换的图像来代替它们。添加这个简单的代码可以节省很多麻烦：（img）。on（error，function（）｛（this）。prop（src，imgbroken。png）；｝）；
　　即使你的网站没有破碎的图像链接，添加这段代码也没有任何害处。
　　15。鼠标悬停（hover）切换class属性
　　假如当用户鼠标悬停在一个可点击的元素上时，你希望改变其效果，下面这段代码可以在其悬停在元素上时添加class属性，当用户鼠标离开时，则自动取消该条件class属性：（。btn）。hover（function（）｛（this）。addClass（hover）；｝，function（）｛（this）。removeClass（hover）；｝）；
　　你只需要添加必要的CSS代码即可。如果你想要更简洁的代码，可以使用toggleClass方法：（。btn）。hover（function（）｛（this）。toggleClass（hover）；｝）；
　　注：直接使用CSS实现该效果可能是更好的解决方案，但你仍然有必要知道该方法。
　　16。禁用input字段
　　有时你可能需要禁用表单的submit按钮或者某个input字段，直到用户执行了某些操作（例如，检查已阅读条款复选框）。可以添加disabled属性，直到你想启用它时：（input〔typesubmit〕）。prop（disabled，true）；
　　你要做的就是执行removeAttr方法，并把要移除的属性作为参数传入：（input〔typesubmit〕）。removeAttr（disabled）；
　　17。阻止链接加载
　　有时你不希望链接到某个页面或者重新加载它，你可能希望它来做一些其他事情或者触发一些其他脚本，你可以这么做：（a。nolink）。click（function（e）｛e。preventDefault（）；｝）；
　　18。切换fadeslide
　　fade和slide是我们在jQuery中经常使用的动画效果，它们可以使元素显示效果更好。但是如果你希望元素显示时使用第一种效果，而消失时使用第二种效果，则可以这么做：Fade（。btn）。click（function（）｛（。element）。fadeToggle（slow）；｝）；Toggle（。btn）。click（function（）｛（。element）。slideToggle（slow）；｝）；
　　19。简单的手风琴效果
　　这是一个实现手风琴效果快速简单的方法：Closeallpanels（accordion）。find（。content）。hide（）；Accordion（accordion）。find（。accordionheader）。click（function（）｛varnext（this）。next（）；next。slideToggle（fast）；（。content）。not（next）。slideUp（fast）；returnfalse；｝）；
　　20。让两个DIV高度相同
　　有时你需要让两个人p高度相同，而不管它们里面的内容多少。可以使用下面的代码片段：varcolumns（。column）；varheight0；columns。each（function（）｛if（（this）。height（）height）｛height（this）。height（）；｝｝）；columns。height（height）；
　　这段代码会循环一组元素，并设置它们的高度为元素中的最大高度。
　　21。验证元素是否为空
　　Thiswillallowyoutocheckifanelementisempty。（document）。ready（function（）｛if（（id）。html（））｛dosomething｝｝）；
　　22。替换元素
　　Wanttoreplaceap，orsomethingelse？（document）。ready（function（）｛（id）。replaceWith（Ihavebeenreplaced）；｝）；
　　23。jQuery延时加载功能
　　Wanttodelaysomething？（document）。ready（function（）｛window。setTimeout（function（）｛dosomething｝，1000）；｝）；
　　24。移除单词功能
　　Wanttoremoveacertainword（s）？（document）。ready（function（）｛varel（id）；el。html（el。html（）。replace（wordig，））；｝）；
　　25。验证元素是否存在于jquery对象集合中
　　Simplytestwiththe。lengthpropertyiftheelementexists。（document）。ready（function（）｛if（（id）。length）｛dosomething｝｝）；
　　26。使整个DIV可点击
　　Wanttomakethecompletepclickable？（document）。ready（function（）｛（p）。click（function（）｛gettheurlfromhrefattributeandlaunchtheurlwindow。location（this）。find（a）。attr（href）；returnfalse；｝）；howtousehome｝）；
　　27。ID与Class之间转换
　　当改变Window大小时，在ID与Class之间切换（document）。ready（function（）｛functioncheckWindowSize（）｛if（（window）。width（）1200）｛（body）。addClass（large）；｝else｛（body）。removeClass（large）；｝｝（window）。resize（checkWindowSize）；｝）；
　　28。克隆对象
　　Cloneaporanotherelement。（document）。ready（function（）｛varcloned（id）。clone（）；howtouse｝）；
　　29。使元素居屏幕中间位置
　　Centeranelementinthecenterofyourscreen。（document）。ready（function（）｛jQuery。fn。centerfunction（）｛this。css（position，absolute）；this。css（top，（（window）。height（）this。height（））2（window）。scrollTop（）px）；this。css（left，（（window）。width（）this。width（））2（window）。scrollLeft（）px）；returnthis；｝（id）。center（）；｝）；
　　30。写自己的选择器
　　Writeyourownselectors。（document）。ready（function（）｛。extend（。expr〔：〕，｛moreThen1000px：function（a）｛return（a）。width（）1000；｝｝）；（。box：moreThen1000px）。click（function（）｛creatingasimplejsalertboxalert（Theelementthatyouhaveclickedisover1000pixelswide）；｝）；｝）；
　　31。统计元素个数
　　Countanelement。（document）。ready（function（）｛（p）。size（）；｝）；
　　32。使用自己的Bullets
　　Wanttouseyourownbulletsinsteadofusingthestandardorimagesbullets？（document）。ready（function（）｛（ul）。addClass（Replaced）；（ulli）。prepend（）；howtouseul。Replaced｛liststyle：none；｝｝）；
　　33。引用Google主机上的Jquery类库
　　LetGooglehostthejQueryscriptforyou。Thiscanbedonein2ways。Example1Example2：（thebestandfastestway）
　　34。禁用Jquery（动画）效果
　　DisablealljQueryeffects（document）。ready（function（）｛jQuery。fx。offtrue；｝）；
　　35。与其他Javascript类库冲突解决方案
　　Toavoidconflictotherlibrariesonyourwebsite，youcanusethisjQueryMethod，andassignadifferentvariablenameinsteadofthedollarsign。（document）。ready（function（）｛varjqjQuery。noConflict（）；jq（id）。show（）；｝）；