`
zpball
  • 浏览: 919228 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

26 个 jQuery使用技巧

阅读更多
[url]http://blog.csdn.net/sunboy_2050/article/details/8179162/url]

The use of the jQuery library is growing and growing(just released jQuery 1.4), more and more people are using this useful javascript library. This means that more and more useful jQuery tips, tricks and solutions are coming available. That’s why i created a small list of 26 cool and useful jQuery tips, tricks and solutions.


1. 禁用右键点击(Disable right-click)

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


2. 禁用搜索文本框(Disappearing search field text)

$(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. 新窗口打开链接(Opening links in a new window)

$(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. 检测浏览器(Detect 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  
}  
});  



5. 预加载图片(Preloading images)
 
$(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;>  



6. 样式筛选(CSS Style switcher)

$(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="#" class="Styleswitcher" 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>  
});  


7. 列高度相同(Columns of equal height)

$(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. 字体大小调整(Font resizing)
 
$(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. 返回页面顶部(Smooth(animated) page scroll)

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



11. 获取鼠标的xy坐标(Get the mouse cursor x and y axis)

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


12. 验证元素是否为空(Verify if an Element is empty)

$(document).ready(function() {  
  if ($('#id').html()) {  
   // do something  
   }  
}); 


13. 替换元素(Replace a element)
 
$(document).ready(function() {  
   $('#id').replaceWith('  
<div>I have been replaced</div>  
  
');  
});  


14. 延迟加载(jQuery timer callback functions)

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


15. 移除单词(Remove a word)
 
$(document).ready(function() {  
   var el = $('#id');  
   el.html(el.html().replace(/word/ig, ""));  
});  


16. 验证元素是否存在(Verify that an element exists in jQuery)

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


17. 使整个DIV可点击(Make the entire DIV clickable)

$(document).ready(function() {  
    $("div").click(function(){  
      //get the url from href attribute and launch the url  
      window.location=$(this).find("a").attr("href"); return false;  
    });  
// how to use  
<div><a href="index.html">home</a></div>  
  
});  


18. id和class切换(Switch between classes or id’s when resizing the window)

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



19. 克隆对象(Clone a object)

$(document).ready(function() {  
   var cloned = $('#id').clone();  
// how to use  
<div id="id"></div>  
  
});  



20. 使元素居中屏幕(Center an element on the screen)

$(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");  
      return this;  
  }  
  $("#id").center();  
});  



21. 自定义选择器(Write our own selector)

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



22. 统计元素个数(Count a element)
 
$(document).ready(function() {  
   $("p").size();  
});  


23. 自定义Bullets(Use Your Own Bullets)
 
$(document).ready(function() {  
   $("ul").addClass("Replaced");  
   $("ul > li").prepend("‒ ");  
 // how to use  
 ul.Replaced { list-style : none; }  
});  



24. 引用google分发的jQuery(Let Google host jQuery for you)

//Example 1  
<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>  



25. 禁用jQuery动画(Disable jQuery animations)

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


26. 防止不兼容冲突(No conflict-mode)

$(document).ready(function() {  
   var $jq = jQuery.noConflict();  
   $jq('#id').show();  
});  
分享到:
评论

相关推荐

    jquery使用技巧总结

    本文将深入探讨jQuery的使用技巧,帮助开发者提升效率,更好地驾驭这个强大的工具。 1. **选择器的高效运用** jQuery的选择器功能强大,能快速定位DOM元素。例如,`$("#id")`用于选取ID为指定值的元素,`$(".class...

    26个Jquery使用小技巧

    根据给定的文件信息,以下是对“26个Jquery使用小技巧”中部分技巧的知识点详细解析: ### 技巧一:禁用右键菜单 ```javascript $(document).ready(function(){ $(document).bind("contextmenu", function(e){ ...

    jQuery、jQueryUI及jQueryMobile技巧与示例

    资源名称:jQuery、jQuery UI及jQuery Mobile技巧与示例内容简介:《jQuery、jQuery UI及jQuery Mobile技巧与示例》包括jQuery、jQuery UI、jQuery Mobile以及jQuery插件四部分内容。第一部分介绍jQuery核心库,从...

    jQuery常见开发技巧详细整理

    在jQuery的开发过程中,掌握一些常见技巧能显著提升开发效率和代码质量。下面是一些详细的jQuery开发技巧: 1. **引用页面元素**:jQuery通过`$()`选择器引用元素,支持ID、类名、元素类型以及层级关系和DOM或XPath...

    jQuery应用技巧大全modified

    总的来说,《jQuery应用技巧大全modified》旨在提供一个全面的jQuery实践指南,涵盖从基础到高级的各种技巧,帮助开发者提高代码效率,简化DOM操作,实现丰富的交互效果。理解并掌握这些技巧,将使你在JavaScript...

    15个Jquery 技巧

    ### 15个jQuery技巧深度解析 在前端开发领域,jQuery作为一款优秀的JavaScript库,以其简洁、高效的特点深受开发者喜爱。以下是对“15个Jquery 技巧”文章中的核心知识点进行的深入分析,旨在帮助使用jQuery框架的...

    jquery使用手册与技巧

    `jQuery技巧总结1.txt`和`jQuery技巧总结2.txt`这两份文档很可能是对jQuery进阶技巧的汇集,可能包括以下内容: 1. **性能优化**:讲解如何避免不必要的DOM遍历,使用$(element).data()存储和检索数据,以及在适当...

    jQuery技巧,比较经典的几种用法总结。

    jQuery 是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画和Ajax交互。本篇文章将深入探讨一些jQuery的经典技巧和用法。 首先,jQuery 提供了一种简洁的方式来引用页面上的元素。你可以...

    软件工程师-经典收藏50个jQueryMobile开发技巧集萃.docx

    《软件工程师-经典收藏50个jQueryMobile开发技巧集萃》文档汇集了众多关于jQuery Mobile的实用技巧,这些技巧对于软件工程师来说是构建高效、跨平台的移动网站和应用的宝贵资源。jQuery Mobile是一个强大的框架,它...

    jQuery应用技巧大全

    jQuery应用技巧大全jQuery应用技巧大全

    JQ技巧jquery学习技巧

    本篇文章将深入探讨jQuery的学习技巧,包括元素引用、DOM对象与jQuery对象的转换、集合操作、以及常用的属性和事件处理。 1. **元素引用** 在jQuery中,通过`$()`函数我们可以方便地引用页面中的元素。例如,通过...

    jQuery常用技巧大放送

    jQuery,作为一个广泛使用的JavaScript库,极大地简化了网页的DOM操作,事件处理,动画设计和Ajax交互。在本文中,我们将深入探讨一些jQuery的常用技巧,这些技巧能够帮助开发者更高效地利用jQuery的功能。 1. 引用...

    15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】

    本文总结述了15个值得开发人员关注的jQuery开发技巧和心得。非常精辟实用!分享给大家供大家参考,具体如下: 在这篇文章中,我们将介绍15个让你的jQuery更加有效的技巧,大部分关于性能提升的,希望大家能够喜欢! ...

    jquery性能优化高级技巧

    jquery性能优化高级技巧,下面主要从七个方面对jquery性能优化做介绍: 1.通过CDN(Content Delivery Network)引入jQuery库 2.减少DOM操作 3.适当使用原生JS 4.选择器优化 5.缓存jQuery对象 6.定义一个可以...

    jQuery、jQuery UI及jQuery Mobile技巧与示例

    jQuery、jQuery UI及jQuery Mobile技巧与示例

Global site tag (gtag.js) - Google Analytics