8 practical jQuery skills

1) disable the right-click Function
If you want to protect your website information, you can use this code to disable the right-click function.
Copy codeThe Code is as follows:
$ (Document). ready (function (){
// Catch the right-click context menu
$ (Document). bind ("contextmenu", function (e ){
// Warning prompt-optional
Alert ("No right-clicking! ");

// Delete the default context menu
Return false;
});
});
2) use jQuery to set the text size
With this code, you can reset the text size (increase or decrease) as needed ).
Copy codeThe Code is 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) Open the link in a new window
Using this code will help you open a link in a new window to provide a better user experience.
Copy codeThe Code is as follows:
$ (Document). ready (function (){
// Select all anchor tags that have http in the href
// And apply the target = _ blank
$ ("A [href ^ = 'HTTP ']"). attr ('target',' _ blank ');
});
4) change the style list
Use this code to change the style list.
Copy codeThe Code is as follows: $ (document). ready (function (){
$ ("A.css Swap"). click (function (){
// Swap the link rel attribute with the value in the rel
$ ('Link [rel = stylesheet] '). attr ('href', $ (this). attr ('rel '));
});
});
5) return to the top Link
This code is very useful for clicking a single page for a long time. You can click "Back to Top" in an important moment.
Copy codeThe Code is as follows:
$ (Document). ready (function (){
// When the id = "top" link is clicked
$ ('# Top'). click (function (){
// Scoll the page back to the top
$ (Document). scrollTo (0,500 );
}
});
6) obtain the X/y axis of the mouse pointer
Copy codeThe Code is as follows: $ (). mousemove (function (e ){
// Display the x and y axis values inside the P element
('P'hangzhou.html ("X Axis:" + e. pageX + "| Y Axis" + e. pageY );
});
7) detect the current mouse coordinates
With this script, you can get the mouse coordinates in any web browser.
Copy codeThe Code is as follows: $ (document). ready (function (){
$ (). Mousemove (function (e)
{
$ ('# MouseCoordinates 'hangzhou.html ("X Axis Position =" + e. pageX + "and Y Axis Position =" + e. pageY );
});
8) image pre-loading
This Code helps you quickly load images or webpages.
Copy codeThe Code is as follows:
JQuery. preloadImagesInWebPage = function ()
{
For (var ctr = 0; ctr <arguments. length; ctr ++)
{
JQuery (""). attr ("src", arguments [ctr]);
}
}
To use the above method, you can use the following piece of code:
$. PreloadImages ("image1.gif", "image2.gif", "image3.gif ");
To check whether an image has been loaded, you can use the following piece of code:
$ ('# Imageobject'). attr ('src', 'image1.gif'). load (function (){
Alert ('image has been loaded... ');
});