25個實用的jQuery技巧和解決方案

 

 

1. 去除頁面的右鍵菜單

$(document).ready(function(){ $(document).bind(「contextmenu」,function(e){returnfalse;});});

二、搜索輸入框文字的消失

當鼠標得到焦點、失去焦點的時候，input輸入框文字處理：

$(document).ready(function(){ $(「input.text1″).val(「Enter your search text here」); textFill($(‘input.text1′));});function textFill(input){//input focus text function var originalvalue = input.val(); input.focus(function(){if( $.trim(input.val())== originalvalue ){ input.val(」);}}); input.blur(function(){if( $.trim(input.val())==」){ input.val(originalvalue);}});}

三、新窗口打開頁面

$(document).ready(function(){//Example 1: Every link will open in a new window $(‘a[href^="http://"]‘).attr(「target」,」_blank」);   //Example 2: Links with the rel=」external」 attribute will only open in a new window $(‘a[@rel$='external']‘).click(function(){this.target=」_blank」;});});

 

// how to use

<a href=」http://www.opensourcehunter.com」 rel=」external」>open link</a>

四、判斷瀏覽器類型

注意： jQuery 1.4中$.support 來代替之前的$.browser

$(document).ready(function(){// Target Firefox 2 and above if($.browser.mozilla&& $.browser.version>=」1.8″){// do something }// Target Safari if( $.browser.safari){// do something }// Target Chrome if( $.browser.chrome){// do something }// Target Camino if( $.browser.camino){// do something }// Target Opera if( $.browser.opera){// do something }// Target IE6 and below if($.browser.msie&& $.browser.version<=6){// do something }// Target anything above IE6 if($.browser.msie&& $.browser.version>6){// do something }});

五、預加載圖片

$(document).ready(function(){ jQuery.preloadImages=function(){for(var i =0; i<arguments.length; i++)=」"{=」" jquery(「=」"><img>」).attr(「src」, arguments[i]);}}// how to use $.preloadImages(「image1.jpg」);});</arguments.length;>

六、輕鬆切換css樣式

$(document).ready(function(){ $(「a.Styleswitcher」).click(function(){//swicth the LINK REL attribute with the value in A REL attribute $(‘link[rel=stylesheet]‘).attr(‘href’, $(this).attr(‘rel’));});

// how to use
// place this in your header

<link rel=」stylesheet」 href=」default.css」 type=」text/css」> // the links <a href=」#」 rel=」default.css」>Default Theme</a> <a href=」#」 class=」Styleswitcher」 rel=」red.css」>Red Theme</a> <a href=」#」 class=」Styleswitcher」 rel=」blue.css」>Blue Theme</a> });

七、高度相等的列

若是您使用兩個CSS列，以此來做爲他們徹底同樣的高度

$(document).ready(function(){function equalHeight(group){ tallest =0; group.each(function(){ thisHeight = $(this).height();if(thisHeight > tallest){ tallest = thisHeight;}}); group.height(tallest);}// how to use $(document).ready(function(){ equalHeight($(「.left」)); equalHeight($(「.right」));});});

八、簡單字體變大縮小

$(document).ready(function(){// Reset the font size(back to default) var originalFontSize = $(‘html’).css(‘font-size’); $(「.resetFont」).click(function(){ $(‘html’).css(‘font-size’, originalFontSize);});// Increase the font size(bigger font0 $(「.increaseFont」).click(function(){var currentFontSize = $(‘html’).css(‘font-size’);var currentFontSizeNum = parseFloat(currentFontSize,10);var newFontSize = currentFontSizeNum*1.2; $(‘html’).css(‘font-size’, newFontSize);returnfalse;});// Decrease the font size(smaller font) $(「.decreaseFont」).click(function(){var currentFontSize = $(‘html’).css(‘font-size’);var currentFontSizeNum = parseFloat(currentFontSize,10);var newFontSize = currentFontSizeNum*0.8; $(‘html’).css(‘font-size’, newFontSize);returnfalse;});});

九、返回頭部滑動動畫

$(‘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){var targetOffset = $target.offset().top; $(‘html,body’) .animate({scrollTop: targetOffset},900);returnfalse;}}});

// how to use
// place this where you want to scroll to

<a name=」top」></a> // the link <a href=」#top」>go to top</a>

十、獲取鼠標位置

$().mousemove(function(e){//display the x and y axis values inside the div with the id XY $(‘#XY’).html(「X Axis : 「+ e.pageX+」 | Y Axis 「+ e.pageY);});

十一、判斷一個元素是否爲空

if($(‘#id’).html()){// do something }

十二、替換元素

$(‘#id’).replaceWith(‘ <div>I have been replaced</div>   ‘);

1三、jquery timer 返回函數

$(document).ready(function(){ window.setTimeout(function(){// do something },1000);});

1四、jquery也玩替換

$(document).ready(function(){var el = $(‘#id’); el.html(el.html().replace(/word/ig,」"));});

1五、判斷元素是否存在

$(document).ready(function(){if($(‘#id’).length){// do something }});

1六、讓div也能夠click

$(「div」).click(function(){//get the url from href attribute and launch the url window.location=$(this).find(「a」).attr(「href」);returnfalse;});

// how to use

<div><a href=」index.html」>home</a></div>

1七、使用jquery來判斷瀏覽器大小添加不一樣的class

$(document).ready(function(){function checkWindowSize(){if( $(window).width()>1200){ $(‘body’).addClass(‘large’);}else{ $(‘body’).removeClass(‘large’);}} $(window).resize(checkWindowSize);});

1八、幾個字符就clone！

var cloned = $(‘#id’).clone()

1九、設置div在屏幕中央

$(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();});

20、建立本身的選擇器

$(document).ready(function(){ $.extend($.expr[':'],{ moreThen1000px:function(a){return $(a).width()>1000;}}); $(‘.box:moreThen1000px’).click(function(){// creating a simple js alert box alert(‘The element that you have clicked is over 1000 pixels wide’);});});

2一、計算元素的數目

$(document).ready(function(){ $(「p」).size();});

2二、設置本身的li樣式

$(document).ready(function(){ $(「ul」).addClass(「Replaced」); $(「ul > li」).prepend(「‒ 「);// how to use ul.Replaced{ list-style : none;}});

2三、使用google的主機來加載jquery庫

<script src=」http://www.google.com/jsapi」></script> <script type=」text/javascript」> google.load(「jquery」, 「1.2.6″); google.setOnLoadCallback(function() { // do something }); </script><script src=」http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js」 type=」text/javascript」></script>   // Example 2:(the best and fastest way) <script type=」text/javascript」 src=」http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js」></script>

2四、關閉jquery動畫效果

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

2五、使用本身的jquery標識

$(document).ready(function(){var $jq = jQuery.noConflict(); $jq(‘#id’).show();});