26个Jquery使用小技巧jQuery tips trickssolutions.docx

26个Jquery使用小技巧jQuery tips trickssolutions.docx

《26个Jquery使用小技巧jQuery tips trickssolutions.docx》由会员分享，可在线阅读，更多相关《26个Jquery使用小技巧jQuery tips trickssolutions.docx（13页珍藏版）》请在冰豆网上搜索。

26个Jquery使用小技巧jQuerytipstrickssolutions

26个Jquery使用小技巧（jQuerytips,tricks&solutions）

前段时间发布了Jquery类库1.4版本，使用者也越来越多，为了方便大家对Jquery的使用，下面列出了一些Jquery使用技巧。

比如有禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列等高、动态控制页面字体大小、获得鼠标指针的X值Y值、验证元素是否为空、替换元素、延迟加载、验证元素是否存在于Jquery集合中、使DIV可点击、克隆对象、使元素居中、计算元素个数、使用Google主机上的Jquery类库、禁用Jquery效果、解决Jquery类库与其他Javascript类库冲突问题。

具体如下：

1.禁止右键点击

viewplaincopytoclipboardprint?

1.$（document）.ready（function（）{

2.$（document）.bind（"contextmenu",function（e）{

3.returnfalse;

4.}）;

5.}）;

2.隐藏搜索文本框文字viewplaincopytoclipboardprint?

1.$（document）.ready（function（）{

2.$（"input.text1"）.val（"Enteryoursearchtexthere"）;

3.textFill（$（'input.text1'））;

4.}）;

5.

6.functiontextFill（input）{//inputfocustextfunction

7.varoriginalvalue=input.val（）;

8.input.focus（function（）{

9.if（$.trim（input.val（））==originalvalue）{input.val（''）;}

10.}）;

11.input.blur（function（）{

12.if（$.trim（input.val（））==''）{input.val（originalvalue）;}

13.}）;

14.}

3.在新窗口中打开链接viewplaincopytoclipboardprint?

1.$（document）.ready（function（）{

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="_blank";

8.}）;

9.}）;

10.//howtouse

11.openlink

4.检测浏览器

注:

在版本jQuery1.4中，$.support替换掉了$.browser变量。

viewplaincopytoclipboardprint?

1.$（document）.ready（function（）{

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&&$.browser.version>6）{

34.//dosomething

35.}

36.}）;

5.预加载图片

viewplaincopytoclipboardprint?

1.$（document）.ready（function（）{

2.jQuery.preloadImages=function（）

3.{

4.for（vari=0;i"）.attr（"src",arguments[i]）;

5.}

6.};

7.//howtouse

8.$.preloadImages（"image1.jpg"）;

9.}）;

6.页面样式切换

viewplaincopytoclipboardprint?

1.$（document）.ready（function（）{

2.$（"a.Styleswitcher"）.click（function（）{

3.//swicththeLINKRELattributewiththevalueinARELattribute

4.$（'link[rel=stylesheet]'）.attr（'href',$（this）.attr（'rel'））;

5.}）;

6.//howtouse

7.//placethisinyourheader

8.

9.//thelinks

10.DefaultTheme

11.RedTheme

12.BlueTheme

13.}）;

7.列高度相同

如果使用了两个CSS列，使用此种方式可以是两列的高度相同。

viewplaincopytoclipboardprint?

1.$（document）.ready（function（）{

2.functionequalHeight（group）{

3.tallest=0;

4.group.each（function（）{

5.thisHeight=$（this）.height（）;

6.if（thisHeight>tallest）{

7.tallest=thisHeight;

8.}

9.}）;

10.group.height（tallest）;

11.}

12.//howtouse

13.$（document）.ready（function（）{

14.equalHeight（$（".left"））;

15.equalHeight（$（".right"））;

16.}）;

17.}）;

8.动态控制页面字体大小

用户可以改变页面字体大小

viewplaincopytoclipboardprint?

1.$（document）.ready（function（）{

2.//Resetthefontsize（backtodefault）

3.varoriginalFontSize=$（'html'）.css（'font-size'）;

4.$（".resetFont"）.click（function（）{

5.$（'html'）.css（'font-size',originalFontSize）;

6.}）;

7.//Increasethefontsize（biggerfont0

8.$（".increaseFont"）.click（function（）{

9.varcurrentFontSize=$（'html'）.css（'font-size'）;

10.varcurrentFontSizeNum=parseFloat（currentFontSize,10）;

11.varnewFontSize=currentFontSizeNum*1.2;

12.$（'html'）.css（'font-size',newFontSize）;

13.returnfalse;

14.}）;

15.//Decreasethefontsize（smallerfont）

16.$（".decreaseFont"）.click（function（）{

17.varcurrentFontSize=$（'html'）.css（'font-size'）;

18.varcurrentFontSizeNum=parseFloat（currentFontSize,10）;

19.varnewFontSize=currentFontSizeNum*0.8;

20.$（'html'）.css（'font-size',newFontSize）;

21.returnfalse;

22.}）;

23.}）;

9.返回页面顶部功能

viewplaincopytoclipboardprint?

1.$（document）.ready（function（）{

2.$（'a[href*=#]'）.click（function（）{

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.}

14.}

15.}）;

16.//howtouse

17.//placethiswhereyouwanttoscrollto

18.

19.//thelink

20.gototop

21.}）;

11.获得鼠标指针ＸＹ值

viewplaincopytoclipboardprint?

1.$（document）.ready（function（）{

2.$（）.mousemove（function（e）{

3.//displaythexandyaxisvaluesinsidethedivwiththeidXY

4.$（'#XY'）.html（"XAxis:

"+e.pageX+"|YAxis"+e.pageY）;

5.}）;

6.//howtouse

7.