|
|
|
|
移动端

jQuery 1.4实用技巧大放送

文章介绍了使用jQuery 1.4版本的26个小技巧,比如有禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列等高等等,希望对您有所帮助。

作者:灵动生活来源:博客园|2010-11-02 15:36

开发者盛宴来袭!7月28日51CTO首届开发者大赛决赛带来技术创新分享

jQuery 1.4给开发者带来了很多值得兴奋的新特性,同时使用jQuery的人也越来越多,为了方便大家对jQuery的使用,下面列出了一些jQuery使用技巧。比如有禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片等等。具体如下:

禁止右键点击

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

隐藏搜索文本框文字

  1. $(document).ready(function() {     
  2. $("input.text1").val("Enter your search text here");     
  3.    textFill($('input.text1'));     
  4. });     
  5. function textFill(input){ //input focus text function     
  6.    var originalvalue = input.val();     
  7.    input.focus( function(){     
  8.  
  9. if( $.trim(input.val()) == originalvalue ){ input.val(''); }     
  10. });     
  11.  
  12. input.blur( function(){     
  13.     if( $.trim(input.val()) == '' ){ input.val(originalvalue); }     
  14. });     
  15. }    

在新窗口中打开链接

  1. $(document).ready(function() {     
  2. //Example 1: Every link will open in a new window     
  3. $('a[href^="http://"]').attr("target", "_blank");     
  4. //Example 2: Links with the rel="external" attribute will only open in a new window     
  5. $('a[@rel$='external']').click(function(){     
  6.      this.target = "_blank";     
  7. });     
  8.  
  9. });     
  10. // how to use     
  11. <A href="http://www.opensourcehunter.com" rel=external>open link</A> 

检测浏览器

注: 在版本jQuery 1.4中,$.support 替换掉了$.browser 变量。

  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. // Target Chrome     
  12. if( $.browser.chrome){     
  13. // do something     
  14.  
  15. }     
  16. // Target Camino     
  17. if( $.browser.camino){     
  18. // do something     
  19.  
  20. }     
  21. // Target Opera     
  22. if( $.browser.opera){     
  23. // do something     
  24.  
  25. }     
  26. // Target IE6 and below     
  27. if ($.browser.msie && $.browser.version <= 6 ){     
  28. // do something     
  29.  
  30. }     
  31. // Target anything above IE6     
  32. if ($.browser.msie && $.browser.version > 6){     
  33. // do something     
  34. }     
  35. });   

预加载图片

  1. $(document).ready(function() {     
  2.  
  3.   jQuery.preloadImages = function()     
  4.   {     
  5.      for(var i = 0; i").attr("src", arguments[i]);    
  6.  
  7.   }    
  8. };    
  9. // how to use    
  10. $.preloadImages("image1.jpg");     
  11. });   

页面样式切换

  1. $(document).ready(function() {     
  2.  
  3. $("a.Styleswitcher").click(function() {     
  4.  //swicth the LINK REL attribute with the value in A REL attribute     
  5. $('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));     
  6.  
  7.   });     
  8.  
  9. // how to use     
  10. // place this in your header     
  11.  
  12. <LINK href="default.css" type=text/css rel=stylesheet>     
  13. // the links     
  14. <A class=Styleswitcher href="#" rel=default.css>Default Theme</A>     
  15. <A class=Styleswitcher href="#" rel=red.css>Red Theme</A>     
  16. <A class=Styleswitcher href="#" rel=blue.css>Blue Theme</A>     
  17. });   

列高度相同

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

  1. $(document).ready(function() {     
  2.   function equalHeight(group) {     
  3.   tallest = 0;     
  4.   group.each(function() {     
  5.  
  6.   thisHeight = $(this).height();     
  7.  
  8.   if(thisHeight > tallest) {     
  9.  
  10.      tallest = thisHeight;     
  11.  
  12.   }     
  13.  
  14. });     
  15.  
  16. group.height(tallest);     
  17. }     
  18.  // how to use     
  19.  $(document).ready(function() {     
  20.  
  21.    equalHeight($(".left"));     
  22.  
  23.    equalHeight($(".right"));     
  24.  
  25.   });     
  26.  
  27. });   

动态控制页面字体大小

  1. $(document).ready(function() {     
  2.  
  3.   // Reset the font size(back to default)     
  4.   var originalFontSize = $('html').css('font-size');     
  5.  
  6.   $(".resetFont").click(function(){     
  7.   $('html').css('font-size', originalFontSize);     
  8.  
  9. });     
  10.  
  11.   // Increase the font size(bigger font0     
  12.   $(".increaseFont").click(function(){     
  13.  
  14. var currentFontSize = $('html').css('font-size');     
  15. var currentFontSizeNum = parseFloat(currentFontSize, 10);     
  16. var newFontSize = currentFontSizeNum*1.2;     
  17.  
  18. $('html').css('font-size', newFontSize);     
  19.  
  20.    return false;     
  21.  
  22. });     
  23.  
  24. // Decrease the font size(smaller font)     
  25. $(".decreaseFont").click(function(){     
  26.  
  27. var currentFontSize = $('html').css('font-size');     
  28. var currentFontSizeNum = parseFloat(currentFontSize, 10);     
  29. var newFontSize = currentFontSizeNum*0.8;     
  30.  
  31. $('html').css('font-size', newFontSize);     
  32.   return false;     
  33.   });     
  34. });   

返回页面顶部功能

  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.  
  10. var targetOffset = $target.offset().top;     
  11.  
  12. $('html,body')     
  13.   .animate({scrollTop: targetOffset}, 900);     
  14.   return false;     
  15. }     
  16.  
  17. }     
  18. });     
  19.  
  20. // how to use     
  21. // place this where you want to scroll to     
  22.  
  23. <A name=top></A>   
  24.     
  25. // the link     
  26. <A href="#top">go to top</A>     
  27. });   

获得鼠标指针XY值

  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. });     
  7.  
  8. // how to use     
  9.  
  10. <DIV id=XY></DIV>     
  11. });   

验证元素是否为空

  1.   $(document).ready(function() {     
  2.     if ($('#id').html()) {     
  3.     // do something     
  4.   }     
  5. });   

替换元素

  1. $(document).ready(function() {     
  2. $('#id').replaceWith('    
  3.   <DIV>I have been replaced</DIV>    
  4.   );     
  5. });   

jQuery延时加载功能

  1. $(document).ready(function() {     
  2.  
  3.     window.setTimeout(function() {     
  4.  
  5.     // do something     
  6.  
  7.      }, 1000);     
  8.  
  9. });   

移除单词功能

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

验证元素是否存在于jQuery对象集合中

  1. $(document).ready(function() {     
  2.  
  3.    if ($('#id').length) {     
  4.  
  5.    // do something     
  6.  
  7. }     
  8. });   

使整个DIV可点击

  1. $(document).ready(function() {     
  2.  
  3.   $("div").click(function(){     
  4.  
  5.   //get the url from href attribute and launch the url     
  6.  
  7.      window.location=$(this).find("a").attr("href"); return false;     
  8.  
  9. });     
  10.  
  11. // how to use     
  12.  
  13. <DIV><A href="index.html">home</A></DIV>     
  14. });    
  15.  
  16. ID与Class之间转换当改变Window大小时,在ID与Class之间切换  
  17.  
  18. $(document).ready(function() {     
  19.  
  20.    function checkWindowSize() {     
  21.    if ( $(window).width() > 1200 ) {     
  22.  
  23.      $('body').addClass('large');     
  24.  
  25.    }     
  26.    else {     
  27.  
  28.       $('body').removeClass('large');     
  29.  
  30.         }     
  31.  
  32. }     
  33. $(window).resize(checkWindowSize);     
  34. });   

克隆对象

  1. $(document).ready(function() {     
  2.  
  3.   var cloned = $('#id').clone();     
  4.  
  5.   // how to use     
  6.  
  7. <DIV idid=id></DIV>     
  8. });   

使元素居屏幕中间位置

  1. $(document).ready(function() {     
  2.  
  3.   jQuery.fn.center = function () {     
  4.  
  5.   this.css("position","absolute");     
  6.  
  7.   this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");     
  8.  
  9.   this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");     
  10.  
  11.      return this;     
  12.  
  13. }     
  14.  
  15. $("#id").center();     
  16.  
  17. });   

写自己的选择器

  1. $(document).ready(function() {     
  2.  
  3.    $.extend($.expr[':'], {     
  4.  
  5.      moreThen1000px: function(a) {     
  6.  
  7.    return $(a).width() > 1000;     
  8.  
  9.   }     
  10.  
  11. });     
  12. $('.box:moreThen1000px').click(function() {     
  13.  
  14.   // creating a simple js alert box     
  15.  
  16.     alert('The element that you have clicked is over 1000 pixels wide');     
  17.  
  18.   });     
  19.  
  20. });   

统计元素个数

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

使用自己的Bullets

  1. $(document).ready(function() {     
  2.   $("ul").addClass("Replaced");     
  3.   $("ul > li").prepend("‒ ");     
  4.   // how to use     
  5.   ul.Replaced { list-style : none; }     
  6.  
  7. });   

引用Google主机上的jQuery类库

  1. //Example 1     
  2. <SCRIPT 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" 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" type=text/javascript></SCRIPT>  

禁用jQuery(动画)效果

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

与其他JavaScript类库冲突解决方案

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


【编辑推荐】

  1. 一些应该熟记于心的jQuery函数和技巧
  2. Django创始人:从技术工艺上考量jQuery
  3. jQuery四大天王:核心函数详解 
【责任编辑:王晓东 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

网络管理员备考训练——计算机与网络基础知识

本书是根据全国计算机技术与软件专业技术资格(水平)考试《网络管理员考试大纲》所要求的考试范围而编写的试题集。全书共分10个单元,同步...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊