WEB前端 -- JQuery常用小功能代码小结

1.禁止右键点击

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

2.隐藏搜索文本框文字

点击时隐藏搜索栏中的文字

$(document).ready(function(){
$("input.text1").val("enter your search texthere");
textFill($('input.text1'));
});
functiontextFill(input){
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 anew window
  $('a[href^="http://"]').attr("target","_blank");
  
   //Example 2: Links with therel="external" attribute will only open in a new window
   $('a[@rel$='external']').click(function(){
      this.target ="_blank";
   });
});
// how to use
<A href="http://wwww.58img.com" rel=external>open link</A>

4.预加载图片

预加载图片，适用网站图片很多的网站

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

5.列高度相同

如果使用了两个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"));
});
});

6.返回页面顶部功能

网站很常用的功能，增强用户体验

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

7.替换元素

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

8.延时加载

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

9.移动单词功能

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

10.使元素居屏幕中间位置

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

11.统计元素个数

 

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

12.禁用Jquery（动画）效果

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

13.与其他Javascript类库冲突解决方案

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

14. jQuery延时加载功能

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

出处：http://www.58img.com/jquery/1079