Jquery开发开发技巧（一）

硪硪

1. 禁止右键点击

[url=]复制代码[/url]

1 2 3 4 5 6 7 8 9

$(document).ready(function(){         $(document).bind("contextmenu",function(e){                 return false;         });     });

2. 隐藏搜索文本框文字

[url=]复制代码[/url]

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

Hide when clicked in the search field, the value.(example can be found below in the comment fields)             $(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); }          });     }

3. 在新窗口中打开链接

[url=]复制代码[/url]

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

XHTML 1.0 Strict doesn’t allow this attribute in the code, so use this to keep the code valid.     $(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>

4. 检测浏览器
注: 在版本jQuery 1.4中，$.support 替换掉了$.browser 变量

[url=]复制代码[/url]

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

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

5. 预加载图片
This piece of code will prevent the loading of all images, which can be useful if you have a site with lots of images.

[url=]复制代码[/url]

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

$(document).ready(function() {     jQuery.preloadImages = function()     {       for(var i = 0; i<ARGUMENTS.LENGTH; jQuery(?<img { i++)>").attr("src", arguments<i>);       }     }     // how to use     $.preloadImages("image1.jpg");     });</i>

6. 页面样式切换

[url=]复制代码[/url]

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

$(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 type=text/css href="default.css">     // the links     <A class=Styleswitcher href="#" rel=default.css>Default Theme</A>     <A class=Styleswitcher href="#" rel=red.css>Red Theme</A>     <A class=Styleswitcher href="#" rel=blue.css>Blue Theme</A>     })

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

[url=]复制代码[/url]

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

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

8. 动态控制页面字体大小
用户可以改变页面字体大小

[url=]复制代码[/url]

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

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

9. 返回页面顶部功能
For a smooth(animated) ride back to the top(or any location).

[url=]复制代码[/url]

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

$(document).ready(function() {     $('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);         return false;        }       }       });     // how to use     // place this where you want to scroll to     <A name=top></A>     // the link     <A href="#top">go to top</A>     });

10. 获得鼠标指针ＸＹ值
Want to know where your mouse cursor is?

[url=]复制代码[/url]

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

$(document).ready(function() {        $().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);       });     // how to use     <DIV id=XY></DIV>     });