8 practical jQuery skills

8 practical jQuery skills

This article mainly introduces eight practical jQuery tips, such as disabling right-click, returning to the top, and pre-loading images. For more information, see

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.

 

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 <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... ');

});