8 Practical jquery Tips

  This article mainly introduces 8 Super practical jquery tips, such as disabling the right button, returning to the top, picture preload, and so on, the friends you need can refer to the following

1 Disable Right-click function if you want to protect the site information for the user, then the developer can use this code-disable right click function.     Code as follows: $ (document). Ready (function () { //catch The right-click context menu  $ (document). Bind (" ContextMenu ", function (e) {      //warning prompt-optional   alert (" No right-clicking! "); &nbs P  //delete The default context menu   return false;  }); });   2 using jquery to set the text size to use this code, the user can reset the text size (increase or decrease) as needed.   Code as follows: $ (document). Ready (function () { //find The current font size  var originalfontsize = $ (' html '). CSS ( ' Font-size ');    //increase The text size  $ (". Increasefont"). Click (function () {  var currentfontsize = $ (' html '). CSS (' font-size ');   var currentfontsizenumber = parsefloat (currentfontsize, 10);     var newfontsize = currentfontsizenumber*1.2;   $ (' HTML '). CSS (' font-size ', newfontsize);   return false;  });    //decrease the Text Size  $ (". 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;  });    //Reset Font Size  $ (". Resetfont"). Click (function () { $ (' HTML '). CSS (' font-size ', Originalfontsize);  }); });   3 Opening a link in a new window   using this code will help users to open links in a new window to bring users a better user experience.     Code as follows: $ (document). Ready (function () { //select All anchor tags, that have http in the href  //and AP Ply the Target=_blank  $ ("a[href^= ' http ')"). attr (' target ', ' _blank '); }); 4 Change the Style list use this code to help you change the list of styles.     Code as follows: $ (document). Ready (function () { $ ("A.cssswap"). Click (function () {   //swap the link Rel with the value of the Rel       $ (' link[rel=stylesheet] '). attr (' href ', $ (this). attr (' rel '));   &NBSP}); }); 5 return to the top link this code for a long time to click on a single page is very practical, you can click on the important point of "return to the top" function.     Code as follows: $ (document). Ready (function () { //when the id= "Top" link is clicked  $ (' #top '). Click (function () { //scoll th E page back to the top   $ (document). Scrollto (0,500);  }}); 6 Get the mouse pointer to the x/y axis   code as follows: $ (). MouseMove (function (e) {   //display the x and Y axis values inside the P element     $ (' P '). html ("X Axis:" + E.pagex + "| Y Axis "+ e.pagey);}"; 7 detect the current mouse coordinates   Use this script, you can get the mouse coordinates in any web browser.     Code as follows: $ (document). Ready (function () {$ (). MouseMove (function (e) {    $ (' # mousecoordinates '). HTML ("X Axis Position =" + E.pagex + "and Y axis Position =" + E.pagey);}); 8 picture preload This section of code helps users quickly load pictures or page pages.   Code as follows: Jquery.preloadimagesinwebpage = function ()   {     for (var ctr = 0; Ctr<arguments.leng Th ctr++)      {         jquery ("") attr ("src", arguments[ctr]);     &NBSP} to use the above method, your can use the following piece of code: $.preloadimages ("imaGe1.gif "," Image2.gif "," image3.gif "); To check whether a image has been loaded, you can use the following piece of code: $ (' #imageObject '). attr (' src ', ' image1. GIF '). Load (function () {    alert (' The image has been loaded ... ');