优就业Web前端教程每个程序员都会的35个 jQuery 小技巧.docx
《优就业Web前端教程每个程序员都会的35个 jQuery 小技巧.docx》由会员分享，可在线阅读，更多相关《优就业Web前端教程每个程序员都会的35个 jQuery 小技巧.docx（15页珍藏版）》请在冰豆网上搜索。
优就业Web前端教程每个程序员都会的35个jQuery小技巧
优就业Web前端教程-每个程序员都会的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）{//inputfocustextfunction
varoriginalvalue=input.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[href^="http:
//"]'）.attr（"target","_blank"）;
//Example2:
Linkswiththerel="external"attributewillonlyopeninanewwindow
$（'a[@rel$='external']'）.click（function（）{
this.target="_blank";
}）;
}）;
//howtouse
openlink
4.检测浏览器
注:
在版本jQuery1.4中，$.support替换掉了$.browser变量
$（document）.ready（function（）{
//TargetFirefox2andabove
if（$.browser.mozilla&&$.browser.version>="1.8"）{
//dosomething
}
//TargetSafari
if（$.browser.safari）{
//dosomething
}
//TargetChrome
if（$.browser.chrome）{
//dosomething
}
//TargetCamino
if（$.browser.camino）{
//dosomething
}
//TargetOpera
if（$.browser.opera）{
//dosomething
}
//TargetIE6andbelow
if（$.browser.msie&&$.browser.version<=6）{
//dosomething
}
//TargetanythingaboveIE6
if（$.browser.msie&&$.browser.version>6）{
//dosomething
}
}）;
5.预加载图片
Thispieceofcodewillpreventtheloadingofallimages,whichcanbeusefulifyouhaveasitewithlotsofimages.
$（document）.ready（function（）{
jQuery.preloadImages=function（）
{
for（vari=0;i"）.attr（"src",arguments[i]）;
}
}
//howtouse
$.preloadImages（"image1.jpg"）;
}）;
6.页面样式切换
$（document）.ready（function（）{
$（"a.Styleswitcher"）.click（function（）{
//swicththeLINKRELattributewiththevalueinARELattribute
$（'link[rel=stylesheet]'）.attr（'href',$（this）.attr（'rel'））;
}）;
//howtouse
//placethisinyourheader
//thelinks DefaultTheme RedTheme BlueTheme }）;
7.列高度相同
如果使用了两个CSS列，使用此种方式可以是两列的高度相同。
$（document）.ready（function（）{
functionequalHeight（group）{
tallest=0;
group.each（function（）{
thisHeight=$（this）.height（）;
if（thisHeight>tallest）{
tallest=thisHeight;
}
}）;
group.height（tallest）;
}
//howtouse
$（document）.ready（function（）{
equalHeight（$（".left"））;
equalHeight（$（".right"））;
}）;
}）;
8.动态控制页面字体大小
用户可以改变页面字体大小
$（document）.ready（function（）{
//Resetthefontsize（backtodefault）
varoriginalFontSize=$（'html'）.css（'font-size'）;
$（".resetFont"）.click（function（）{
$（'html'）.css（'font-size',originalFontSize）;
}）;
//Increasethefontsize（biggerfont0
$（".increaseFont"）.click（function（）{
varcurrentFontSize=$（'html'）.css（'font-size'）;
varcurrentFontSizeNum=parseFloat（currentFontSize,10）;
varnewFontSize=currentFontSizeNum*1.2;
$（'html'）.css（'font-size',newFontSize）;
returnfalse;
}）;
//Decreasethefontsize（smallerfont）
$（".decreaseFont"）.click（function（）{
varcurrentFontSize=$（'html'）.css（'font-size'）;
varcurrentFontSizeNum=parseFloat（currentFontSize,10）;
varnewFontSize=currentFontSizeNum*0.8;
$（'html'）.css（'font-size',newFontSize）;
returnfalse;
}）;
}）;
9.返回页面顶部功能
Forasmooth（animated）ridebacktothetop（oranylocation）.
$（document）.ready（function（）{
$（'a[href*=#]'）.click（function（）{
if（location.pathname.replace（/^\//,''）==this.pathname.replace（/^\//,''）
&&location.hostname==this.hostname）{
var$target=$（this.hash）;
$target=$target.length&&$target
||$（'[name='+this.hash.slice
（1）+']'）;
if（$target.length）{
vartargetOffset=$target.offset（）.top;
$（'html,body'）
.animate（{scrollTop:
targetOffset},900）;
returnfalse;
}
}
}）;
//howtouse
//placethiswhereyouwanttoscrollto
//thelink gototop }）;
10.获得鼠标指针XY值
Wanttoknowwhereyourmousecursoris?
$（document）.ready（function（）{
$（）.mousemove（function（e）{
//displaythexandyaxisvaluesinsidethedivwiththeidXY
$（'#XY'）.html（"XAxis:
"+e.pageX+"|YAxis"+e.pageY）;
}）;
//howtouse
}）;
11.返回顶部按钮
你可以利用animate和scrollTop来实现返回顶部的动画，而不需要使用其他插件。
//Backtotop
$（'a.top'）.click（function（）{
$（document.body）.animate（{scrollTop:
0},800）;
returnfalse;
}）;
Backtotop
改变scrollTop的值可以调整返回距离顶部的距离，而animate的第二个参数是执行返回动作需要的时间（单位：
毫秒）。
12.预加载图片
如果你的页面中使用了很多不可见的图片（如：
hover显示），你可能需要预加载它们：
$.preloadImages=function（）{
for（vari=0;i$（'
'）.attr（'src',arguments[i]）;}};$.preloadImages（'img/hover1.png','img/hover2.png'）;
13.检查图片是否加载完成
有时候你需要确保图片完成加载完成以便执行后面的操作：
$（'img'）.load（function（）{
console.log（'imageloadsuccessful'）;
}）;
你可以把img替换为其他的ID或者class来检查指定图片是否加载完成。
14.自动修改破损图像
如果你碰巧在你的网站上发现了破碎的图像链接，你可以用一个不易被替换的图像来代替它们。
添加这个简单的代码可以节省很多麻烦：
$（'img'）.on（'error',function（）{
$（this）.prop（'src','img/broken.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[type="submit"]'）.prop（'disabled',true）;
你要做的就是执行removeAttr方法，并把要移除的属性作为参数传入：
$（'input[type="submit"]'）.removeAttr（'disabled'）;
17.阻止链接加载
有时你不希望链接到某个页面或者重新加载它，你可能希望它来做一些其他事情或者触发一些其他脚本，你可以这么做：
$（'a.no-link'）.click（function（e）{
e.preventDefault（）;
}）;
18.切换fade/slide
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（'.accordion-header'）.click（function（）{
varnext=$（this）.next（）;
next.slideToggle（'fast'）;
$（'.content'）.not（next）.slideUp（'fast'）;
returnfalse;
}）;
20.让两个DIV高度相同
有时你需要让两个div高度相同，而不管它们里面的内容多少。
可以使用下面的代码片段：
var$columns=$（'.column'）;
varheight=0;
$columns.each（function（）{
if（$（this）.height（）>height）{
height=$（this）.height（）;
}
}）;
$columns.height（height）;
这段代码会循环一组元素，并设置它们的高度为元素中的最大高。
21.验证元素是否为空
Thiswillallowyoutocheckifanelementisempty.
$（document）.ready（function（）{
if（$（'#id'）.html（））{
//dosomething
}
}）;
22.替换元素
$（document）.ready（function（）{
$（'#id'）.replaceWith（'
Ihavebeenreplaced
'）;}）;
23.jQuery延时加载功能
$（document）.ready（function（）{
window.setTimeout（function（）{
//dosomething
},1000）;
}）;
24.移除单词功能
$（document）.ready（function（）{
varel=$（'#id'）;
el.html（el.html（）.replace（/word/ig,""））;
}）;
25.验证元素是否存在于jquery对象集合中
$（document）.ready（function（）{
if（$（'#id'）.length）{
//dosomething
}
}）;
26.使整个DIV可点击
$（document）.ready（function（）{
$（"div"）.click（function（）{
//gettheurlfromhrefattributeandlaunchtheurl
window.location=$（this）.find（"a"）.attr（"href"）;returnfalse;
}）;
//howtouse
home
}）;
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.克隆对象
$（document）.ready（function（）{
varcloned=$（'#id'）.clone（）;
//howtouse
}）;
29.使元素居屏幕中间位置
$（document）.ready（function（）{
jQuery.fn.center=function（）{
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.写自己的选择器
$（document）.ready（function（）{
$.extend（$.expr[':
'],{
moreThen1000px:
function（a）{
return$（a）.width（）>1000;
}
}）;
$（'.box:
moreThen1000px'）.click（function（）{
//creatingasimplejsalertbox
alert（'Theelementthatyouhaveclickedisover1000pixelswide'）;
}）;
}）;
31.统计元素个数
$（document）.ready（function（）{
$（"p"）.size（）;
}）;
32.使用自己的Bullets
$（document）.ready（function（）{
$（"ul"）.addClass（"Replaced"）;
$（"ul>li"）.prepend（"‒"）;
//howtouse
ul.Replaced{list-style:
none;}
}）;
33.引用Google主机上的Jquery类库
//Example1
google.load（"jquery","1.2.6"）;
google.setOnLoadCallback（function（）{
//dosomething
}）;
34.禁用Jquery（动画）效果
$（document）.ready（function（）{
jQuery.fx.off=true;
}）;
35.与其他Javascript类库冲突解决方案
$（document）.ready（function（）{
var$jq=jQuery.noConflict（）;
$jq（'#id'）.show（）;
}）;
升级会员 