26个Jquery使用小技巧jQuery tips trickssolutionsWord文档下载推荐.docx
《26个Jquery使用小技巧jQuery tips trickssolutionsWord文档下载推荐.docx》由会员分享，可在线阅读，更多相关《26个Jquery使用小技巧jQuery tips trickssolutionsWord文档下载推荐.docx（13页珍藏版）》请在冰豆网上搜索。
13.}）;
14.}
3.在新窗口中打开链接viewplaincopytoclipboardprint?
2.//Example1:
Everylinkwillopeninanewwindow
3.$（'
a[href^="
http:
//"
]'
）.attr（"
target"
"
_blank"
4.
5.//Example2:
Linkswiththerel="
external"
attributewillonlyopeninanewwindow
6.$（'
a[@rel$='
external'
）.click（function（）{
7.this.target="
;
8.}）;
9.}）;
10.//howtouse
11.<
Ahref="
"
rel=external>
openlink<
/A>
4.检测浏览器
注:
在版本jQuery1.4中，$.support替换掉了$.browser变量。
2.//TargetFirefox2andabove
3.if（$.browser.mozilla&
&
$.browser.version>
="
1.8"
）{
4.//dosomething
5.}
6.
7.//TargetSafari
8.if（$.browser.safari）{
9.//dosomething
10.}
11.
12.//TargetChrome
13.if（$.browser.chrome）{
14.//dosomething
15.}
16.
17.//TargetCamino
18.if（$.browser.camino）{
19.//dosomething
20.}
21.
22.//TargetOpera
23.if（$.browser.opera）{
24.//dosomething
25.}
26.
27.//TargetIE6andbelow
28.if（$.browser.msie&
$.browser.version<
=6）{
29.//dosomething
30.}
31.
32.//TargetanythingaboveIE6
33.if（$.browser.msie&
6）{
34.//dosomething
35.}
36.}）;
5.预加载图片
2.jQuery.preloadImages=function（）
3.{
4.for（vari=0;
i"
src"
arguments[i]）;
6.};
7.//howtouse
8.$.preloadImages（"
image1.jpg"
6.页面样式切换
a.Styleswitcher"
）.click（function（）{
3.//swicththeLINKRELattributewiththevalueinARELattribute
4.$（'
link[rel=stylesheet]'
）.attr（'
href'
$（this）.attr（'
rel'
6.//howtouse
7.//placethisinyourheader
8.<
LINKhref="
default.css"
type=text/cssrel=stylesheet>
9.//thelinks
10.<
Aclass=Styleswitcherhref="
#"
rel=default.css>
DefaultTheme<
rel=red.css>
RedTheme<
12.<
rel=blue.css>
BlueTheme<
7.列高度相同
如果使用了两个CSS列，使用此种方式可以是两列的高度相同。
2.functionequalHeight（group）{
3.tallest=0;
4.group.each（function（）{
5.thisHeight=$（this）.height（）;
6.if（thisHeight>
tallest）{
7.tallest=thisHeight;
8.}
10.group.height（tallest）;
11.}
12.//howtouse
13.$（document）.ready（function（）{
14.equalHeight（$（"
.left"
15.equalHeight（$（"
.right"
16.}）;
17.}）;
8.动态控制页面字体大小
用户可以改变页面字体大小
2.//Resetthefontsize（backtodefault）
3.varoriginalFontSize=$（'
html'
）.css（'
font-size'
4.$（"
.resetFont"
5.$（'
originalFontSize）;
6.}）;
7.//Increasethefontsize（biggerfont0
8.$（"
.increaseFont"
9.varcurrentFontSize=$（'
10.varcurrentFontSizeNum=parseFloat（currentFontSize,10）;
11.varnewFontSize=currentFontSizeNum*1.2;
12.$（'
newFontSize）;
13.returnfalse;
14.}）;
15.//Decreasethefontsize（smallerfont）
16.$（"
.decreaseFont"
17.varcurrentFontSize=$（'
18.varcurrentFontSizeNum=parseFloat（currentFontSize,10）;
19.varnewFontSize=currentFontSizeNum*0.8;
20.$（'
21.returnfalse;
22.}）;
23.}）;
9.返回页面顶部功能
2.$（'
a[href*=#]'
3.if（location.pathname.replace（/^\//,'
）==this.pathname.replace（/^\//,'
）
4.&
location.hostname==this.hostname）{
5.var$target=$（this.hash）;
6.$target=$target.length&
$target
7.||$（'
[name='
+this.hash.slice
（1）+'
8.if（$target.length）{
9.vartargetOffset=$target.offset（）.top;
10.$（'
html,body'
11..animate（{scrollTop:
targetOffset},900）;
12.returnfalse;
13.}
15.}）;
16.//howtouse
17.//placethiswhereyouwanttoscrollto
18.<
Aname=top>
<
19.//thelink
20.<
#top"
>
gototop<
21.}）;
11.获得鼠标指针ＸＹ值
2.$（）.mousemove（function（e）{
3.//displaythexandyaxisvaluesinsidethedivwiththeidXY
#XY'
）.html（"
XAxis:
"
+e.pageX+"
|YAxis"
+e.pageY）;
7.<
DIVid=XY>
/DIV>
8.
12.验证元素是否为空
2.if（$（'
#id'
）.html（））{
3.//dosomething
4.}
13.替换元素
）.replaceWith（'
3.<
DIV>
Ihavebeenreplaced<
5.'
14.jQuery延时加载功能viewplaincopytoclipboardprint?
2.window.setTimeout（function（）{
4.},1000）;
15.移除单词功能viewplaincopytoclipboardprint?
2.varel=$（'
3.el.html（el.html（）.replace（/word/ig,"
16.验证元素是否存在于Ｊｑｕｅｒｙ对象集合中viewplaincopytoclipboardprint?
）.length）{
17.使整个ＤＩＶ可点击viewplaincopytoclipboardprint?
div"
3.//gettheurlfromhrefattributeandlaunchtheurl
4.window.location=$（this）.find（"
a"
href"
returnfalse;
index.html"
home<
18.ID与Class之间转换当改变Window大小时，在ID与Class之间切换
2.functioncheckWindowSize（）{
3.if（$（window）.width（）>
1200）{
body'
）.addClass（'
large'
6.else{
7.$（'
）.removeClass（'
9.}
10.$（window）.resize（checkWindowSize）;
11.}）;
19.克隆对象viewplaincopytoclipboardprint?
2.varcloned=$（'
）.clone（）;
3.//howtouse
4.<
DIVid=id>
20.使元素居屏幕中间位置viewplaincopytoclipboardprint?
2.jQuery.fn.center=function（）{
3.this.css（"
position"
"
absolute"
4.this.css（"
top"
（$（window）.height（）-this.height（））/2+$（window）.scrollTop（）+"
px"
5.this.css（"
left"
（$（window）.width（）-this.width（））/2+$（window）.scrollLeft（）+"
6.returnthis;
7.}
#id"
）.center（）;
21.写自己的选择器viewplaincopytoclipboardprint?
2.$.extend（$.expr['
:
],{
3.moreThen1000px:
function（a）{
4.return$（a）.width（）>
1000;
.box:
moreThen1000px'
8.//creatingasimplejsalertbox
9.alert（'
Theelementthatyouhaveclickedisover1000pixelswide'
22.统计元素个数viewplaincopytoclipboardprint?
p"
）.size（）;
3.}）;
23.使用自己的Bulletsviewplaincopytoclipboardprint?
ul"
）.addClass（"
Replaced"
3.$（"
ul>
li"
）.prepend（"
‒"
4.//howtouse
5.ul.Replaced{list-style:
none;
24.引用Google主机上的Jquery类库LetGooglehostthejQueryscriptforyou.Thiscanbedonein2ways.
1.//Example1
2.<
SCRIPTsrc="
SCRIPTtype=text/javascript>
4.google.load（"
jquery"
1.2.6"
5.google.setOnLoadCallback（function（）{
6.//dosomething
7.}）;
/SCRIPT>
type=text/javascript>
9.
10.//Example2:
（thebestandfastestway）
25.禁用Jquery（动画）效果
2.jQuery.fx.off=true;
26.与其他Javascript类库冲突解决方案viewplaincopytoclipboardprint?
2.var$jq=jQuery.noConflict（）;
3.$jq（'
）.show（）;
英文地址：
升级会员 