分享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://www.opensourcehunter.com" rel=external>open link</a>

 

4. 检测浏览器

$(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<ARGUMENTS.LENGTH; jQuery(?<img { i++)>").attr("src", arguments[i]);

 }

}

// how to use

$.preloadImages("image1.jpg");

});

 

 

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. 获得鼠标指针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>

});

 

8.检查图片是否加载完成

有时候你需要确保图片完成加载完成以便执行后面的操作：

$('img').load(function () {

 console.log('image load successful');

});

 

9.自动修改破损图像
如果你碰巧在你的网站上发现了破碎的图像链接，你可以用一个不易被替换的图像来代替它们。添加这个简单的代码可以节省很多麻烦：

$('img').on('error', function () {

 $(this).prop('src', 'img/broken.png');

});

 

10. jQuery延时加载功能

$(document).ready(function() {

  window.setTimeout(function() {

   // do something

  }, 1000);

});