本文列出jquery一些应用小技巧,比如有禁止右键点击、隐藏搜索文本框文 字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列等高、动态控制页面字体大小、获得鼠标指针的X值Y值、验证元素是否为空、替换元 素、延迟加载、验证元素是否存在于Jquery集合中、使DIV可点击、克隆对象、使元素居中、计算元素个数、使用Google主机上的Jquery类 库、禁用Jquery效果、解决Jquery类库与其他Javascript类库冲突问题。
请看下文jquery技巧:
1、禁止右键点击
       $(document).ready(function(){   
           $(document).bind("contextmenu",function(e){   
               return false;   
           });   
       }); 
2、 隐藏搜索文本框文字
       $(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、 在新窗口中打开链接
       $(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://huhaiqia.blog.163.com/blog/http://www.opensourcehunter.com" rel=external>open link</A> 
4、检测浏览器注: 在版本jQuery 1.4中,$.support 替换掉了$.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、预加载图片
       $(document).ready(function() {   
          jQuery.preloadImages = function()   
         {   
            for(var i = 0; i").attr("src", arguments[i]); 
         } 
       }; 
       // how to use 
       $.preloadImages("image1.jpg");   
       }); 
6、页面样式切换
       $(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 href="http://huhaiqia.blog.163.com/blog/default.css" type=text/css rel=stylesheet>   
       // the links   
   <A class=Styleswitcher href="http://huhaiqia.blog.163.com/blog/#" rel=default.css>Default Theme</A>   
   <A class=Styleswitcher href="http://huhaiqia.blog.163.com/blog/#" rel=red.css>Red Theme</A>   
   <A class=Styleswitcher href="http://huhaiqia.blog.163.com/blog/#" rel=blue.css>Blue Theme</A>   
   }); 
7、列高度相同如果使用了两个CSS列,使用此种方式可以是两列的高度相同。
       $(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、 动态控制页面字体大小用户可以改变页面字体大小
       $(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、返回页面顶部功能
       $(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="http://huhaiqia.blog.163.com/blog/#top">go to top</A>   
   }); 
10、获得鼠标指针XY值
       $(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>   
         
       }); 
11、验证元素是否为空
       $(document).ready(function() {   
         if ($('#id').html()) {   
          // do something   
          }   
       }); 
12、替换元素
       $(document).ready(function() {   
          $('#id').replaceWith(' 
       <DIV>I have been replaced</DIV> 
        
       ');   
       }); 
13、jQuery延时加载功能
       $(document).ready(function() {   
          window.setTimeout(function() {   
            // do something   
          }, 1000);   
       }); 
14、 移除单词功能
       $(document).ready(function() {   
          var el = $('#id');   
          el.html(el.html().replace(/word/ig, ""));   
       }); 
15、验证元素是否存在于Jquery对象集合中
       $(document).ready(function() {   
          if ($('#id').length) {   
         // do something   
         }   
       }); 
16、使整个DIV可点击
       $(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="http://huhaiqia.blog.163.com/blog/index.html">home</A></DIV>   
         
       }); 
17、ID与Class之间转换当改变Window大小时,在ID与Class之间切换
       $(document).ready(function() {   
          function checkWindowSize() {   
           if ( $(window).width() > 1200 ) {   
               $('body').addClass('large');   
           }   
           else {   
               $('body').removeClass('large');   
           }   
          }   
   $(window).resize(checkWindowSize);   
   });

18、克隆对象
       $(document).ready(function() {   
          var cloned = $('#id').clone();   
       // how to use   
       <DIV id=id></DIV>   
         
       }); 
18、使元素居屏幕中间位置
       $(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();   
       }); 
19、写自己的选择器
       $(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');   
     });   
   }); 
20、统计元素个数
       $(document).ready(function() {   
          $("p").size();   
       }); 
21、使用自己的 Bullets
       $(document).ready(function() {   
          $("ul").addClass("Replaced");   
          $("ul > li").prepend("? ");   
        // how to use   
        ul.Replaced { list-style : none; }   
       }); 
22、引用Google主机上的Jquery类库Let Google host the jQuery script for you. This can be done in 2 ways.

//Example 1   
       <SCRIPT src="http://huhaiqia.blog.163.com/blog/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://huhaiqia.blog.163.com/blog/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 src="http://huhaiqia.blog.163.com/blog/http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type=text/javascript></SCRIPT> 
23、禁用Jquery(动画)效果
       $(document).ready(function() {   
           jQuery.fx.off = true;   
       }); 
24、 与其他Javascript类库冲突解决方案
       $(document).ready(function() {   
          var $jq = jQuery.noConflict();   
          $jq('#id').show();   
       });

出处:http://www.cnblogs.com/ajunForNet/p/3529638.html

常见26个jquery使用技巧详解的更多相关文章

  1. 常见26个jquery使用技巧详解(比如禁止右键点击、隐藏文本框文字等)

      来自:http://www.xueit.com/js/show-6015-1.aspx 本文列出jquery一些应用小技巧,比如有禁止右键点击.隐藏搜索文本框文字.在新窗口中打开链接.检测浏览器. ...

  2. 训练技巧详解【含有部分代码】Bag of Tricks for Image Classification with Convolutional Neural Networks

    训练技巧详解[含有部分代码]Bag of Tricks for Image Classification with Convolutional Neural Networks 置顶 2018-12-1 ...

  3. MySQL SQL查询优化技巧详解

    MySQL SQL查询优化技巧详解 本文总结了30个mysql千万级大数据SQL查询优化技巧,特别适合大数据里的MYSQL使用. 1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 ...

  4. jquery的css详解(二)

    jq的工具方法style用于设置样式,jq的实例方法css在设置样式时就是调用的它,接下来分析一下源码. jQuery.extend({ ............................ st ...

  5. jQuery.attr() 函数详解

    一,jQuery.attr()  函数详解: http://www.365mini.com/page/jquery-attr.htm 二,jQuery函数attr()和prop()的区别: http: ...

  6. jQuery 事件用法详解

    jQuery 事件用法详解 目录 简介 实现原理 事件操作 绑定事件 解除事件 触发事件 事件委托 事件操作进阶 阻止默认事件 阻止事件传播 阻止事件向后执行 命名空间 自定义事件 事件队列 jque ...

  7. jQuery.ready() 函数详解

    jQuery.ready() 函数详解 ready()函数用于在当前文档结构载入完毕后立即执行指定的函数. 该函数的作用相当于window.onload事件. 你可以多次调用该函数,从而绑定多个函数, ...

  8. 前端html、CSS快速编写代码插件-Emmet使用方法技巧详解

    前端html.CSS快速编写代码插件-Emmet使用方法技巧详解   Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来 ...

  9. jquery inArray()函数详解

    jquery inarray()函数详解 jquery.inarray(value,array)确定第一个参数在数组中的位置(如果没有找到则返回 -1 ). determine the index o ...

随机推荐

  1. HDU 5703

    题意:给你一个数n,问将n分为正整数和的方案数.如n=3共四种,1 1 1 , 1 2 , 2 1 ,3 . 思路:隔板法,n个1,有n-1个空位,每个空位可以选择是否插入隔板,插入k(0<=k ...

  2. centos7下安装ngnix1.8.1

    参考 http://www.linuxidc.com/Linux/2016-09/134907.htm 安装依赖 openssl zlib pcre gcc 下载安装包 [root@localhost ...

  3. 通过Collections将集合转换为线程安全类集合

    通过Collections将集合转换为线程安全类集合 List集合: List<String> list=new ArrayList<String>();list.add(&q ...

  4. Flume-NG源码阅读之FileChannel

    FileChannel是flume一个非常重要的channel组件,非常常用.这个channel非常复杂,涉及的文件更多涉及三个包:org.apache.flume.channel.file.org. ...

  5. css tips —— 神奇的max-width,min-width, width覆盖规则

    max-width在比width小时,即使width使用!important来加权,仍会max-width生效: max-width比min-width小时,width < min-width, ...

  6. LeetCode第[16]题(Java):3Sum Closest (和目标值最接近的三个数的和)——Medium

    题目难度:Medium 题目: Given an array S of n integers, find three integers in S such that the sum is closes ...

  7. sass基础篇

    scss的语法非常简单: $color: red; div{ color: $color; } 这就是一个简单的scss代码. 但是,使用 Sass 进行开发,那么是不是直接通过“<link&g ...

  8. Xposed框架

    Xposed框架,很好的一款软件,早起百团大战.外卖大战时候,对拉新用户有很大的帮助,一直没时间整理,今天有看到一个公众账号介绍这款,准备大概整理下,做个记录. 整理下思路 新用户,无非就是1.手机号 ...

  9. Node.js小白开路(一)-- fs篇

    文件操作在我们的日常功能模块之中是十分的常见的内容,nodeJS也不例外的为我们提供了之一操作内容,当时在我们了解文件操作的之前我们先来了解一下链接. 连接可以理解成为一个纸箱相关文件内容的地址,其主 ...

  10. 实验二. 使用LoadRunner进行压力测试

    实验二. 使用LoadRunner进行压力测试 一. LoadRunner 概要介绍   1.1简介   LoadRunner 是一种预测系统行为和性能的工业标准级负载测试工具.通过以模拟上千万用户实 ...