Code sharing of eight ultra-practical jQuery functions _ jquery-js tutorial

This article mainly introduces eight ultra-practical jQuery function code sharing, this article describes how to disable the right-click function, use jQuery to set the text size, open a link in a new window, change the style list, return to the top link, and obtain the XY axis of the mouse pointer, for more information, see this article. We will share eight practical tips for jQuery users. JQuery is one of the best JavaScript libraries. It is mainly used for animation and event processing and supports Ajax and HTML Script clients. In addition, jQuery also has various plug-ins to help developers quickly create websites/WebPages in the shortest time.

I hope you will like these useful codes.

1) disable the right-click Function
If you want to save your website information, you can use this code to disable the right-click function.

The 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 ).

The 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.

The 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.

The 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.

The 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

The 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.

The 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.

The Code is as follows:

JQuery. preloadImagesInWebPage = function ()
{
For (var ctr = 0; 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... ');
});