4887王中王鉄算盘奖结果常见26个jquery使用技巧详

来源:http://www.smjxgs.com 作者:4887王中王鉄算盘奖结果 人气:105 发布时间:2019-08-11
摘要:Web前端的35个jQuery小技巧,webjquery小技巧 1. 明确命令禁止右键点击 $(document).ready(function(){     $(document).bind("contextmenu",function(e){         return false;     }); }); 2. 潜藏找寻文本框文字

Web前端的35个jQuery小技巧,webjquery小技巧

1. 明确命令禁止右键点击
$(document).ready(function(){
    $(document).bind("contextmenu",function(e){
        return false;
    });
});

2. 潜藏找寻文本框文字
Hide when clicked in the search field, the value.(example can be found below in the comment fields)
$(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. 在新窗口中张开链接
XHTML 1.0 Strict doesn’t allow this attribute in the code, so use this to keep the code valid.
$(document).ready(function() {
   //Example 1: Every link will open in a new window
   $('a[href^="", "_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="" 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. 预加载图片
This piece of code will prevent the loading of all images, which can be useful if you have a site with lots of images.
$(document).ready(function() {
jQuery.preloadImages = function()
{
  for(var i = 0; i<ARGUMENTS.LENGTH; jQuery(?<img { 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 rel=stylesheet type=text/css href="default.css">
// the links
<A href="#" rel=default.css>Default Theme</A>
<A href="#" rel=red.css>Red Theme</A>
<A href="#" 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. 回去页面最上端作用
For a smooth(animated) ride back to the top(or any location).
$(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>
});

10. 到手鼠标指针XY值
Want to know where your mouse cursor is?
$(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.重临最上部按键
你能够利用 animate 和 scrollTop 来促成重返最上端的卡通片,而不供给接纳其余插件。
// Back to top
$('a.top').click(function () {
  $(document.body).animate({scrollTop: 0}, 800);
  return false;
});
<!-- Create an anchor tag -->
<a href="#">Back to top</a>
转移 scrollTop 的值能够调动重返距离顶上部分的相距,而 animate 的第4个参数是实行回来动作必要的岁月(单位:阿秒)。

12.预加载图片
万一您的页面中采纳了比相当多不可知的图纸(如:hover 突显),你或然需求预加载它们:
$.preloadImages = function () {
  for (var i = 0; i < arguments.length; i ) {
    $('<img>').attr('src', arguments[i]);
  }
};
$.preloadImages('img/hover1.png', 'img/hover2.png');

13.反省教室片是还是不是加载成功
有的时候你必要保证图片实现加载成功以便实行后边的操作:
$('img').load(function () {
  console.log('image load successful');
});
您能够把 img 替换为其他的 ID 只怕 class 来检查钦命图片是不是加载成功。

14.自动修改破损图像
一旦你碰巧在你的网址上开采了破绽的图像链接,你能够用三个不利被调换的图像来代表它们。增加这几个大约的代码能够节约数不完费劲:
$('img').on('error', function () {
  $(this).prop('src', 'img/broken.png');
});
哪怕你的网址并未有破损的图像链接,增多这段代码也并没有别的害处。

15.鼠标悬停(hover)切换 class 属性
就算当用户鼠标悬停在二个可点击的因素上时,你希望改换其功用,上边这段代码能够在其悬停在要素上时添加class 属性,当用户鼠标离开时,则自动撤废该 class 属性:
$('.btn').hover(function () {
  $(this).addClass('hover');
  }, function () {
    $(this).removeClass('hover');
  });
您只须求加上须求的CSS代码就能够。若是你想要更简洁的代码,能够选拔toggleClass 方法:
$('.btn').hover(function () {
  $(this).toggleClass('hover');
});
注:直接运用CSS实现该意义也许是更加好的解决方案,但你依然有须要知道该办法。

16.禁用 input 字段
神蹟你恐怕须求禁止使用表单的 submit 开关恐怕有个别 input 字段,直到用户执行了几许操作(譬喻,检查“已阅读条约”复选框)。能够增进disabled 属性,直到你想启用它时:
$('input[type="submit"]').prop('disabled', true);
你要做的正是执行 removeAttr 方法,并把要移除的质量作为参数字传送入:
$('input[type="submit"]').removeAttr('disabled');

17.阻止链接加载
一时候你不愿意链接到有些页面恐怕另行加载它,你大概希望它来做一些别的专门的学问也许触发一些其余脚本,你能够这么做:
$('a.no-link').click(function (e) {
  e.preventDefault();
});

18.切换 fade/slide
fade 和 slide 是大家在 jQuery 中日常利用的动画效果,它们得以使成分呈现效果越来越好。不过只要你希望成分显示时使用第一种功效,而消亡时使用第三种效应,则能够这么做:
// Fade
$('.btn').click(function () {
  $('.element').fadeToggle('slow');
});
4887王中王鉄算盘奖结果,// Toggle
$('.btn').click(function () {
  $('.element').slideToggle('slow');
});

19.轻便易行的手风琴效果
这是三个落实手风琴效果火速轻易的措施:
// Close all panels
$('#accordion').find('.content').hide();
// Accordion
$('#accordion').find('.accordion-header').click(function () {
  var next = $(this).next();
  next.slideToggle('fast');
  $('.content').not(next).slideUp('fast');
  return false;
});

20.让四个 DIV 中度一样
神跡你需求让三个 div 中度同样,而不论是它们中间的剧情有一点点。能够选用上面包车型客车代码片段:
var $columns = $('.column');
var height = 0;
$columns.each(function () {
  if ($(this).height() > height) {
    height = $(this).height();
  }
});
$columns.height(height);
这段代码会循环一组成分,并设置它们的可观为因素中的最大高。

21. 证实成分是或不是为空
This will allow you to check if an element is empty.
$(document).ready(function() {
  if ($('#id').html()) {
   // do something
   }
});

22. 沟通成分
$(document).ready(function() {
   $('#id').replaceWith('
<DIV>I have been replaced</DIV>
');
});

23. jQuery延时加载功用
$(document).ready(function() {
   window.setTimeout(function() {
     // do something
   }, 1000);
});

24. 移除单词作者用
$(document).ready(function() {
   var el = $('#id');
   el.html(el.html().replace(/word/ig, ""));
});

25. 表达成分是不是留存于jquery对象集结中
$(document).ready(function() {
   if ($('#id').length) {
  // do something
  }
});

26. 使整个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="index.html">home</A></DIV>

});

27. ID与Class之间转变
当更改Window大时辰,在ID与Class之间切换
$(document).ready(function() {
   function checkWindowSize() {
    if ( $(window).width() > 1200 ) {
        $('body').addClass('large');
    }
    else {
        $('body').removeClass('large');
    }
   }
$(window).resize(checkWindowSize);
});

28. 仿制对象
$(document).ready(function() {
   var cloned = $('#id').clone();
// how to use
<DIV id=id></DIV>

});

29. 使成分居显示器中间地点
$(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();
});

30. 写本身的接纳器
$(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');
  });
});

31. 总括成分个数
$(document).ready(function() {
   $("p").size();
});

32. 采纳本人的 Bullets
$(document).ready(function() {
   $("ul").addClass("Replaced");
   $("ul > li").prepend("‒ ");
// how to use
ul.Replaced { list-style : none; }
});

33. 援引谷歌主机上的Jquery类库(谷歌(Google)用持续,可以用百度CDN)
//Example 1
<SCRIPT src=";
<SCRIPT type=text/javascript>
google.load("jquery", "1.2.6");
google.setOnLoadCallback(function() {
    // do something
});
</SCRIPT><SCRIPT type=text/javascript src=";
// Example 2:(the best and fastest way)
<SCRIPT type=text/javascript src=";

34. 禁用Jquery(动画)效果
$(document).ready(function() {
    jQuery.fx.off = true;
});

35. 与其余Javascript类库冲突化解方案
$(document).ready(function() {
   var $jq = jQuery.noConflict();
   $jq('#id').show();
});

1. 取缔右键点击 $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 2. 藏匿搜...

举个例子有禁止右键点击、掩盖搜索文本框文字、在新窗口中开采链接、检查评定浏览器、预加载图片等等。具体如下:
取缔右键点击

本文列出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^="", "_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=")" 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="" type=text/css rel=stylesheet>   
       // the links   
   <A class=Styleswitcher href="" rel=default.css>Default Theme</A>   
   <A class=Styleswitcher href="" rel=red.css>Red Theme</A>   
   <A class=Styleswitcher href="" 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=" 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=";   
         
       }); 
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);   
   });

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

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=">   
       <SCRIPT type=text/javascript> 
       google.load("jquery", "1.2.6"); 
       google.setOnLoadCallback(function() { 
           // do something 
       }); 
       </SCRIPT><SCRIPT src="" type=text/javascript></SCRIPT>   
         
    // Example 2:(the best and fastest way)   
   <SCRIPT src="" 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();   
       });

复制代码 代码如下:

 

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

 

在新窗口中开荒链接

出处:

复制代码 代码如下:

$(document).ready(function() {
//Example 1: Every link will open in a new window
$('a[href^="", "_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="" rel=external>open link</A>

检测浏览器
注: 在本子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
}
});

预加载图片

复制代码 代码如下:

$(document).ready(function() {
jQuery.preloadImages = function()
{
for(var i = 0; i").attr("src", arguments[i]);
}
};
// how to use
$.preloadImages("image1.jpg");
});

页面样式切换

复制代码 代码如下:

$(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="default.css" type=text/css rel=stylesheet>
// the links
<A class=Styleswitcher href="#" rel=default.css>Default Theme</A>
<A class=Styleswitcher href="#" rel=red.css>Red Theme</A>
<A class=Styleswitcher href="#" rel=blue.css>Blue Theme</A>
});

列中度同样
万一运用了五个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"));
});
});

动态调整页面字体大小

复制代码 代码如下:

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

回来页面最上部功用

复制代码 代码如下:

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

获取鼠标指针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>
});

表明成分是或不是为空

复制代码 代码如下:

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

轮换来分

复制代码 代码如下:

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

jQuery延时加载功效

复制代码 代码如下:

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

移除单词作者用

复制代码 代码如下:

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

证实成分是不是留存于jQuery对象集结中

复制代码 代码如下:

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

使整个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="index.html">home</A></DIV>
});

ID与Class之间转移当改造Window大小时,在ID与Class之间切换

复制代码 代码如下:

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

仿造对象

复制代码 代码如下:

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

使成分居荧屏中间地方

复制代码 代码如下:

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

写本身的选择器

复制代码 代码如下:

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

计算成分个数

复制代码 代码如下:

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

运用本人的Bullets

复制代码 代码如下:

$(document).ready(function() {
$("ul").addClass("Replaced");
$("ul > li").prepend("‒ ");
// how to use
ul.Replaced { list-style : none; }
});

引用谷歌主机上的jQuery类库

复制代码 代码如下:

//Example 1
<SCRIPT src=";
<SCRIPT type=text/javascript>
google.load("jquery", "1.2.6");
google.setOnLoadCallback(function() {
// do something
});
</SCRIPT><SCRIPT src="" type=text/javascript></SCRIPT>
// Example 2:(the best and fastest way)
<SCRIPT src="" type=text/javascript></SCRIPT>

禁用jQuery(动画)效果

复制代码 代码如下:

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

与任何JavaScript类库冲突化解方案

复制代码 代码如下:

$(document).ready(function() {
var $jq = jQuery.noConflict();
$jq('#id').show();
});

禁止右键点击 复制代码 代...

本文由4887王中王鉄算盘奖结果发布于4887王中王鉄算盘奖结果,转载请注明出处:4887王中王鉄算盘奖结果常见26个jquery使用技巧详

关键词:

最火资讯