打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
jquery26个技巧

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)

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


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

  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. if( $.trim(input.val()) == originalvalue ){ input.val(''); }
  9. });
  10. input.blur( function(){
  11. if( $.trim(input.val()) == '' ){ input.val(originalvalue); }
  12. });
  13. }
  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. 新窗口打开链接(Opening links in a new window)

  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. // how to use
  10. <a href="http://www.opensourcehunter.com" rel="external">open link</a>
  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" rel="external">open link</a>  


4. 检测浏览器(Detect browser)

  1. $(document).ready(function() {
  2. // Target Firefox 2 and above
  3. if ($.browser.mozilla && $.browser.version >= "1.8" ){
  4. // do something
  5. }
  6. // Target Safari
  7. if( $.browser.safari ){
  8. // do something
  9. }
  10. // Target Chrome
  11. if( $.browser.chrome){
  12. // do something
  13. }
  14. // Target Camino
  15. if( $.browser.camino){
  16. // do something
  17. }
  18. // Target Opera
  19. if( $.browser.opera){
  20. // do something
  21. }
  22. // Target IE6 and below
  23. if ($.browser.msie && $.browser.version <= 6 ){
  24. // do something
  25. }
  26. // Target anything above IE6
  27. if ($.browser.msie && $.browser.version > 6){
  28. // do something
  29. }
  30. });
  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. 预加载图片(Preloading images)

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


6. 样式筛选(CSS Style switcher)

  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 rel="stylesheet" href="default.css" type="text/css">
  9. // the links
  10. <a href="#" class="Styleswitcher" rel="default.css">Default Theme</a>
  11. <a href="#" class="Styleswitcher" rel="red.css">Red Theme</a>
  12. <a href="#" class="Styleswitcher" rel="blue.css">Blue Theme</a>
  13. });
  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 rel="stylesheet" href="default.css" type="text/css">  
  9. // the links  
  10. <a href="#" class="Styleswitcher" rel="default.css">Default Theme</a>  
  11. <a href="#" class="Styleswitcher" rel="red.css">Red Theme</a>  
  12. <a href="#" class="Styleswitcher" rel="blue.css">Blue Theme</a>  
  13. });  


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

  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. });
  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. 字体大小调整(Font resizing)

  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. });
  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. 返回页面顶部(Smooth(animated) page scroll)

  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">go to top</a>
  21. });
  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">go to top</a>  
  21. });  



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

  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. });
  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. 验证元素是否为空(Verify if an Element is empty)

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

13. 替换元素(Replace a element)

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

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

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

15. 移除单词(Remove a word)

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

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

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

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

  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">home</a></div>
  8. });
  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">home</a></div>  
  8.   
  9. });  

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

  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. });
  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. 克隆对象(Clone a object)

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


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

  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. });
  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. 自定义选择器(Write our own selector)

  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. });
  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. 统计元素个数(Count a element)

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


23. 自定义Bullets(Use Your Own Bullets)

  1. $(document).ready(function() {
  2. $("ul").addClass("Replaced");
  3. $("ul > li").prepend("? ");
  4. // how to use
  5. ul.Replaced { list-style : none; }
  6. });
  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 jQuery for you)

  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. // Example 2:(the best and fastest way)
  10. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
  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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>  


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

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


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

  1. $(document).ready(function() {
  2. var $jq = jQuery.noConflict();
  3. $jq('#id').show();
  4. });
  1. $(document).ready(function() {  
  2.    var $jq = jQuery.noConflict();  
  3.    $jq('#id').show();  
  4. });  
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
jQuery 1.4实用技巧大放送
开发中可能会用到的几个 jQuery 小提示和技巧
每个程序员都会的 35 个 jQuery 小技巧(3)
JQUERY 选择器大全
熊子川:体验设计师该学习的一点前端技术
jQuery VS JavaScript原生API | 晚晴幽草軒
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服