您的位置：首页 > Web前端 > JQuery

26个Jquery使用小技巧

2012-07-12 22:05 405 查看

1.禁止右键点击

viewplaincopy
toclipboardprint?

1.
$(document).ready(function(){
2.
$(document).bind("contextmenu",function(e){
3.
returnfalse;
4.
});
5.
});

2.隐藏搜索文本框文字[/code]
viewplaincopy
toclipboardprint?

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.在新窗口中打开链接[/code]
viewplaincopy
toclipboardprint?

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变量。

viewplaincopy
toclipboardprint?

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

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.页面样式切换
viewplaincopy
toclipboardprint?

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.
<Aclass=Styleswitcherhref="#"rel=default.css>DefaultTheme</A>

11.
<Aclass=Styleswitcherhref="#"rel=red.css>RedTheme</A>
12.
<Aclass=Styleswitcherhref="#"rel=blue.css>BlueTheme</A>
13.
});

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

viewplaincopy
toclipboardprint?

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.动态控制页面字体大小
用户可以改变页面字体大小

viewplaincopy
toclipboardprint?

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.返回页面顶部功能
viewplaincopy
toclipboardprint?

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.
<Aname=top></A>
19.
//thelink
20.
<Ahref="#top">gototop</A>
21.
});

11.获得鼠标指针ＸＹ值
viewplaincopy
toclipboardprint?

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.验证元素是否为空
viewplaincopy
toclipboardprint?

1.
$(document).ready(function(){
2.
if($('#id').html()){
3.
//dosomething

4.
}
5.
});

13.替换元素
viewplaincopy
toclipboardprint?

1.
$(document).ready(function(){
2.
$('#id').replaceWith('

3.
<DIV>Ihavebeenreplaced</DIV>
4.

5.
');
6.
});

14.jQuery延时加载功能[/code]
viewplaincopy
toclipboardprint?

1.
$(document).ready(function(){
2.
window.setTimeout(function(){
3.
//dosomething

4.
},1000);
5.
});

15.移除单词功能[/code]
viewplaincopy
toclipboardprint?

1.
$(document).ready(function(){
2.
varel=$('#id');
3.
el.html(el.html().replace(/word/ig,""));
4.
});

16.验证元素是否存在于Ｊｑｕｅｒｙ对象集合中[/code]
viewplaincopy
toclipboardprint?

1.
$(document).ready(function(){
2.
if($('#id').length){
3.
//dosomething

4.
}
5.
});

17.使整个ＤＩＶ可点击[/code]
viewplaincopy
toclipboardprint?

1.
$(document).ready(function(){
2.
$("div").click(function(){
3.
//gettheurlfromhrefattributeandlaunchtheurl

4.
window.location=$(this).find("a").attr("href");returnfalse;

5.
});
6.
//howtouse
7.
<DIV><Ahref="index.html">home</A></DIV>
8.

9.
});

18.ID与Class之间转换[/code]
当改变Window大小时，在ID与Class之间切换

viewplaincopy
toclipboardprint?

1.
$(document).ready(function(){
2.
functioncheckWindowSize(){
3.
if($(window).width()>1200){
4.
$('body').addClass('large');
5.
}
6.
else{
7.
$('body').removeClass('large');
8.
}
9.
}
10.
$(window).resize(checkWindowSize);
11.
});

19.克隆对象[/code]
viewplaincopy
toclipboardprint?

1.
$(document).ready(function(){
2.
varcloned=$('#id').clone();
3.
//howtouse
4.
<DIVid=id></DIV>
5.

6.
});

20.使元素居屏幕中间位置[/code]
viewplaincopy
toclipboardprint?

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.
returnthis;
7.
}
8.
$("#id").center();
9.
});

21.写自己的选择器[/code]
viewplaincopy
toclipboardprint?

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.统计元素个数[/code]
viewplaincopy
toclipboardprint?

1.
$(document).ready(function(){
2.
$("p").size();
3.
});

23.使用自己的Bullets[/code]
viewplaincopy
toclipboardprint?

1.
$(document).ready(function(){
2.
$("ul").addClass("Replaced");
3.
$("ul>li").prepend("‒");
4.
//howtouse

5.
ul.Replaced{list-style:none;}
6.
});

24.引用Google主机上的Jquery类库[/code]
LetGooglehostthejQueryscriptforyou.Thiscanbedonein2ways.

viewplaincopy
toclipboardprint?

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（动画）效果
viewplaincopy
toclipboardprint?

1.
$(document).ready(function(){
2.
jQuery.fx.off=true;
3.
});

26.与其他Javascript类库冲突解决方案[/code]
viewplaincopy
toclipboardprint?

1.
$(document).ready(function(){
2.
var$jq=jQuery.noConflict();
3.
$jq('#id').show();
4.
});
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航