jquery使用技巧总结

1. 禁止右键点击view plaincopy to clipboardprint?1. $(document).ready(function(){ 2. $(document).bind("contextmenu",function(e){ 3. return false; 4. }); 5. }); 2. 隐藏搜索文本框文字view plaincopy to clipboardprint?1. $(document).ready(function() { 2. $("input.text1").val("Enter your search text here"); 3. textFill($('input.text1')); 4. }); 5. 6. function textFill(input){ //input focus text function 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. 在新窗口中打开链接view plaincopy to clipboardprint?1. $(document).ready(function() { 2. //Example 1: Every link will open in a new window 3. $('a[href^="http://"]').attr("target", "_blank"); 4. 5. //Example 2: Links with the rel="external" attribute will only open in a new window 6. $('a[@rel$='external']').click(function(){ 7. this.target = "_blank"; 8. }); 9. }); 10. // how to use 11. <A href="http://www.opensourcehunter.com" mce_href="http://www.opensourcehunter.com" rel=external>open link</A> 4. 检测浏览器注: 在版本jQuery 1.4中，$.support 替换掉了$.browser 变量。view plaincopy to clipboardprint?1. $(document).ready(function() { 2. // Target Firefox 2 and above 3. if ($.browser.mozilla && $.browser.version >= "1.8" ){ 4. // do something 5. } 6. 7. // Target Safari 8. if( $.browser.safari ){ 9. // do something 10. } 11. 12. // Target Chrome 13. if( $.browser.chrome){ 14. // do something 15. } 16. 17. // Target Camino 18. if( $.browser.camino){ 19. // do something 20. } 21. 22. // Target Opera 23. if( $.browser.opera){ 24. // do something 25. } 26. 27. // Target IE6 and below 28. if ($.browser.msie && $.browser.version <= 6 ){ 29. // do something 30. } 31. 32. // Target anything above IE6 33. if ($.browser.msie && $.browser.version > 6){ 34. // do something 35. } 36. }); 5. 预加载图片view plaincopy to clipboardprint?1. $(document).ready(function() { 2. jQuery.preloadImages = function() 3. { 4. for(var i = 0; i").attr("src", arguments[i]); 5. } 6. }; 7. // how to use 8. $.preloadImages("image1.jpg"); 9. }); 6. 页面样式切换view plaincopy to clipboardprint?1. $(document).ready(function() { 2. $("a.Styleswitcher").click(function() { 3. //swicth the LINK REL attribute with the value in A REL attribute 4. $('link[rel=stylesheet]').attr('href' , $(this).attr('rel')); 5. }); 6. // how to use 7. // place this in your header 8. <LINK href="default.css" mce_href="default.css" type=text/css rel=stylesheet> 9. // the links 10. <A class="Styleswitcher" href="#" mce_href="#" rel=default.css>Default Theme</A> 11. <A class="Styleswitcher" href="#" mce_href="#" rel=red.css>Red Theme</A> 12. <A class="Styleswitcher" href="#" mce_href="#" rel=blue.css>Blue Theme</A> 13. }); 7. 列高度相同如果使用了两个CSS列，使用此种方式可以是两列的高度相同。view plaincopy to clipboardprint?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. // how to use 13. $(document).ready(function() { 14. equalHeight($(".left")); 15. equalHeight($(".right")); 16. }); 17. }); 8. 动态控制页面字体大小用户可以改变页面字体大小view plaincopy to clipboardprint?1. $(document).ready(function() { 2. // Reset the font size(back to default) 3. var originalFontSize = $('html').css('font-size'); 4. $(".resetFont").click(function(){ 5. $('html').css('font-size', originalFontSize); 6. }); 7. // Increase the font size(bigger font0 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. // Decrease the font size(smaller font) 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. 返回页面顶部功能view plaincopy to clipboardprint?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. // how to use 17. // place this where you want to scroll to 18. <A name=top></A> 19. // the link 20. <A href="#top" mce_href="#top">go to top</A> 21. }); 11.获得鼠标指针ＸＹ值view plaincopy to clipboardprint?1. $(document).ready(function() { 2. $().mousemove(function(e){ 3. //display the x and y axis values inside the div with the id XY 4. $('#XY').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY); 5. }); 6. // how to use 7. <DIV id=XY></DIV> 8. 9. }); 12. 验证元素是否为空view plaincopy to clipboardprint?1. $(document).ready(function() { 2. if ($('#id').html()) { 3. // do something 4. } 5. }); 13. 替换元素view plaincopy to clipboardprint?1. $(document).ready(function() { 2. $('#id').replaceWith(' 3. <DIV>I have been replaced</DIV> 4. 5. '); 6. }); 14. jQuery延时加载功能view plaincopy to clipboardprint?1. $(document).ready(function() { 2. window.setTimeout(function() { 3. // do something 4. }, 1000); 5. }); 15. 移除单词功能view plaincopy to clipboardprint?1. $(document).ready(function() { 2. var el = $('#id'); 3. el.html(el.html().replace(/word/ig, "")); 4. }); 16. 验证元素是否存在于Ｊｑｕｅｒｙ对象集合中view plaincopy to clipboardprint?1. $(document).ready(function() { 2. if ($('#id').length) { 3. // do something 4. } 5. }); 17. 使整个ＤＩＶ可点击view plaincopy to clipboardprint?1. $(document).ready(function() { 2. $("div").click(function(){ 3. //get the url from href attribute and launch the url 4. window.location=$(this).find("a").attr("href"); return false; 5. }); 6. // how to use 7. <DIV><A href="index.html" mce_href="index.html">home</A></DIV> 8. 9. }); 18.ID与Class之间转换当改变Window大小时，在ID与Class之间切换view plaincopy to clipboardprint?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. 克隆对象view plaincopy to clipboardprint?1. $(document).ready(function() { 2. var cloned = $('#id').clone(); 3. // how to use 4. <DIV id=id></DIV> 5. 6. }); 20. 使元素居屏幕中间位置view plaincopy to clipboardprint?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. 写自己的选择器view plaincopy to clipboardprint?1. $(document).ready(function() { 2. $.extend($.expr[':'], { 3. moreThen1000px: function(a) { 4. return $(a).width() > 1000; 5. } 6. }); 7. $('.box:moreThen1000px').click(function() { 8. // creating a simple js alert box 9. alert('The element that you have clicked is over 1000 pixels wide'); 10. }); 11. }); 22. 统计元素个数view plaincopy to clipboardprint?1. $(document).ready(function() { 2. $("p").size(); 3. }); 23. 使用自己的 Bulletsview plaincopy to clipboardprint?1. $(document).ready(function() { 2. $("ul").addClass("Replaced"); 3. $("ul > li").prepend("? "); 4. // how to use 5. ul.Replaced { list-style : none; } 6. }); 24. 引用Google主机上的Jquery类库Let Google host the jQuery script for you. This can be done in 2 ways.view plaincopy to clipboardprint?1. //Example 1 2. <SCRIPT src="http://www.google.com/jsapi" mce_src="http://www.google.com/jsapi"></SCRIPT> 3. <SCRIPT type=text/javascript> 4. google.load("jquery", "1.2.6"); 5. google.setOnLoadCallback(function() { 6. // do something 7. }); 8. </SCRIPT><SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" mce_src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type=text/javascript></SCRIPT> 9. 10. // Example 2:(the best and fastest way) 11. <SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" mce_src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type=text/javascript></SCRIPT> 25. 禁用Jquery（动画）效果view plaincopy to clipboardprint?1. $(document).ready(function() { 2. jQuery.fx.off = true; 3. }); 26. 与其他Javascript类库冲突解决方案view plaincopy to clipboardprint?1. $(document).ready(function() { 2. var $jq = jQuery.noConflict(); 3. $jq('#id').show(); 4. });