Share some common operations encapsulated by jQuery

  • 2021-07-06 10:06:00
  • OfStack

1. No right-clicking


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

2. Hide search text box text


$(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. Open a link in a new window


$(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>

Step 4 Detect your 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. Preload pictures


$(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. Return to top of page functionality


$(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. Get the mouse pointer XY value


$(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. Check if the picture is finished loading


 Sometimes you need to make sure that the picture is finished and loaded in order to perform the following operations: 
$('img').load(function () {
 console.log('image load successful');
});

You can replace img with another ID or class to check whether the specified image is loaded.

9. Automatically modify damage images
If you happen to find broken image links on your website, you can replace them with an image that is not easy to replace. Adding this simple code can save a lot of trouble:


$('img').on('error', function () {
 $(this).prop('src', 'img/broken.png');
});

Even if your website doesn't have broken image links, there is no harm in adding this code.

10. jQuery Delayed Load Function


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

The above is the site for everyone to organize jQuery encapsulation of a good 1 commonly used operation content, this article is very practical recommendations you can collect, convenient in the future use, I hope this article for everyone to learn jQuery has a good help.


Related articles: