26个Jquery使用小技巧

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

具体如下：

1.
禁止右键点击

viewplain

copytoclipboard

print

?

1.

$(document).ready(
function



(){

2.

$(document).bind(
"contextmenu"

,
function



(e){

3.

return



false



;

4.

});

5.

});

2.
隐藏搜索文本框文字

viewplain

copytoclipboard

print

?

1.

$(document).ready(
function



(){

2.

$(
"input.text1"

).val(
"Enteryoursearchtexthere"

);

3.

textFill($(
'input.text1'

));

4.

});

5.

6.

function



textFill(input){
//inputfocustextfunction

7.

var



originalvalue=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.
在新窗口中打开链接

viewplain

copytoclipboard

print

?

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.

<Ahref=
"http://www.opensourcehunter.com"

rel=external>openlink</A>

4.
检测浏览器

注:

在版本jQuery1.4

中，$.support

替换掉了$.browser

变量。


viewplain

copytoclipboard

print

?

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.
预加载图片

viewplain

copytoclipboard

print

?

1.

$(document).ready(
function



(){

2.

jQuery.preloadImages=
function



()

3.

{

4.

for



(
var



i=0;i
").attr("

src
",arguments[i]);

5.

}

6.

};

7.

//howtouse

8.

$.preloadImages("

image1.jpg");

9.

});

6.
页面样式切换

viewplain

copytoclipboard

print

?

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.

<LINKhref=
"default.css"

type=text/cssrel=stylesheet>

9.

//thelinks

10.

<A
class



=Styleswitcherhref=
"#"

rel=
default



.css>DefaultTheme</A>

11.

<A
class



=Styleswitcherhref=
"#"

rel=red.css>RedTheme</A>

12.

<A
class



=Styleswitcherhref=
"#"

rel=blue.css>BlueTheme</A>

13.

});

7.
列高度相同

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

viewplain

copytoclipboard

print

?

1.

$(document).ready(
function



(){

2.

function



equalHeight(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.
动态控制页面字体大小

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

viewplain

copytoclipboard

print

?

1.

$(document).ready(
function



(){

2.

//Resetthefontsize(backtodefault)

3.

var



originalFontSize=$(
'html'

).css(
'font-size'

);

4.

$(
".resetFont"

).click(
function



(){

5.

$(
'html'

).css(
'font-size'

,originalFontSize);

6.

});

7.

//Increasethefontsize(biggerfont0

8.

$(
".increaseFont"

).click(
function



(){

9.

var



currentFontSize=$(
'html'

).css(
'font-size'

);

10.

var



currentFontSizeNum=parseFloat(currentFontSize,10);

11.

var



newFontSize=currentFontSizeNum*1.2;

12.

$(
'html'

).css(
'font-size'

,newFontSize);

13.

return



false



;

14.

});

15.

//Decreasethefontsize(smallerfont)

16.

$(
".decreaseFont"

).click(
function



(){

17.

var



currentFontSize=$(
'html'

).css(
'font-size'

);

18.

var



currentFontSizeNum=parseFloat(currentFontSize,10);

19.

var



newFontSize=currentFontSizeNum*0.8;

20.

$(
'html'

).css(
'font-size'

,newFontSize);

21.

return



false



;

22.

});

23.

});

9.
返回页面顶部功能

viewplain

copytoclipboard

print

?

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.

var



targetOffset=$target.offset().top;

10.

$(
'html,body'

)

11.

.animate({scrollTop:targetOffset},900);

12.

return



false



;

13.

}

14.

}

15.

});

16.

//howtouse

17.

//placethiswhereyouwanttoscrollto

18.

<Aname=top></A>

19.

//thelink

20.

<Ahref=
"#top"

>gototop</A>

21.

});

11.
获得鼠标指针ＸＹ值

viewplain

copytoclipboard

print

?

1.

$(document).ready(
function



(){

2.

$().mousemove(
function



(e){

3.

//displaythexandyaxisvaluesinsidethedivwiththeidXY

4.

$(
'#XY'

).html(
"XAxis:"

+e.pageX+
"|YAxis"

+e.pageY);

5.

});

6.

//howtouse

7.

<DIVid=XY></DIV>

8.

9.

});

12.
验证元素是否为空

viewplain

copytoclipboard

print

?

1.

$(document).ready(
function



(){

2.

if



($(
'#id'

).html()){

3.

//dosomething

4.

}

5.

});

13.
替换元素

viewplain

copytoclipboard

print

?

1.

$(document).ready(
function



(){

2.

$(
'#id'

).replaceWith(
'

3.

<DIV>Ihavebeenreplaced</DIV>

4.

5.

'

);

6.

});

14.jQuery
延时加载功能

viewplain

copytoclipboard

print

?

1.

$(document).ready(
function



(){

2.

window.setTimeout(
function



(){

3.

//dosomething

4.

},1000);

5.

});

15.
移除单词功能

viewplain

copytoclipboard

print

?

1.

$(document).ready(
function



(){

2.

var



el=$(
'#id'

);

3.

el.html(el.html().replace(/word/ig,
""

));

4.

});

16.
验证元素是否存在于Ｊｑｕｅｒｙ对象集合中

viewplain

copytoclipboard

print

?

1.

$(document).ready(
function



(){

2.

if



($(
'#id'

).length){

3.

//dosomething

4.

}

5.

});

17.
使整个ＤＩＶ可点击

viewplain

copytoclipboard

print

?

1.

$(document).ready(
function



(){

2.

$(
"div"

).click(
function



(){

3.

//gettheurlfromhrefattributeandlaunchtheurl

4.

window.location=$(
this



).find(
"a"

).attr(
"href"

);
return



false



;

5.

});

6.

//howtouse

7.

<DIV><Ahref=
"index.html"

>home</A></DIV>

8.

9.

});

18.ID
与
Class
之间转换

当改变
Window
大小时，在
ID
与Class

之间切换

viewplain

copytoclipboard

print

?

1.

$(document).ready(
function



(){

2.

function



checkWindowSize(){

3.

if



($(window).width()>1200){

4.

$(
'body'

).addClass(
'large'

);

5.

}

6.

else



{

7.

$(
'body'

).removeClass(
'large'

);

8.

}

9.

}

10.

$(window).resize(checkWindowSize);

11.

});

19.
克隆对象

viewplain

copytoclipboard

print

?

1.

$(document).ready(
function



(){

2.

var



cloned=$(
'#id'

).clone();

3.

//howtouse

4.

<DIVid=id></DIV>

5.

6.

});

20.
使元素居屏幕中间位置

viewplain

copytoclipboard

print

?

1.

$(document).ready(
function



(){

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()+
"px"

);

6.

return



this



;

7.

}

8.

$(
"#id"

).center();

9.

});

21.
写自己的选择器

viewplain

copytoclipboard

print

?

1.

$(document).ready(
function



(){

2.

$.extend($.expr[
':'

],{

3.

moreThen1000px:
function



(a){

4.

return



$(a).width()>1000;

5.

}

6.

});

7.

$(
'.box:moreThen1000px'

).click(
function



(){

8.

//creatingasimplejsalertbox

9.

alert(
'Theelementthatyouhaveclickedisover1000pixelswide'

);

10.

});

11.

});

22.
统计元素个数

viewplain

copytoclipboard

print

?

1.

$(document).ready(
function



(){

2.

$(
"p"

).size();

3.

});

23.
使用自己的
Bullets

viewplain

copytoclipboard

print

?

1.

$(document).ready(
function



(){

2.

$(
"ul"

).addClass(
"Replaced"

);

3.

$(
"ul>li"

).prepend(
"

‒

"

);

4.

//howtouse

5.

ul.Replaced{list-style:none;}

6.

});

24.
引用
Google
主机上的
Jquery
类库

LetGooglehostthejQueryscriptforyou.Thiscanbedonein2ways.

viewplain

copytoclipboard

print

?

1.

//Example1

2.

<SCRIPTsrc=
"http://www.google.com/jsapi"

></SCRIPT>

3.

<SCRIPTtype=text/javascript>

4.

google.load(
"jquery"

,
"1.2.6"

);

5.

google.setOnLoadCallback(
function



(){

6.

//dosomething

7.

});

8.

</SCRIPT><SCRIPTsrc=
"http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"

type=text/javascript></SCRIPT>

9.

10.

//Example2:(thebestandfastestway)

11.

<SCRIPTsrc=
"http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"

type=text/javascript></SCRIPT>

25.
禁用
Jquery
（动画）效果

viewplain

copytoclipboard

print

?

1.

$(document).ready(
function



(){

2.

jQuery.fx.off=
true



;

3.

});

26.
与其他
Javascript
类库冲突解决方案

viewplain

copytoclipboard

print

?

1.

$(document).ready(
function



(){

2.

var



$jq=jQuery.noConflict();

3.

$jq(
'#id'

).show();

4.

});

英文地址：
http://www.opensourcehunter.com/2010/02/27/26-cool-and-usefull-jquery-tips-tricks-solutions/
版权
作者：灵动生活

出处：http://www.cnblogs.com/ywqu/archive/2010/03/01/1675355.html

如果你认为此文章有用，请点击底端的【推荐】让其他人也了解此文章

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。